:root {
  --learn-navy: #14224F;
  --learn-navy-deep: #0e1836;
  --learn-ivory: #FBF7EC;
  --learn-white: #fff;
  --learn-teal: #0F9D8C;
  --learn-teal-dark: #0B6F62;
  --learn-gold: #D99521;
  --learn-ink: #141413;
  --learn-slate: #5B6473;
  --learn-line: #E7E1D2;
  --learn-danger: #A83A32;
  --learn-success: #087466;
  --learn-radius: 20px;
  --learn-shadow: 0 22px 64px rgba(20, 34, 79, .13);
  --learn-font: "Segoe UI", system-ui, -apple-system, "Aptos", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body.learning-page {
  min-height: 100vh;
  margin: 0;
  color: var(--learn-ink);
  background: var(--learn-ivory);
  font-family: var(--learn-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.learning-page::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(900px 520px at 100% -10%, rgba(15, 157, 140, .13), transparent 68%),
    radial-gradient(700px 440px at -8% 32%, rgba(217, 149, 33, .08), transparent 68%);
  pointer-events: none;
}
body.learning-course-page { background: #F5F2E9; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
a { color: var(--learn-teal-dark); }
[hidden] { display: none !important; }
body:not(.is-authenticated) [data-auth-only] { display: none !important; }
.is-authenticated [data-guest-only] { display: none !important; }
.is-recovery-pending .auth-tabs,
.is-recovery-pending [data-oauth-google],
.is-recovery-pending .auth-note { display: none !important; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--learn-teal);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(15, 157, 140, .18);
}

.learn-wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.learn-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.learn-header {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid rgba(231, 225, 210, .92);
  background: rgba(251, 247, 236, .94);
  backdrop-filter: blur(16px);
}
.learn-header-row {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.learn-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--learn-navy);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -.02em;
}
.learn-brand img { width: 40px; height: 40px; }
.learn-brand-copy { display: grid; line-height: 1.05; }
.learn-brand-copy small {
  margin-top: 4px;
  color: var(--learn-teal-dark);
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.learn-brand-logo { display: grid; gap: 0; justify-items: start; }
.learn-brand-logo .learn-logo { width: 195px; height: auto; max-width: none; flex: none; }
.learn-brand-logo small {
  margin-top: 2px;
  color: var(--learn-teal-dark);
  font-size: .6rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.learn-header-actions { display: flex; align-items: center; gap: 10px; }
.learn-back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--learn-navy);
  font-weight: 700;
  text-decoration: none;
}
.learn-back-link:hover { background: rgba(15, 157, 140, .08); }
.learn-user-menu { display: none; align-items: center; gap: 10px; }
.is-authenticated .learn-user-menu { display: flex; }
.learn-account-trigger {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 5px 8px 5px 5px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--learn-navy);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.learn-account-trigger:hover { border-color: var(--learn-line); background: #fff; box-shadow: 0 8px 22px rgba(20, 34, 79, .08); }
.learn-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--learn-navy), #254079);
  font-weight: 800;
}
.learn-user-copy { display: grid; line-height: 1.15; }
.learn-user-copy small { color: var(--learn-slate); font-size: .74rem; }
.learn-account-chevron { color: var(--learn-teal-dark); font-size: 1.35rem; line-height: 1; }

.learn-btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: .76rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.learn-btn:hover:not(:disabled) { transform: translateY(-1px); }
.learn-btn:disabled { cursor: not-allowed; opacity: .52; }
.learn-btn svg { width: 19px; height: 19px; }
.learn-btn-primary {
  color: #fff;
  background: var(--learn-navy);
  box-shadow: 0 12px 26px rgba(20, 34, 79, .2);
}
.learn-btn-primary:hover:not(:disabled) { background: #1d3168; box-shadow: 0 16px 32px rgba(20, 34, 79, .24); }
.learn-btn-teal {
  color: #052a25;
  background: var(--learn-teal);
  box-shadow: 0 12px 26px rgba(15, 157, 140, .22);
}
.learn-btn-teal:hover:not(:disabled) { color: #fff; background: var(--learn-teal-dark); }
.learn-btn-secondary { color: var(--learn-navy); border-color: var(--learn-line); background: #fff; }
.learn-btn-secondary:hover:not(:disabled) { border-color: var(--learn-teal); background: #F5FCFA; }
.learn-btn-quiet { min-height: 42px; padding: .58rem .8rem; color: var(--learn-navy); background: transparent; }
.learn-btn-quiet:hover:not(:disabled) { background: rgba(15, 157, 140, .08); }
.learn-btn-line { color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; }
.learn-btn-line:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }

.learning-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(58px, 9vw, 108px) 0;
  color: #eaf0fb;
  background: linear-gradient(125deg, #14224F 0%, #123f4f 52%, #0B6F62 100%);
}
.learning-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(115% 100% at 14% 42%, rgba(9, 18, 42, .74) 0%, rgba(9, 18, 42, .34) 44%, rgba(9, 18, 42, 0) 74%);
  pointer-events: none;
}
.learning-hero .const { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.k-pop { position: absolute; z-index: 4; width: 74px; height: 74px; pointer-events: none; transform: translate(-50%, -50%); animation: kpop 1.7s cubic-bezier(.2, 1.4, .4, 1) forwards; filter: drop-shadow(0 0 14px rgba(127, 216, 203, .55)) drop-shadow(0 0 30px rgba(217, 149, 33, .35)); }
.k-pop svg { display: block; width: 100%; height: 100%; }
@keyframes kpop {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-50deg); opacity: 0; }
  32% { transform: translate(-50%, -50%) scale(1.18) rotate(6deg); opacity: 1; }
  46% { transform: translate(-50%, -50%) scale(.98) rotate(0deg); }
  58% { transform: translate(-50%, -50%) scale(1.04); }
  72% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
.learning-hero-inner { position: relative; z-index: 1; }
.learning-hero-grid { position: relative; z-index: 1; display: grid; gap: 50px; align-items: center; }
.learning-hero-copy .learning-kicker { color: #8DE8DA; }
.learning-hero-copy > p { max-width: 58ch; color: #e6ecf9; }
.learning-hero-copy .learn-back-link { color: #fff; }
.learning-hero-copy .learn-back-link:hover { background: rgba(255, 255, 255, .12); }
.learning-hero-badge { width: auto; height: 72px; margin-bottom: 24px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .18)); }
.learning-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--learn-teal-dark);
  /* Le contrat a aboli les capitales et pose le plancher d un libelle de
     structure a 0,8rem. Ce sur-titre a seize points d emission : il portait
     donc le defaut sur tout l espace. */
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 0;
}
.learning-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #8DE8DA;
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: 0;
}
.learning-hero h1 {
  max-width: 17ch;
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(2.3rem, 5.4vw, 3.7rem);
  font-weight: 750;
  line-height: 1.03;
  letter-spacing: -.035em;
  text-shadow: 0 16px 38px rgba(0, 0, 0, .18);
  text-wrap: balance;
}
.learning-hero-sub { max-width: 60ch; margin: 22px 0 0; color: #e6ecf9; font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.learning-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; max-width: 620px; margin-top: 32px; }
.learning-hero-actions .learn-btn { flex: 1 1 220px; }

.learning-catalog { scroll-margin-top: 86px; padding: clamp(64px, 8vw, 104px) 0; background: #fff; }
.learning-catalog-grid { display: grid; gap: 16px; margin-top: 34px; }
.learning-course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.4vw, 34px);
  border: 1px solid rgba(15, 157, 140, .45);
  border-radius: 22px;
  background: linear-gradient(150deg, #FFFFFF, #F4FBF8);
  box-shadow: 0 22px 54px rgba(20, 34, 79, .1);
}
.learning-course-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.learning-course-tags span {
  display: inline-flex;
  align-items: center;
  padding: .34rem .7rem;
  border: 1px solid rgba(20, 34, 79, .16);
  border-radius: 999px;
  color: var(--learn-navy);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: 0;
}
.learning-course-tags .tag-level { border-color: rgba(15, 157, 140, .4); color: var(--learn-teal-dark); background: rgba(15, 157, 140, .08); }
.learning-course-tags .tag-free { border-color: rgba(217, 149, 33, .5); color: #8A5C0D; background: rgba(217, 149, 33, .12); }
.learning-course-card h3 { margin: 16px 0 8px; color: var(--learn-navy); font-size: clamp(1.35rem, 2.6vw, 1.8rem); letter-spacing: -.025em; }
.learning-course-card > p { max-width: 62ch; margin: 0; color: var(--learn-slate); }
.learning-course-meta { display: grid; gap: 8px; margin: 20px 0 26px; padding: 0; list-style: none; }
.learning-course-meta li { display: flex; gap: 9px; color: var(--learn-navy); font-size: .9rem; font-weight: 600; }
.learning-course-meta li::before { color: var(--learn-teal-dark); content: "\2713"; font-weight: 900; }
.learning-course-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: auto; }
.learning-course-actions > span { color: var(--learn-slate); font-size: .8rem; }
.learning-course-card.is-upcoming { border: 1px dashed #CFC8B8; background: var(--learn-ivory); box-shadow: none; }
.learning-course-card.is-upcoming .learning-course-tags span { border-color: rgba(20, 34, 79, .2); color: var(--learn-slate); }
.learning-course-card.is-upcoming h3 { font-size: 1.2rem; }
.learning-course-card.is-upcoming p { font-size: .9rem; }

.learning-access-section { scroll-margin-top: 86px; padding: clamp(64px, 8vw, 104px) 0; }
.learning-access-grid { display: grid; gap: 35px; align-items: center; }
.learning-access-copy h2 { max-width: 16ch; margin: 14px 0; color: var(--learn-navy); font-size: clamp(2rem, 4.2vw, 3.35rem); line-height: 1.05; letter-spacing: -.045em; }
.learning-access-copy > p { max-width: 54ch; color: var(--learn-slate); }
.learning-access-points { display: grid; gap: 10px; max-width: 520px; margin: 26px 0 0; padding: 0; list-style: none; }
.learning-access-points li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 13px 15px; border: 1px solid var(--learn-line); border-radius: 14px; background: #fff; }
.learning-access-points li > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, var(--learn-teal-dark), var(--learn-teal)); font-weight: 900; }
.learning-access-points li div { display: grid; }
.learning-access-points strong { color: var(--learn-navy); font-size: .92rem; }
.learning-access-points small { color: var(--learn-slate); font-size: .78rem; }

.auth-card {
  position: relative;
  isolation: isolate;
  max-width: 500px;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid rgba(231, 225, 210, .94);
  border-radius: 26px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--learn-shadow);
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.auth-card[data-auth-active-view="login"],
.auth-card[data-auth-active-view="signup"] {
  border-color: rgba(15, 157, 140, .74);
  background:
    radial-gradient(circle at 96% 4%, rgba(217, 149, 33, .15), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(240, 251, 248, .98));
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .98),
    0 0 0 6px rgba(15, 157, 140, .16),
    0 22px 58px rgba(11, 111, 98, .18),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}
.auth-card[data-auth-active-view="login"].is-auth-halo-revealed,
.auth-card[data-auth-active-view="signup"].is-auth-halo-revealed {
  animation: learnAuthModeHalo 1.76s cubic-bezier(.22, .7, .2, 1) both;
}
@keyframes learnAuthModeHalo {
  0% {
    transform: translateY(0) scale(.992);
    box-shadow: 0 0 0 0 rgba(15, 157, 140, 0), 0 14px 38px rgba(11, 111, 98, .10);
  }
  24% {
    transform: translateY(-2px) scale(1.008);
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, .98),
      0 0 0 8px rgba(15, 157, 140, .24),
      0 24px 60px rgba(11, 111, 98, .22);
  }
  68% {
    transform: translateY(-1px) scale(1.003);
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, .98),
      0 0 0 7px rgba(15, 157, 140, .19),
      0 22px 58px rgba(11, 111, 98, .19);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, .98),
      0 0 0 6px rgba(15, 157, 140, .16),
      0 22px 58px rgba(11, 111, 98, .18),
      inset 0 1px 0 rgba(255, 255, 255, .98);
  }
}
.auth-card-head span { color: var(--learn-teal-dark); font-size: .82rem; font-weight: 800; letter-spacing: 0; }
.auth-card-head h2 { margin: 5px 0 6px; color: var(--learn-navy); font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.025em; }
.auth-card-head p { margin: 0; color: var(--learn-slate); }
.auth-tabs {
  display: flex;
  gap: 8px;
  margin: 24px 0 20px;
  padding: 8px;
  border: 1px solid rgba(15, 157, 140, .28);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(191, 233, 224, .72), rgba(15, 157, 140, .14)), #f6fcfa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 14px 36px rgba(15, 157, 140, .10);
}
.auth-tabs button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: 15px;
  color: var(--learn-teal-dark);
  background: rgba(255, 255, 255, .58);
  cursor: pointer;
  font-size: .94rem;
  font-weight: 850;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.auth-tabs button:hover { color: var(--learn-navy); background: #fff; box-shadow: 0 8px 20px rgba(15, 157, 140, .10); }
.auth-tabs button.is-active { color: #fff; background: linear-gradient(135deg, var(--learn-teal-dark), var(--learn-teal)); box-shadow: 0 12px 26px rgba(15, 157, 140, .24); }
.auth-tabs button.is-active::after { display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--learn-gold); box-shadow: 0 0 0 3px rgba(217, 149, 33, .18); content: ""; vertical-align: middle; }
.auth-form { display: grid; gap: 15px; }
.auth-form > p { margin: 0; color: var(--learn-slate); }
.auth-field { display: grid; gap: 6px; }
.auth-field label { color: var(--learn-navy); font-size: .86rem; font-weight: 800; }
.auth-field input {
  width: 100%;
  min-height: 50px;
  padding: .72rem .86rem;
  border: 1px solid #CFC8B8;
  border-radius: 11px;
  color: var(--learn-ink);
  background: #fff;
}
.auth-field input::placeholder { color: #838A97; }
.auth-field input:focus { border-color: var(--learn-teal-dark); outline: 0; box-shadow: 0 0 0 4px rgba(15, 157, 140, .13); }
.auth-field select {
  width: 100%;
  min-height: 48px;
  padding: .62rem .7rem;
  border: 1px solid #CFC8B8;
  border-radius: 11px;
  color: var(--learn-navy);
  background: #fff;
}
.auth-field select:focus { border-color: var(--learn-teal-dark); outline: 0; box-shadow: 0 0 0 4px rgba(15, 157, 140, .13); }
.auth-field > small { color: var(--learn-slate); font-size: .74rem; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-link {
  min-height: 44px;
  padding: .35rem .2rem;
  border: 0;
  color: var(--learn-teal-dark);
  background: transparent;
  cursor: pointer;
  font-weight: 750;
}
.auth-status { margin: 15px 0 0; padding: 11px 13px; border-radius: 10px; color: var(--learn-navy); background: #EEF5F3; font-size: .9rem; }
.auth-status[data-kind="error"] { color: #70251F; background: #FFF0ED; }
.auth-status[data-kind="success"] { color: #075E52; background: #E8F7F4; }
.auth-oauth {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  border: 1px solid var(--learn-line);
  border-radius: 11px;
  color: var(--learn-navy);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
}
.auth-note { margin: 16px 0 0; color: var(--learn-slate); font-size: .78rem; text-align: center; }

.learning-section-head { max-width: 720px; }
.learning-section-head h2 { margin: 12px 0; color: var(--learn-navy); font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.04em; }
.learning-section-head p { margin: 0; color: var(--learn-slate); font-size: 1.04rem; }

.learning-dashboard { padding: clamp(28px, 4vw, 48px) 0 76px; }
.dashboard-welcome { margin-bottom: 20px; }
.dashboard-welcome h1 { margin: 4px 0 0; color: var(--learn-navy); font-size: clamp(1.85rem, 3.2vw, 2.75rem); letter-spacing: -.045em; }
.dashboard-availability,
.dashboard-sync { display: grid; justify-items: end; gap: 2px; color: var(--learn-slate); font-size: .76rem; text-align: right; }
.dashboard-availability strong,
.dashboard-sync strong { color: var(--learn-navy); font-size: .82rem; }
.dashboard-sync [data-stale="true"] { color: #6D4A08; font-weight: 750; }
.dashboard-shell { display: grid; gap: 22px; }
/* ==========================================================================
   Onglets de « Mes cours » · role="tablist"
   --------------------------------------------------------------------------
   SOURCE UNIQUE. Contrat : docs/DESIGN-FORMATIONS.md, section 15.

   Un segmente horizontal, pose AU-DESSUS des panneaux, a toutes les largeurs.
   Il vivait dans le tiroir de navigation, donc hors champ sous 900 px : au
   repos, aucun onglet n etait atteignable.

   Deux choses ont disparu avec l ancienne version :
   - le curseur ::before, dimensionne en dur pour TROIS onglets alors qu il n en
     reste que deux depuis que « Parametres » a sa propre vue. La selection est
     desormais portee par le bouton lui-meme, donc le composant ne depend plus
     du nombre d onglets ;
   - la pastille doree de l onglet actif. L or n appartient qu au « a retenir ».

   Un onglet est un CONTROLE : l aplat teal fonce lui est permis, et le blanc
   dessus donne 6,1 contre 1.
   ========================================================================== */
.dashboard-tabs {
  display: grid;
  width: min(100%, 520px);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  margin-bottom: 18px;
  padding: 6px;
  border: 1px solid rgba(15, 157, 140, .28);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(20, 34, 79, .05);
}
.dashboard-tabs button {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: .65rem .8rem;
  border: 0;
  border-radius: 13px;
  color: var(--learn-teal-dark);
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
  transition: color .18s ease, background .18s ease;
}
.dashboard-tabs button:hover { color: var(--learn-navy); background: rgba(15, 157, 140, .08); }
.dashboard-tabs button[aria-selected="true"],
.dashboard-tabs button[aria-selected="true"]:hover { color: #fff; background: var(--learn-teal-dark); }
.dashboard-tabs button:focus-visible { outline: 2px solid var(--learn-teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dashboard-tabs button { transition: none; } }
.dashboard-panel { min-width: 0; scroll-margin-top: 100px; }
.dashboard-panel:focus { outline: 0; }
.dashboard-panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 22px; }
.dashboard-panel-heading > div { min-width: 0; }
.dashboard-panel-heading h2 { margin: 7px 0 0; color: var(--learn-navy); font-size: clamp(1.55rem, 3.2vw, 2.45rem); line-height: 1.08; letter-spacing: -.035em; }
/* Chapo d une vue : c est du corps, donc plancher a 1rem comme partout. */
.dashboard-panel-heading > p { max-width: 62ch; margin: 0; color: var(--learn-slate); font-size: 1rem; line-height: 1.55; }
.dashboard-choice-heading { max-width: 680px; margin: 8px auto 24px; text-align: center; }
.dashboard-choice-heading h2 { margin: 8px 0 0; color: var(--learn-navy); font-size: clamp(1.85rem, 3.6vw, 2.75rem); line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; }
.dashboard-choice-heading p { margin: 8px 0 0; color: var(--learn-slate); font-size: .93rem; }
.dashboard-choice-gateway { display: grid; max-width: 930px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-inline: auto; }
.dashboard-choice-option {
  display: grid;
  min-width: 0;
  min-height: 148px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 17px;
  align-items: center;
  padding: 24px;
  border: 1px solid var(--learn-line);
  border-radius: 20px;
  color: var(--learn-navy);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 16px 38px rgba(20, 34, 79, .065);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dashboard-choice-option.is-guided { border-color: rgba(15, 157, 140, .32); background: linear-gradient(145deg, #fff, #EDF9F6); }
.dashboard-choice-option:hover { border-color: rgba(15, 157, 140, .48); box-shadow: 0 20px 44px rgba(20, 34, 79, .1); transform: translateY(-2px); }
.dashboard-choice-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 16px; color: var(--learn-teal-dark); background: #E7F6F2; font-size: .82rem; font-weight: 900; letter-spacing: .08em; }
.dashboard-choice-option.is-guided .dashboard-choice-icon { color: #fff; background: linear-gradient(145deg, var(--learn-teal-dark), var(--learn-teal)); font-size: 1.25rem; box-shadow: 0 12px 26px rgba(15, 157, 140, .22); }
.dashboard-choice-copy { min-width: 0; }
.dashboard-choice-copy > small,
.dashboard-choice-copy > strong,
.dashboard-choice-copy > span { display: block; }
.dashboard-choice-copy > small { color: var(--learn-teal-dark); font-size: .82rem; font-weight: 900; letter-spacing: 0; }
.dashboard-choice-copy > strong { margin-top: 4px; color: var(--learn-navy); font-size: clamp(1.15rem, 2vw, 1.42rem); line-height: 1.15; }
.dashboard-choice-copy > span { margin-top: 6px; color: var(--learn-slate); font-size: .82rem; }
.dashboard-choice-arrow { color: var(--learn-teal-dark); font-size: 1.4rem; transition: transform .18s ease; }
.dashboard-choice-option:hover .dashboard-choice-arrow { transform: translateX(3px); }
.dashboard-choice-note { margin: 15px 0 0; color: var(--learn-slate); font-size: .76rem; text-align: center; }
/* La table des parcours n'est plus un ecran : elle reste rendue et masquee,
   comme source unique de l'accueil et d'Explorer. Le chassis de l'ancien ecran
   (en-tete, bouton retour, placeholder, grille de comparaison) est retire avec
   lui, plutot que laisse en code mort. */
.dashboard-catalog-source { display: none; }
.dashboard-catalog-grid { display: grid; gap: 20px; }
.dashboard-positioning-card {
  position: relative;
  max-width: 980px;
  overflow: hidden;
  margin-inline: auto;
  padding: clamp(24px, 3.5vw, 34px);
  border-color: rgba(15, 157, 140, .28);
  background: linear-gradient(145deg, #fff 0%, #F3FBF9 64%, #F8F2E4 135%);
}
.dashboard-positioning-card::after {
  position: absolute;
  top: -135px;
  right: -125px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(15, 157, 140, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 36px rgba(15, 157, 140, .035), 0 0 0 72px rgba(246, 194, 92, .035);
  content: "";
  pointer-events: none;
}
.dashboard-positioning-card > * { position: relative; z-index: 1; }
.dashboard-positioning-stage { margin: 0; }
.dashboard-positioning-form { display: grid; gap: 20px; }
.dashboard-choice-stage-head { display: grid; gap: 18px; }
.dashboard-choice-stage-head > div { max-width: 680px; }
.dashboard-choice-stage-head h2 { margin: 7px 0 0; color: var(--learn-navy); font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.08; letter-spacing: -.04em; }
.dashboard-choice-stage-head p { margin: 7px 0 0; color: var(--learn-slate); font-size: .84rem; }
.dashboard-positioning-progress { display: grid; grid-template-columns: auto minmax(160px, 1fr); gap: 16px; align-items: center; color: var(--learn-navy); font-size: .76rem; font-weight: 850; }
.dashboard-positioning-progress .learn-progress { height: 8px; }
.dashboard-positioning-questions fieldset { margin: 0; padding: 0; border: 0; }
.dashboard-positioning-questions legend { max-width: 32ch; color: var(--learn-navy); font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 850; line-height: 1.18; letter-spacing: -.025em; }
.dashboard-positioning-questions legend:focus-visible { outline: 3px solid rgba(15, 157, 140, .35); outline-offset: 5px; border-radius: 4px; }
.dashboard-positioning-questions fieldset > p { margin: 8px 0 17px; color: var(--learn-slate); font-size: .82rem; }
.dashboard-positioning-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dashboard-positioning-options label { position: relative; min-width: 0; cursor: pointer; }
.dashboard-positioning-options input { position: absolute; width: 1px; height: 1px; opacity: .01; }
.dashboard-positioning-options span { display: flex; min-height: 76px; align-items: center; padding: 14px 15px; border: 1px solid var(--learn-line); border-radius: 13px; color: var(--learn-navy); background: rgba(255, 255, 255, .82); font-size: .8rem; font-weight: 750; line-height: 1.35; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.dashboard-positioning-options label:hover span { border-color: rgba(15, 157, 140, .45); transform: translateY(-1px); }
.dashboard-positioning-options input:focus-visible + span { outline: 3px solid rgba(15, 157, 140, .35); outline-offset: 2px; }
.dashboard-positioning-options input:checked + span { border-color: var(--learn-teal-dark); background: #EAF8F5; box-shadow: inset 4px 0 0 var(--learn-teal-dark), 0 8px 20px rgba(15, 157, 140, .1); }
.dashboard-positioning-error { margin: -6px 0 0; color: #8A2E27; font-size: .78rem; font-weight: 800; }
.dashboard-positioning-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dashboard-positioning-actions .learn-btn { min-width: 170px; }
.dashboard-positioning-status { min-height: 1.3em; margin: -10px 0 0; color: var(--learn-slate); font-size: .78rem; }
.dashboard-choice-result { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto); gap: 22px; align-items: center; }
.dashboard-choice-result-mark { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: #fff; background: var(--learn-teal-dark); font-size: 1.35rem; font-weight: 900; box-shadow: 0 12px 28px rgba(15, 157, 140, .22); }
.dashboard-choice-result.is-recommendation .dashboard-choice-result-mark { color: var(--learn-navy); background: linear-gradient(145deg, #F9D991, var(--learn-gold)); }
.dashboard-choice-result-copy h2,
.dashboard-choice-unavailable h2 { margin: 5px 0 6px; color: var(--learn-navy); font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.05; letter-spacing: -.04em; }
.dashboard-choice-result-copy p,
.dashboard-choice-unavailable p { max-width: 52ch; margin: 0; color: var(--learn-slate); font-size: .86rem; }
.dashboard-choice-result-actions { display: grid; min-width: min(250px, 100%); gap: 8px; }
.dashboard-choice-result-actions .learn-btn { width: 100%; }
.dashboard-quiet-action,
.dashboard-back-action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: .45rem .5rem; border: 0; color: var(--learn-teal-dark); background: transparent; cursor: pointer; font-weight: 800; }
.dashboard-quiet-action { font-size: .74rem; }
.dashboard-back-action { width: max-content; margin: -6px 0 8px; font-size: .8rem; }
.dashboard-quiet-action:hover,
.dashboard-back-action:hover { color: var(--learn-navy); text-decoration: underline; text-underline-offset: 4px; }
.dashboard-choice-unavailable { grid-template-columns: minmax(0, 1fr) auto; }
.dashboard-choice-unavailable > .dashboard-back-action { grid-column: 1 / -1; }
.dashboard-choice-status { min-height: 1.3em; margin: 12px 0 0; color: var(--learn-danger); font-size: .78rem; text-align: center; }
.dashboard-grid { display: grid; gap: 20px; }
.dashboard-card { border: 1px solid var(--learn-line); border-radius: var(--learn-radius); background: #fff; box-shadow: 0 16px 40px rgba(20, 34, 79, .075); }
.dashboard-intelligence-grid { grid-template-columns: minmax(0, 1fr); }
.dashboard-notice { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 15px; border: 1px solid #D6C58A; border-radius: 13px; color: #5F430A; background: #FFF7DD; font-size: .82rem; }
.dashboard-notice strong { color: var(--learn-navy); }
.dashboard-offline-notice { border-color: #D9AAA6; color: #70251F; background: #FFF0ED; }
.dashboard-next-card { position: relative; overflow: hidden; min-width: 0; padding: clamp(25px, 4vw, 40px); border-color: rgba(15, 157, 140, .42); color: var(--learn-navy); background: linear-gradient(150deg, #FFFFFF, #F4FBF8); box-shadow: 0 22px 54px rgba(20, 34, 79, .1); }
.dashboard-next-card::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg, var(--learn-teal), var(--learn-gold)); content: ""; }
.dashboard-next-card::after { position: absolute; right: -88px; bottom: -140px; width: 340px; height: 340px; border: 1px solid rgba(15, 157, 140, .15); border-radius: 50%; box-shadow: 0 0 0 42px rgba(15, 157, 140, .035), 0 0 0 84px rgba(15, 157, 140, .02); content: ""; }
.dashboard-next-card > * { position: relative; z-index: 1; }
.dashboard-next-card .learning-kicker { color: var(--learn-teal-dark); }
.dashboard-course-name { display: block; margin-top: 13px; color: var(--learn-teal-dark); font-size: 1rem; font-weight: 800; }
.dashboard-next-card h2 { max-width: 22ch; margin: 13px 0 10px; color: var(--learn-navy); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.dashboard-next-card > p { max-width: 60ch; margin: 0; color: var(--learn-slate); }
.dashboard-next-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; }
.dashboard-next-footer .dashboard-course-meta { margin: 0; color: var(--learn-teal-dark); }
.dashboard-next-footer .learn-btn { min-width: min(220px, 100%); }
.dashboard-course-card { position: relative; overflow: hidden; min-height: 380px; padding: 22px; border-color: rgba(15, 157, 140, .4); color: var(--learn-navy); background: linear-gradient(150deg, #FFFFFF, #F4FBF8); box-shadow: 0 22px 54px rgba(20, 34, 79, .1); }
.dashboard-catalog-course { display: flex; min-width: 0; flex-direction: column; }
.dashboard-course-card::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg, var(--learn-teal), rgba(15, 157, 140, .28)); content: ""; }
.dashboard-course-card::after {
  position: absolute;
  right: -115px;
  bottom: -170px;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(15, 157, 140, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(15, 157, 140, .03), 0 0 0 84px rgba(15, 157, 140, .018);
  content: "";
}
.dashboard-course-card > * { position: relative; z-index: 1; }
.dashboard-course-card .learning-kicker { color: var(--learn-teal-dark); }
.dashboard-course-card .learning-course-tags { margin-top: 16px; }
.dashboard-course-card h3 { max-width: 19ch; margin: 13px 0 9px; color: var(--learn-navy); font-size: clamp(1.35rem, 2.1vw, 1.78rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.dashboard-course-card > p { display: -webkit-box; max-width: 48ch; min-height: 3.9em; margin: 0; overflow: hidden; color: var(--learn-slate); font-size: .79rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.dashboard-course-meta { display: inline-block; margin-top: 15px; color: var(--learn-teal-dark); font-size: 1rem; font-weight: 750; }
.dashboard-course-actions { display: grid; gap: 6px; margin-top: auto; padding-top: 20px; }
.dashboard-course-actions .learn-btn { width: 100%; min-width: 0; }
.dashboard-course-actions small { max-width: 42ch; color: var(--learn-slate); }
.dashboard-catalog-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dashboard-course-index { color: var(--learn-teal-dark); font-size: .68rem; font-weight: 900; letter-spacing: .16em; }
.dashboard-course-card .learning-course-tags .tag-level { border-color: rgba(15, 157, 140, .4); color: var(--learn-teal-dark); background: rgba(15, 157, 140, .08); }
.dashboard-course-card .learning-course-tags .tag-free { border-color: rgba(217, 149, 33, .5); color: #8A5C0D; background: rgba(217, 149, 33, .12); }
.dashboard-course-card .tag-recommended { border: 1px solid rgba(217, 149, 33, .5); color: #8A5C0D; background: rgba(217, 149, 33, .12); }
.dashboard-course-card .tag-selected { border: 1px solid rgba(15, 157, 140, .4); color: var(--learn-teal-dark); background: rgba(15, 157, 140, .1); }
.dashboard-catalog-course.is-recommended { box-shadow: 0 0 0 3px rgba(246, 194, 92, .5), 0 18px 42px rgba(20, 34, 79, .14); }
.dashboard-catalog-course.is-selected { box-shadow: 0 0 0 3px rgba(141, 232, 218, .58), 0 18px 42px rgba(20, 34, 79, .14); }
.dashboard-catalog-course.is-recommended.is-selected { box-shadow: 0 0 0 3px rgba(141, 232, 218, .7), 0 0 0 7px rgba(246, 194, 92, .34), 0 18px 42px rgba(20, 34, 79, .15); }
.dashboard-catalog-course.is-recommended::before { background: linear-gradient(90deg, var(--learn-teal) 0 62%, var(--learn-gold)); }
.dashboard-course-status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: .34rem .66rem; border: 1px solid rgba(15, 157, 140, .2); border-radius: 999px; color: var(--learn-navy); background: #F8F5ED; font-size: .7rem; font-weight: 850; }
.dashboard-course-status::before { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--learn-teal); content: ""; }
.dashboard-catalog-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.dashboard-catalog-facts span { padding: .42rem .65rem; border: 1px solid rgba(15, 157, 140, .16); border-radius: 999px; color: var(--learn-navy); background: #EDF8F5; font-size: .68rem; font-weight: 800; }
.dashboard-catalog-progress { display: grid; gap: 7px; margin-top: 16px; }
.dashboard-catalog-progress > div:first-child { display: flex; justify-content: space-between; gap: 16px; color: var(--learn-slate); font-size: .76rem; }
.dashboard-catalog-progress > div:first-child strong { color: var(--learn-teal-dark); }
.dashboard-catalog-progress .learn-progress { background: #E9E6DD; }
.dashboard-text-action { min-height: 44px; padding: .4rem .1rem; border: 0; color: var(--learn-teal-dark); background: transparent; cursor: pointer; font-size: .82rem; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(15, 157, 140, .35); text-underline-offset: 4px; }
.dashboard-text-action:hover { color: var(--learn-navy); }
.dashboard-upcoming-card { position: relative; overflow: hidden; min-height: 100%; padding: clamp(24px, 3.4vw, 34px); border-style: dashed; background: linear-gradient(155deg, #FFFEFA, #F5F0E3); box-shadow: none; }
.dashboard-upcoming-mark { position: absolute; top: 20px; right: 22px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #D4CCB8; border-radius: 14px; color: var(--learn-gold); background: #fff; font-size: 1.45rem; font-weight: 500; }
.dashboard-upcoming-card h2 { max-width: 13ch; margin: 28px 0 12px; color: var(--learn-navy); font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.08; letter-spacing: -.035em; }
.dashboard-upcoming-card p { margin: 0; color: var(--learn-slate); }
.dashboard-upcoming-note { display: inline-flex; margin-top: 28px; color: var(--learn-teal-dark); font-size: .76rem; font-weight: 850; }
.dashboard-side { display: grid; gap: 20px; }
/* Les cartes gardent leur remplissage. Ma suppression des regles mortes avait
   coupe le bloc de declarations de cette regle, fusionnant les selecteurs de
   cartes avec ceux du titre : les cartes heritaient alors d un display:flex en
   rangee et debordaient de 285 px a 320 px. */
.dashboard-progress-card, .dashboard-chapters-card, .dashboard-evidence-card,
.dashboard-preferences-card { min-width: 0; padding: clamp(20px, 3vw, 26px); }
/* L etiquette de droite est passee de « 31 % » a « 15 lecons vues sur 32 · 47 % » :
   sans wrap ni min-width, elle ecrasait le titre, qui se lisait « Votre » au lieu
   de « Votre avancement ».
   Deux marqueurs de conflit non resolus vivaient ICI. Le parseur CSS les traite
   comme des selecteurs invalides et avale le bloc de declarations qui suit :
   .dashboard-card-title et .dashboard-card-title h2 etaient donc du code mort,
   et chaque titre de carte se rendait au 24 px par defaut du navigateur, en
   encre, a egalite avec le titre de la vue. Mesure, pas relecture. */
.dashboard-card-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 17px; }
.dashboard-card-title h2 { min-width: 0; flex: 1 1 auto; }
.dashboard-card-title strong { flex: 0 1 auto; min-width: 0; }
.dashboard-card-title h2 { margin: 0; color: var(--learn-navy); font-size: 1.12rem; }
.dashboard-card-title strong { color: var(--learn-teal-dark); font-size: .9rem; }
.dashboard-card-title > span { color: var(--learn-slate); font-size: .7rem; font-weight: 750; }
.learn-progress {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 11px;
  border-radius: 999px;
  background: #E9E6DD;
}
.learn-progress::before {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--learn-teal), #54C8B8);
  content: "";
  transition: width .5s cubic-bezier(.16, 1, .3, 1);
}
.dashboard-progress-detail { margin: 11px 0 0; color: var(--learn-ink); font-size: 1rem; line-height: 1.55; }
.dashboard-outcomes, .dashboard-consolidation, .dashboard-recommendations { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.dashboard-outcome { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--learn-line); border-radius: 12px; background: #FCFAF5; }
.dashboard-outcome div { min-width: 0; }
.dashboard-outcome strong, .dashboard-outcome small { display: block; }
.dashboard-outcome strong { color: var(--learn-navy); font-size: .84rem; line-height: 1.3; }
.dashboard-outcome small { margin-top: 4px; color: var(--learn-slate); font-size: .7rem; }
.dashboard-outcome > span { max-width: 18ch; padding: .3rem .55rem; border: 1px solid currentColor; border-radius: 999px; color: var(--learn-teal-dark); font-size: .68rem; font-weight: 850; text-align: center; }
.dashboard-outcome[data-outcome-state="building"] > span,
.dashboard-outcome[data-outcome-state="to_consolidate"] > span { color: #6D4A08; }
.dashboard-outcome[data-outcome-state="anchored"] > span { color: #075E52; }
.dashboard-control-note { margin: 13px 0 0; color: var(--learn-slate); font-size: .72rem; }
/* Les trois consentements, la carte de compte, le niveau, le son et la gestion
   des profils vivent maintenant dans la section « Vue Parametres », plus bas
   dans cette feuille. Elles etaient reparties sur quatre endroits de trois
   feuilles : c est ce morcellement qui laissait passer un corps a 11,2 px. */
.dashboard-evidence-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dashboard-evidence-list li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.dashboard-evidence-list li > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #fff; background: var(--learn-teal-dark); font-size: .72rem; font-weight: 900; }
.dashboard-evidence-list strong, .dashboard-evidence-list small { display: block; }
.dashboard-evidence-list strong { color: var(--learn-navy); font-size: .86rem; }
.dashboard-evidence-list small { margin-top: 2px; color: var(--learn-slate); font-size: .73rem; line-height: 1.35; }
.learn-chapter-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.learn-chapter-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 11px; border-radius: 13px; background: #FCFAF5; }
.learn-chapter-row.is-complete { background: #ECF8F5; }
.learn-chapter-number { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, var(--learn-teal-dark), var(--learn-teal)); font-size: .82rem; font-weight: 850; }
.learn-chapter-row.is-complete .learn-chapter-number { background: var(--learn-teal-dark); }
.learn-chapter-copy { min-width: 0; }
.learn-chapter-copy strong, .learn-chapter-copy small { display: block; }
.learn-chapter-copy strong { color: var(--learn-navy); }
.learn-chapter-copy small { overflow: hidden; margin-top: 2px; color: var(--learn-slate); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.learn-chapter-score { color: var(--learn-teal-dark); font-size: .8rem; font-weight: 850; }

.learn-state { display: grid; min-height: 340px; place-items: center; padding: 40px 20px; text-align: center; }
.learn-state-card { max-width: 500px; padding: 28px; border: 1px solid var(--learn-line); border-radius: 20px; background: #fff; box-shadow: var(--learn-shadow); }
.learn-state-card h2 { margin: 0 0 8px; color: var(--learn-navy); }
.learn-state-card p { margin: 0 0 18px; color: var(--learn-slate); }
.learn-loader { display: grid; width: 56px; height: 56px; place-items: center; margin: 0 auto 18px; border: 2px solid rgba(15, 157, 140, .2); border-top-color: var(--learn-teal); border-radius: 50%; animation: learn-spin .8s linear infinite; }
@keyframes learn-spin { to { transform: rotate(360deg); } }

/* Course player */
.course-topbar { position: sticky; top: 72px; z-index: 60; border-bottom: 1px solid var(--learn-line); background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); }
.course-topbar-row { display: grid; grid-template-columns: auto 1fr auto auto; min-height: 58px; align-items: center; gap: 12px; }
.course-menu-button, .course-icon-button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--learn-line);
  border-radius: 11px;
  color: var(--learn-navy);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
}
.course-menu-button svg, .course-icon-button svg { width: 20px; height: 20px; }
.course-menu-button { display: none; }
.course-overall { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.course-overall .learn-progress { grid-column: 1 / -1; height: 7px; }
.course-overall > span { color: var(--learn-slate); font-size: .76rem; }
.course-overall > strong { color: var(--learn-navy); font-size: .76rem; }
.course-progress-meta { display: grid; min-width: 150px; justify-items: end; line-height: 1.25; text-align: right; }
.course-progress-meta strong { color: var(--learn-teal-dark); font-size: .78rem; }
.course-progress-meta span { color: var(--learn-slate); font-size: .66rem; }
.course-progress-meta span[data-kind="saving"] { color: #6D4A08; }
.course-progress-meta span[data-kind="error"] { max-width: 22ch; color: var(--learn-danger); }
.course-progress-meta span[data-kind="saved"]::before { margin-right: 4px; color: var(--learn-success); content: "✓"; font-weight: 900; }

.course-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: calc(100vh - 130px); }
.course-sidebar {
  position: sticky;
  top: 130px;
  align-self: start;
  height: calc(100vh - 130px);
  overflow-y: auto;
  padding: 26px 20px 32px max(20px, calc((100vw - 1440px) / 2));
  border-right: 1px solid var(--learn-line);
  background: #fff;
}
.course-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 8px 18px; }
.course-sidebar-head strong { color: var(--learn-navy); font-size: .82rem; letter-spacing: 0; }
.course-sidebar-close { display: none; }
.course-nav { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.course-nav button {
  display: grid;
  width: 100%;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  padding: 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--learn-navy);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.course-nav button:hover { background: #F8F5EE; }
.course-nav button.is-active { border-color: rgba(15, 157, 140, .22); background: #ECF8F5; }
.course-nav-number { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--learn-teal-dark); background: #E7F6F2; font-weight: 850; }
.course-nav button.is-active .course-nav-number { color: #fff; background: var(--learn-teal-dark); }
.course-nav button.is-complete .course-nav-number::after { content: "✓"; }
.course-nav button.is-complete .course-nav-number { font-size: 0; }
.course-nav button.is-complete .course-nav-number::after { font-size: .9rem; }
.course-nav button strong, .course-nav button small { display: block; }
.course-nav button strong { line-height: 1.2; }
.course-nav button small { margin-top: 4px; color: var(--learn-slate); font-size: .72rem; }

.course-main { min-width: 0; padding: clamp(18px, 3vw, 38px); }
.course-stage-wrap { width: min(100%, 1050px); margin: 0 auto; }
.course-stage {
  position: relative;
  overflow: auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 520px;
  border: 1px solid rgba(20, 34, 79, .1);
  border-radius: 24px;
  background: var(--learn-ivory);
  box-shadow: 0 24px 72px rgba(20, 34, 79, .14);
}
[data-course-shell][data-course-view="introduction"] .course-layout { grid-template-columns: 1fr; }
[data-course-shell][data-course-view="introduction"] .course-sidebar,
[data-course-shell][data-course-view="introduction"] .course-menu-button,
[data-course-shell][data-course-view="introduction"] .course-navigation { display: none; }
[data-course-shell][data-course-view="introduction"] .course-main { padding-block: clamp(20px, 3vw, 38px); }
[data-course-shell][data-course-view="introduction"] .course-stage-wrap { width: min(100%, 1160px); }
[data-course-shell][data-course-view="introduction"] .course-stage { min-height: 0; aspect-ratio: auto; overflow: visible; background: #fff; }
.course-introduction {
  min-height: 520px;
  padding: clamp(26px, 4vw, 52px);
  background:
    radial-gradient(650px 360px at 100% 0%, rgba(15, 157, 140, .12), transparent 68%),
    linear-gradient(155deg, #FFFFFF 0%, #FFFEFA 62%, #F7FCFA 100%);
}
.course-introduction-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: clamp(26px, 4vw, 54px); align-items: center; }
.course-introduction-copy h1 { max-width: 17ch; margin: 12px 0 12px; color: var(--learn-navy); font-size: clamp(2rem, 4vw, 3.65rem); line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
.course-introduction-copy [data-stage-heading]:focus-visible,
.completion-card [data-completion-title]:focus-visible { outline: 0 !important; box-shadow: none !important; }
.course-introduction-subtitle { max-width: 58ch; margin: 0; color: var(--learn-navy); font-size: clamp(1rem, 1.45vw, 1.18rem); font-weight: 760; line-height: 1.45; }
.course-introduction-description { max-width: 65ch; margin: 10px 0 0; color: var(--learn-slate); font-size: .9rem; line-height: 1.58; }
.course-introduction-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.course-introduction-facts span { padding: .55rem .75rem; border: 1px solid rgba(15, 157, 140, .18); border-radius: 99px; color: var(--learn-slate); background: rgba(239, 250, 247, .82); font-size: .76rem; }
.course-introduction-facts strong { color: var(--learn-teal-dark); font-size: .88rem; }
.course-introduction-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.course-introduction-objectives { padding: clamp(22px, 3vw, 30px); border: 1px solid rgba(15, 157, 140, .22); border-radius: 20px; background: rgba(255, 255, 255, .9); box-shadow: 0 18px 48px rgba(20, 34, 79, .08); }
.course-introduction-label { color: var(--learn-teal-dark); font-size: .82rem; font-weight: 900; letter-spacing: 0; }
.course-introduction-objectives h2, .course-introduction-plan h2 { margin: 6px 0 14px; color: var(--learn-navy); font-size: clamp(1.1rem, 1.8vw, 1.45rem); letter-spacing: -.025em; }
.course-introduction-objectives ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.course-introduction-objectives li { position: relative; padding-left: 26px; color: var(--learn-slate); font-size: .8rem; line-height: 1.45; }
.course-introduction-objectives li::before { position: absolute; top: .08rem; left: 0; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: #fff; background: var(--learn-teal-dark); content: "✓"; font-size: .62rem; font-weight: 900; }
.course-introduction-plan { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr); gap: 24px; align-items: center; margin-top: clamp(28px, 4vw, 44px); padding-top: 24px; border-top: 1px solid var(--learn-line); }
.course-introduction-plan h2 { margin-bottom: 0; }
.course-introduction-plan ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.course-introduction-plan li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; min-height: 50px; padding: 8px; border-radius: 12px; background: var(--learn-ivory); }
.course-introduction-plan li span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #fff; background: var(--learn-teal-dark); font-size: .72rem; font-weight: 900; }
.course-introduction-plan li strong { color: var(--learn-navy); font-size: .74rem; line-height: 1.25; }
.course-introduction-note { display: flex; gap: 8px; align-items: flex-start; margin: 20px 0 0; color: var(--learn-slate); font-size: .72rem; line-height: 1.45; }
.course-introduction-note span { display: grid; flex: 0 0 auto; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: #fff; background: var(--learn-teal-dark); font-size: .62rem; font-weight: 900; }
.course-slide, .course-quiz { min-height: 100%; padding: clamp(28px, 4.2vw, 58px); }
.course-slide {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(500px 300px at 100% 0%, rgba(15, 157, 140, .09), transparent 65%),
    linear-gradient(155deg, #fff 0%, #FFFDF8 60%, #FBF7EC 100%);
  animation: course-enter .38s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes course-enter { from { opacity: 0; transform: translateY(10px); } }
.course-slide-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.course-slide-head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.course-mission-label { padding: .18rem .5rem; border-radius: 99px; color: var(--learn-slate); background: #F0EDE5; font-size: .65rem; font-weight: 750; }
.course-visual { margin: 1.15rem 0 1.35rem; overflow: hidden; border: 1px solid rgba(9, 57, 68, .11); border-radius: 1.15rem; background: #E8F0ED; box-shadow: 0 18px 45px rgba(8, 42, 49, .09); }
.course-visual img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.course-visual[data-visual-position="compact"] { max-width: 44rem; margin-inline: auto; }
.course-visual figcaption { padding: .7rem 1rem .8rem; color: var(--learn-slate); font-size: .78rem; line-height: 1.45; }
.course-slide-count { color: var(--learn-slate); font-size: .74rem; font-weight: 850; }
.course-slide h1 {
  max-width: 19ch;
  margin: 15px 0 9px;
  color: var(--learn-navy);
  font-size: clamp(1.75rem, 3.2vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.course-slide [data-stage-heading]:focus-visible,
.course-quiz [data-stage-heading]:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}
.course-lead { max-width: 75ch; margin: 0; color: var(--learn-slate); font-size: clamp(.96rem, 1.35vw, 1.08rem); }
.course-slide-content { display: grid; flex: 1; align-content: center; margin: 23px 0; }
.course-slide-content.has-activity { align-content: start; gap: 22px; }
.course-recall { max-width: 680px; margin: 0 auto; text-align: center; }
.course-recall h3 { margin: 0 auto 18px; color: var(--learn-navy); font-size: clamp(1.2rem, 2.2vw, 1.8rem); }
.course-recall-answer { margin-top: 18px; padding: 18px; border: 1px solid rgba(15, 157, 140, .3); border-radius: 15px; background: #ECF8F5; text-align: left; }
.course-recall-answer p { margin: 5px 0 0; color: var(--learn-slate); }
/* Un seul niveau de cadre : le formulaire n en porte plus, ses options en
   portent un parce qu elles sont des cibles tactiles (docs/DESIGN-FORMATIONS.md). */
.course-activity { display: grid; gap: 14px; width: 100%; }
.course-activity.is-saving { opacity: .78; }
.course-activity.is-saving::before { color: var(--learn-slate); content: "Enregistrement de l’état de la pratique…"; font-size: .86rem; font-weight: 750; }
.course-activity-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.course-activity-head > span:first-child { color: var(--learn-teal-dark); font-size: var(--cplay-signal-size, .82rem); font-weight: 800; letter-spacing: .03em; }
.course-activity-status { padding: .2rem .58rem; border: 1px solid rgba(91, 100, 115, .34); border-radius: 99px; color: var(--learn-slate); background: #fff; font-size: .8rem; font-weight: 800; }
.course-activity-status.is-complete { border-color: rgba(8, 116, 102, .42); color: #075E52; background: #F1FAF7; }
.course-activity-status.is-attempted { border-color: rgba(138, 90, 8, .38); color: #6B4606; background: #fff; }
.course-activity-status.is-revised { border-color: rgba(23, 75, 122, .38); color: #174B7A; background: #F5F9FD; }
.course-activity fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.course-activity legend, .course-activity-prompt { max-width: 65ch; margin: 0; color: var(--learn-navy); font-size: var(--cplay-item-title, 1.06rem); font-weight: 750; line-height: 1.35; }
.course-decision-options { display: grid; gap: 8px; margin-top: 13px; }
.course-decision-options button { width: 100%; min-height: var(--cplay-quiz-tap, 52px); padding: 11px 14px; border: 1px solid var(--learn-line); border-radius: 12px; color: var(--learn-navy); background: #fff; cursor: pointer; font-weight: 720; text-align: left; }
.course-decision-options button:not(:disabled):hover { border-color: var(--learn-teal); background: #F6FCFA; }
.course-decision-options button.is-recommended { border-color: var(--learn-success); background: #E8F7F3; }
.course-decision-options button.is-selected-wrong { border-color: var(--learn-danger); background: #FFF0ED; }
.course-activity-feedback { padding: 13px 15px; border-radius: 12px; }
.course-activity-feedback.is-correct { color: #075E52; background: #E8F7F3; }
.course-activity-feedback.is-retry { color: #70251F; background: #FFF0ED; }
.course-activity-feedback.is-warning, .course-save-warning { color: #6D4A08; background: #FFF5D9; }
.course-activity-feedback p { margin: 4px 0 0; }
.course-lab-fields, .course-action-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.course-lab-fields label, .course-action-fields label { display: grid; gap: 5px; min-width: 0; }
.course-lab-fields label > span, .course-action-fields label > span, .course-recall > label { color: var(--learn-navy); font-size: .78rem; font-weight: 850; }
.course-lab-fields b { color: var(--learn-danger); }
.course-activity textarea { width: 100%; min-height: 62px; resize: vertical; padding: 10px 11px; border: 1px solid #CFC8B8; border-radius: 10px; color: var(--learn-ink); background: #fff; line-height: 1.4; }
.course-activity textarea:focus { border-color: var(--learn-teal-dark); outline: 0; box-shadow: 0 0 0 4px rgba(15, 157, 140, .13); }
/* La taille vient de .cplay-privacy (0,86 rem) : 0,68 rem valait 10,9 px,
   sous le plancher du contrat de lecture (docs/DESIGN-FORMATIONS.md). */
.course-activity-privacy { display: block; color: var(--learn-slate); }
.course-activity > .learn-btn { justify-self: start; }
.course-lab-output { padding: 16px; border: 1px solid rgba(15, 157, 140, .3); border-radius: 13px; background: #fff; }
.course-lab-output strong { display: block; color: var(--learn-teal-dark); font-size: .82rem; letter-spacing: 0; }
.course-lab-output p, .course-lab-output pre { margin: 7px 0 0; color: var(--learn-navy); font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.course-copy-artifact { margin-top: 12px; }
.course-recall.course-activity { max-width: none; text-align: left; }
.course-recall-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--learn-slate); font-size: .7rem; }
.course-recall.course-activity .course-recall-answer { margin-top: 0; }
.course-save-warning { margin-top: 10px !important; padding: 10px; border-radius: 9px; }
.course-rubric {
  --rubric-progress: 0%;
  position: relative;
  display: grid;
  min-inline-size: 0;
  gap: 14px;
  margin: 0;
  overflow: hidden;
  padding: 20px !important;
  border: 1px solid rgba(15, 157, 140, .3) !important;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff 0%, #FBFEFD 72%, #F1FAF7 100%);
  box-shadow: 0 14px 34px rgba(20, 34, 79, .08);
}
.course-rubric::before { position: absolute; inset: 0 0 auto; height: 4px; background: var(--learn-teal); content: ""; }
.course-rubric-heading { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 11px; align-items: center; }
.course-rubric-symbol { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(15, 157, 140, .24); border-radius: 14px; color: var(--learn-teal-dark); background: #E8F7F3; }
.course-rubric-symbol svg { width: 25px; height: 25px; }
.course-rubric-heading > div { display: grid; gap: 1px; min-width: 0; }
.course-rubric-kicker { color: var(--learn-teal-dark); font-size: .82rem; font-weight: 900; letter-spacing: 0; }
.course-rubric-heading strong { color: var(--learn-navy); font-size: 1rem; line-height: 1.25; }
.course-rubric-required { padding: 5px 9px; border: 1px solid rgba(15, 157, 140, .25); border-radius: 999px; color: var(--learn-teal-dark); background: #F0FAF7; font-size: .82rem; font-weight: 900; white-space: nowrap; }
.course-rubric-intro { max-width: 72ch; margin: 0; color: var(--learn-slate); font-size: .82rem; line-height: 1.5; }
.course-rubric-progress-summary { display: grid; grid-template-columns: auto minmax(100px, 1fr); gap: 14px; align-items: center; }
.course-rubric-progress-summary > strong { color: var(--learn-navy); font-size: .72rem; }
.course-rubric-progress { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: #E7F0ED; }
.course-rubric-progress > span { display: block; width: var(--rubric-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--learn-teal-dark), var(--learn-teal)); transition: width .22s ease; }
.course-rubric-items { display: grid; gap: 9px; }
.course-rubric-item { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 11px; align-items: center; min-height: 54px; padding: 11px 13px; border: 1px solid var(--learn-line); border-radius: 12px; color: var(--learn-navy); background: #fff; font-size: .78rem; font-weight: 720; line-height: 1.4; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.course-rubric-item:hover { border-color: rgba(15, 157, 140, .5); background: #FAFEFC; }
.course-rubric-item input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; cursor: inherit; opacity: 0; }
.course-rubric-check { display: grid; width: 23px; height: 23px; place-items: center; border: 2px solid #A7B5B0; border-radius: 7px; color: transparent; background: #fff; font-size: .78rem; font-weight: 950; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
.course-rubric-item:has(input:checked) { border-color: rgba(15, 157, 140, .62); background: #EFFAF7; box-shadow: 0 0 0 2px rgba(15, 157, 140, .08); }
.course-rubric-item:has(input:checked) .course-rubric-check { border-color: var(--learn-teal-dark); color: #fff; background: var(--learn-teal-dark); transform: scale(1.04); }
.course-rubric-item:has(input:focus-visible) { outline: 3px solid var(--learn-teal); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(15, 157, 140, .16); }
.course-rubric-item:has(input:disabled) { cursor: default; }
.course-rubric-item-copy { min-width: 0; }
.course-rubric-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-top: 2px; }
.course-rubric-footer .learn-btn { min-width: 230px; }
.course-rubric-footer .learn-btn:disabled { color: #58736E; background: #DCEEEA; box-shadow: none; opacity: 1; }
.course-rubric-feedback { position: relative; margin: 0; padding-left: 16px; color: #6D4A08; font-size: .76rem; font-weight: 750; line-height: 1.45; }
.course-rubric-feedback::before { position: absolute; top: .42em; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--learn-gold); content: ""; }
.course-rubric-feedback.is-ready { color: #075E52; }
.course-rubric-feedback.is-ready::before { background: var(--learn-teal); }
.course-rubric-feedback.is-warning { color: #6D4A08; }
.course-rubric-feedback.is-error { color: var(--learn-danger); }
.course-rubric-feedback.is-error::before { background: var(--learn-danger); }
.course-rubric[data-rubric-state="ready"] { border-color: rgba(15, 157, 140, .58) !important; box-shadow: 0 16px 38px rgba(15, 157, 140, .12); }
.course-rubric[data-rubric-state="revision-required"]::before { background: var(--learn-gold); }
.course-rubric[data-rubric-state="revision-required"] .course-rubric-symbol { border-color: rgba(217, 149, 33, .3); color: #8A5B0B; background: #FFF7E4; }
.course-rubric[data-rubric-state="complete"] { border-color: rgba(15, 157, 140, .5) !important; background: linear-gradient(145deg, #fff, #F0FAF7); }
.course-rubric[data-rubric-state="complete"] .course-rubric-symbol { color: #fff; background: var(--learn-teal-dark); }
.course-rubric[data-rubric-state="complete"] .learn-btn:disabled { cursor: default; color: #fff; background: var(--learn-teal-dark); box-shadow: none; opacity: 1; }
.course-rubric.is-attention { animation: course-rubric-attention .65s ease; }
@keyframes course-rubric-attention {
  45% { border-color: var(--learn-teal) !important; box-shadow: 0 0 0 5px rgba(15, 157, 140, .15), 0 16px 38px rgba(20, 34, 79, .1); }
}
/* Cadre preuve teal-or de la charte section 7 : l'or n'existe qu'en halo radial,
   l'aplat crème est aboli (voir docs/DESIGN-FORMATIONS.md). */
.course-playbook-output { border-color: rgba(15, 157, 140, .38); background: radial-gradient(circle at 100% 100%, rgba(217, 149, 33, .13), transparent 30%), linear-gradient(145deg, #fff 0%, rgba(238, 250, 247, .9) 100%); }
.course-takeaway { display: flex; align-items: flex-start; gap: 9px; padding-top: 14px; border-top: 1px solid var(--learn-line); color: var(--learn-navy); }
.course-takeaway > span { color: var(--learn-gold); }
.course-takeaway p { margin: 0; font-size: .84rem; font-weight: 750; }

.course-quiz { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(150deg, #fff, #F5FAF8); }
.course-quiz.is-critical { box-shadow: inset 6px 0 0 rgba(246, 194, 92, .72); }
.course-quiz.is-critical .course-quiz-top > span::before { margin-right: 7px; content: "◆"; color: var(--learn-gold); font-size: .72em; }
.course-quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; color: var(--learn-teal-dark); font-size: .82rem; font-weight: 850; letter-spacing: 0; }
.course-quiz fieldset { margin: 0; padding: 0; border: 0; }
.course-quiz legend { max-width: 24ch; margin: 0 0 23px; color: var(--learn-navy); font-size: clamp(1.45rem, 2.8vw, 2.45rem); font-weight: 850; line-height: 1.08; letter-spacing: -.035em; }
.course-options { display: grid; gap: 10px; }
.course-option { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; min-height: 54px; padding: 12px 15px; border: 1px solid var(--learn-line); border-radius: 13px; color: var(--learn-navy); background: #fff; cursor: pointer; font-weight: 700; }
.course-option:hover { border-color: rgba(15, 157, 140, .5); background: #F7FCFA; }
.course-option input { position: absolute; opacity: 0; }
.course-option-marker { display: block; width: 21px; height: 21px; border: 2px solid #AAA493; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #fff; pointer-events: none; }
.course-option:has(input:focus-visible) { outline: 3px solid var(--learn-gold); outline-offset: 2px; }
.course-option:has(input:checked) { border-color: var(--learn-teal-dark); box-shadow: 0 0 0 2px rgba(15, 157, 140, .11); }
.course-option:has(input:checked) .course-option-marker { border-color: var(--learn-teal-dark); background: var(--learn-teal); }
.course-option.is-correct { border-color: var(--learn-success); background: #E8F7F3; }
.course-option.is-correct .course-option-marker { border-color: var(--learn-success); background: var(--learn-success); }
.course-option.is-wrong { border-color: var(--learn-danger); background: #FFF0ED; }
.course-option.is-wrong .course-option-marker { border-color: var(--learn-danger); background: var(--learn-danger); }
.course-feedback { margin-top: 15px; padding: 14px 16px; border-radius: 13px; color: var(--learn-navy); background: #F1F2F4; }
.course-feedback.is-correct { color: #075E52; background: #E8F7F3; }
.course-feedback.is-wrong { color: #70251F; background: #FFF0ED; }
.course-feedback.is-warning { color: #6D4A08; background: #FFF5D9; }
.course-feedback strong { display: block; }
.course-feedback p { margin: 4px 0 0; }
.course-feedback button { min-height: 44px; margin-top: 9px; padding: .5rem .7rem; border: 1px solid currentColor; border-radius: 8px; color: inherit; background: transparent; cursor: pointer; font-weight: 800; }
.course-quiz-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.course-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.course-controls .learn-btn { min-width: 145px; }
.course-shortcuts { color: var(--learn-slate); font-size: .76rem; }
.course-sidebar-backdrop { position: fixed; inset: 0; z-index: 85; background: rgba(14, 24, 54, .52); }
.learning-course-footer { display: grid; gap: 12px; justify-items: center; padding: 34px 20px 38px; color: #C6D4E3; background: linear-gradient(125deg, var(--learn-navy-deep), var(--learn-navy) 62%, #0d3f4d 130%); text-align: center; }
.learning-footer-brand { display: inline-flex; border-radius: 8px; }
.learning-footer-brand:focus-visible { outline: 3px solid var(--learn-gold); outline-offset: 6px; }
.learning-course-footer img { width: 118px; height: auto; }
.learning-course-footer p { margin: 0; color: #C6D4E3; font-size: .88rem; }

.completion-dialog { width: min(720px, calc(100% - 30px)); max-height: calc(100dvh - 30px); padding: 0; overflow: auto; border: 0; border-radius: 24px; color: var(--learn-ink); background: #fff; box-shadow: 0 30px 100px rgba(14, 24, 54, .3); }
.completion-dialog::backdrop { background: rgba(14, 24, 54, .68); backdrop-filter: blur(5px); }
.completion-card { padding: clamp(28px, 5vw, 44px); background: radial-gradient(480px 240px at 50% 0%, rgba(15, 157, 140, .12), transparent 74%); text-align: center; }
.completion-mark { display: grid; width: 68px; height: 68px; place-items: center; margin: 0 auto 18px; border-radius: 21px; color: #fff; background: linear-gradient(145deg, var(--learn-teal-dark), var(--learn-teal)); font-size: 1.8rem; box-shadow: 0 15px 34px rgba(15, 157, 140, .28); }
.completion-card h2 { margin: 0 0 9px; color: var(--learn-navy); font-size: 2rem; letter-spacing: -.035em; }
.completion-card p { margin: 0 0 22px; color: var(--learn-slate); }
.completion-card > .learning-kicker { display: block; margin-bottom: 7px; }
.completion-card .completion-course-name { margin-bottom: 5px; color: var(--learn-teal-dark); font-size: .84rem; font-weight: 850; }
.completion-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 20px; }
.completion-metrics div { padding: 12px 8px; border-radius: 12px; background: var(--learn-ivory); }
.completion-metrics strong, .completion-metrics span { display: block; }
.completion-metrics strong { color: var(--learn-navy); font-size: 1.15rem; }
.completion-metrics span { margin-top: 2px; color: var(--learn-slate); font-size: .68rem; }
.completion-objectives { margin: 0 0 18px; padding: 16px; border: 1px solid var(--learn-line); border-radius: 14px; text-align: left; }
.completion-objectives h3 { margin: 0 0 9px; color: var(--learn-navy); font-size: .9rem; }
.completion-objectives ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.completion-objectives li { position: relative; padding-left: 24px; color: var(--learn-slate); font-size: .78rem; }
.completion-objectives li::before { position: absolute; top: .05rem; left: 0; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #fff; background: var(--learn-teal-dark); content: "✓"; font-size: .62rem; font-weight: 900; }
.completion-card .completion-transfer { margin-bottom: 18px; color: var(--learn-navy); font-weight: 750; }
.completion-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.course-celebration { position: fixed; inset: 0; z-index: 150; overflow: hidden; pointer-events: none; }
.course-celebration i { position: absolute; top: -30px; left: var(--x); width: 9px; height: 18px; border-radius: 2px; background: var(--learn-teal); animation: confetti-fall 1.5s cubic-bezier(.2, .7, .2, 1) var(--delay) forwards; }
.course-celebration i:nth-child(3n) { background: var(--learn-gold); }
.course-celebration i:nth-child(3n + 1) { background: var(--learn-navy); }
@keyframes confetti-fall { to { transform: translateY(105vh) rotate(var(--spin)); opacity: .3; } }

@media (min-width: 760px) {
  .learning-catalog-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); align-items: stretch; }
}
@media (min-width: 900px) {
  .learning-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(360px, .82fr); }
  .learning-access-grid { grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr); gap: clamp(45px, 8vw, 100px); }
  .dashboard-catalog-grid { grid-template-columns: minmax(0, 1.45fr) minmax(270px, .55fr); align-items: stretch; }
  .dashboard-adaptive-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-adaptive-catalog .dashboard-course-card { grid-column: auto; grid-row: auto; padding: 22px; }
  .dashboard-adaptive-catalog .dashboard-course-card h3 { max-width: 18ch; font-size: clamp(1.35rem, 1.75vw, 1.7rem); }
  .dashboard-adaptive-catalog .dashboard-course-card > p { font-size: .82rem; }
  .dashboard-adaptive-catalog .dashboard-course-actions { align-items: stretch; }
  .dashboard-adaptive-catalog .dashboard-course-actions .learn-btn { min-width: 0; width: 100%; }
  .dashboard-adaptive-catalog .dashboard-text-action { width: 100%; }
  /* La grille de la vue Parametres ne se decide plus ici : elle est declaree en
     un seul endroit, section « Vue Parametres » plus haut dans cette feuille.
     Elle etait partagee entre trois feuilles et la carte « Son du parcours »,
     qui n etait placee dans aucune, tombait dans une colonne de 86 px. */
  .dashboard-grid { grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); align-items: start; }
  .dashboard-intelligence-grid .dashboard-notice { grid-column: 1 / -1; }
  .dashboard-intelligence-grid .dashboard-next-card { grid-column: 1; grid-row: auto; }
  .dashboard-intelligence-grid .dashboard-progress-card { grid-column: 2; }
  /* Deux fragments de selecteur pendants vivaient ici, restes d une suppression
     ligne a ligne : « .dashboard-intelligence-grid » seul se recollait a la
     ligne suivante et donnait « .a .a .b », qui ne designe rien. Les deux
     regles etaient donc mortes. Et la carte des preferences a quitte cette
     grille pour la vue Parametres : elle n a plus rien a y placer. */
  .dashboard-intelligence-grid .dashboard-recommendations-card { grid-column: 1; }
  .dashboard-intelligence-grid .dashboard-chapters-card { grid-column: 2; }
  .dashboard-side { display: contents; }
  .dashboard-course-card { grid-column: 1; grid-row: 1; }
  .dashboard-progress-card { grid-column: 2; grid-row: 1; }
  .dashboard-evidence-card { grid-column: 1; grid-row: 2; }
  .dashboard-chapters-card { grid-column: 2; grid-row: 2; }
}
@media (max-width: 1050px) {
}
@media (max-width: 899px) {
  .learn-wrap { width: min(100% - 28px, 760px); }
  .learn-back-link span { display: none; }
  .learn-user-copy { display: none; }
  body.learning-course-page .learn-user-menu .learn-user-copy { display: grid; }
  .learning-hero { padding-block: 46px 56px; }
  .learning-hero h1 { max-width: 15ch; }
  .auth-card { max-width: none; }
  .course-menu-button { display: inline-flex; }
  .course-layout { grid-template-columns: 1fr; }
  .course-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: min(330px, 88vw);
    height: 100dvh;
    padding: 24px 18px;
    transform: translateX(-105%);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
  }
  .course-sidebar.is-open { transform: translateX(0); box-shadow: 20px 0 60px rgba(14, 24, 54, .2); }
  .course-sidebar-close { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 0; border-radius: 10px; color: var(--learn-navy); background: #F1EEE6; cursor: pointer; }
  .course-sidebar-close svg { width: 20px; height: 20px; }
  .course-main { padding: 18px 14px 28px; }
  .course-stage { min-height: 540px; }
  .course-introduction-hero { grid-template-columns: 1fr; }
  .course-introduction-objectives { max-width: 680px; }
}
@media (max-width: 680px) {
  .learn-header-row { min-height: 64px; }
  .learn-brand-copy small { display: none; }
  .learn-header-actions > .learn-back-link:first-child { display: none; }
  .learning-hero h1 { font-size: clamp(2.05rem, 10.5vw, 3rem); }
  .learning-hero-badge { height: 58px; }
  .learning-hero-actions { display: grid; }
  .learning-catalog, .learning-access-section { padding-block: 54px; }
  .auth-card { padding: 24px 20px; }
  .learning-dashboard { padding-top: 26px; }
  .dashboard-welcome { display: block; margin-bottom: 16px; }
  .dashboard-welcome h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .dashboard-availability,
  .dashboard-sync { justify-items: start; margin-top: 10px; text-align: left; }
  .dashboard-shell { gap: 18px; }
  /* L onglet descendait a 11,8 px sur petit ecran. Un libelle de navigation est
     du corps : il reste a 1rem, et la pilule s adapte en resserrant son air. */
  .dashboard-tabs { gap: 4px; margin-bottom: 14px; padding: 5px; border-radius: 16px; }
  .dashboard-tabs button { min-height: 48px; padding: .5rem .4rem; }
  .dashboard-choice-heading { margin: 2px 0 18px; text-align: left; }
  .dashboard-choice-heading h2 { font-size: clamp(1.65rem, 8vw, 2.2rem); }
  .dashboard-choice-gateway { grid-template-columns: 1fr; gap: 11px; }
  .dashboard-choice-option { min-height: 118px; gap: 13px; padding: 17px; border-radius: 17px; }
  .dashboard-choice-icon { width: 44px; height: 44px; border-radius: 14px; }
  .dashboard-choice-copy > strong { font-size: 1.08rem; }
  .dashboard-choice-note { text-align: left; }
  .dashboard-positioning-card { padding: 20px 17px; border-radius: 17px; }
  .dashboard-choice-result { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
  .dashboard-choice-result-mark { width: 46px; height: 46px; border-radius: 14px; }
  .dashboard-choice-result-actions { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .dashboard-choice-unavailable { grid-template-columns: 1fr; }
  .dashboard-choice-unavailable > .dashboard-back-action { grid-column: auto; }
  .dashboard-panel-heading { display: block; }
  .dashboard-panel-heading > p { margin-top: 10px; }
  .dashboard-positioning-progress { grid-template-columns: 1fr; gap: 8px; }
  .dashboard-positioning-options { grid-template-columns: 1fr; }
  .dashboard-positioning-options span { min-height: 58px; }
  .dashboard-positioning-actions { display: grid; }
  .dashboard-positioning-actions .learn-btn { width: 100%; min-width: 0; }
  .dashboard-progress-heading .dashboard-sync { margin-top: 12px; }
  .dashboard-catalog-card-top { display: grid; }
  .dashboard-course-status { justify-self: start; }
  .dashboard-course-card { min-height: 0; }
  .dashboard-course-actions { display: grid; align-items: stretch; gap: 6px; }
  .dashboard-course-actions .learn-btn { width: 100%; min-width: 0; }
  .dashboard-text-action { width: 100%; }
  .dashboard-account-actions { align-items: stretch; }
  .dashboard-account-actions .learn-btn { width: 100%; }
  .dashboard-next-footer { align-items: stretch; }
  .dashboard-next-footer .learn-btn { width: 100%; }
  .dashboard-outcome { grid-template-columns: 1fr; }
  .dashboard-outcome > span { justify-self: start; }
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-topbar { top: 64px; }
  .course-topbar-row { grid-template-columns: auto 1fr auto; gap: 8px; }
  .course-progress-meta { min-width: 90px; }
  .course-progress-meta span { max-width: 18ch; font-size: .61rem; }
  .course-stage { min-height: 0; aspect-ratio: auto; border-radius: 18px; }
  .course-introduction { min-height: 0; padding: 27px 20px; }
  .course-introduction-copy h1 { font-size: clamp(2rem, 9.5vw, 2.75rem); }
  .course-introduction-description { font-size: .84rem; }
  .course-introduction-actions { display: grid; }
  .course-introduction-actions .learn-btn { width: 100%; }
  .course-introduction-plan { grid-template-columns: 1fr; gap: 13px; }
  .course-introduction-plan ol { grid-template-columns: 1fr 1fr; }
  .completion-metrics { grid-template-columns: repeat(2, 1fr); }
  .completion-actions { display: grid; }
  .completion-actions .learn-btn { width: 100%; }
  .course-slide, .course-quiz { min-height: calc(100dvh - 245px); padding: 24px 20px; }
  .course-slide h1 { font-size: clamp(1.7rem, 8vw, 2.35rem); }
  .course-slide-content { align-content: start; }
  .course-lab-fields, .course-action-fields { grid-template-columns: 1fr; }
  .course-rubric { padding: 18px 16px !important; }
  .course-rubric-footer { grid-template-columns: 1fr; }
  .course-rubric-footer .learn-btn { width: 100%; min-width: 0; }
  .course-navigation { position: sticky; bottom: 0; z-index: 40; margin: 12px -14px 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--learn-line); background: rgba(245, 242, 233, .96); backdrop-filter: blur(12px); }
  .course-controls .learn-btn { min-width: 0; padding-inline: 13px; }
  .course-shortcuts { display: none; }
  .course-quiz legend { font-size: 1.55rem; }
  .course-option { font-size: .9rem; }
}

@media (max-width: 480px) {
  .course-rubric-heading { grid-template-columns: 40px minmax(0, 1fr); }
  .course-rubric-symbol { width: 40px; height: 40px; border-radius: 12px; }
  .course-rubric-required { grid-column: 2; justify-self: start; }
  .course-rubric-progress-summary { grid-template-columns: 1fr; gap: 7px; }
  .course-rubric-progress { grid-row: 2; }
  .auth-tabs { gap: 6px; padding: 6px; border-radius: 16px; }
  .auth-tabs button {
    position: relative;
    min-height: 46px;
    padding-inline: 6px;
    border-radius: 12px;
    font-size: clamp(.8rem, 3.6vw, .88rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    white-space: nowrap;
  }
  .auth-tabs button[data-auth-mode="login"] { flex-grow: .86; }
  .auth-tabs button[data-auth-mode="signup"] { flex-grow: 1.14; }
  .auth-tabs button.is-active::after {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 5px;
    height: 5px;
    margin: 0;
  }
  .auth-form[data-auth-view="signup"] > .learn-btn {
    padding-inline: .7rem;
    font-size: .88rem;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .learn-wrap { width: calc(100% - 20px); }
  .learn-brand { gap: 7px; }
  .learn-brand img { width: 36px; height: 36px; }
  .learn-brand-logo { gap: 0; }
  .dashboard-card-title { align-items: flex-start; }
  .dashboard-stats { gap: 6px; }
  .dashboard-progress-card, .dashboard-chapters-card, .dashboard-evidence-card, .dashboard-preferences-card,
  .dashboard-account-card { padding: 18px 15px; }
  .course-topbar-row { gap: 5px; }
  .course-progress-meta { min-width: 76px; }
  .course-progress-meta span { max-width: 13ch; }
  .course-main { padding-inline: 8px; }
  .course-introduction { padding-inline: 16px; }
  .course-introduction-plan ol { grid-template-columns: 1fr; }
  .course-navigation { margin-inline: -8px; padding-inline: 8px; }
  .course-controls .learn-btn { min-height: 46px; padding-inline: 9px; }
  .course-slide, .course-quiz { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .auth-card.is-auth-halo-revealed { animation: none; transform: none; }
  .learn-loader { animation: none; border-color: var(--learn-teal); }
}
@media (forced-colors: active) {
  .auth-card[data-auth-active-view="login"],
  .auth-card[data-auth-active-view="signup"] { border-color: Highlight; outline: 3px solid Highlight; outline-offset: 3px; background: Canvas; box-shadow: none; }
  .learn-progress, .course-option-marker, .course-rubric-progress, .course-rubric-check { border: 1px solid CanvasText; }
  .learn-progress::before { background: Highlight; }
  .course-rubric::before, .course-rubric-progress > span { background: Highlight; }
  .course-option:has(input:checked), .course-rubric-item:has(input:checked) { outline: 3px solid Highlight; }
  .course-rubric-item:has(input:checked) .course-rubric-check { color: HighlightText; background: Highlight; }
  .dashboard-outcome > span, .course-activity-status { border: 1px solid CanvasText; }
  .course-sidebar.is-open { border-right: 2px solid CanvasText; }
}

/* === Formation en ligne · identité endossée === */
.learning-brand-lockup { display: flex; justify-content: center; margin: 0 0 clamp(24px, 4vw, 40px); }
.learning-brand-lockup img { width: min(360px, 76vw); height: auto; }
.completion-brand { display: block; width: min(210px, 56%); height: auto; margin: 0 auto 8px; }

/* === Mode application ===
   Desktop/tablette : cadre verrouillé à la hauteur du viewport (fiable là).
   Mobile : défilement NATIF de la page (les chaînes flex/grid 100% ne donnent
   pas de hauteur définie à la scène sous Safari iOS → blocage tactile);
   l'effet app vient du bord-à-bord + en-tête collant + barre fixe. */
body.learning-course-page.is-authenticated .learning-course-footer { display: none; }
@media (min-width: 681px) {
  body.learning-course-page.is-authenticated {
    height: 100svh;
    height: var(--kolytica-app-height, 100svh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.learning-course-page.is-authenticated main {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
  }
  body.learning-course-page.is-authenticated [data-course-shell]:not([hidden]) {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
  }
  body.learning-course-page.is-authenticated .course-layout {
    flex: 1;
    min-height: 0;
  }
  body.learning-course-page.is-authenticated .course-sidebar {
    position: static;
    height: 100%;
    overflow-y: auto;
  }
  body.learning-course-page.is-authenticated .course-main {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
  }
  body.learning-course-page.is-authenticated .course-stage-wrap {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
  }
  body.learning-course-page.is-authenticated .course-stage {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width: 899px) {
  body.learning-course-page.is-authenticated .course-sidebar {
    position: fixed;
    height: 100svh;
    height: var(--kolytica-app-height, 100svh);
  }
}
@media (max-width: 680px) {
  /* Page en flux normal : la scène n'est plus un conteneur défilant */
  body.learning-course-page.is-authenticated .course-stage {
    overflow: visible;
    aspect-ratio: auto;
    min-height: 0;
  }
  body.learning-course-page.is-authenticated .course-slide,
  body.learning-course-page.is-authenticated .course-quiz {
    min-height: calc(var(--kolytica-app-height, 100svh) - 240px);
  }
  body.learning-course-page.is-authenticated .course-navigation { bottom: 0; }
}

/* === Lecteur : sortie discrète + pratique optionnelle === */
.course-sidebar-logout {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--learn-slate);
  background: transparent;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 750;
  text-align: center;
}
.course-sidebar-logout:hover { border-color: var(--learn-line); color: var(--learn-navy); background: #F8F5EE; }
.course-skip-practice {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--learn-slate);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.course-skip-practice:hover { color: var(--learn-navy); }
.course-progress-meta.learn-sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  min-width: 0;
  margin: -1px;
  padding: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* === Mobile : slides bord à bord, tailles lisibles (corps ≥ 14 px) === */
@media (max-width: 680px) {
  body.learning-course-page.is-authenticated .course-topbar-row { min-height: 46px; }
  body.learning-course-page.is-authenticated .course-menu-button { min-width: 40px; min-height: 40px; }
  /* Le cadre-carte disparaît : la slide occupe tout l'écran */
  body.learning-course-page.is-authenticated .course-main { padding: 0; }
  body.learning-course-page.is-authenticated .course-stage {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.learning-course-page.is-authenticated .course-slide,
  body.learning-course-page.is-authenticated .course-quiz { padding: 16px 16px 12px; }
  body.learning-course-page.is-authenticated .course-slide h1 { margin: 8px 0 7px; font-size: clamp(1.45rem, 6.2vw, 1.85rem); }
  body.learning-course-page.is-authenticated .course-lead { font-size: .95rem; line-height: 1.45; }
  body.learning-course-page.is-authenticated .course-slide-content { margin: 12px 0; }
  body.learning-course-page.is-authenticated .course-slide-content.has-activity { gap: 14px; }
  body.learning-course-page.is-authenticated .course-slide-count { font-size: .68rem; }
  body.learning-course-page.is-authenticated .course-source { font-size: .6rem; }
  body.learning-course-page.is-authenticated .course-activity { gap: 12px; padding: 14px; }
  body.learning-course-page.is-authenticated .course-visual { margin: .7rem 0 .8rem; }
  body.learning-course-page.is-authenticated .course-visual img { max-height: 26dvh; }
  body.learning-course-page.is-authenticated .course-visual figcaption { padding: .5rem .8rem .6rem; font-size: .75rem; }
  body.learning-course-page.is-authenticated .course-quiz legend { margin-bottom: 14px; font-size: 1.4rem; }
  body.learning-course-page.is-authenticated .course-options { gap: 8px; }
  body.learning-course-page.is-authenticated .course-option { min-height: 50px; padding: 10px 13px; font-size: .92rem; }
  /* Barre du bas FIXE : visible même si le navigateur surestime la hauteur */
  body.learning-course-page.is-authenticated .course-navigation {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    margin: 0;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    border-top: 1px solid var(--learn-line);
    background: rgba(251, 247, 236, .97);
    backdrop-filter: blur(12px);
  }
  body.learning-course-page.is-authenticated .course-slide,
  body.learning-course-page.is-authenticated .course-quiz {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }
  body.learning-course-page.is-authenticated .course-controls .learn-btn { min-height: 46px; padding-inline: 14px; font-size: .9rem; }
  body.learning-course-page.is-authenticated .course-skip-practice { min-height: 44px; font-size: .78rem; }
}

/* === Intro de cours : pas de barre de navigation inerte, bas accessible === */
[data-course-shell][data-course-view="introduction"] .course-navigation { display: none; }
.course-sidebar-dashboard {
  display: block;
  margin-top: 20px;
  padding: 11px;
  border: 1px solid var(--learn-line);
  border-radius: 11px;
  color: var(--learn-navy);
  background: #fff;
  font-size: .84rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.course-sidebar-dashboard:hover { background: #F8F5EE; }
.course-sidebar-logout { margin-top: 8px; }
.course-topbar-sound { justify-self: end; }
@media (max-width: 680px) {
  body.learning-course-page.is-authenticated .course-introduction { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
  body.learning-course-page.is-authenticated .course-topbar-sound { min-width: 40px; min-height: 40px; }
}

/* === Approfondissements : « En savoir plus » sur les encadrés === */
.course-deep-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--learn-teal-dark);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .02em;
}
.course-deep-arrow {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #17b5a2, var(--learn-teal-dark));
  box-shadow: 0 8px 18px rgba(15, 157, 140, .3);
  transition: transform .18s ease;
}
.course-deep-arrow svg { width: 17px; height: 17px; }
.course-deep-link:hover .course-deep-arrow { transform: translateX(3px); }
.course-deep-link.is-seen { color: #6FA79D; }
.course-deep-link.is-seen .course-deep-arrow {
  background: #A9DCD3;
  color: var(--learn-teal-dark);
  box-shadow: none;
}
[data-course-shell][data-course-view="deep-dive"] .course-navigation { display: none; }
/* La page « En savoir plus » est une colonne de lecture comme une autre : plus de
   panneau a elle, plus de padding propre. Le padding vient de .cplay-body et la
   mesure de .cplay-reading, sinon les deux se cumulaient et la mesure tombait. */
.course-deep-dive {
  animation: course-enter .38s cubic-bezier(.16, 1, .3, 1) both;
}
.course-deep-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 9px 13px 9px 9px;
  border: 1px solid var(--learn-line);
  border-radius: 99px;
  color: var(--learn-navy);
  background: #fff;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 800;
}
.course-deep-back svg { width: 16px; height: 16px; }
.cplay-deep-actions { margin: 26px 0 0; }
.course-deep-dive .cplay-eyebrow { margin-top: 2px; }
/* Le titre suit l'echelle de la vue lecture : c'est le meme niveau de titre, il
   n'y a pas de raison qu'il soit plus grand ici que sur une lecon. */
.course-deep-dive > h2 {
  margin: 0 0 .5em;
  color: var(--learn-navy);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.16;
  text-wrap: balance;
}
.course-deep-return { margin-top: 24px; min-width: 220px; }
@media (max-width: 680px) {
  body.learning-course-page.is-authenticated .course-deep-dive { padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)); }
  .course-deep-return { width: 100%; }
}
.course-lead .course-deep-link { display: flex; margin-top: 12px; }

/* === Démo code : interpréteur live === */
.course-code-live { margin-top: 10px; }
.course-code-editor {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 13px 15px;
  border-radius: 12px;
  color: #8DE8DA;
  background: var(--learn-navy-deep, #0E1836);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem;
  letter-spacing: .02em;
}
.course-code-caret {
  width: 9px;
  height: 1.15em;
  margin-left: 2px;
  background: #8DE8DA;
  animation: code-caret 1s steps(2) infinite;
}
@keyframes code-caret { 50% { opacity: 0; } }
.course-code-sheet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.course-code-cell {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--learn-line);
  border-radius: 12px;
  background: #fff;
}
.course-code-cell > span {
  color: var(--learn-slate);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: 0;
}
.course-code-cell input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--learn-line);
  border-radius: 9px;
  color: var(--learn-navy);
  font-size: 1rem;
  font-weight: 800;
}
.course-code-cell.is-output { border-color: rgba(15, 157, 140, .4); background: #F1FBF8; }
.course-code-cell.is-output strong { color: var(--learn-teal-dark); font-size: 1.15rem; }
.course-code-replay {
  margin-top: 10px;
  padding: 9px 13px;
  border: 1px solid var(--learn-line);
  border-radius: 99px;
  color: var(--learn-navy);
  background: #fff;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 800;
}
.course-code-replay:hover { background: #F8F5EE; }
/* Cartes avec bouton de démo : un peu plus d'air */
.cplay-points > li .course-deep-link { margin-top: 10px; }

/* === Façades média : le lecteur ne se charge qu'au tap === */
.course-media-facade {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(15, 157, 140, .35);
  border-radius: 14px;
  color: var(--learn-navy);
  background: linear-gradient(145deg, #F4FBF9, #fff);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 800;
}
.course-media-facade.is-video {
  min-height: 130px;
  justify-content: center;
  color: #fff;
  background:
    radial-gradient(320px 160px at 50% 0%, rgba(23, 181, 162, .35), transparent 70%),
    linear-gradient(150deg, var(--learn-navy-deep, #0E1836), var(--learn-navy));
}
.course-media-facade-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #17b5a2, var(--learn-teal-dark));
  font-size: .8rem;
}
.course-media-facade:hover .course-media-facade-icon { transform: scale(1.06); }

/* === Bilan de fin de parcours === */
[data-course-shell][data-course-view="bilan"] .course-navigation { display: none; }
.course-finish {
  min-height: 100%;
  padding: clamp(20px, 3.4vw, 46px);
  background:
    radial-gradient(480px 280px at 100% 0%, rgba(15, 157, 140, .08), transparent 65%),
    linear-gradient(155deg, #fff 0%, #FFFDF8 60%, #FBF7EC 100%);
  animation: course-enter .38s cubic-bezier(.16, 1, .3, 1) both;
}
.course-finish h1 {
  margin: 8px 0 10px;
  color: var(--learn-navy);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  letter-spacing: -.04em;
}
.course-finish-note { max-width: 62ch; margin: 0 0 16px; color: var(--learn-slate); font-size: .93rem; line-height: 1.5; }
.course-finish-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}
.course-finish-stats > div {
  display: grid;
  gap: 3px;
  padding: 13px 14px;
  border: 1px solid var(--learn-line);
  border-radius: 13px;
  background: #fff;
}
.course-finish-stats strong { color: var(--learn-teal-dark); font-size: 1.25rem; }
.course-finish-stats span { color: var(--learn-slate); font-size: .72rem; font-weight: 750; }
.course-finish-resume { width: 100%; max-width: 420px; }
.course-finish-suggest { margin-top: 22px; }
.course-finish-suggest h2 { margin: 0 0 10px; color: var(--learn-navy); font-size: 1.05rem; letter-spacing: -.02em; }
.course-finish-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  padding: 14px 15px;
  border: 1px solid rgba(15, 157, 140, .3);
  border-radius: 15px;
  background: linear-gradient(145deg, #F4FBF9, #fff);
  text-decoration: none;
}
.course-finish-card-copy { display: grid; gap: 3px; }
.course-finish-card-copy strong { color: var(--learn-navy); font-size: .98rem; line-height: 1.25; }
.course-finish-card-copy small { color: var(--learn-slate); font-size: .74rem; }
.course-finish-card:hover .course-deep-arrow { transform: translateX(3px); }
.course-finish-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
@media (max-width: 680px) {
  body.learning-course-page.is-authenticated .course-finish { padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)); }
  .course-finish-actions .learn-btn { flex: 1 1 160px; }
}

/* ==========================================================================
   Vue Parametres · [data-learn-view="parametres"]
   --------------------------------------------------------------------------
   SOURCE UNIQUE de cette surface. Contrat : docs/DESIGN-FORMATIONS.md,
   section 14. Avant cette consolidation, la vue etait decrite a quatre
   endroits de trois feuilles (kolytica-learning.css en deux blocs,
   learning-desktop-refinement.css, plus la cascade des feuilles mobiles).
   Trois defauts en decoulaient, tous mesures au navigateur :

   - la carte « Son du parcours » n etait placee dans AUCUNE grille : a 1280 px
     elle tombait dans une colonne de 86,16 px sur 584 px de haut, et elle
     n avait aucun remplissage a aucune largeur ;
   - onze roles de texte passaient sous le plancher de lisibilite, jusqu a
     11,2 px pour la description d un consentement, qui est du corps ;
   - les trois lignes de consentement portaient l aplat creme #FCFAF5, aboli
     par la charte.

   Toute regle de cette vue s ecrit ICI. En ajouter une ailleurs recree le
   morcellement que cette section supprime.

   Echelle, alignee sur le contrat : corps au plancher de 1rem, libelle de
   structure au plancher de 0,8rem, aucune capitale.
   ========================================================================== */
[data-learn-view="parametres"] {
  --set-pad: clamp(20px, 3vw, 26px);
  --set-body: 1rem;
  --set-label: .82rem;
  --set-gap: 18px;
}

.dashboard-settings-grid {
  display: grid;
  gap: var(--set-gap);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.dashboard-settings-grid > .dashboard-card {
  min-width: 0;
  height: 100%;
  padding: var(--set-pad);
  border-radius: 18px;
  /* Cinq cartes cote a cote : l ombre de 40 px les faisait flotter chacune pour
     soi. Plus basse, elle suggere l elevation sans decouper la page. */
  box-shadow: 0 12px 30px rgba(20, 34, 79, .06);
}
/* Rythme interne commun : une carte est une colonne, jamais une rangee.
   Un enfant ajoute a une carte en flex se serait mis en colonne de grille. */
.dashboard-settings-grid > .dashboard-card {
  display: grid;
  align-content: start;
  gap: 14px;
}
.dashboard-settings-grid > .dashboard-card > * { min-width: 0; margin: 0; }
.dashboard-settings-grid .dashboard-card-title { margin-bottom: 0; }
.dashboard-settings-grid .dashboard-card-title > span { font-size: var(--set-label); }

@media (min-width: 900px) {
  /* Chaque carte declare sa colonne ET sa rangee. Aucune ne se repose sur le
     placement automatique : c est ainsi que « Son du parcours », seule carte
     sans regle, tombait dans une piste de 86,16 px. La carte de compte est la
     plus haute, elle tient la colonne de gauche sur deux rangees ; le niveau et
     le son se rangent en face, ce qui evite le vide qu un simple etirement
     laissait sous le niveau. */
  .dashboard-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-settings-grid .dashboard-account-card { grid-column: 1; grid-row: 1 / span 2; }
  .dashboard-settings-grid .dashboard-level-card { grid-column: 2; grid-row: 1; }
  .dashboard-settings-grid .dashboard-sound-card { grid-column: 2; grid-row: 2; }
  .dashboard-settings-grid .dashboard-preferences-card { grid-column: 1 / -1; grid-row: 3; }
  .dashboard-settings-grid .dashboard-profiles-card { grid-column: 1 / -1; grid-row: 4; }
}

/* --- Mon compte --------------------------------------------------------- */
.dashboard-account-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 15px;
  /* Filet teal seul, pas d aplat ivoire : sur une carte blanche, l ivoire etait
     un aplat de contenu de plus, et la variante teal est celle du contrat. */
  border: 1px solid rgba(15, 157, 140, .34);
  border-radius: 14px;
  background: #fff;
}
.dashboard-account-avatar { width: 48px; height: 48px; }
.dashboard-account-profile > div { display: grid; gap: 3px; min-width: 0; }
.dashboard-account-profile > div strong,
.dashboard-account-profile > div span { display: block; overflow-wrap: anywhere; }
.dashboard-account-profile > div strong { color: var(--learn-navy); font-size: 1.06rem; }
.dashboard-account-profile > div span { color: var(--learn-slate); font-size: var(--set-body); }
.dashboard-profile-form {
  display: grid;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid var(--learn-line);
}
.dashboard-profile-form .auth-field { display: grid; gap: 6px; }
.dashboard-profile-form input {
  min-height: 48px;
  padding: .7rem .85rem;
  border: 1px solid rgba(20, 34, 79, .24);
  border-radius: 11px;
  color: var(--learn-navy);
  background: #fff;
  font: inherit;
  font-size: var(--set-body);
}
.dashboard-profile-form input:focus-visible { border-color: var(--learn-teal-dark); outline: 0; box-shadow: 0 0 0 4px rgba(15, 157, 140, .13); }
.dashboard-profile-form > small { color: var(--learn-slate); font-size: var(--set-body); line-height: 1.5; }
.dashboard-profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dashboard-profile-actions [role="status"] { color: var(--learn-slate); font-size: var(--set-body); }
.dashboard-profile-actions [data-kind="saved"] { color: var(--learn-success); font-weight: 800; }
.dashboard-profile-actions [data-kind="error"] { color: var(--learn-danger); font-weight: 750; }
.dashboard-account-card > p { color: var(--learn-slate); font-size: var(--set-body); line-height: 1.55; }
.dashboard-account-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
/* La deconnexion vit ici et nulle part ailleurs sur mobile connecte :
   .learn-header-actions y est masque, donc le menu partage qui la portait etait
   inatteignable. Elle reste une action discrete, pas une action principale. */
.dashboard-account-logout {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--learn-line);
  border-radius: 12px;
  color: var(--learn-navy);
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: var(--set-body);
  font-weight: 800;
}
.dashboard-account-logout:hover { border-color: rgba(20, 34, 79, .28); background: #FAF8F2; }
.dashboard-account-actions > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--learn-teal-dark);
  font-size: var(--set-body);
  font-weight: 800;
  text-underline-offset: 4px;
}

/* --- Mon niveau conseille ----------------------------------------------- */
.dashboard-level-name { display: block; color: var(--learn-navy); font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.15; }
.dashboard-level-card > p { color: var(--learn-ink); font-size: var(--set-body); line-height: 1.55; }
.dashboard-level-card > .learn-btn { justify-self: start; }

/* --- Preferences pedagogiques -------------------------------------------
   Le composant de selection acte par la charte (section 7) : coche
   personnalisee, carte blanche au repos, teinte teal et anneau une fois
   cochee. La ligne entiere est la cible tactile, jamais la coche de 22 px. */
.dashboard-preferences-card form { display: grid; gap: 10px; }
.dashboard-preferences-card form > p,
.dashboard-preference-actions { grid-column: 1 / -1; }
.dashboard-preference {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 56px;
  padding: 14px;
  border: 1px solid rgba(15, 157, 140, .34);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms cubic-bezier(.2, .8, .2, 1), background-color 150ms cubic-bezier(.2, .8, .2, 1);
}
.dashboard-preference input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #B9C4D5;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
/* La coche est un controle : l aplat teal fonce lui est permis, et le blanc
   dessus donne le contraste que le teal clair ne donnait pas. */
.dashboard-preference input:checked {
  border-color: var(--learn-teal-dark);
  background: var(--learn-teal-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.4 3.3 3.3L13 5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.dashboard-preference input:focus-visible { outline: 2px solid var(--learn-teal); outline-offset: 2px; }
.dashboard-preference:has(input:checked) {
  border-color: rgba(15, 157, 140, .55);
  background: rgba(15, 157, 140, .08);
}
.dashboard-preference > span { display: grid; gap: 4px; min-width: 0; }
.dashboard-preference strong,
.dashboard-preference small { display: block; }
.dashboard-preference strong { color: var(--learn-navy); font-size: var(--set-body); font-weight: 800; }
.dashboard-preference small { color: var(--learn-ink); font-size: var(--set-body); line-height: 1.5; }
.dashboard-preferences-card form > p { color: var(--learn-slate); font-size: var(--set-body); line-height: 1.55; }
.dashboard-preference-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dashboard-preference-actions [role="status"] { color: var(--learn-slate); font-size: var(--set-body); }
.dashboard-preference-actions [data-kind="saved"] { color: var(--learn-success); font-weight: 800; }
.dashboard-preference-actions [data-kind="error"] { color: var(--learn-danger); font-weight: 750; }
@media (min-width: 900px) {
  /* La carte occupe les deux colonnes : les trois consentements se rangent en
     rangee plutot que de s etirer sur 1 180 px de large. Le texte de mention et
     la barre d action traversent, sinon ils deviendraient une quatrieme
     colonne. */
  .dashboard-preferences-card form { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
  .dashboard-preference { align-content: start; }
}

/* --- Son du parcours ----------------------------------------------------- */
.dashboard-sound-card > p:not([data-sound-status]) { color: var(--learn-ink); font-size: var(--set-body); line-height: 1.55; }
.dashboard-sound-card [data-sound-toggle] { justify-self: start; }
.dashboard-sound-card [data-sound-status] { color: var(--learn-slate); font-size: var(--set-body); }

/* --- Gestion des profils (administrateurs) ------------------------------- */
.dashboard-profiles-note { color: var(--learn-slate); font-size: var(--set-body); line-height: 1.55; }
.dashboard-profiles-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dashboard-profiles-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 14px;
  border: 1px solid var(--learn-line);
  border-radius: 12px;
  background: #fff;
}
.dashboard-profile-copy { display: grid; gap: 3px; min-width: 0; }
.dashboard-profile-copy strong { color: var(--learn-navy); font-size: var(--set-body); overflow-wrap: anywhere; }
.dashboard-profile-copy small { color: var(--learn-slate); font-size: var(--set-body); }
.dashboard-profile-tags { display: flex; align-items: center; gap: 8px; }
.dashboard-profile-role {
  padding: .24rem .6rem;
  border: 1px solid rgba(15, 157, 140, .38);
  border-radius: 99px;
  color: var(--learn-teal-dark);
  background: #fff;
  font-size: var(--set-label);
  font-weight: 850;
}
.dashboard-profile-role.is-you { border-color: rgba(20, 34, 79, .28); color: var(--learn-navy); }
.dashboard-profile-delete {
  /* 36 px etait sous le plancher tactile de la charte. */
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(168, 58, 50, .35);
  border-radius: 11px;
  color: var(--learn-danger);
  background: #fff;
  cursor: pointer;
  font-size: var(--set-label);
  font-weight: 800;
}
.dashboard-profile-delete:hover { background: #FCF0EE; }
.dashboard-profiles-status { color: var(--learn-slate); font-size: var(--set-body); }

@media (prefers-reduced-motion: reduce) {
  .dashboard-preference { transition: none; }
}

/* === Menu invité harmonisé avec l'accueil (nav-toggle + panneau pleine largeur) === */
.learn-nav-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background .15s;
}
.learn-nav-toggle { background: rgba(15, 157, 140, .10); }
.learn-nav-toggle:hover,
.learn-nav-toggle[aria-expanded="true"] { background: rgba(15, 157, 140, .18); }
.learn-nav-toggle span {
  display: block;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--learn-teal-dark);
  transition: transform .22s ease, opacity .18s ease;
}
.learn-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.learn-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.learn-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.learn-mnav {
  border-top: 1px solid var(--learn-line);
  border-bottom: 1px solid var(--learn-line);
  background: var(--learn-ivory);
}
.learn-mnav a {
  display: block;
  width: 100%;
  padding: 13px clamp(20px, 5vw, 44px);
  border-top: 1px solid var(--learn-line);
  color: var(--learn-navy);
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}
.learn-mnav a:first-child { border-top: 0; }
.learn-mnav a:hover { color: var(--learn-teal-dark); background: rgba(15, 157, 140, .06); }

/* === Catalogue : slider des trois parcours === */
.learning-catalog-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 360px);
  gap: 14px;
  overflow-x: auto;
  padding: 4px 4px 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.learning-catalog-slider::-webkit-scrollbar { display: none; }
.learning-catalog-slider .learning-course-card { scroll-snap-align: center; min-width: 0; }
@media (min-width: 900px) {
  .learning-catalog-slider { grid-auto-columns: minmax(0, 1fr); overflow: visible; padding: 0 0 6px; }
}
.learning-catalog-note { margin-top: 14px; }

/* === Fusion d'entrée : texte original en 3D, entre logo et menu === */
.learn-brand-logo .learn-logo { transition: clip-path .3s ease; }
body.lf-play .learn-brand-logo .learn-logo { clip-path: inset(0 33.4% 0 0); transition: none; }
.learn-header-fusion {
  display: none;
  align-items: center;
  gap: 7px;
  margin: 0 auto;
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
  pointer-events: none;
  font-size: .92rem;
  font-weight: 850;
  letter-spacing: .03em;
  perspective: 520px;
}
body.lf-play .learn-header-fusion {
  display: flex;
  animation: lf-fuse 1s cubic-bezier(.6, -.05, .75, .55) 2.05s both;
}
body.lf-play .learn-header-fusion .lf-w1 {
  color: var(--learn-navy);
  text-shadow:
    0 1px 0 rgba(20, 34, 79, .30),
    0 2px 0 rgba(20, 34, 79, .18),
    0 6px 10px rgba(14, 24, 54, .28);
  transform-origin: center bottom;
  animation: lf-flip .62s cubic-bezier(.16, 1, .3, 1) .15s both;
}
body.lf-play .learn-header-fusion .lf-w2 {
  color: var(--learn-teal-dark);
  text-shadow:
    0 1px 0 rgba(11, 111, 98, .32),
    0 2px 0 rgba(11, 111, 98, .18),
    0 6px 10px rgba(11, 111, 98, .26);
  transform-origin: center bottom;
  animation: lf-flip .62s cubic-bezier(.16, 1, .3, 1) .48s both;
}
@keyframes lf-flip {
  from { opacity: 0; transform: rotateX(88deg) translateY(9px); }
  70% { opacity: 1; transform: rotateX(-14deg); }
  to { opacity: 1; transform: rotateX(0); }
}
@keyframes lf-fuse {
  0% { transform: translate(0, 0) scale(1) rotateX(0); opacity: 1; }
  14% { transform: translate(0, 4px) scale(1.04) rotateX(-8deg); }
  62% { opacity: 1; }
  100% { transform: translate(var(--lf-dx, -40vw), var(--lf-dy, 0)) scale(.15) rotateX(42deg); opacity: 0; }
}
body.lf-fused .learn-brand-logo .learn-logo { animation: lf-logo-pulse .55s ease; }
@keyframes lf-logo-pulse {
  40% { transform: scale(1.04); filter: drop-shadow(0 0 12px rgba(15, 157, 140, .5)); }
}
@media (max-width: 479px) {
  .learn-header-fusion {
    position: absolute;
    top: 50%;
    right: 80px;
    margin: 0;
    translate: 0 -50%;
    font-size: .7rem;
    letter-spacing: .015em;
  }
}
@media (max-width: 359px) { body.lf-play .learn-header-fusion { display: none; } }
@media (prefers-reduced-motion: reduce) {
  body.lf-play .learn-header-fusion { display: none; }
  body.lf-play .learn-brand-logo .learn-logo { clip-path: none; }
}

/* === Logo : même taille et même repli que l'accueil (K seul au scroll) === */
.learn-logo-wrap {
  display: inline-flex;
  overflow: hidden;
  width: 195px;
  flex: none;
  transition: width .6s ease-out;
}
.learn-header.compact .learn-logo-wrap { width: 56px; }
@media (prefers-reduced-motion: reduce) { .learn-logo-wrap { transition: none; } }

/* === En-tête partagé : plus aucun débordement en très petite largeur ===
   Les blocs de droite imposaient leur largeur de contenu (min-width: auto) et
   poussaient la ligne hors du conteneur : 8px de dépassement mesurés à 320px
   sur le lecteur de cours. Ils peuvent désormais se réduire, le nom se tronque
   au lieu d'élargir la ligne, et les cibles tactiles gardent leurs 44px. */
.learn-header-actions,
.learn-user-menu,
.learn-user-copy { min-width: 0; }
.learn-user-copy > strong,
.learn-user-copy > small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.learn-nav-toggle,
.learn-header-actions .learn-avatar { flex: none; }

/* Sous 360px, le logo passe à une taille compatible avec le reste de la ligne
   (échelle proportionnelle, aucun rognage) et les écarts se resserrent. */
@media (max-width: 359px) {
  .learn-header-row { gap: 12px; }
  .learn-logo-wrap,
  .learn-brand-logo .learn-logo { width: min(162px, 52vw); }
}

/* Espace entre le badge « Après connexion » et le texte */
.learning-catalog-note .learning-course-tags { margin-bottom: 12px; }

/* Pied de page : liens du site */
.learning-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  max-width: 640px;
}
.learning-footer-links a {
  color: #C6D4E3;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}
.learning-footer-links a:hover { color: #fff; text-decoration: underline; }

/* === Confirmation d'e-mail maison (inerte tant que le flag client est false) === */
body.is-awaiting-confirmation [data-learning-dashboard],
body.is-awaiting-confirmation [data-course-shell],
body.is-awaiting-confirmation [data-dashboard-loading],
body.is-awaiting-confirmation [data-course-loading] {
  display: none !important;
}
.confirmation-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--learn-ivory, #FBF7EC);
}
.confirmation-gate__card,
.email-verify__card {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border: 1px solid var(--learn-line, #E7E3DA);
  border-radius: var(--learn-radius, 18px);
  box-shadow: var(--learn-shadow, 0 18px 40px rgba(20, 34, 79, .12));
  padding: 34px 30px;
  text-align: center;
}
.confirmation-gate__kicker,
.email-verify__kicker {
  margin: 0 0 8px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: var(--learn-teal-dark, #0B6F62);
}
.confirmation-gate__title,
.email-verify__title {
  margin: 0 0 14px;
  color: var(--learn-navy, #14224F);
  font-size: 1.5rem;
  line-height: 1.25;
}
.confirmation-gate__lead,
.email-verify__lead {
  margin: 0 0 20px;
  color: var(--learn-ink, #141413);
  font-size: 1rem;
  line-height: 1.55;
}
.confirmation-gate__actions,
.email-verify__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0 0 16px;
}
.confirmation-gate__status,
.email-verify__status {
  margin: 0 0 16px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--learn-slate, #5B6473);
}
.confirmation-gate__status[data-kind="error"],
.email-verify__status[data-kind="error"] { color: var(--learn-danger, #A83A32); }
.confirmation-gate__status[data-kind="success"],
.email-verify__status[data-kind="success"] { color: var(--learn-teal-dark, #0B6F62); }
.confirmation-gate__hint {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--learn-slate, #5B6473);
}
.email-verify {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

/* Shell a vues (F2) : en desktop, la section-vue "cours" reste transparente
   pour la grille du dashboard (la disposition nav/panneau vise les descendants
   du shell). Sur mobile elle garde sa boite .lapp-screen (espace tabbar).
   :not([hidden]) préserve le masquage des vues inactives. */
@media (min-width: 900px) {
  .dashboard-shell > [data-learn-view="cours"]:not([hidden]) { display: contents; }
}

/* Un enfant ajoute a une carte en grille devient une COLONNE, pas une rangee :
   la phrase de regle et le bloc des objectifs debordaient de 95 px a 320 px.
   Meme piege que les controles ajoutes a un item de lecon. */
.dashboard-progress-card,
.dashboard-chapters-card{ min-width: 0; }
/* La carte est en flex ROW : un enfant ajoute devient une colonne, pas une
   rangee, et grid-column n y peut rien. flex-basis:100% vaut dans les deux
   dispositions, grille comme flex. Deborde mesure a 320 px avant : 95 px. */
.dashboard-progress-rule,
.dashboard-outcomes-block,
.dashboard-privacy-line,
.dashboard-next-why{
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  grid-column: 1 / -1;
}
.dashboard-progress-rule{
  margin: 10px 0 0;
  color: var(--learn-slate);
  font-size: .82rem;
  line-height: 1.5;
}
.dashboard-outcomes-block{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--learn-line); }
.dashboard-outcomes-block h3{ margin: 0 0 10px; color: var(--learn-navy); font-size: 1rem; font-weight: 800; }
.dashboard-outcomes{ list-style: none; margin: 0; padding: 0; }
.dashboard-outcome{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 11px 0;
  border-top: 1px solid var(--learn-line);
}
.dashboard-outcome:first-child{ border-top: 0; }
.dashboard-outcome strong{ min-width: 0; color: var(--learn-navy); font-size: 1rem; }
.dashboard-outcome span{ flex: none; color: var(--learn-teal-dark); font-size: .82rem; font-weight: 700; }
.dashboard-privacy-line{
  margin: 18px 0 0;
  max-width: 62ch;
  color: var(--learn-slate);
  font-size: .95rem;
  line-height: 1.55;
}
.dashboard-next-why{ margin-top: 12px; }
.dashboard-next-why > summary{ min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--learn-teal-dark); font-size: .95rem; font-weight: 700; }
.dashboard-next-why ul{ margin: 0 0 8px; padding-left: 18px; color: var(--learn-ink); font-size: .95rem; }
.dashboard-next-refuse{ display: grid; gap: 8px; margin-top: 8px; }
.dashboard-next-refuse label{ display: grid; gap: 4px; font-size: .82rem; font-weight: 700; color: var(--learn-slate); }
.dashboard-next-refuse select{ min-height: 44px; min-width: 0; max-width: 100%; font: inherit; font-size: .95rem; }

/* Le catalogue de « Choisissez votre parcours » utilise desormais la carte a
   visuel commune. Ces regles ne portent que ce qui lui est propre : les marques
   de recommandation et de choix, et la promesse du parcours. */
.dashboard-catalog-course{ min-width: 0; }
.dashboard-catalog-flags{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.dashboard-catalog-flag{
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: .16rem .6rem;
  border: 1px solid rgba(217, 149, 33, .45);
  border-radius: 999px;
  color: #86580d;
  font-size: .82rem;
  font-weight: 700;
}
.dashboard-catalog-flag.is-choice{ border-color: rgba(15, 157, 140, .5); color: var(--learn-teal-dark); }
.dashboard-catalog-promise{
  margin: 8px 0 0;
  color: var(--learn-ink);
  font-size: 1rem;
  line-height: 1.55;
}
.dashboard-catalog-course .dashboard-catalog-progress{ margin-top: 14px; }
.dashboard-catalog-course .dashboard-course-actions{ margin-top: 14px; display: grid; gap: 8px; }
.dashboard-catalog-course .learn-btn{ width: 100%; }

/* Le visuel de la carte « Prochaine action ». Meme rapport que les cartes de
   parcours, et il traverse le remplissage de la carte pour venir a fleur de
   bord, comme sur .lapp-card. Second marqueur de conflit non resolu : il avalait
   ce bloc, le visuel perdait donc son cadre et son debord. */
.dashboard-next-media{
  margin: calc(-1 * clamp(20px, 3vw, 26px)) calc(-1 * clamp(20px, 3vw, 26px)) 16px;
  overflow: hidden;
  border-radius: var(--learn-radius) var(--learn-radius) 0 0;
  background: var(--learn-white);
  box-shadow: inset 0 0 0 1px var(--learn-line);
}
.dashboard-next-media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.dashboard-next-card{ min-width: 0; padding: clamp(20px, 3vw, 26px); overflow: hidden; }