/* Généré par scripts/split_css_public.py depuis world-academy.css.
   NE PAS ÉDITER : modifiez world-academy.css puis régénérez. */
/* ═══════════════════════════════════════════════════════════
   World Academy — Premium E-Learning Design System v3
   Inspired by Coursera · Udemy · Linear
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Brand — Bleu ardoise apaisant (confort visuel) */
  --brand:         #4a6287;
  --brand-hover:   #3a4f6e;
  --brand-light:   #dde5f0;
  --brand-muted:   #eef2f7;
  --accent:        #5a7faa;
  --accent-warm:   #c4783a;
  --accent-gradient: linear-gradient(135deg, #4a6287 0%, #3d6a9e 100%);

  /* Legacy aliases (templates secondaires) */
  --primary:       var(--brand);
  --primary-dark:  var(--brand-hover);
  --primary-light: var(--brand-muted);

  /* Semantic */
  --success:       #059669;
  --success-bg:    #ecfdf5;
  --danger:        #dc2626;
  --warning:       #d97706;

  /* Neutrals */
  --ink:           #1a2332;
  --ink-secondary: #2d3748;
  --ink-muted:     #64748b;
  --ink-faint:     #94a3b8;
  --line:          #dde3ec;
  --line-soft:     #eef2f7;
  --bg:            #f3f5f8;
  --bg-subtle:     #e9edf3;
  --surface:       #ffffff;
  --surface-elevated: #ffffff;

  /* Layout */
  --nav-h:         72px;
  --sidebar-w:     348px;
  --radius-xs:     8px;
  --radius-sm:     12px;
  --radius:        16px;
  --radius-lg:     24px;
  --radius-xl:     32px;

  /* Shadows */
  --shadow-xs:     0 1px 2px rgba(12,18,34,.04);
  --shadow-sm:     0 2px 8px rgba(12,18,34,.06), 0 1px 2px rgba(12,18,34,.04);
  --shadow:        0 8px 30px rgba(58, 79, 110, .10), 0 2px 8px rgba(26, 35, 50, .04);
  --shadow-lg:     0 20px 50px rgba(58, 79, 110, .14), 0 8px 16px rgba(26, 35, 50, .06);
  --shadow-glow:   0 0 40px rgba(74, 98, 135, .18);

  /* Motion — douce & fluide */
  --ease:          cubic-bezier(.4, 0, .2, 1);
  --ease-soft:     cubic-bezier(.16, 1, .3, 1);
  --ease-out:      cubic-bezier(.22, 1, .36, 1);
  --ease-spring:   cubic-bezier(.34, 1.2, .64, 1);
  --duration-fast: .35s;
  --duration:      .55s;
  --duration-slow: 1s;
  --duration-slower: 1.25s;
  --transition:    var(--duration) var(--ease-soft);

  /* Typography */
  --font:          'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display:  'Outfit', 'DM Sans', sans-serif;
}[data-theme="dark"]{
  --ink:           #f1f5f9;
  --ink-secondary: #e2e8f0;
  --ink-muted:     #94a3b8;
  --ink-faint:     #64748b;
  --line:          #1e293b;
  --line-soft:     #0f172a;
  --bg:            #0c1222;
  --bg-subtle:     #111827;
  --surface:       #151d2e;
  --surface-elevated: #1a2332;
  --brand-light:   #2d3f5c;
  --brand-muted:   #1e2d42;
  --shadow-sm:     0 2px 8px rgba(0,0,0,.3);
  --shadow:        0 8px 30px rgba(0,0,0,.4);
}[data-theme="soft"]{
  --brand: #5a8fa8;
  --brand-hover: #3d7a96;
  --brand-light: #ddeef5;
  --brand-muted: #edf6fa;
  --bg: #e8f0f4;
  --bg-subtle: #dde8ee;
  --surface: #f4f8fa;
  --line: #c8d8e0;
}[data-theme="ocean"]{
  --brand: #1e88e5;
  --brand-hover: #1565c0;
  --brand-light: #bbdefb;
  --brand-muted: #e3f2fd;
  --bg: #e8f4fd;
  --bg-subtle: #dceefb;
  --surface: #ffffff;
  --line: #b3d4f5;
}[data-theme="blue"]{
  --brand: #4a9edd;
  --brand-hover: #2e80c0;
  --brand-light: #1a2d42;
  --brand-muted: #121212;
  --ink: #e8edf5;
  --ink-muted: #8a9bb5;
  --bg: #121212;
  --surface: #1e1e1e;
  --line: #2a2a2a;
}[data-theme="bluenuit"]{
  --brand: #4fc3f7;
  --brand-hover: #0288d1;
  --brand-light: #0d2137;
  --brand-muted: #071525;
  --ink: #e0f4ff;
  --ink-muted: #7ab8d4;
  --bg: #050f1a;
  --surface: #0b1e30;
  --line: #0d3252;
}[data-theme="glacier"]{
  --brand: #4a90b8;
  --brand-hover: #2d6e96;
  --brand-light: #d4eaf5;
  --brand-muted: #eaf5fb;
  --bg: #ddeef7;
  --bg-subtle: #d0e6f2;
  --surface: #f0f8fc;
  --line: #b8d8ec;
}@media (prefers-color-scheme: dark){html[data-theme="auto"]{
    --ink: #f1f5f9;
    --ink-muted: #94a3b8;
    --bg: #0c1222;
    --surface: #151d2e;
    --line: #1e293b;
    --brand-muted: #1e2d42;
  }}/* ── Reset & Base ── */
*,*::before,*::after{ box-sizing: border-box; margin: 0; padding: 0; }html{
  scroll-behavior: auto;
  font-size: 16px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}html[data-font-size="sm"]{ font-size: 14px; }html[data-font-size="md"]{ font-size: 16px; }html[data-font-size="lg"]{ font-size: 18px; }html[data-font-size="xl"]{ font-size: 20px; }html[data-density="compact"] .dashboard-content .card-body{ padding: 14px 16px; }html[data-density="compact"] .stats-grid{ gap: 10px; }html[data-contrast="high"]{
  --ink: #0a0a0a;
  --ink-muted: #333;
  --line: #1a1a1a;
}html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}/* Scroll actif,barre (ascenseur) masquée sur tout le site */
html,body,*{
  scrollbar-width: none;
  -ms-overflow-style: none;
}html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}/* Dashboard : ascenseur visible. Sans ça,le 3e article du panier
   (et le bas des pages longues) disparaissait sans aucun indice de scroll. */
html:has(body.dashboard-app),body.dashboard-app{
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 98, 135, .42) transparent;
}html:has(body.dashboard-app)::-webkit-scrollbar,body.dashboard-app::-webkit-scrollbar{
  width: 10px;
  height: 10px;
  display: block;
  background: transparent;
}html:has(body.dashboard-app)::-webkit-scrollbar-thumb,body.dashboard-app::-webkit-scrollbar-thumb{
  background: rgba(74, 98, 135, .4);
  border-radius: 10px;
}.landing-page{
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}.landing-page > main{
  overflow-x: clip;
  max-width: 100%;
}@media (prefers-reduced-motion: reduce){html,.landing-page{ scroll-behavior: auto; }}body{
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
}body.dashboard-app,body.dashboard-app .dashboard-content,body.dashboard-app .dashboard-main,body.dashboard-app .form-control,body.dashboard-app .form-select,body.dashboard-app .btn,body.dashboard-app .card,body.dashboard-app .rev-page,body.dashboard-app .ia-hub-catalog{
  font-family: var(--font);
}button,input,select,textarea{
  font-family: inherit;
}h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display);
  letter-spacing: -.025em;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink);
}a{ color: inherit; text-decoration: none; transition: color var(--transition); }img{ max-width: 100%; height: auto; display: block; }ul{ list-style: none; }.visually-hidden{
  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;
}::selection{ background: var(--brand-light); color: var(--brand); }.container{ width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }.container-narrow{ max-width: 960px; margin: 0 auto; padding: 0 28px; }/* ── Buttons ── */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-sm); font-weight: 600;
  font-size: .9rem; border: none; cursor: pointer; transition: all var(--transition);
  font-family: var(--font); white-space: nowrap; position: relative; overflow: hidden;
}.btn-primary{
  background: var(--accent-gradient); color: #fff;
  box-shadow: 0 4px 16px rgba(74, 98, 135,.35);
}.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(74, 98, 135,.45);
}.btn-primary:active{ transform: translateY(0); }.btn-outline{
  background: transparent; color: var(--brand);
  border: 2px solid var(--brand);
}.btn-outline:hover{ background: var(--brand-muted); }.btn-ghost{
  background: transparent; color: var(--ink-muted);
  border: 1px solid transparent;
}.btn-ghost:hover{ background: var(--line-soft); color: var(--ink); border-color: var(--line); }.btn-white{
  background: #fff; color: var(--brand);
  box-shadow: var(--shadow-sm);
}.btn-white:hover{ background: var(--brand-muted); transform: translateY(-1px); }.btn-dark{ background: var(--ink); color: #fff; }.btn-dark:hover{ background: var(--ink-secondary); }.btn-sm{ padding: 8px 16px; font-size: .8125rem; border-radius: var(--radius-xs); }.btn-lg{ padding: 16px 32px; font-size: 1rem; border-radius: var(--radius-sm); }.btn-block{ width: 100%; }.btn-icon{ width: 40px; height: 40px; padding: 0; border-radius: var(--radius-xs); }/* ── Cards ── */
.card{
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: all var(--transition);
}.card:hover{ box-shadow: var(--shadow); }.card-body{ padding: 24px; }.card-elevated{
  background: var(--surface);
  border: none;
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
}/* ── Badges ── */
.badge{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 100px; font-size: .6875rem;
  font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}.badge-primary{ background: var(--brand-light); color: var(--brand); }.badge-success{ background: var(--success-bg); color: var(--success); }.badge-danger{ background: #fee2e2; color: var(--danger); }.badge-accent{ background: #fef3c7; color: #b45309; }.badge-cert{ background: #fef3c7; color: #b45309; }.badge-free{ background: var(--success-bg); color: var(--success); }.badge-new{ background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; }/* ── Forms ── */
.form-group{ margin-bottom: 22px; }.form-label{
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--ink-secondary); margin-bottom: 8px;
}.form-control{
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); font-size: .9375rem; font-family: var(--font);
  background: var(--surface); color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}.form-select,select.form-control,select.form-select,.dashboard-content select:not([multiple]):not([size]),.dashboard-split select:not([multiple]):not([size]),.card select:not([multiple]):not([size]),form select:not([multiple]):not([size]){
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 13px 40px 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-family: var(--font);
  line-height: 1.3;
  color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}.form-select-sm,select.form-select-sm{
  padding: 8px 36px 8px 12px;
  font-size: .8125rem;
}.form-control:hover,.form-select:hover,select:hover{ border-color: var(--ink-faint); }.form-control:focus,.form-select:focus,select:focus{
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(74, 98, 135,.12);
}[data-theme="dark"] .form-select,[data-theme="dark"] select.form-control,[data-theme="dark"] .rev-page select,[data-theme="dark"] .dashboard-content select:not([multiple]):not([size]),[data-theme="dark"] form select:not([multiple]):not([size]){
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23cbd5e1' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
}.form-label-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}.form-label-row .form-label{ margin-bottom: 0; }.char-count.is-ok{ color: var(--success, #15803d); }.ia-prose{ line-height: 1.65; font-family: inherit; font-size: .9rem; color: var(--ink, #0f172a); }.ia-prose--plain .ia-chat-p,.ia-prose--plain .ia-chat-section,.ia-prose--plain .ia-chat-list,.ia-prose--plain .ia-chat-list li{
  font-family: inherit;
  font-weight: 400;
}.ia-prose .ia-chat-section,.ia-prose .ia-chat-h{
  font-size: .92rem;
  margin: 14px 0 6px;
  font-weight: 500;
  color: var(--ink, #0f172a);
  font-family: inherit;
}.ia-prose .ia-chat-p,.ia-chat-p{ margin: 0 0 8px; font-weight: 400; }.ia-prose .ia-chat-list,.ia-chat-list{ margin: 0 0 10px; padding-left: 1.25rem; }.ia-prose .ia-chat-list li{ margin-bottom: 4px; }.ia-prose strong,.ia-prose .ia-chat-strong,.ia-prose em,.ia-prose .ia-chat-em{ font-weight: inherit; font-style: normal; }.ia-prose .ia-chat-gap{ height: 6px; }.form-hint{ font-size: .75rem; color: var(--ink-muted); margin-top: 6px; }.form-error{ font-size: .75rem; color: var(--danger); margin-top: 6px; }/* ── Public Navbar ── */
.public-header{
  position: sticky;
  top: 0;
  z-index: 10050;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}[data-theme="dark"] .public-header,[data-theme="dark"] .site-header-wrap{
  background: rgba(12, 18, 34, 0.97);
  border-color: var(--line);
}@media (min-width: 993px){.public-header{
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(255, 255, 255, 0.92);
  }[data-theme="dark"] .public-header,[data-theme="dark"] .site-header-wrap{
    background: rgba(12, 18, 34, 0.92);
  }}.public-header.is-menu-open,.site-header-wrap.is-menu-open{
  z-index: 10052;
}.public-header__inner{
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--nav-h);
  width: 100%;
  min-width: 0;
}.navbar-brand{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
  flex-shrink: 0; color: var(--ink);
  min-width: 0;
}.brand-icon{
  width: 46px; height: 46px; border-radius: 0;
  background: transparent;
  display: grid; place-items: center;
  box-shadow: none;
  overflow: visible;
  flex-shrink: 0;
}.brand-icon img{
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
}.brand-text{ display: flex; flex-direction: column; line-height: 1.1; }.brand-text small{ font-size: .625rem; font-weight: 600; color: var(--ink-muted); letter-spacing: .12em; text-transform: uppercase; }.public-nav-menu{
  display: flex;
  align-items: center;
  gap: 2px;
}@media (min-width: 993px){.public-nav-menu,#navbarNav.public-nav-menu{
    flex: 1;
    justify-content: center;
    margin: 0;
    padding: 0 4px;
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    height: auto;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    min-width: 0;
  }.navbar-mobile-actions{
    display: none !important;
  }.navbar-action-desktop{
    display: inline-flex !important;
  }}.nav-link{
  padding: 8px 12px; border-radius: var(--radius-xs); font-size: .8125rem; font-weight: 500;
  color: var(--ink-muted); transition: all var(--transition);
  white-space: nowrap;
}.nav-link:hover,.nav-link.active{ color: var(--brand); background: var(--brand-muted); }.navbar-actions{ display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }@media (max-width: 1180px){.public-header .brand-text small{ display: none; }.public-header .nav-link{ padding: 8px 9px; }}.navbar-toggle{
  display: none; background: var(--line-soft); border: 1px solid var(--line);
  border-radius: var(--radius-xs); cursor: pointer; padding: 10px;
  color: var(--ink); font-size: 1.1rem;
}/* ── Footer ── */
.site-footer{
  background: linear-gradient(180deg, #0c1222 0%, #070b14 100%);
  color: #94a3b8; margin-top: auto; position: relative; overflow: hidden;
}.site-footer::before{
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 98, 135,.45), transparent);
}.footer-trust{
  position: relative;
  z-index: 2;
  display: block;
  visibility: visible;
  padding: 48px 0 42px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  min-height: 120px;
}.footer-trust-label{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 24px;
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.5;
}.footer-trust-label > i{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(74, 98, 135, 0.25);
  color: #9bb4d4;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s ease;
}.footer-trust-label strong{
  display: block;
  color: #f1f5f9;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}.footer-trust-sub{
  display: block;
  font-size: 0.8125rem;
  color: #64748b;
  font-weight: 400;
}.footer-logos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}.footer-logo-item{
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s ease,
    background 0.45s ease;
}.footer-logo-item:hover{
  transform: translateY(-5px) scale(1.02);
  background: #ffffff;
  border-color: rgba(155, 180, 212, 0.55);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}.footer-logo-item img{
  display: block;
  max-width: 100%;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}.footer-logo-item:hover img{
  transform: scale(1.04);
}@media (max-width: 768px){.footer-logos{
    grid-template-columns: repeat(2, 1fr);
  }}@media (max-width: 420px){.footer-logos{
    grid-template-columns: 1fr;
  }}.footer-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding: 72px 0 48px;
}.footer-brand .navbar-brand{ color: #fff; margin-bottom: 16px; }.footer-brand p{ font-size: .875rem; color: #64748b; line-height: 1.75; max-width: 320px; }.footer-col h4,.footer-col h3{
  color: #fff; font-size: .8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 20px;
}.footer-links li{ margin-bottom: 10px; }.footer-links a{ font-size: .875rem; color: #64748b; transition: all var(--transition); }.footer-links a:hover{ color: #9bb4d4; padding-left: 4px; }.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 24px 0; display: flex; justify-content: space-between;
  align-items: center; font-size: .8125rem; color: #475569; flex-wrap: wrap; gap: 12px;
}.footer-social{ display: flex; gap: 10px; }.footer-social a{
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  display: grid; place-items: center; color: #94a3b8; transition: all var(--transition);
}.footer-social a:hover{ background: var(--brand); color: #fff; border-color: var(--brand); }/* ── Dashboard Layout ── */
.dashboard-layout{
  display: flex; min-height: 100vh; background: var(--bg);
  position: relative;
}@keyframes slideInBar{
  from { height: 0; opacity: 0; }
  to { height: 22px; opacity: 1; }
}.sidebar{
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 900;
  display: flex; flex-direction: column;
  padding: 14px 12px 10px;
  transition: transform var(--duration-slow) var(--ease-soft),
              box-shadow var(--duration) var(--ease-soft);
  box-shadow: 2px 0 16px rgba(12, 18, 34, .05);
  overflow: hidden;
}.sidebar-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  padding: 0 2px 8px;
}.sidebar-brand{
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 16px; margin-bottom: 4px;
  flex-shrink: 0;
  text-decoration: none; color: var(--ink);
  border-radius: var(--radius-sm);
  transition: background .2s var(--ease-soft), color .2s var(--ease-soft);
}.sidebar-brand:hover{ background: var(--brand-muted); color: var(--brand); }.sidebar-brand .brand-icon{ flex-shrink: 0; width: 52px; height: 52px; }.sidebar-brand .brand-icon img{ width: 52px; height: 52px; }.sidebar-brand span{
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: -.02em; line-height: 1.15;
}.sidebar-nav{
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 8px;
}.sidebar-link,.sidebar-sublink{
  text-decoration: none;
  color: var(--ink-muted);
  transition: background .2s var(--ease-soft), color .2s var(--ease-soft);
}.sidebar-link{
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: .8125rem; font-weight: 500;
  position: relative; white-space: nowrap;
}.sidebar-link i{
  width: 20px; text-align: center; font-size: .9375rem;
  opacity: .88; flex-shrink: 0;
}.sidebar-link:hover,.sidebar-sublink:hover{
  background: var(--brand-muted); color: var(--brand);
}.sidebar-link.active{
  background: var(--brand-light); color: var(--brand); font-weight: 600;
}.sidebar-link.active::before{
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; background: var(--brand); border-radius: 0 4px 4px 0;
}/* ── Sidebar groups — accordéon CSS (fiable,sans JS sur la hauteur) ── */
.sidebar-group{ margin: 3px 0; }.sidebar-group-toggle{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 9px 12px; margin: 0;
  border: none; background: transparent;
  border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 600;
  color: var(--ink-secondary); text-align: left;
  -webkit-appearance: none; appearance: none;
  transition: background .2s var(--ease-soft), color .2s var(--ease-soft);
}.sidebar-group-toggle:hover{ background: var(--brand-muted); color: var(--brand); }.sidebar-group-label{ display: flex; align-items: center; gap: 10px; }.sidebar-group-label i{
  width: 20px; text-align: center; font-size: .875rem;
  color: var(--brand); opacity: .85;
}.sidebar-group-chevron{
  font-size: .625rem; opacity: .45;
  transition: transform .25s var(--ease-soft);
  flex-shrink: 0;
}.sidebar-group.is-open .sidebar-group-chevron{ transform: rotate(90deg); }.sidebar-group-panel{
  overflow: hidden;
  height: 0;
}.sidebar-group.is-open .sidebar-group-panel{
  height: auto;
}.sidebar-group-items{
  min-height: 0;
  padding: 4px 0 8px 14px;
  margin: 0 0 6px 22px;
  border-left: 2px solid var(--line);
}.sidebar-subsep{
  display: block;
  height: 1px;
  margin: 7px 8px 6px;
  background: var(--line, rgba(67, 89, 113, .14));
}.sidebar-group:not(.is-open) .sidebar-group-panel{
  pointer-events: none;
}.sidebar-sublink{
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin: 1px 0;
  font-size: .8125rem; font-weight: 500;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}.sidebar-sublink i{
  width: 16px; text-align: center; font-size: .8125rem;
  opacity: .78; flex-shrink: 0;
}.sidebar-sublink.active{
  background: var(--brand-light); color: var(--brand); font-weight: 600;
}/* ── Explorer tabs (style GitLab) ── */
.dash-tabs{
  display: flex; gap: 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px; max-width: 100%;
}.dash-tab{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; font-size: .8125rem; font-weight: 600;
  color: var(--ink-muted); text-decoration: none; white-space: nowrap;
  border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
  transition: color .2s, border-color .2s, background .2s;
}.dash-tab i{ font-size: .875rem; opacity: .85; }.dash-tab:hover{ color: var(--brand); }.dash-tab.is-active{
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 700;
  background: var(--brand-muted);
}.dash-tab.is-active i{ opacity: 1; }.cours-curriculum{
  position: sticky; top: 88px; display: flex; flex-direction: column;
  max-height: calc(100vh - 110px); padding: 0; overflow: hidden;
}.cours-curriculum-head{ padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }.cours-curriculum-title{
  display: block; font-size: .875rem; font-weight: 700; color: var(--ink);
  text-decoration: none; margin-bottom: 10px; line-height: 1.35;
}.cours-curriculum-title:hover{ color: var(--brand); }.cours-curriculum-progress{ display: flex; align-items: center; gap: 10px; }.cours-curriculum-progress .progress-bar{ flex: 1; height: 6px; }.cours-curriculum-pct{ font-size: .75rem; font-weight: 700; color: var(--brand); min-width: 36px; text-align: right; }.cours-curriculum-scroll{ flex: 1; overflow-y: auto; padding: 8px 0; }.cours-curriculum-chapter{
  padding: 10px 18px 4px; font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint);
}.cours-curriculum-item{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; font-size: .8125rem; color: var(--ink-muted);
  text-decoration: none; transition: background .15s, color .15s;
}.cours-curriculum-item:hover{ background: var(--brand-muted); color: var(--brand); }.cours-curriculum-item.is-active{ background: var(--brand-light); color: var(--brand); font-weight: 600; }.cours-curriculum-item.is-done{ color: var(--ink); }.cours-curriculum-item.is-locked{ opacity: .5; cursor: not-allowed; }.cours-curriculum-num{
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  background: var(--bg-subtle); display: grid; place-items: center;
  font-size: .6875rem; font-weight: 700;
}.cours-curriculum-item.is-active .cours-curriculum-num{ background: var(--brand); color: #fff; }.cours-curriculum-label{ flex: 1; min-width: 0; line-height: 1.3; }.cours-curriculum-check{ color: var(--success); font-size: .75rem; }.cours-curriculum-back{
  display: flex; align-items: center; gap: 8px; padding: 12px 18px;
  font-size: .8125rem; font-weight: 600; color: var(--ink-muted);
  border-top: 1px solid var(--line-soft); text-decoration: none;
}.cours-curriculum-back:hover{ color: var(--brand); background: var(--brand-muted); }.cours-curriculum-empty{ padding: 16px 18px; font-size: .8125rem; color: var(--ink-muted); }.lecteur-finish-msg{
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--brand, #4a6287);
}.lecteur-finish-msg.is-error{ color: #c4314b; }.sidebar-section{
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-faint);
  padding: 10px 12px 4px;
}.sidebar-footer{
  flex-shrink: 0;
  padding: 12px 6px 4px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}.sidebar-user{
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border-radius: var(--radius-sm); background: var(--bg-subtle);
  margin-bottom: 4px;
}.sidebar-user .avatar{ width: 36px; height: 36px; font-size: .75rem; }.sidebar-user-info{ flex: 1; min-width: 0; }.sidebar-user-name{ font-size: .8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }.sidebar-user-role{ font-size: .6875rem; color: var(--ink-muted); margin-top: 1px; }.sidebar-user-plan{ color: var(--brand); font-weight: 600; }.sidebar-link-logout{
  margin-top: 4px;
  color: var(--ink-muted) !important;
}.sidebar-logout-form{
  margin: 0;
  width: 100%;
}button.sidebar-link{
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}.sidebar-link-logout:hover{ color: var(--danger) !important; background: rgba(220, 38, 38, .08); }/* Overlay mobile sidebar */
.sidebar-overlay{
  position: fixed; inset: 0; z-index: 850;
  background: rgba(12, 18, 34, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease-soft),
              visibility var(--duration-slow) var(--ease-soft);
}.sidebar-overlay.is-open{
  opacity: 1; visibility: visible;
}.dashboard-app{ overflow-x: hidden; }.dashboard-main{
  margin-left: var(--sidebar-w); flex: 1;
  display: flex; flex-direction: column; min-height: 100dvh;
  min-width: 0; max-width: 100%;
  width: calc(100% - var(--sidebar-w));
  overflow-x: hidden;
  padding-top: var(--nav-h);
}.dashboard-topbar{
  height: var(--nav-h); background: rgba(255,255,255,.88);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 clamp(16px, 3vw, 32px); gap: clamp(10px, 2vw, 16px);
  position: fixed; top: 0; left: var(--sidebar-w); right: 0; z-index: 800;
  overflow: visible;
  transition: box-shadow var(--duration) var(--ease-soft);
}.dashboard-topbar.is-scrolled{
  box-shadow: var(--shadow-sm);
}[data-theme="dark"] .dashboard-topbar{ background: rgba(21,29,46,.92); }.topbar-search > i.fa-search{
  color: var(--ink-faint); font-size: .875rem; flex-shrink: 0;
}.page-heading{ flex: 1; min-width: 0; overflow: visible; }.page-heading h1{
  font-size: clamp(1rem, 2.5vw, 1.125rem); font-weight: 700; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}.page-heading p{
  font-size: .8125rem; color: var(--ink-muted); margin: 2px 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}.topbar-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}.topbar-page-help{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}.topbar-page-help .page-help-wrap{
  position: relative;
}/* Pas d'ancrage `position:absolute; right:0` ici.
   Le bouton d'aide est colle au bord droit de la topbar : une bulle large
   ancree sur son bord droit demarrait a x = -46 px sur un ecran de 390 px,donc le titre et le debut de chaque ligne sortaient de l'ecran. La bulle
   reste en `position:fixed` (regle de base) et c'est initPageHelp qui la
   place en la bornant aux deux bords de la fenetre. */
.dashboard-content{
  padding: clamp(20px, 3.5vw, 36px);
  flex: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-anchor: none;
}.dashboard-content:not(.page-transition-stagger){
  animation: pageEnter .52s var(--ease-soft) both;
}/* ── Explorer sub-nav (legacy — use .dash-tabs) ── */
.explorer-subnav{ display: none; }.qcm-q{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface, #fff);
  padding: 14px;
}.qcm-q-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}.qcm-q-num{ font-weight: 800; font-size: .875rem; color: var(--brand); }.qcm-q-head-actions{ display: flex; align-items: center; gap: 8px; }.qcm-pts-label{
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; color: var(--ink-muted); margin: 0; font-weight: 600;
}.qcm-pts-label .form-control{ width: 72px; padding: 6px 8px; }.qcm-opt-hint{ font-size: .75rem; color: var(--ink-muted); margin: 10px 0 8px; }.qcm-opt{ display: flex; align-items: center; gap: 8px; }.qcm-opt input[type="radio"]{ flex: 0 0 auto; accent-color: var(--brand); width: 18px; height: 18px; }.qcm-opt-letter{
  flex: 0 0 28px; height: 28px; border-radius: 8px;
  background: var(--brand-muted); color: var(--brand);
  display: grid; place-items: center; font-weight: 800; font-size: .75rem;
}.qcm-opt .form-control{ flex: 1; min-width: 0; }/* ── Native dialogs (modales World Academy) — centrées viewport ── */
.wa-dialog,dialog.wa-dialog{
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 560px;
  width: min(560px, calc(100vw - 32px));
  max-height: min(85vh, 720px);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
  margin: auto;
  position: fixed;
  inset: 0;
  height: fit-content;
  overflow: hidden;
}.wa-dialog::backdrop{ background: rgba(12,18,34,.45); backdrop-filter: blur(4px); }.wa-dialog-inner{ display: flex; flex-direction: column; max-height: 85vh; }.wa-dialog-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--line-soft);
}.wa-dialog-header h3{ font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }.wa-dialog-body{ padding: 20px 22px; overflow-y: auto; flex: 1; }.wa-dialog-body .form-group{ margin-bottom: 14px; }.wa-dialog-body input,.wa-dialog-body select,.wa-dialog-body textarea{
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-xs); font-family: var(--font); font-size: .875rem;
  background: var(--surface); color: var(--ink);
}.wa-dialog-footer{
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 22px; border-top: 1px solid var(--line-soft);
}.dashboard-content:has(.lecteur-page){
  padding-top: clamp(12px, 2vw, 20px);
}.lecteur-cinema-stage .lecteur-video-wrap{
  margin-bottom: 0;
  width: 100%;
  border-radius: 0;
}.lecteur-cinema-stage .lecteur-video-wrap.lecteur-embed-wrap{
  position: relative;
  padding-bottom: 0;
  height: clamp(280px, 56vh, 640px);
  min-height: clamp(280px, 56vh, 640px);
  max-height: 72vh;
  background: #000;
}.lecteur-cinema-stage .lecteur-video-wrap.lecteur-embed-wrap iframe,.lecteur-cinema-stage .lecteur-video-wrap.lecteur-embed-wrap .lecteur-pdf-frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}.lecteur-cinema-stage .lecteur-video-wrap:not(.lecteur-embed-wrap) video{
  width: 100%;
  height: clamp(280px, 56vh, 640px);
  max-height: 72vh;
  object-fit: contain;
  display: block;
  background: #000;
}.lecteur-cinema-stage .lecteur-pdf-wrap{
  height: clamp(320px, 58vh, 660px);
  min-height: clamp(320px, 58vh, 660px);
  padding-bottom: 0;
}.lecteur-cinema-stage .lecteur-audio-wrap{
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 32px;
}.lecteur-cinema-stage:fullscreen .lecteur-video-wrap.lecteur-embed-wrap{
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  min-height: 100vh;
}.lecteur-details-head--brand .badge{
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
}.lecteur-details-head--brand .lecteur-details-actions .btn,.lecteur-details-head--brand .lecteur-details-actions .ia-feature-btn{
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}.badge-lang{
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: .68rem;
}.course-card-lang{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--ink-muted, #64748b);
}.btn-lecon-nav-finish.is-done,#btnTerminerLecon.is-done{
  opacity: .85;
  cursor: default;
}.lecteur-cert-modal{
  border: none;
  border-radius: 18px;
  padding: 0;
  max-width: min(420px, 92vw);
  width: min(420px, 92vw);
  background: transparent;
  margin: auto;
  position: fixed;
  inset: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}.lecteur-cert-modal[open]{
  display: block;
}.lecteur-cert-modal::backdrop{
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
}.lecteur-cert-modal__card{
  background: var(--surface, #fff);
  border-radius: 18px;
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}.lecteur-cert-modal__icon{
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand, #4a6287) 16%, transparent);
  color: var(--brand, #4a6287);
  font-size: 1.35rem;
}.lecteur-cert-modal__title{
  margin: 0 0 8px;
  font-size: 1.2rem;
}.lecteur-cert-modal__text{
  margin: 0 0 18px;
  color: var(--ink-muted);
  font-size: .925rem;
}.lecteur-cert-modal__actions{
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}.lecteur-speed-label .form-control{
  width: auto;
  display: inline-block;
}.lecteur-signets-list .btn{
  width: 100%;
  text-align: left;
}.lecteur-notes-card .btn{
  margin-top: 10px;
}@media (max-width: 960px){.lecteur-cinema-stage .lecteur-video-wrap.lecteur-embed-wrap{
    min-height: clamp(220px, 52vw, 420px);
    height: clamp(220px, 56vw, 440px);
  }.lecteur-cinema-stage .lecteur-video-wrap:not(.lecteur-embed-wrap) video{
    height: clamp(220px, 56vw, 440px);
  }}.lecteur-video-wrap{
  position: relative; background: #0c1222; border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: 16px;
}.lecteur-video-wrap video{ width: 100%; max-height: 70vh; display: block; }.lecteur-video-wrap.lecteur-embed-wrap{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  background: #0f172a;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}.lecteur-video-wrap.lecteur-embed-wrap iframe,.lecteur-video-wrap.lecteur-embed-wrap .lecteur-pdf-frame{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}.lecteur-video-wrap.lecteur-pdf-wrap{
  min-height: 480px;
  padding-bottom: 75%;
}.lecteur-curriculum-item.is-current{ background: var(--brand-light); color: var(--brand); font-weight: 600; }.lecteur-curriculum-item.is-locked{ opacity: .5; pointer-events: none; }/* ── KPI unifiés (dashboard apprenant,instructeur,admin) ── */
.stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}.stats-grid.is-compact,.adm-kpi-row.is-compact{ gap: 12px; margin-bottom: 20px; }@media (min-width: 1400px){.stats-grid:not(.is-compact),.adm-kpi-row:not(.is-compact){ grid-template-columns: repeat(4, minmax(0, 1fr)); }}.stat-card{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 16px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}.stat-card::before,.stat-card::after{
  display: none !important;
  content: none !important;
}.stat-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 16px 32px rgba(15, 23, 42, 0.08);
  border-color: color-mix(in srgb, var(--kpi-accent, var(--brand)) 24%, var(--line));
}.stat-card .stat-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-bottom: 0;
  background: var(--kpi-icon-bg, var(--brand-muted));
  color: var(--kpi-icon-fg, var(--brand));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}.stat-card .stat-label{
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0;
  order: 0;
}.stat-card .stat-value{
  font-family: "Outfit", var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}.stat-card .stat-icon[style*="background"]{ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }/* Tuiles .scoro-kpi (accueil,facturation…) — toujours chargées,sans dépendre de admin-fin-report.css */
.scoro-kpi.scoro-kpi--tile{
  --kpi-theme: var(--brand, var(--sneat-primary, #696cff));
  --kpi-theme-soft: var(--brand-muted, var(--sneat-primary-soft, rgba(105, 108, 255, 0.12)));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  text-align: left;
  padding: 1.15rem 1.2rem 1rem;
  min-height: 7.5rem;
  min-width: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(67, 89, 113, 0.1));
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}.scoro-kpi--tile:hover,.scoro-kpi--tile:focus-visible{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--kpi-theme) 35%, var(--line, #e2e8f0));
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  outline: none;
}.scoro-kpi--tile .scoro-kpi__top{
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}.scoro-kpi--tile .scoro-kpi__icon{
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--kpi-theme);
  background: var(--kpi-theme-soft);
}.scoro-kpi--tile .scoro-kpi__title{
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-muted, var(--text-muted, #64748b));
}.scoro-kpi--tile .scoro-kpi__value-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
  margin-top: auto;
  flex-wrap: wrap;
}.scoro-kpi--tile .scoro-kpi__value{
  font-family: "Outfit", "DM Sans", system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink, var(--sneat-heading, #1e293b));
}.scoro-kpi--tile .scoro-kpi__growth{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}.scoro-kpi--tile .scoro-kpi__growth.is-up{
  color: var(--success, #16a34a);
  background: rgba(34, 197, 94, 0.12);
}.scoro-kpi--tile .scoro-kpi__growth.is-down{
  color: var(--danger, #dc2626);
  background: rgba(239, 68, 68, 0.1);
}.scoro-kpi--tile .scoro-kpi__meta-row{
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: auto;
  padding-top: 0.35rem;
}.scoro-kpi--tile .scoro-kpi__hint{
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-muted, #94a3b8);
}.chart-drill-crumb.is-active{
  background: var(--brand-muted);
  border-color: var(--brand-light);
}.chart-drill-sep{ color: var(--ink-faint); font-size: .75rem; }.finances-info-chip.is-ok{ border-color: var(--success); color: var(--success); }.finances-info-chip.is-ok i{ color: var(--success); }.finances-info-chip.is-warn{ border-color: #f59e0b; color: #b45309; }.instructeur-hero-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  margin-top: 20px;
}@media (max-width: 640px){.instructeur-hero-stats{ grid-template-columns: repeat(3, 1fr); gap: 8px; }}.stat-card.is-wallet-highlight{
  border-color: var(--brand);
  background: linear-gradient(145deg, var(--surface) 0%, var(--brand-muted) 100%);
}.stat-card.is-wallet-highlight .stat-value{ color: var(--brand); }/* ── Course Cards (Udemy-style) ── */
.course-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}.course-card{
  background: var(--surface); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-slow) var(--ease-soft),
              box-shadow var(--duration-slow) var(--ease-soft),
              border-color var(--duration) var(--ease-soft);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  height: 100%;
}.course-card:hover{
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: transparent;
}.course-card-img{
  aspect-ratio: 16/10; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #ccfbf1 0%, #e0f2fe 100%);
}.course-card-img img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-soft);
}.course-card:hover .course-card-img img{ transform: scale(1.04); }.course-card-img .img-placeholder{
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 3rem; color: var(--brand); opacity: .4;
}.course-card-badges{
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: flex-start;
  z-index: 2;
}.course-card-badges-left{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }.course-card-img-link{ display: block; width: 100%; height: 100%; }.badge-free{ background: var(--success); color: #fff; }.badge-price{ background: rgba(12,18,34,.82); color: #fff; backdrop-filter: blur(6px); }.badge-domain{ background: rgba(99,102,241,.92); color: #fff; backdrop-filter: blur(6px); }.btn-panier-icon{
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}.btn-panier-icon.is-in-panier,a.btn-panier-icon.is-in-panier{
  border-color: var(--brand);
  background: var(--brand-muted);
  color: var(--brand);
}.btn-panier-icon.is-in-panier:hover,a.btn-panier-icon.is-in-panier:hover{
  background: var(--brand-light);
  color: var(--brand);
}.btn-favori-sm{
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.92); color: #94a3b8;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform .25s var(--ease-soft), color .25s, background .25s;
}.btn-favori-sm:hover{ transform: scale(1.08); color: #f59e0b; }.btn-favori-sm.is-favori{ color: #f59e0b; }.btn-favori-sm.is-favori i{ animation: favoriPop .35s var(--ease-soft); }@keyframes favoriPop{
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}.course-price .price-owned{ font-size: .875rem; font-weight: 600; color: var(--success); }.rating-count{ font-weight: 400; color: var(--ink-faint); font-size: .75rem; }.course-card-progress-label{ font-size: .75rem; color: var(--ink-muted); margin-top: 6px; }[data-domain-id]{
  transition: opacity .35s var(--ease-soft), transform .35s var(--ease-soft);
}[data-domain-id].is-filtered-out{
  display: none;
}.course-card-play{
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(12,18,34,.3); opacity: 0; transition: opacity var(--transition);
}.course-card:hover .course-card-play{ opacity: 1; }.course-card-play span{
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  color: var(--brand); font-size: 1rem;
  box-shadow: var(--shadow-lg);
}.course-card-body{
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}.course-card-instructor{
  display: flex; align-items: center; gap: 8px;
  font-size: .75rem; color: var(--ink-muted); margin-bottom: 8px;
}.course-card-instructor .mini-avatar{
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-light); color: var(--brand);
  display: grid; place-items: center; font-size: .625rem; font-weight: 700;
}.course-card-title{
  font-size: 1rem; font-weight: 700; font-family: var(--font-display);
  margin-bottom: 8px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}.course-card-meta{
  font-size: .8125rem; color: var(--ink-muted);
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px;
}.course-card-meta .rating{ color: #b45309; font-weight: 600; }.course-card-meta .rating i{ font-size: .75rem; }.course-card-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: nowrap;
}.course-card-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}.course-card-actions .btn{
  white-space: nowrap;
  flex-shrink: 0;
}.course-price{
  font-weight: 800;
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
}.course-price.free{ color: var(--success); }.course-price .old{
  text-decoration: line-through; color: var(--ink-faint);
  font-size: .875rem; font-weight: 500; margin-right: 6px;
}@media (max-width: 380px){.course-card-footer{
    flex-wrap: wrap;
    row-gap: 8px;
  }.course-card-actions{
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }}.progress-bar{
  height: 5px; background: var(--line-soft); border-radius: 100px; overflow: hidden;
}.progress-fill{
  height: 100%; background: var(--accent-gradient); border-radius: 100px;
  transition: width .6s var(--ease);
}.hero .container{
  position: relative; display: grid;
  grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center;
}.landing-page--minimal .hero--home .container{
  width: 100%;
}@media (max-width: 900px){.hero .container{
    grid-template-columns: 1fr;
    gap: 40px;
  }}@keyframes pulse{
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.2); }
}.hero-actions .btn-outline{
  border-color: rgba(255,255,255,.25); color: #fff;
}.hero-actions .btn-outline:hover{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }.hero-trust{
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}.hero-trust-item{ display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: rgba(255,255,255,.82); }.hero-trust-item i{ color: #34d399; }/* ── Sections ── */
.section{ padding: 96px 0; }.section-alt{ background: var(--surface); }.section-header{ text-align: center; max-width: 640px; margin: 0 auto 56px; }.section-label{
  display: inline-block; font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--brand); margin-bottom: 12px;
}.section-header h2{
  font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; margin-bottom: 16px;
}.section-header p{ color: var(--ink-muted); font-size: 1.0625rem; line-height: 1.7; }.section-dark .section-header h2{ color: #fff; }.section-dark .section-header p{ color: #94a3b8; }/* ── Auth ── */
.auth-layout{ min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }.auth-brand{
  background: linear-gradient(160deg, #1a2332 0%, #2d3f5c 50%, #3d5a80 100%);
  color: #fff; padding: 56px; display: flex; flex-direction: column;
  justify-content: flex-start; position: relative; overflow: hidden;
}.auth-brand::before{
  content: ''; position: absolute; width: 500px; height: 500px;
  border-radius: 50%; background: radial-gradient(circle, rgba(74, 98, 135,.25), transparent 70%);
  top: -200px; right: -200px;
}.auth-brand-content{ position: relative; z-index: 1; margin-top: 52px; }.auth-brand .navbar-brand{ margin-bottom: 8px; color: #fff; }.auth-brand .brand-text{ color: #fff; }.auth-brand .brand-text small{ color: rgba(255,255,255,.75); }.auth-brand .brand-icon,.auth-brand .brand-icon img{ width: 96px; height: 96px; }.auth-brand h1{ font-size: 2.25rem; font-weight: 800; color: #fff; margin-bottom: 16px; line-height: 1.2; }.auth-brand p{ color: #94a3b8; line-height: 1.75; font-size: 1rem; }.auth-features{ display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }.auth-feature{
  display: flex; align-items: center; gap: 14px;
  font-size: .9375rem; color: #cbd5e1;
}.auth-feature i{
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  display: grid; place-items: center; color: #9bb4d4; flex-shrink: 0;
}.auth-form-panel{
  display: flex; align-items: center; justify-content: center;
  padding: 48px; background: var(--bg);
}.auth-form-box{
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}.auth-page .auth-form-panel .auth-form-box{
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 36px 32px 40px;
  box-sizing: border-box;
}.auth-form-box h2{ font-size: 1.875rem; font-weight: 800; margin-bottom: 8px; }.auth-form-box .subtitle{ color: var(--ink-muted); margin-bottom: 32px; font-size: .9375rem; }.auth-form-box .subtitle a{ color: var(--brand); font-weight: 600; }/* Auth — mobile & formulaires */
.auth-page{
  background: var(--bg);
  min-height: 100dvh;
}.auth-mobile-header{
  display: none;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}.auth-brand-footer{
  font-size: 0.8rem;
  color: #475569;
  position: relative;
  margin: auto 0 0;
  padding-top: 40px;
}.auth-page .auth-form-box h2{
  color: var(--ink);
  text-align: center;
}.auth-page .auth-form-box .subtitle{
  text-align: center;
}.auth-page .auth-form-box .form-group{ margin-bottom: 18px; }.auth-page .auth-form-box .form-label{
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}.auth-page .auth-form-box .form-control{
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  box-sizing: border-box;
}.auth-page .auth-form-box .form-control:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-muted);
}.auth-page .auth-form-box .btn-block{ width: 100%; }.auth-page .auth-form-box .btn-lg{ min-height: 48px; }.auth-page .auth-form-box .form-error{ margin-top: 6px; font-size: 0.75rem; color: var(--danger); }.auth-page .auth-forgot{ text-align: right; margin: -6px 0 18px; }.auth-page .auth-forgot a{ font-size: 0.85rem; color: var(--brand); font-weight: 600; }.auth-form-row--2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}.auth-notice{
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--brand-muted);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}.auth-notice i{ color: var(--brand); margin-right: 6px; }.auth-page .form-control.is-invalid{
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.12);
}.auth-role-options{
  display: flex;
  flex-direction: column;
  gap: 10px;
}.auth-role-option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.875rem;
  background: var(--surface);
  transition: border-color var(--transition), background var(--transition);
}.auth-role-option:has(input:checked){
  border-color: var(--brand);
  background: var(--brand-muted);
}.auth-role-option input{ flex-shrink: 0; }.welcome-banner__body{ flex: 1 1 280px; min-width: 0; position: relative; z-index: 1; }.welcome-banner__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}.welcome-banner--plans .welcome-banner__actions .btn{
  white-space: nowrap;
}.hero-trust.hero-trust--list,ul.hero-trust{
  list-style: none;
  margin: 0;
  padding: 0;
}tr.row-alert{
  background: rgba(245, 158, 11, 0.06);
}.entreprise-swatch.is-selected{
  border-color: var(--ink, #0f172a);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--swatch, #4a6287);
}@media (max-width: 1024px){.auth-page{
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }.auth-mobile-header{
    display: block;
    position: sticky;
    top: 0;
    z-index: 20;
  }.auth-page .auth-layout{
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    grid-template-columns: unset;
  }.auth-page .auth-brand{ display: none; }.auth-page .auth-form-panel{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px max(28px, env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    width: 100%;
    box-sizing: border-box;
  }.auth-page .auth-form-panel .auth-form-box{
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 28px 22px 32px;
    border-radius: 24px;
    box-sizing: border-box;
  }.auth-page .social-auth{
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line-soft);
  }.auth-form-row--2{ grid-template-columns: 1fr; }.auth-role-options{ flex-direction: column; gap: 10px; }.auth-role-option{ flex: 1 1 auto; width: 100%; }}@media (max-width: 768px){.welcome-banner__actions{
    width: 100%;
    justify-content: center;
  }.welcome-banner__actions .btn{
    flex: 1 1 auto;
    min-width: min(100%, 160px);
    justify-content: center;
  }.hero--home .hero-trust{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }.hero--home .hero-trust-item{
    justify-content: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }.entreprise-equipes-split .entreprise-assign-form .btn{
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow-wrap: break-word;
  }}@media (max-width: 480px){.auth-page .auth-form-panel{ padding: 16px 14px max(24px, env(safe-area-inset-bottom)); }.auth-page .auth-form-panel .auth-form-box{
    padding: 24px 18px 28px;
    border-radius: 20px;
  }.auth-page .auth-form-box h2{ font-size: 1.35rem; }.welcome-banner--plans{ padding: 20px 16px; }.welcome-banner__actions{ flex-direction: column; }.welcome-banner__actions .btn{ width: 100%; }}/* ── Pricing ── */
.pricing-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px; max-width: 1000px; margin: 0 auto;
}.pricing-card{
  background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--radius-xl); padding: 36px 32px;
  text-align: center; transition: all .35s var(--ease); position: relative;
}.pricing-card:hover{ box-shadow: var(--shadow); }.pricing-card.featured{
  border-color: var(--brand); box-shadow: var(--shadow-lg);
}.pricing-card.featured:not(.platform-offer-card)::before{
  content: 'Populaire'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent-gradient); color: #fff;
  padding: 4px 16px; border-radius: 100px; font-size: .6875rem; font-weight: 700;
}.pricing-card h3{ font-size: 1.125rem; margin-bottom: 8px; }.pricing-card .price{
  font-size: 3rem; font-weight: 800; font-family: var(--font-display);
  color: var(--ink); margin: 20px 0;
}.pricing-card.platform-offer-card .price{
  font-size: 1.55rem; margin: 0 0 4px;
}.pricing-card .price span{ font-size: 1rem; color: var(--ink-muted); font-weight: 500; }.pricing-features{ text-align: left; margin: 28px 0; }.pricing-features li{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; font-size: .9375rem; color: var(--ink-muted);
  border-bottom: 1px solid var(--line-soft);
}.pricing-features li:last-child{ border-bottom: none; }.pricing-features li i{ color: var(--success); font-size: .875rem; }.pricing-grid-compact{
  grid-template-columns: repeat(3, 1fr);
  max-width: 960px;
  gap: 20px;
}.pricing-grid-compact .pricing-card{
  padding: 28px 20px;
  text-align: center;
}.pricing-grid-compact .pricing-card .price{
  font-size: 2.25rem;
  margin: 12px 0 8px;
}.pricing-grid-compact .pricing-card h3{
  font-size: 1.125rem;
  margin-bottom: 0;
}.pricing-card-icon{
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--brand-muted); color: var(--brand);
  display: grid; place-items: center; font-size: 1.125rem;
  margin: 0 auto 12px;
}.pricing-grid-compact .pricing-card.featured .pricing-card-icon{
  background: var(--accent-gradient); color: #fff;
}.pricing-grid-compact .pricing-features{
  margin: 16px 0;
}.pricing-grid-compact .pricing-features li{
  padding: 6px 0; font-size: .8125rem;
}.pricing-save{
  font-size: .8125rem; color: var(--success); margin: 0 0 8px;
}.pricing-meta{
  font-size: .8125rem; color: var(--ink-muted); margin: 0 0 8px;
}.domain-pill{
  padding: 10px 20px; border-radius: 100px; font-size: .8125rem; font-weight: 600;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-muted);
  cursor: pointer; transition: all var(--transition);
  text-decoration: none; display: inline-block;
}.domain-pill:hover{ border-color: var(--brand); color: var(--brand); }.domain-pill.active{
  background: var(--accent-gradient); color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px rgba(74, 98, 135,.3);
}.cta-banner .container{ position: relative; max-width: 640px; }/* ── Alerts ── */
.alert{
  padding: 14px 18px; border-radius: var(--radius-sm); font-size: .875rem;
  margin-bottom: 16px; display: flex; align-items: center; gap: 12px;
  border: 1px solid transparent;
}.alert-success{ background: var(--success-bg); color: #065f46; border-color: #a7f3d0; }.alert-error{ background: #fef2f2; color: #991b1b; border-color: #fecaca; }.alert-info{ background: var(--brand-muted); color: var(--brand); border-color: var(--brand-light); }.alert-warning{
  background: #fffbeb;
  color: #92400e;
  border-color: #fcd34d;
}/* ── Verrouillage offre (Calendrier,Lives,etc.) ── */
.feature-usage-lock{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  margin-bottom: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid #fcd34d;
  background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
  box-shadow: var(--shadow-xs);
  overflow: visible;
  position: relative;
  z-index: 2;
}.feature-usage-lock__icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fef3c7;
  color: #d97706;
  display: grid;
  place-items: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}.feature-usage-lock__body{
  flex: 1;
  min-width: 0;
}.feature-usage-lock__body strong{
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 6px;
}.feature-usage-lock__head{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}.feature-usage-lock__head strong{
  margin-bottom: 0;
}.feature-usage-lock .feature-lock-help .page-help-btn{
  width: 26px;
  height: 26px;
  font-size: 0.8rem;
  color: #b45309;
  border-color: #fcd34d;
  background: #fffbeb;
}.feature-usage-lock .feature-lock-help .page-help-btn:hover,.feature-usage-lock .feature-lock-help:focus-within .page-help-btn{
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}/* Bulle ancrée au bouton (pas fixed 0,0) — visible au survol / focus / clic */
.feature-lock-help{
  position: relative;
  z-index: 6;
}.feature-lock-help .page-help-tooltip{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  width: min(320px, calc(100vw - 48px));
  transform: translateY(-4px);
  z-index: 10080;
}.feature-lock-help:hover .page-help-tooltip,.feature-lock-help:focus-within .page-help-tooltip,.feature-lock-help .page-help-tooltip.is-open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}@media (max-width: 768px){/* Sur mobile le hover global est désactivé : forcer l'ouverture via .is-open */
  .feature-lock-help:hover .page-help-tooltip,.feature-lock-help:focus-within .page-help-tooltip{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }.feature-lock-help .page-help-tooltip.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }}.feature-usage-lock__body p{
  margin: 0;
  font-size: .875rem;
  color: #78350f;
  line-height: 1.55;
}.feature-usage-lock__quota{
  margin-top: 8px !important;
  font-size: .8125rem !important;
  color: #a16207 !important;
}.feature-usage-lock .btn{
  margin-top: 12px;
}.feature-usage-quota{
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--brand-light);
  background: var(--brand-muted);
  font-size: .875rem;
  color: var(--brand);
}.avatar{
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-gradient); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .8125rem;
  overflow: hidden; flex-shrink: 0;
  border: 2px solid var(--surface); box-shadow: var(--shadow-xs);
}.avatar img{ width: 100%; height: 100%; object-fit: cover; }/* ── Empty state ── */
.empty-state{ text-align: center; padding: 64px 32px; color: var(--ink-muted); }.empty-state i{ font-size: 3.5rem; color: var(--line); margin-bottom: 20px; display: block; opacity: .6; }.empty-state h3,.empty-state h2{ font-size: 1.125rem; margin-bottom: 8px; color: var(--ink); }.empty-state p{ font-size: .9375rem; max-width: 360px; margin: 0 auto 24px; }/* ── Zone message (aucun résultat,info page) ── */
.content-message-zone{
  margin-bottom: 24px;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--line);
  background: var(--bg-subtle);
  text-align: center;
}.content-message-zone-inner{
  max-width: 480px;
  margin: 0 auto;
}.content-message-zone-icon{
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--brand);
  font-size: 1.25rem;
  border: 1px solid var(--line-soft);
}.content-message-zone-title{
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}.content-message-zone-text{
  font-size: .875rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.55;
}.content-message-zone-actions{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}/* ── Tables ── */
.table-wrap{
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs);
}.data-table{ width: 100%; border-collapse: collapse; font-size: .875rem; }.data-table thead th{
  text-align: left; padding: 14px 20px; font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted);
  background: var(--bg-subtle); border-bottom: 1px solid var(--line);
}.data-table tbody td{
  padding: 16px 20px; border-bottom: 1px solid var(--line-soft);
  color: var(--ink); vertical-align: middle;
}.data-table tbody tr:last-child td{ border-bottom: none; }.data-table tbody tr:hover{ background: var(--brand-muted); }.tab-link.active{
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow-xs);
  font-weight: 700;
}.tab-panel:not(.active){ display: none; }.tab-panel.active{
  display: block;
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  animation: softFadeUp .35s var(--ease-soft) both;
}.tab-panels > .tab-panel:not(.active){
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px);
  animation: none;
}.tab-panels > .tab-panel.active{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
}/* ── Notifications ── */
.notif-wrap{ position: relative; }.topbar-panier-btn{
  position: relative;
  width: 40px; height: 40px; border-radius: var(--radius-xs);
  border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; color: var(--ink-muted);
  text-decoration: none; transition: all var(--transition);
}.topbar-panier-btn:hover{
  border-color: var(--brand); color: var(--brand); background: var(--brand-muted);
}.topbar-panier-badge{
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px;
  background: var(--brand); color: #fff; font-size: .625rem; font-weight: 700;
  border-radius: 100px; display: grid; place-items: center;
  padding: 0 5px; border: 2px solid var(--surface);
}.topbar-panier-badge[hidden]{ display: none !important; }.notif-btn{
  width: 40px; height: 40px; border-radius: var(--radius-xs);
  border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; color: var(--ink-muted);
  cursor: pointer; transition: all var(--transition);
}.notif-btn:hover{ border-color: var(--brand); color: var(--brand); background: var(--brand-muted); }.notif-badge{
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px;
  background: var(--danger); color: #fff; font-size: .625rem; font-weight: 700;
  border-radius: 100px; display: none; align-items: center; justify-content: center;
  padding: 0 5px; border: 2px solid var(--surface);
}.notif-dropdown{
  position: absolute; top: calc(100% + 10px); right: 0; width: 320px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  z-index: 2000; overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .2s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.22,1,.36,1), visibility .2s;
}.notif-dropdown.show{
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  animation: none;
}.notif-dropdown-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  font-size: .8125rem; font-weight: 700; color: var(--ink-muted);
}.notif-mark-all{
  font-size: .7rem;
  padding: 4px 8px;
}.notif-list{ max-height: 340px; overflow-y: auto; }.notif-empty{ padding: 32px; text-align: center; color: var(--ink-muted); font-size: .8125rem; }.notif-dropdown-footer{
  display: block; padding: 12px 18px; text-align: center;
  font-size: .8125rem; font-weight: 600; color: var(--brand);
  border-top: 1px solid var(--line); background: var(--bg-subtle);
}.notif-dropdown-footer:hover{ background: var(--brand-muted); }.chat-search-row .form-control{ flex: 1; min-width: 0; }.conv-item.active{ background: var(--brand-muted); }/* ── Dashboard welcome banner ── */
.welcome-banner{
  background: var(--accent-gradient); border-radius: var(--radius-xl);
  padding: 28px 32px; color: #fff; margin-bottom: 32px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; position: relative; overflow: hidden;
}.welcome-banner::before{
  content: ''; position: absolute; width: 200px; height: 200px;
  border-radius: 50%; background: rgba(255,255,255,.1);
  right: -50px; top: -50px; z-index: 0; pointer-events: none;
}.welcome-banner h1,.welcome-banner h2{ font-size: 1.5rem; color: #fff; margin-bottom: 6px; position: relative; z-index: 1; }.welcome-banner p{ color: rgba(255,255,255,.85); font-size: .9375rem; position: relative; z-index: 1; }.welcome-banner a:not(.btn){ color: #fff; text-decoration: underline; text-underline-offset: 3px; }.welcome-banner .btn{ text-decoration: none; }.welcome-banner .btn-white{ color: var(--brand); }.welcome-banner .ia-feature-inline{ display: inline-flex; position: relative; z-index: 2; }/* ── Dashboard split layout ── */
.dashboard-split{
  display: grid; grid-template-columns: minmax(0, 1fr) min(340px, 32%);
  gap: clamp(20px, 3vw, 32px); align-items: start;
}.lives-replay-form .form-control{ flex: 1; min-width: 180px; }.wa-dialog.wa-dialog--wide,dialog.wa-dialog.wa-dialog--wide{
  max-width: 640px;
  width: min(640px, calc(100vw - 32px));
}@keyframes pulseDot{ 0%, 100% { opacity: 1; } 50% { opacity: .4; } }.section-toolbar{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 16px;
}.section-toolbar h2{ font-size: 1.125rem; font-weight: 700; }.dashboard-aside{ position: sticky; top: calc(var(--nav-h) + 24px); }.aside-title{ font-size: 1rem; font-weight: 700; margin-bottom: 16px; }.learner-space-panel .section-toolbar{ margin-bottom: 18px; }.badge-entreprise{
  background: rgba(15, 118, 110, 0.92);
  color: #fff;
  backdrop-filter: blur(6px);
}.course-grid.learner-space-grid{
  grid-template-columns: 1fr;
}.cours-cree-item .course-card{
  flex: 1;
  height: 100%;
}.learner-event-card .text-muted{ margin-top: 4px; font-size: .75rem; }@media (min-width: 700px){.course-grid.learner-space-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}@media (min-width: 1100px){.course-grid.learner-space-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }}.text-muted{ font-size: .875rem; color: var(--ink-muted); }.course-row-thumb .img-placeholder{ font-size: 1.5rem; height: 100%; display: grid; place-items: center; color: var(--brand); opacity: .5; }/* Grille verticale 3 colonnes (calendrier,téléchargements…) */
.cards-grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}@media (max-width: 1024px){.cards-grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}@media (max-width: 640px){.cards-grid-3{ grid-template-columns: 1fr; }}.card-vertical{
  display: flex; flex-direction: column; height: 100%;
  padding: 20px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); transition: box-shadow var(--transition), border-color var(--transition);
}.card-vertical:hover{ box-shadow: var(--shadow); border-color: var(--brand-light); }.card-vertical-icon{
  width: 44px; height: 44px; border-radius: 12px; background: var(--brand-muted);
  color: var(--brand); display: grid; place-items: center; font-size: 1.1rem; margin-bottom: 14px;
}.card-vertical-title{ font-weight: 700; font-size: .9375rem; margin-bottom: 8px; line-height: 1.35; }.card-vertical-meta{ font-size: .8125rem; color: var(--ink-muted); flex: 1; margin-bottom: 16px; line-height: 1.55; }.card-vertical-footer{ margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }/* Aide page (icone i) — bulle flottante,sans impact sur le layout */
.page-help-wrap{
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-self: center;
  z-index: 1;
}.page-help-wrap:hover,.page-help-wrap:focus-within{
  z-index: 10060;
}.page-help-btn{
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg-subtle); color: var(--brand); cursor: help; flex-shrink: 0;
  display: grid; place-items: center; font-size: .85rem; transition: all var(--transition);
}.page-help-btn:hover,.page-help-wrap:focus-within .page-help-btn{
  background: var(--brand-muted); border-color: var(--brand);
}.page-help-tooltip{
  position: fixed;
  top: 0;
  left: 0;
  width: min(360px, calc(100vw - 48px));
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ink-muted);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
  z-index: 10060;
}.page-help-tooltip strong{
  display: block;
  color: var(--brand);
  font-size: .875rem;
  margin-bottom: 6px;
}.page-help-wrap:hover .page-help-tooltip,.page-help-wrap:focus-within .page-help-tooltip,.page-help-tooltip.is-open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}.page-heading-row{ display: flex; align-items: center; gap: 10px; min-width: 0; overflow: visible; }.page-heading-row h1{ flex: 1; min-width: 0; }.badge-list{ display: flex; flex-wrap: wrap; gap: 8px; }.badge-chip{
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: var(--brand-muted); color: var(--brand); border-radius: 100px; font-size: .75rem; font-weight: 600;
}.chat-bubble{
  max-width: 72%; padding: 10px 14px; border-radius: 14px; font-size: .875rem; line-height: 1.5;
}.chat-bubble-row:not(.mine) .chat-bubble{ background: var(--bg-subtle); border: 1px solid var(--line-soft); }.chat-bubble-row.mine .chat-bubble{ background: var(--brand-light); color: var(--brand); }.chat-bubble time{ display: block; font-size: .65rem; color: var(--ink-muted); margin-top: 4px; }.chat-page-root > [data-chat-user-id]{
  display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0;
}.dashboard-app:has(.chat-layout-full) .dashboard-layout,.dashboard-app:has(.chat-layout-full) .dashboard-main{
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}.dashboard-app:has(.chat-layout-full) .dashboard-content{
  padding: 0;
  max-width: none;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}[data-theme="dark"] .chat-list-backdrop{ background: rgba(0, 0, 0, .55); }.domain-item{
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: all var(--transition);
}.domain-item:hover{ border-color: var(--brand); background: var(--brand-muted); }.domain-icon{
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-muted); color: var(--brand);
  display: grid; place-items: center; flex-shrink: 0;
}.domain-name{ font-weight: 600; font-size: .875rem; }.domain-count{ font-size: .75rem; color: var(--ink-muted); margin-top: 2px; }.promo-card{
  background: linear-gradient(135deg, #2d3f5c, #4a6287);
  border-radius: var(--radius-lg); padding: 24px; color: #fff;
}.promo-card h3{ color: #fff; font-size: 1rem; margin-bottom: 8px; }.promo-card p{ font-size: .8125rem; color: #c5d4e8; margin-bottom: 16px; line-height: 1.6; }/* ═══ ANIMATIONS — apparition au chargement / changement de page ═══ */
@keyframes pageEnter{
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}@keyframes pageEnterFade{
  from { opacity: 0; }
  to { opacity: 1; }
}@keyframes softFadeUp{
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}@keyframes float{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}/* Contenu principal (dashboard,admin,auth,pages publiques) */
.adm-main:not(.page-transition-stagger),.auth-form-panel,.auth-brand,body:not(.landing-page) > main{
  animation: pageEnter .52s var(--ease-soft) both;
}.dashboard-topbar{
  animation: pageEnterFade .4s var(--ease-soft) both;
  animation-delay: .03s;
}.page-transition-stagger > *{
  animation: pageEnter .46s var(--ease-soft) both;
}.page-transition-stagger > *:nth-child(1){ animation-delay: .05s; }.page-transition-stagger > *:nth-child(2){ animation-delay: .1s; }.page-transition-stagger > *:nth-child(3){ animation-delay: .15s; }.page-transition-stagger > *:nth-child(4){ animation-delay: .2s; }.page-transition-stagger > *:nth-child(5){ animation-delay: .25s; }.page-transition-stagger > *:nth-child(n+6){ animation-delay: .3s; }/* App shell (sidebar dashboard / admin) — pas d'animation au changement de page */
.dashboard-app .dashboard-topbar,.dashboard-app .dashboard-content:not(.page-transition-stagger),.dashboard-app .dashboard-content-inner,.dashboard-app .page-transition-stagger > *,.adm-app .adm-main:not(.page-transition-stagger),.adm-app .page-transition-stagger > *,.dashboard-app .page-transition{
  animation: none !important;
}.dashboard-content.is-spa-loading{
  pointer-events: none;
}.dashboard-content{
  /* pas de transition opacity ici : elle provoquait un double saut avec le SPA */
}/* Indicateur SPA — spinner circulaire (plus de barre infinie) */
.spa-progress,.spa-loader{
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(2px);
}.spa-progress.is-active,.spa-loader.is-active{
  display: flex;
  pointer-events: all;
}/* Onglets B2B : même spinner,overlay plus léger (pas de barre) */
.spa-progress.is-soft.is-active,.spa-loader.is-soft.is-active{
  background: rgba(15, 23, 42, 0.1);
  backdrop-filter: none;
  pointer-events: none;
}.spa-progress.is-soft.is-active::after,.spa-loader.is-soft.is-active::after{
  content: none;
  display: none;
}.spa-loader-spinner{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--brand, #4a6287);
  background: transparent;
  animation: spaSpinnerRotate 0.7s linear infinite;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
}.spa-loader-label{
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink, #0f172a);
  background: rgba(255, 255, 255, 0.92);
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}[data-theme="dark"] .spa-loader-label{
  background: rgba(21, 29, 46, 0.94);
  color: #e8eef7;
}@keyframes spaSpinnerRotate{
  to { transform: rotate(360deg); }
}@keyframes spaContentIn{
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}.dashboard-content.is-spa-enter,.auth-form-panel.is-spa-enter,body:not(.landing-page) > main.is-spa-enter{
  animation: spaContentIn .34s var(--ease-soft) both;
}body.spa-is-loading{
  cursor: progress;
}@media (prefers-reduced-motion: reduce){.spa-loader-spinner{
    animation: none;
    border-top-color: var(--brand, #4a6287);
    opacity: .85;
  }.dashboard-content.is-spa-enter,.auth-form-panel.is-spa-enter,body:not(.landing-page) > main.is-spa-enter{
    animation: none !important;
  }}@media (prefers-reduced-motion: reduce){.sidebar-group-panel{
    transition: none !important;
  }.dashboard-content{
    transition: none !important;
  }.dashboard-content:not(.page-transition-stagger),.adm-main:not(.page-transition-stagger),.auth-form-panel,.auth-brand,body:not(.landing-page) > main,.dashboard-topbar,.page-transition-stagger > *{
    animation: none !important;
  }}/* Entrée des pages d'auth (connexion,inscription,mdp oublié,confirmation) :
   révélation douce et échelonnée des champs,en plus du pageEnter du panneau.
   @media no-preference => automatiquement désactivé si reduced-motion. */
@media (prefers-reduced-motion: no-preference){
  /* Cascade des blocs : titre, sous-titre, formulaire, options sociales */
  .auth-page .auth-form-box > * {
    animation: authFieldIn .5s var(--ease-soft) both;
  }
  .auth-page .auth-form-box > *:nth-child(1) { animation-delay: .05s; }
  .auth-page .auth-form-box > *:nth-child(2) { animation-delay: .11s; }
  .auth-page .auth-form-box > *:nth-child(3) { animation-delay: .17s; }
  .auth-page .auth-form-box > *:nth-child(4) { animation-delay: .23s; }
  .auth-page .auth-form-box > *:nth-child(n+5) { animation-delay: .29s; }
  /* Cascade fine des champs à l'intérieur du formulaire */
  .auth-page .auth-form .form-group,
  .auth-page .auth-form > button {
    animation: authFieldIn .5s var(--ease-soft) both;
  }
  .auth-page .auth-form .form-group:nth-of-type(1) { animation-delay: .24s; }
  .auth-page .auth-form .form-group:nth-of-type(2) { animation-delay: .30s; }
  .auth-page .auth-form .form-group:nth-of-type(n+3) { animation-delay: .36s; }
  .auth-page .auth-form > button { animation-delay: .42s; }
}@keyframes authFieldIn{
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}/* Scroll reveal — pages publiques (.landing-page),apparition fluide */
.landing-page{
  --scroll-reveal-duration: 0.8s;
  --scroll-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --scroll-reveal-distance: 32px;
}.landing-page .animate-on-scroll{
  opacity: 0;
  transform: translate3d(0, var(--scroll-reveal-distance), 0);
  transition:
    opacity var(--scroll-reveal-duration) var(--scroll-reveal-ease),
    transform var(--scroll-reveal-duration) var(--scroll-reveal-ease);
}.landing-page .animate-on-scroll.is-visible{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}.landing-page .stagger-children > *{
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.75s var(--scroll-reveal-ease),
    transform 0.75s var(--scroll-reveal-ease);
}.landing-page .stagger-children.is-visible > *{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}.landing-page .stagger-children.is-visible > *:nth-child(1){ transition-delay: 0.04s; }.landing-page .stagger-children.is-visible > *:nth-child(2){ transition-delay: 0.12s; }.landing-page .stagger-children.is-visible > *:nth-child(3){ transition-delay: 0.2s; }.landing-page .stagger-children.is-visible > *:nth-child(4){ transition-delay: 0.28s; }.landing-page .stagger-children.is-visible > *:nth-child(5){ transition-delay: 0.36s; }.landing-page .stagger-children.is-visible > *:nth-child(6){ transition-delay: 0.44s; }.landing-page .stagger-children.is-visible > *:nth-child(7){ transition-delay: 0.52s; }.landing-page .stagger-children.is-visible > *:nth-child(8){ transition-delay: 0.6s; }.landing-page .stagger-children.is-visible > *:nth-child(n+9){ transition-delay: 0.66s; }/* Entrée hero au chargement */
@keyframes landingReveal{
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}.landing-page .landing-reveal{
  animation: landingReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}.landing-page .landing-reveal--d1{ animation-delay: 0.12s; }.landing-page .landing-reveal--d2{ animation-delay: 0.24s; }.landing-page .landing-reveal--d3{ animation-delay: 0.38s; }.landing-page .hero-visual{ animation: float 8s ease-in-out infinite; }.landing-page .hero-visual.landing-reveal{
  animation:
    landingReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both,
    float 8s ease-in-out 1.2s infinite;
}.landing-page.presentation-page .pres-hero-visual.landing-reveal{
  animation: landingReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}/* Footer : bandeau entreprises toujours visible (pas d'opacity 0) */
.landing-page .footer-trust,.landing-page .footer-trust *{
  opacity: 1;
  transform: none;
}.landing-page .site-footer .footer-grid,.landing-page .site-footer .footer-bottom{
  opacity: 1;
  transform: none;
}@media (prefers-reduced-motion: reduce){.landing-page .animate-on-scroll,.landing-page .stagger-children > *,.landing-page .site-footer{
    opacity: 1;
    transform: none;
    transition: none;
    animation: none !important;
  }.public-nav-menu .nav-link,#navbarNav .nav-link{
    opacity: 1;
    transform: none;
    transition: none;
  }}/* Transition douce entre pages (pages publiques). Désactivée dans le dashboard SPA. */
@view-transition{
  navigation: auto;
}.dashboard-app{
  view-transition-name: none;
}::view-transition-old(root){
  animation: .18s ease-out both pageExitFade;
}::view-transition-new(root){
  animation: .28s var(--ease-soft) both pageEnterFade;
}@keyframes pageExitFade{
  from { opacity: 1; }
  to { opacity: 0; }
}@media (prefers-reduced-motion: reduce){::view-transition-old(root),::view-transition-new(root){
    animation: none !important;
  }}.adm-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: auto; margin-bottom: 20px; }.adm-table{ width: 100%; border-collapse: collapse; font-size: .875rem; }.adm-table thead th{ background: var(--brand-muted); color: var(--ink-muted); font-size: .6875rem; font-weight: 700; text-transform: uppercase; padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; }.adm-table tbody td{ padding: 12px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-muted); }.adm-table tbody tr:hover{ background: var(--brand-muted); }.adm-table tbody td strong{ color: var(--ink); }.badge-ok{ background: var(--success-bg); color: var(--success); border-radius: 100px; padding: 4px 10px; font-size: .75rem; font-weight: 600; }.badge-wait{ background: #fef9c3; color: #ca8a04; border-radius: 100px; padding: 4px 10px; font-size: .75rem; font-weight: 600; }.badge-cancel{ background: #fee2e2; color: var(--danger); border-radius: 100px; padding: 4px 10px; font-size: .75rem; font-weight: 600; }.btn-adm{ background: var(--accent-gradient); color: #fff; border: none; border-radius: var(--radius-xs); padding: 8px 16px; font-size: .8125rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all .3s var(--ease); }.btn-adm:hover{ transform: translateY(-2px); box-shadow: var(--shadow); color: #fff; }.btn-adm-out{ background: transparent; color: var(--brand); border: 1.5px solid var(--brand-light); border-radius: var(--radius-xs); padding: 8px 16px; font-size: .8125rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all .3s var(--ease); }.btn-adm-out:hover{ background: var(--brand-muted); }/* Quick links */
.quick-links{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
}.quick-link{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--ink);
  transition: border-color var(--duration) var(--ease-soft), box-shadow var(--duration) var(--ease-soft);
}.quick-link:hover{ border-color: var(--brand); box-shadow: var(--shadow-sm); color: var(--brand); }.quick-link i{ font-size: 1.35rem; color: var(--brand); }/* Activity feed */
.activity-list{ display: flex; flex-direction: column; gap: 10px; }.activity-item{
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color var(--duration) var(--ease-soft), box-shadow var(--duration) var(--ease-soft);
}a.activity-item:hover{ border-color: var(--brand); box-shadow: var(--shadow-sm); }.activity-icon{
  width: 40px; height: 40px; border-radius: 10px; background: var(--brand-muted);
  color: var(--brand); display: grid; place-items: center; flex-shrink: 0;
}.activity-title{ font-weight: 600; font-size: .875rem; }.activity-meta{ font-size: .75rem; color: var(--ink-muted); margin-top: 2px; }.accueil-compte-item.has-alert{ border-color: #fecaca; background: #fff7f7; }/* Accueil — découverte catalogue (style grandes plateformes) */
.accueil-discovery{ display: flex; flex-direction: column; gap: 32px; margin-bottom: 32px; }.accueil-discovery-section{ display: flex; flex-direction: column; gap: 16px; }.accueil-discovery-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}.accueil-discovery-label{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--brand); margin-bottom: 6px;
}.accueil-discovery-head h2{
  font-size: 1.15rem; font-weight: 800; margin: 0 0 4px;
  font-family: var(--font-display);
}.accueil-discovery-hero-title{
  font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important;
  line-height: 1.25;
}.accueil-discovery-section--trending .accueil-discovery-head h2{
  color: #b45309;
}.accueil-domaines-chips{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px;
}.accueil-domaine-chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); font-size: .8125rem;
  transition: border-color var(--duration) var(--ease-soft), box-shadow var(--duration) var(--ease-soft);
}.accueil-domaine-chip:hover{
  border-color: var(--brand); box-shadow: var(--shadow-sm); color: var(--brand);
}.accueil-domaine-chip i{ color: var(--brand); }.accueil-domaine-chip em{
  font-style: normal; font-size: .68rem; font-weight: 700;
  color: var(--ink-muted); background: var(--surface-2);
  padding: 2px 7px; border-radius: 99px;
}.accueil-discovery-head p{
  margin: 0; font-size: .875rem; color: var(--ink-muted); max-width: 560px;
}.accueil-discovery-actions{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}.accueil-section-stats{ display: flex; gap: 12px; flex-wrap: wrap; }.accueil-mini-stat{
  padding: 8px 12px; border-radius: var(--radius-xs);
  background: var(--brand-muted); border: 1px solid var(--line);
  text-align: center; min-width: 90px;
}.accueil-mini-stat strong{ display: block; font-size: 1rem; font-weight: 800; color: var(--brand); }.accueil-mini-stat span{ font-size: .65rem; color: var(--ink-muted); line-height: 1.3; }.course-grid-horizontal .accueil-course-wrap,.course-grid-horizontal > .course-card{
  flex: 0 0 min(280px, 78vw); scroll-snap-align: start;
}.badge-accueil{ font-size: .68rem; }.badge-accueil--tendance{ background: #fef3c7; color: #b45309; }.badge-accueil--hot{ background: #fee2e2; color: #dc2626; }.badge-accueil--emergence{ background: #dbeafe; color: #1d4ed8; }.accueil-inscrits-hot{ color: var(--success); font-weight: 600; }/* Accueil — KPIs plateforme */
.accueil-platform-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  background: linear-gradient(135deg, #0f172a, #1e3a5f);
  color: #fff;
  border: none;
}.accueil-platform-stat{ text-align: center; padding: 8px 4px; }.accueil-platform-stat-label{
  display: block; font-size: .72rem; opacity: .85;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}.accueil-platform-stat-value{
  display: block; font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 800; font-family: var(--font-display); line-height: 1.1;
}.accueil-platform-stat-value .fas{ color: #fbbf24; font-size: .9em; margin-right: 4px; }.accueil-platform-stat-sub{ display: block; font-size: .68rem; opacity: .75; margin-top: 6px; }/* Accueil — top instructeurs */
.accueil-instructeurs-section{ margin-top: 8px; }.accueil-instructeurs-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
}.accueil-instructeur-card{ position: relative; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}.accueil-instructeur-card:hover{
  border-color: var(--brand-light, var(--brand)) !important;
  box-shadow: var(--shadow-md, var(--shadow)) !important;
  transform: translateY(-3px);
  z-index: 2;
}.accueil-instructeur-rank{
  position: absolute; top: 12px; right: 12px;
  font-size: .75rem; font-weight: 800; color: var(--brand);
  background: var(--brand-muted); padding: 4px 10px; border-radius: 99px;
}.accueil-instructeur-head{
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit;
}.accueil-instructeur-head:hover h3,.accueil-instructeur-card:hover .accueil-instructeur-head h3{ color: var(--brand); }.accueil-instructeur-avatar{
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  background: var(--brand-muted); display: grid; place-items: center;
  font-weight: 800; color: var(--brand); flex-shrink: 0;
}.accueil-instructeur-avatar img{ width: 100%; height: 100%; object-fit: cover; }.accueil-instructeur-head h3{ font-size: 1rem; font-weight: 700; margin: 0; transition: color .15s ease; }.accueil-instructeur-title{ font-size: .78rem; color: var(--ink-muted); margin: 2px 0 0; }.accueil-instructeur-stats{
  display: flex; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: var(--ink-muted);
}.accueil-instructeur-stats i{ color: var(--brand); width: 14px; }.accueil-instructeur-rating{ color: var(--ink); font-weight: 600; }.accueil-instructeur-bio,.accueil-instructeur-featured{
  font-size: .8125rem; color: var(--ink-muted); margin: 0; line-height: 1.5;
}.accueil-instructeur-featured i{ color: var(--brand); }/* Accueil — avis apprenants */
.accueil-avis-section{ margin-top: 8px; }.accueil-avis-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;
}.accueil-avis-card{ display: flex; flex-direction: column; gap: 10px; margin: 0; }.accueil-avis-stars{ color: #fbbf24; font-size: .85rem; display: flex; align-items: center; gap: 4px; }.accueil-avis-stars strong{ color: var(--ink); margin-left: 6px; font-size: .78rem; }.accueil-avis-quote{ font-size: .875rem; line-height: 1.6; color: var(--ink-muted); margin: 0; flex: 1; }.accueil-avis-footer{ font-size: .78rem; color: var(--ink-muted); }.accueil-avis-footer strong{ color: var(--ink); }.accueil-avis-footer a{ color: var(--brand); text-decoration: none; }/* Favoris */
.btn-favori,.btn-favori-sm{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xs);
  cursor: pointer; color: var(--ink-muted); transition: all .2s var(--ease-soft);
}.btn-favori{ width: 44px; height: 44px; font-size: 1.1rem; }.btn-favori-sm{ width: 32px; height: 32px; font-size: .85rem; display: grid; place-items: center; }.btn-favori:hover,.btn-favori-sm:hover{ border-color: #fca5a5; color: #ef4444; }.btn-favori.is-favori,.btn-favori-sm.is-favori{ color: #ef4444; border-color: #fecaca; background: #fef2f2; }/* Course detail */
.course-detail-layout{
  display: grid; grid-template-columns: minmax(0, 1fr) min(300px, 28%); gap: 28px; align-items: start;
}.course-detail-hero{
  display: grid; grid-template-columns: 280px 1fr; gap: 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px;
}.course-detail-cover{ width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-sm); }.course-detail-cover-placeholder{
  display: grid; place-items: center; background: linear-gradient(135deg, #ccfbf1, #e0f2fe);
  color: var(--brand); font-size: 2.5rem; opacity: .5;
}.course-detail-info h1{ font-size: 1.5rem; margin: 10px 0 0; }.course-detail-meta{ display: flex; flex-wrap: wrap; gap: 14px; font-size: .875rem; color: var(--ink-muted); }.course-description{ font-size: .9375rem; color: var(--ink-muted); line-height: 1.75; }.course-description p{ margin: 0 0 0.75em; }.course-description p:last-child{ margin-bottom: 0; }.course-description ul,.course-description ol{ margin: 0 0 0.75em 1.25em; padding: 0; }.course-description--sm{ font-size: .875rem; margin-bottom: 12px; }.review-item{ padding: 16px 0; border-bottom: 1px solid var(--line-soft); }.review-item:last-child{ border-bottom: none; }.review-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }.review-item p{ font-size: .875rem; color: var(--ink-muted); line-height: 1.6; }@media (max-width: 900px){.course-detail-layout{ grid-template-columns: 1fr; }.course-detail-hero{ grid-template-columns: 1fr; }}/* ── Responsive ── */
@media (max-width: 1200px){
  .dashboard-split { grid-template-columns: 1fr; }
  .dashboard-aside { position: static; }
  .course-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}@media (max-width: 1024px){.hero .container{ grid-template-columns: 1fr; text-align: center; }.hero-trust{ justify-content: center; }.footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }.footer-brand{ grid-column: 1 / -1; }.pricing-grid-compact{ grid-template-columns: 1fr; max-width: 360px; }.sidebar{
    transform: translateX(-105%);
    box-shadow: var(--shadow-lg);
    /* Barre d'adresse et geste de retour du téléphone : sans cette réserve,
       le bouton Déconnexion tombe sous le bord visible de l'écran. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    height: 100dvh;
  }.sidebar.open{ transform: translateX(0); }/* Pas de max-height chiffrée ici.
     « calc(100vh - 140px) » réservait 140 px au logo ET au pied de menu,alors que le pied seul (avatar,nom,bouton Déconnexion) en fait plus de
     110 px : le pied débordait donc sous le bas de la barre,que `overflow:
     hidden` coupait net — plus de bouton Déconnexion sur mobile. Le flex fait
     déjà le calcul : .sidebar-scroll prend ce qui reste,le pied garde sa
     taille. */
  .sidebar-scroll{ overflow-y: auto; }.sidebar-footer{
    position: sticky;
    bottom: 0;
  }.dashboard-main{ margin-left: 0; width: 100%; }.dashboard-topbar{ left: 0; }.topbar-page-help{ display: none; }}@media (max-width: 768px){.footer-grid{ grid-template-columns: 1fr; }.page-help-wrap:hover .page-help-tooltip,.page-help-wrap:focus-within .page-help-tooltip{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }.page-help-tooltip.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }.dashboard-topbar{
    min-width: 0;
    overflow: visible;
  }.dashboard-topbar .page-heading{
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 132px);
  }.dashboard-topbar .page-heading h1{
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
  }.dashboard-topbar .topbar-actions{
    gap: 4px;
    flex-shrink: 0;
    max-width: 132px;
    justify-content: flex-end;
  }.topbar-page-help .page-help-btn,.page-help-btn{
    width: 28px;
    height: 28px;
    font-size: .72rem;
  }.topbar-page-help{
    flex-shrink: 0;
  }.dashboard-content{ padding: 16px; max-width: 100%; }.stats-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }.course-grid{ grid-template-columns: 1fr; gap: 16px; }.landing-page.presentation-page .hero.hero--home{
    margin-top: 0;
  }.section{ padding: 64px 0; }.page-heading p{ display: none; }.toolbar-actions .form-control{ flex: 1; width: 100% !important; }.welcome-banner{
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
    align-items: center;
  }.welcome-banner__body{ width: 100%; }.welcome-banner__actions{ justify-content: center; }}@media (max-width: 640px){.stats-grid{ grid-template-columns: 1fr; }.hero-actions .btn{ width: 100%; }.pricing-card.featured{ transform: none; }.container{ padding: 0 16px; }.dashboard-topbar{ padding: 0 12px; gap: 8px; }.section-toolbar{ flex-direction: column; align-items: flex-start; }.finances-info-bar .btn{ width: 100%; justify-content: center; }}/* Hamburger dashboard : visible ≤1024px,caché au-dessus */
@media (min-width: 1025px){
  .dashboard-topbar .navbar-toggle { display: none !important; }
}@media (max-width: 1024px){.dashboard-topbar .navbar-toggle{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }}/* ── Navigation publique mobile ── */
.nav-overlay{
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(12, 18, 34, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.38s;
}.nav-overlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}.navbar-mobile-actions{
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}.navbar-mobile-actions .btn{ width: 100%; justify-content: center; }@media (max-width: 992px){.public-header{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }.public-header__inner{
    gap: 10px;
  }.public-header__inner .navbar-brand,.site-header-row .navbar-brand{
    min-width: 0;
    flex: 1;
  }.navbar-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
  }/* Panneau compact — ouverture fluide,liens centrés */
  .public-nav-menu,#navbarNav.public-nav-menu{
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: auto;
    height: auto;
    z-index: 10048;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0 20px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 32px rgba(12, 18, 34, 0.08);
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    max-height: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    transition:
      max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      padding 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0.4s;
    display: flex !important;
    box-sizing: border-box;
  }.public-nav-menu.open,#navbarNav.public-nav-menu.open{
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    max-height: 360px;
    padding: 12px 20px 16px;
    transform: translateY(0) scale(1);
  }.public-nav-menu .nav-link,#navbarNav .nav-link{
    width: 100%;
    max-width: 280px;
    padding: 11px 16px;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    display: block;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      color 0.2s ease,
      background 0.2s ease;
  }.public-nav-menu.open .nav-link,#navbarNav.public-nav-menu.open .nav-link{
    opacity: 1;
    transform: translateY(0);
  }.public-nav-menu.open .nav-link:nth-child(1),#navbarNav.public-nav-menu.open .nav-link:nth-child(1){ transition-delay: 0.06s; }.public-nav-menu.open .nav-link:nth-child(2),#navbarNav.public-nav-menu.open .nav-link:nth-child(2){ transition-delay: 0.1s; }.public-nav-menu.open .nav-link:nth-child(3),#navbarNav.public-nav-menu.open .nav-link:nth-child(3){ transition-delay: 0.14s; }.public-nav-menu.open .nav-link:nth-child(4),#navbarNav.public-nav-menu.open .nav-link:nth-child(4){ transition-delay: 0.18s; }.public-nav-menu.open .nav-link:nth-child(5),#navbarNav.public-nav-menu.open .nav-link:nth-child(5){ transition-delay: 0.22s; }.public-nav-menu:not(.open) .nav-link,#navbarNav.public-nav-menu:not(.open) .nav-link{
    transition-delay: 0s;
  }.navbar-actions .btn-primary,.navbar-actions .navbar-action-desktop{
    display: none !important;
  }.navbar-actions .btn.navbar-connexion-btn{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--brand);
    border: 2px solid var(--brand);
    background: var(--surface);
  }.public-nav-menu.open .navbar-mobile-actions,#navbarNav.public-nav-menu.open .navbar-mobile-actions{
    display: flex !important;
    width: 100%;
    max-width: 280px;
  }.public-nav-menu.open,#navbarNav.public-nav-menu.open{
    max-height: 480px;
  }}@media (max-width: 480px){.public-header .brand-text{ display: none; }}body.nav-menu-open{
  overflow: hidden;
  touch-action: none;
}body.nav-menu-open .navbar-toggle{
  background: var(--brand-muted);
  border-color: var(--brand);
  color: var(--brand);
}@media (max-width: 768px){.table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }.data-table{ min-width: 560px; }/* Les tables d'administration (.adm-table) n'avaient pas cet equivalent,et .adm-card porte overflow:hidden pour ses coins arrondis. Mesure a
     375 px sur une table de transactions : 737 px de table dans une carte de
     342 px,soit 395 px de colonnes — Montant,Statut,Date,Actions — non
     pas decalees mais PUREMENT INACCESSIBLES : aucune barre de defilement,rien pour les atteindre. On aligne donc .adm-card sur .table-wrap. */
  .adm-card{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }.adm-table{ min-width: 640px; }.table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }.adm-card::-webkit-scrollbar,.table-wrap::-webkit-scrollbar{
    height: 8px;
    display: block;
  }.adm-card::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb{
    background: rgba(67, 89, 113, .35);
    border-radius: 99px;
  }/* Deuxieme facon,differente,de rendre du contenu inatteignable.

     Un element de grille ou de flex porte min-width:auto : il refuse de
     descendre sous la largeur intrinseque de son contenu. Un titre de cours
     un peu long — « [TEST] Atelier pratique Data Science & IA #60 » — ou un
     champ contenant un lien d'affiliation imposait donc 482 px a une colonne
     qui n'en avait que 343 ; .dashboard-content,qui porte overflow:hidden,coupait le debordement. Mesure sur la production en 375 px :

       /finances/affilie/      70 elements hors d'atteinte
       /finances/facturation/  46
       /cours/parrainage/      27

     Rien ne se voyait : la page ne debordait pas (scrollWidth 375),le
     contenu etait simplement tranche. min-width:0 rend la colonne
     compressible,le texte se replie au lieu d'elargir la grille. Sans effet
     sur grand ecran,ou la place ne manque pas. Verifie en injectant la
     regle dans les trois pages en production : 143 elements -> 0. */
  .dashboard-split > *,.dashboard-content > *,.stats-grid > *,.stat-card{ min-width: 0; }.stat-label{ overflow-wrap: break-word; word-break: normal; }.dash-tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -4px;
    margin-right: -4px;
    padding-bottom: 2px;
  }.dash-tab{ flex-shrink: 0; }.chat-layout.is-list-open .chat-sidebar{
    transform: translateX(0);
    box-shadow: 12px 0 32px rgba(15, 23, 42, .18);
  }.chat-layout.is-list-open .chat-list-backdrop{ display: block; }.wa-dialog{
    width: min(calc(100vw - 24px), 560px);
    max-width: calc(100vw - 24px);
    margin: auto;
    inset: 0;
  }}@media (max-width: 1024px){.sidebar{
    width: min(var(--sidebar-w), 88vw);
    max-width: 100%;
  }}/* ── SaaS extras : coupons,checkout,FAQ,notifications ── */
.form-grid-2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}@media (max-width: 640px){.form-grid-2{ grid-template-columns: 1fr; }}.coupon-code{
  font-family: ui-monospace, monospace;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-muted);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: .05em;
}.badge-warning{ background: #fef3c7; color: #b45309; }.faq-item{ margin-bottom: 10px; }.faq-item summary{
  cursor: pointer; font-weight: 600; font-size: .9375rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}.faq-item summary::-webkit-details-marker{ display: none; }.faq-item summary::after{ content: '+'; color: var(--brand); font-weight: 700; }.faq-item[open] summary::after{ content: '−'; }.faq-item p{ margin-top: 12px; font-size: .875rem; color: var(--ink-muted); line-height: 1.65; }.notif-page-item.is-unread{ border-left: 3px solid var(--brand); background: var(--brand-muted); }.continue-banner-thumb .img-placeholder{ width: 100%; height: 100%; object-fit: cover; }.avatar.lg{ width: 48px; height: 48px; font-size: 1rem; }/* Gamification */
.gamif-strip{
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}.gamif-stat{
  display: flex; align-items: center; gap: 10px; font-size: .875rem;
}.gamif-stat i{ color: var(--brand); font-size: 1.1rem; }.gamif-stat strong{ font-size: 1.25rem; font-weight: 800; color: var(--ink); }.gamif-stat span{ color: var(--ink-muted); font-size: .78rem; }.gamif-strip .btn{ margin-left: auto; }.badges-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px;
}.badge-card{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 18px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface);
  transition: transform .2s ease, box-shadow .2s ease;
}.badge-card.is-earned{ border-color: var(--brand); background: var(--brand-muted); }.badge-card.is-locked{ opacity: .55; filter: grayscale(.4); }.badge-card-icon{
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.15rem;
  background: var(--brand-muted); color: var(--brand); margin-bottom: 10px;
}.badge-card.is-earned .badge-card-icon{ background: var(--brand); color: #fff; }.badge-card-title{ font-weight: 700; font-size: .8125rem; margin-bottom: 4px; }.badge-card-desc{ font-size: .72rem; color: var(--ink-muted); line-height: 1.4; }.badge-card-pts{ font-size: .68rem; font-weight: 700; color: var(--brand); margin-top: 6px; }/* Connexion sociale */
.social-auth{ margin-top: 20px; }.social-auth-divider{
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  color: var(--ink-muted); font-size: .78rem;
}.social-auth-divider::before,.social-auth-divider::after{
  content: ''; flex: 1; height: 1px; background: var(--line);
}.social-auth-buttons{ display: flex; flex-direction: column; gap: 10px; }.btn-social{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: .875rem; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink); transition: background .2s;
}.btn-social:hover{ background: var(--bg-subtle); }.btn-google{ border-color: #fca5a5; }.btn-microsoft{ border-color: #93c5fd; }/* ── Parcours cards ── */
.parcours-card-desc{
  font-size: .8125rem; color: var(--ink-muted); line-height: 1.5;
  margin: 8px 0 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}.parcours-catalog-list > .empty-state{
  grid-column: 1 / -1;
}.parcours-card--catalog{
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}.parcours-card--catalog:hover{
  box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, 0.08));
  border-color: var(--line, #cbd5e1);
}.parcours-card-media{
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-2, #f1f5f9);
  overflow: hidden;
}.parcours-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}.parcours-card-placeholder{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: var(--brand);
  background: var(--brand-muted, #eef2f7);
}.parcours-card-enrolled{
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--success, #059669);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}.parcours-card--catalog .parcours-card-body{
  padding: 16px 18px 20px;
}.parcours-card-cat{
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--success, #059669);
}.parcours-card-title{
  margin: 0 0 14px;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
}.parcours-card-title a{
  color: inherit;
  text-decoration: none;
}.parcours-card-title a:hover,.parcours-card-title a:focus-visible{
  color: var(--brand);
  text-decoration: underline;
}.parcours-card-meta{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}.parcours-card-meta li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--ink, #1e293b);
}.parcours-card-meta i{
  width: 18px;
  margin-top: 3px;
  color: var(--ink-muted, #64748b);
  font-size: 0.9rem;
}@media (min-width: 1100px){.parcours-card-title{ font-size: 1.05rem; }}@media (prefers-reduced-motion: reduce){.parcours-card--catalog{ transition: none; }}.mentorat-form-grid .form-group-full{ grid-column: 1 / -1; }.cert-actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }.cert-signature-img{
  display: block;
  max-width: 160px;
  max-height: 56px;
  object-fit: contain;
  margin: 0 auto 8px;
}.cert-signature-img--handwritten{
  max-width: 240px;
  max-height: 72px;
  width: auto;
  height: auto;
  margin: 12px auto 6px;
  display: block;
  object-fit: contain;
}/* Signature plateforme : encre bleue PNG transparent → blanc sur certificat */
.cert-signature-img--handwritten.cert-signature-img--on-dark{
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}/* Signature entreprise scannée (encre sombre) sur fond certificat */
.cert-signature-img--handwritten.cert-signature-img--ink-dark{
  filter: brightness(0) invert(1) drop-shadow(0 2px 5px rgba(0, 0, 0, .22));
}.cert-signature-img--handwritten:not(.cert-signature-img--on-dark):not(.cert-signature-img--ink-dark){
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .12));
}.cert-official__sig-platform{
  font-size: .68rem;
  color: #fff;
  margin: 2px 0 0;
  letter-spacing: .06em;
  text-transform: uppercase;
}/* Grand certificat — style modale (aperçu « Voir ») */
.cert-official{
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--cert-brand, var(--brand)) 15%, transparent);
  background: var(--surface);
}.cert-official__preview{
  background: linear-gradient(135deg, var(--cert-brand, var(--brand)) 0%, var(--cert-brand-dark, var(--brand-hover)) 100%);
  padding: 40px 36px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(72vh, 560px);
}.cert-official__stage{
  position: relative;
  z-index: 1;
  width: 100%;
}.cert-official__preview::before{
  content: '';
  position: absolute;
  inset: 12px;
  border: 1.5px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  pointer-events: none;
}.cert-official__preview::after{
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 30px, rgba(255,255,255,.018) 30px, rgba(255,255,255,.018) 60px);
  pointer-events: none;
}.cert-official__medal,.cert-official__issued,.cert-official__label,.cert-official__name,.cert-official__intro,.cert-official__course,.cert-official__domain,.cert-official__divider,.cert-official__meta,.cert-official__mention,.cert-official__sig,.cert-official__attestation-inline{
  position: relative;
  z-index: 1;
}.cert-official__medal{
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  background: rgba(255, 255, 255, .18);
  border: 3px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
}.cert-official__medal img{ border-radius: 10px; object-fit: contain; }.cert-official__issued{
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 4px;
}.cert-official__label{
  font-size: .85rem;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 4px;
}.cert-official__name{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 12px;
}.cert-official__intro{
  font-size: .82rem;
  color: rgba(255, 255, 255, .68);
  margin-bottom: 4px;
}.cert-official__course{
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 700;
  color: rgba(255, 255, 255, .96);
  margin: 0 0 8px;
  line-height: 1.35;
}.cert-official__domain{
  font-size: .78rem;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 4px;
}.cert-official__divider{
  width: 64px;
  height: 2px;
  margin: 16px auto;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
}.cert-official__meta{
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}.cert-official__meta-item{ text-align: center; }.cert-official__meta-item span{
  display: block;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .48);
  margin-bottom: 4px;
}.cert-official__meta-item strong{
  font-size: .82rem;
  color: #fff;
  font-weight: 600;
  word-break: break-all;
}.cert-official__mention{
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, .22);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  padding: 4px 10px 4px 12px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  text-transform: uppercase;
  letter-spacing: .05em;
  border: 0;
  border-radius: 0;
  margin: 0;
}.cert-official__mention i{ font-size: .58rem; opacity: .95; }.cert-official__footer-row{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 8px;
}.cert-official__sig{ margin-bottom: 0; text-align: center; flex: 1; min-width: 200px; }.cert-official__qr{
  text-align: center;
  flex-shrink: 0;
}.cert-official__qr img{
  display: block;
  margin: 0 auto 6px;
  border-radius: 8px;
  border: 2px solid rgba(74, 98, 135, .15);
}.cert-official__qr-hint{
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-muted);
  margin: 0;
}.cert-official__preview .cert-official__qr-hint,.cert-official__preview .cert-official__qr-link{
  color: rgba(255, 255, 255, .82);
}.cert-official__qr-link{
  font-size: .75rem;
  font-weight: 600;
  color: var(--brand);
}.cert-official--solo{
  border: none;
  box-shadow: 0 12px 48px color-mix(in srgb, var(--cert-brand, var(--brand)) 22%, transparent);
}.cert-official--solo .cert-official__preview{
  padding: 36px 40px 32px;
  border-radius: var(--radius-lg, 16px);
}/* ── Certificat plein écran : même carte que l'aperçu,.cert-solo-page--fullscreen{
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 32px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle, #f0f4f9);
}.cert-solo-wrap--fullscreen{
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}.cert-apercu-page .cert-solo-wrap--fullscreen{
  max-width: 920px;
}.cert-actions--solo-fullscreen{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}.cert-official--fullscreen{
  width: 100%;
}.cert-official--fullscreen .cert-official__preview{
  min-height: min(82vh, 720px);
  padding: 52px 52px 44px;
}.cert-solo-page{
  min-height: 100vh;
  margin: 0;
  background: var(--bg-subtle, #f0f4f9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}.cert-solo-wrap{
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}.cert-solo-wrap--inline{ max-width: 640px; margin-top: 24px; }.cert-verify--result .auth-form-box,.auth-form-box:has(.cert-solo-wrap--inline){ max-width: 680px; }.cert-verify__form--compact{
  margin-bottom: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}.cert-verify__form--compact .form-group{ margin-bottom: 10px; }.cert-verify--result h1,.cert-verify--result > .auth-sub{ display: none; }/* Les titres auth (h1/h2) sont plus spécifiques que .cert-official__name :
   sans ça le nom et le cours passent en noir sur le fond de marque. */
.auth-page .cert-official:not(.cert-official--moderne):not(.cert-official--minimal):not(.cert-official--corporate) .cert-official__name,.auth-page .cert-official:not(.cert-official--moderne):not(.cert-official--minimal):not(.cert-official--corporate) .cert-official__course,.auth-page .cert-official:not(.cert-official--moderne):not(.cert-official--minimal):not(.cert-official--corporate) h1,.auth-page .cert-official:not(.cert-official--moderne):not(.cert-official--minimal):not(.cert-official--corporate) h2,.auth-page .cert-official:not(.cert-official--moderne):not(.cert-official--minimal):not(.cert-official--corporate) .cert-official__meta-item strong,.auth-page .cert-official:not(.cert-official--moderne):not(.cert-official--minimal):not(.cert-official--corporate) .cert-official__sig-role,.auth-page .cert-official:not(.cert-official--moderne):not(.cert-official--minimal):not(.cert-official--corporate) .cert-official__sig-platform{
  color: #fff;
}.auth-page .cert-official:not(.cert-official--moderne):not(.cert-official--minimal):not(.cert-official--corporate) .cert-official__label,.auth-page .cert-official:not(.cert-official--moderne):not(.cert-official--minimal):not(.cert-official--corporate) .cert-official__intro,.auth-page .cert-official:not(.cert-official--moderne):not(.cert-official--minimal):not(.cert-official--corporate) .cert-official__issued,.auth-page .cert-official:not(.cert-official--moderne):not(.cert-official--minimal):not(.cert-official--corporate) .cert-official__domain,.auth-page .cert-official:not(.cert-official--moderne):not(.cert-official--minimal):not(.cert-official--corporate) .cert-official__attestation-inline{
  color: rgba(255, 255, 255, .78);
}.cert-official__sig{ margin-bottom: 16px; margin-top: 8px; }.cert-official__sig-line{
  width: 120px;
  height: 1px;
  background: rgba(255, 255, 255, .55);
  margin: 0 auto 8px;
}.cert-official__sig-role{
  font-size: .68rem;
  color: #fff;
  margin: 4px 0 0;
}.cert-official__attestation-inline{
  margin: 0 auto 18px;
  padding: 0 8%;
  max-width: 42rem;
  font-size: .78rem;
  line-height: 1.55;
  color: #fff;
  background: none;
  text-align: center;
}.cert-official__attestation-inline i{ display: none; }.cert-official__details{
  position: relative;
  z-index: 1;
  margin-top: 18px;
  padding: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
}.cert-official__detail-row{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .1);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  text-align: left;
}.cert-official__detail-icon{
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .7rem;
  flex-shrink: 0;
}.cert-official__detail-label{
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 2px;
}.cert-official__detail-value,.cert-official__detail-value code{
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
}.cert-official__detail-value code{
  font-size: .7rem;
  word-break: break-all;
  font-weight: 500;
  background: transparent;
}.cert-official__detail-value a{
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}.cert-view-toggle__btn.is-active{
  color: var(--brand);
  background: var(--surface);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--brand) 12%, transparent);
}.cert-list-grid.is-list-view{
  grid-template-columns: 1fr;
  gap: 12px;
}.cert-list-grid.is-list-view .cert-list-card{
  flex-direction: row;
  align-items: stretch;
  transform: none;
}.cert-list-grid.is-list-view .cert-list-card:hover{
  transform: none;
}.cert-list-grid.is-list-view .cert-list-card__banner{
  width: 112px;
  min-width: 112px;
  height: auto;
  min-height: 100%;
  flex-shrink: 0;
  border-bottom: none;
  border-right: 1px solid var(--line);
}.cert-list-grid.is-list-view .cert-list-card__seal{
  width: 52px;
  height: 52px;
  font-size: 1.15rem;
}.cert-list-grid.is-list-view .cert-list-card__body{
  padding: 14px 16px;
  justify-content: center;
}.cert-list-grid.is-list-view .cert-list-card__title{
  font-size: .98rem;
}.cert-list-grid.is-list-view .cert-list-card__footer{
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 148px;
  border-top: none;
  border-left: 1px solid var(--line);
  padding: 10px 12px;
  gap: 6px;
}.cert-list-grid.is-list-view .cert-list-card__btn{
  flex: 0 0 auto;
  width: 100%;
  padding: 8px 10px;
}.cert-list-grid.is-list-view .cert-list-card__btn--dl{
  width: 100%;
}@media (max-width: 720px){.cert-list-grid.is-list-view .cert-list-card{
    flex-direction: column;
  }.cert-list-grid.is-list-view .cert-list-card__banner{
    width: 100%;
    min-width: 0;
    height: 88px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }.cert-list-grid.is-list-view .cert-list-card__footer{
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
    border-left: none;
    border-top: 1px solid var(--line);
  }.cert-list-grid.is-list-view .cert-list-card__btn{
    flex: 1;
    min-width: calc(50% - 4px);
  }}@media print{.sidebar,.dashboard-topbar,.cert-actions,.cert-verify__form,.upgrade-profil-banner,.premium-upgrade-toasts,.no-print{ display: none !important; }.cert-solo-wrap{ max-width: none; margin: 0; padding: 0; }.cert-solo-page{ padding: 0; background: #fff; }.cert-official{ border: none; box-shadow: none; }.cert-official__preview,.cert-official--solo .cert-official__preview{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border-radius: 0;
  }}.auth-form-box:has(.cert-page){ max-width: 720px; }.cert-verify h1{ font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; }.cert-verify .auth-sub{ color: var(--ink-muted); margin-bottom: 20px; font-size: .9rem; }.cert-verify__status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: .82rem;
}.cert-public-page .cert-verify__status{ margin-bottom: 16px; }.platform-plans-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto 36px;
  align-items: stretch;
}.platform-plans-row > *{
  min-width: 0;
  max-width: none;
  width: auto;
}.platform-plans-row--entreprise{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 100%;
  width: 100%;
}.platform-offer-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding: 40px 16px 18px;
  overflow: visible;
  min-height: 100%;
  height: 100%;
  box-sizing: border-box;
}.platform-offer-card .btn-block{
  width: 100%;
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
  padding-left: 12px;
  padding-right: 12px;
}.platform-offer-card.featured{
  border-color: var(--brand);
  box-shadow: 0 12px 32px rgba(13, 148, 136, .18);
}.platform-offer-card.featured::before{
  display: none;
}.platform-offer-card.is-active{
  outline: 2px solid var(--success);
  outline-offset: 2px;
}.platform-offer-card--gratuit{
  border-style: dashed;
  background: var(--surface-2, #f8fafc);
}.platform-offer-head{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 7.5rem;
  margin-bottom: 4px;
}.platform-offer-price-block{
  display: flex;
  flex-direction: column;
  min-height: 4.85rem;
  margin: 6px 0 2px;
}.platform-offer-icon{
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--brand-muted);
  color: var(--brand);
  font-size: 1.25rem;
  margin-bottom: 12px;
}.platform-offer-card.featured .platform-offer-icon{
  background: var(--accent-gradient, linear-gradient(135deg, var(--brand), #0d9488));
  color: #fff;
}.platform-offer-title{
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 6px;
  font-family: var(--font-display);
}.platform-offer-badge{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b8923c, #e8c872);
  color: #1a1a1a;
  z-index: 3;
  white-space: nowrap;
}.platform-offer-tagline{
  font-size: .8125rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.45;
  min-height: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}.platform-offer-price{
  margin: 0 0 4px !important;
  font-size: 1.55rem !important;
  line-height: 1.15;
}.platform-offer-price span{
  display: inline-block;
  font-size: .45em;
  vertical-align: baseline;
}.platform-offer-annual,.platform-offer-meta{
  font-size: .8125rem;
  color: var(--ink-muted);
  margin: 0 0 12px;
}.pricing-grid--responsive{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  max-width: 1100px;
}.pricing-grid--responsive .pricing-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}.pricing-grid--responsive .pricing-features{
  flex: 1;
}.pricing-grid--responsive .pricing-card .btn-block{
  margin-top: auto;
}.platform-offer-actions{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 5.6rem;
}.platform-offer-active{
  text-align: center;
  margin: 4px 0 0;
  font-size: .75rem;
  color: var(--success);
}@media (max-width: 1100px){.platform-plans-row,.platform-plans-row--entreprise{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }}@media (max-width: 640px){.platform-plans-row,.platform-plans-row--entreprise{
    grid-template-columns: 1fr;
    max-width: min(400px, 100%);
  }.platform-offer-card{
    padding: 22px 18px 20px;
  }}/* ── Comparatif fonctionnalités (abonnements) ── */
.offers-compare-section{
  margin: 40px 0;
}.offers-compare-section__header{
  text-align: center;
  margin-bottom: 24px;
}.offers-compare-section__intro{
  font-size: .875rem;
  color: var(--ink-muted);
  max-width: 640px;
  margin: 8px auto 0;
}.offers-compare-legend{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  margin: 16px auto 0;
  font-size: .8125rem;
  color: var(--ink-muted);
}.offers-compare-legend__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}.offers-compare-wrap{
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .06));
}.offers-compare-table th,.offers-compare-table td{
  font-size: .875rem;
  padding: 12px 14px;
  vertical-align: middle;
}.offers-compare-table thead th{
  background: var(--bg-subtle);
  font-weight: 700;
}.offers-compare-table__feature-col{
  text-align: left;
  min-width: 200px;
}.offers-compare-table__plan-col{
  text-align: center;
  min-width: 92px;
}.offers-compare-table tbody tr:nth-child(even){
  background: color-mix(in srgb, var(--bg-subtle) 55%, transparent);
}.offers-compare-table tbody tr:hover{
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}.offers-compare-table__cell{
  text-align: center;
}.offers-compare-table .feature-status{
  width: 32px;
  height: 32px;
  font-size: .8rem;
}.offers-compare-cell{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}.offers-compare-cell__value{
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}.offers-compare-cell--text .feature-status--text{
  flex-shrink: 0;
}.platform-offer-features-list .feature-status{
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}.feature-status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: .75rem;
  line-height: 1;
  vertical-align: middle;
}.feature-status--yes{
  background: var(--success-bg, #ecfdf5);
  color: var(--success, #059669);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 35%, transparent);
}.feature-status--no{
  background: color-mix(in srgb, #ef4444 16%, var(--surface));
  color: #dc2626;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 35%, transparent);
}.feature-status--no i.fa-lock{
  font-size: .7rem;
}.platform-offer-features-list__item.is-locked .platform-offer-features-list__label{
  color: color-mix(in srgb, #dc2626 40%, var(--ink-muted));
}.platform-offer-features-list--instructeur .feature-status--no{
  background: color-mix(in srgb, #ef4444 22%, var(--surface));
  color: #b91c1c;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 45%, transparent);
}.feature-status--text{
  background: var(--bg-subtle);
  color: var(--brand);
  font-size: .65rem;
}.platform-offer-features-list{
  flex: 1 1 auto;
  margin: 12px 0 16px;
  padding: 0;
  list-style: none;
  text-align: left;
  width: 100%;
}.platform-offer-features-list__item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: .8125rem;
  line-height: 1.35;
  border-bottom: 1px solid var(--line-soft);
}.platform-offer-features-list__item:last-child{
  border-bottom: none;
}.platform-offer-features-list__label{
  flex: 1;
  min-width: 0;
  color: var(--ink-muted);
}.platform-offer-features-list__value{
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}.user-plan-features-strip{
  margin-bottom: 20px;
  padding: 14px 16px;
}.user-plan-features-strip__title{
  margin: 0 0 12px;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ink-muted);
}.user-plan-features-strip__grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}.user-plan-features-strip__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  color: var(--ink);
}.feature-usage-lock__icon{
  flex-shrink: 0;
}.adm-dash-section__head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}.adm-dash-section__head h2{
  font-size: 1rem; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 8px;
}.adm-dash-section__head h2 i{ color: var(--brand); font-size: .9rem; }.cert-template-card.is-selected{
  border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}.cert-template-card.is-locked{
  opacity: .55;
  cursor: not-allowed;
  position: relative;
}/* Variantes modèle certificat HTML */
.cert-official--moderne .cert-official__preview{
  background: linear-gradient(160deg, color-mix(in srgb, var(--cert-brand) 88%, #0f172a) 0%, #0f172a 100%);
  padding: 28px;
}.cert-official--moderne .cert-official__stage{
  background: #fff; border-radius: 14px; padding: 28px 24px;
  color: #1e293b; box-shadow: 0 8px 32px rgba(15, 23, 42, .18);
}.cert-official--moderne .cert-official__name,.cert-official--moderne .cert-official__course{ color: #0f172a; }.cert-official--moderne .cert-official__intro,.cert-official--moderne .cert-official__issued,.cert-official--moderne .cert-official__label,.cert-official--moderne .cert-official__domain{ color: #475569; }.cert-official--moderne .cert-official__meta-item strong{ color: #0f172a; }.cert-official--minimal .cert-official__preview{
  background: #fafbfc;
  border: 2px solid var(--cert-brand);
  box-shadow: none;
}.cert-official--minimal .cert-official__stage{ color: #1e293b; }.cert-official--minimal .cert-official__name,.cert-official--minimal .cert-official__course{ color: #0f172a; }.cert-official--minimal .cert-official__intro,.cert-official--minimal .cert-official__issued,.cert-official--minimal .cert-official__label{ color: #64748b; }.cert-official--elegant .cert-official__preview{
  background: linear-gradient(145deg, #141824, color-mix(in srgb, var(--cert-brand) 55%, #141824));
  border: 3px double #c9a227;
}.cert-official--elegant .cert-official__mention{ background: rgba(201, 162, 39, .35); }.cert-official--corporate .cert-official__preview{
  background: #f8fafc;
  padding-top: 0;
  overflow: hidden;
}.cert-official--corporate .cert-official__stage{
  padding-top: 56px;
  position: relative;
  color: #1e293b;
}.cert-official--corporate .cert-official__stage::before{
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 48px;
  background: var(--cert-brand);
}.cert-official--corporate .cert-official__medal{ margin-top: 8px; }.cert-official--corporate .cert-official__name,.cert-official--corporate .cert-official__course{ color: #0f172a; }.cert-official--corporate .cert-official__intro,.cert-official--corporate .cert-official__issued,.cert-official--corporate .cert-official__label{ color: #64748b; }/* --- Perf LCP : le titre hero (element LCP) s'affiche immediatement.
   Glissement leger conserve,mais opacite pleine des le rendu -> LCP plus rapide. --- */
.landing-page .pres-hero-copy h1.landing-reveal{opacity:1;animation:landingRevealSlide .8s cubic-bezier(.16,1,.3,1) both}@keyframes landingRevealSlide{from{transform:translate3d(0,18px,0)}to{transform:translate3d(0,0,0)}}/* Accessibilite + perf : pas d'animation si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce){
  .landing-page .landing-reveal{animation:none!important;opacity:1!important;transform:none!important}
}/* ── Graphiques non couverts par la formule ─────────────────────────────
   Le conteneur disparaît avec son graphique : pas de cadre vide,pas de
   cadenas,pas de relance commerciale à l'emplacement d'une fonctionnalité
   absente. Le marqueur vient de partials/fin_report_chart_locked.html. */
.fin-report-chart:has(> .fin-report-chart-hidden),.fin-report-donut-wrap:has(> .fin-report-chart-hidden){ display: none; }/* ── Ascenseur masqué ───────────────────────────────────────────────────
   Le contenu défile toujours (molette,clavier,tactile) : seule la barre
   de défilement disparaît. Limité aux conteneurs de page : les zones qui
   défilent à l'intérieur d'un écran (chat,listes) gardent leur repère. */
html,body,.dashboard-main,.dashboard-content{
  scrollbar-width: none;
  -ms-overflow-style: none;
}html::-webkit-scrollbar,body::-webkit-scrollbar,.dashboard-main::-webkit-scrollbar,.dashboard-content::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}/* ── Apparition des cartes de cours ─────────────────────────────────────
   Les couvertures sont en loading="lazy" : sans transition,chaque image
   surgissait à son propre rythme et la grille semblait se remplir au
   hasard. La tuile scintille le temps du chargement,l'image se fond en
   arrivant,et les cartes entrent dans l'ordre de lecture. */
.course-card-img img,.parcours-card-media img{
  transition: opacity .38s var(--ease-soft), transform 1.1s var(--ease-soft);
}.course-card-img img.is-img-loading,.parcours-card-media img.is-img-loading{ opacity: 0; }/* Fond d'attente STATIQUE.
   Une animation de background-position n'est pas composée par le GPU : elle
   repeint la tuile à chaque frame,sur chaque carte encore en chargement,pendant que la page défile. Avec une grille de 30 cartes en lazy-loading,le scroll saccade et les cours semblent sauter. Le dégradé fixe donne le
   même repère visuel pour zéro coût de rendu. */
.course-card-img:has(img.is-img-loading),.parcours-card-media:has(img.is-img-loading){
  background-image: linear-gradient(135deg, #ccfbf1 0%, #e0f2fe 100%);
}donc rien ne saute dans la grille quand un fichier média a disparu. */
.img-absente{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  font-weight: 700;
  line-height: 1;
  color: var(--brand, #0f766e);
  background: var(--brand-muted, #f1f5f9);
}.img-absente i{ font-size: 1.15em; opacity: .55; }.a-image-absente{ background: var(--brand-muted, #f1f5f9); }.course-card-img.a-image-absente,.parcours-card-media.a-image-absente{
  background-image: linear-gradient(135deg, #ccfbf1 0%, #e0f2fe 100%);
}/* Entrée en cascade réservée aux premières cartes — celles visibles au
   chargement. Au-delà,la carte est déjà à sa place quand on arrive dessus :
   l'animer pendant le défilement la faisait bouger sous les yeux. */
.course-grid > :nth-child(-n+8){
  animation: courseCardIn .34s var(--ease-soft) both;
}.course-grid > :nth-child(1){ animation-delay: .02s; }.course-grid > :nth-child(2){ animation-delay: .05s; }.course-grid > :nth-child(3){ animation-delay: .08s; }.course-grid > :nth-child(4){ animation-delay: .11s; }.course-grid > :nth-child(5){ animation-delay: .14s; }.course-grid > :nth-child(6){ animation-delay: .17s; }.course-grid > :nth-child(7){ animation-delay: .20s; }.course-grid > :nth-child(8){ animation-delay: .23s; }@keyframes courseCardIn{
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}/* Pagination catalogue : la liste s'efface pendant le chargement de la
   page suivante,au lieu d'être remplacée sans prévenir. */
.catalogue-results{ transition: opacity .2s var(--ease-soft); }.catalogue-results.is-catalogue-loading{ opacity: .4; pointer-events: none; }@media (prefers-reduced-motion: reduce){.course-grid > *{ animation: none; }}/* ── Défis à rendu ──────────────────────────────────────────────────────
   Un défi « rendu » n'est pas un compteur : il y a un travail à déposer{ margin-top: 20px; }@media (min-width: 720px){.rendu-item-form .form-group:last-of-type{ grid-column: 1 / -1; }}/* ── Onglets de rôle (instructeur / apprenant) ────────────────────────── */
.vue-role-tabs{ margin-bottom: 18px; }/* ── Barre de recherche des hubs (forum{
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  margin-bottom: 20px;
  flex-wrap: wrap;
}.hub-search .form-control{
  flex: 1 1 240px;
  padding-left: 38px;
}@media (max-width: 640px){.hub-search .btn{ flex: 1 1 auto; }}
/* Pendant un chargement, la barre latérale reste au-dessus du voile : un second clic de menu part tout de suite (spa-nav annule la navigation en cours). */
body.spa-is-loading .sidebar{z-index:2001;}