/* ============================================================
   LOEACADEMIE — Variante "marketplace" (sobre, bleu/violet)
   Toutes les couleurs proviennent des variables --la-* injectées
   dynamiquement depuis les réglages du thème (inc/dynamic-css.php).
   ============================================================ */

.la-scope, .la-home, .la-header, .la-footer {
  --la-radius: 16px;
  font-family: var(--la-font-body, 'Inter', sans-serif);
}

.la-home *, .la-header *, .la-footer * { box-sizing: border-box; }

.la-home h1, .la-home h2, .la-home h3, .la-home h4,
.la-header h1, .la-header h2, .la-footer h4 {
  font-family: var(--la-font-head, 'Poppins', sans-serif);
  margin: 0; color: var(--la-text);
}
.la-home p { margin: 0; }
.la-scope a, .la-home a { text-decoration: none; }

.la-container { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ---------------- Buttons ---------------- */
.la-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--la-font-head,'Poppins',sans-serif); font-weight: 600;
  font-size: 15px; padding: 14px 26px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.la-btn:hover { transform: translateY(-2px); }
.la-btn--primary { background: var(--la-primary); color: #fff; box-shadow: 0 8px 30px rgba(59,110,255,.25); }
.la-btn--primary:hover { box-shadow: 0 12px 38px rgba(59,110,255,.4); }
.la-btn--purple { background: var(--la-secondary); color: #fff; box-shadow: 0 8px 30px rgba(139,92,246,.25); }
.la-btn--purple:hover { box-shadow: 0 12px 38px rgba(139,92,246,.4); }
.la-btn--outline { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.22); color: #fff; }
.la-btn--outline:hover { background: rgba(255,255,255,.08); }
.la-btn--sm { padding: 10px 18px; font-size: 14px; }

/* ============================================================
   HEADER
   ============================================================ */
.la-header {
  position: sticky; top: 0; z-index: 9990;
  background: rgba(0,0,0,.72); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--la-border);
}
.la-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; max-width: 1180px; margin: 0 auto; gap: 18px;
}
.la-header__logo img { height: 40px; width: auto; display: block; }
.la-nav { display: flex; }
.la-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.la-menu > li { position: relative; }
.la-menu > li > a { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 10px; color: var(--la-muted); font-size: 15px; font-weight: 500; transition: color .18s, background .18s; }
.la-menu > li > a:hover { color: #fff; background: rgba(255,255,255,.05); }
.la-ico { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.la-ico svg { width: 100%; height: 100%; }
.la-menu li.has-children > a::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -2px 0 0 3px; opacity: .6; }
.la-submenu {
  list-style: none; margin: 0; padding: 6px; position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 220px; background: var(--la-card); border: 1px solid var(--la-border); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 70;
}
.la-submenu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.la-menu li.has-children:hover > .la-submenu,
.la-menu li.has-children:focus-within > .la-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.la-submenu a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--la-soft); font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
.la-submenu a:hover { background: rgba(59,110,255,.14); color: #fff; }
.la-header__actions { display: flex; align-items: center; gap: 10px; }

/* mobile hamburger (CSS-only) */
.la-burger { display: none; }
.la-burger-label { display: none; cursor: pointer; padding: 8px; }
.la-burger-label span,
.la-burger-label span::before,
.la-burger-label span::after {
  content: ''; display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; position: relative;
}
.la-burger-label span::before { position: absolute; top: -7px; }
.la-burger-label span::after  { position: absolute; top: 7px; }

/* centered header variant */
.la-header--centered .la-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.la-header--centered .la-header__logo { justify-self: start; }
.la-header--centered .la-nav { justify-self: center; }
.la-header--centered .la-header__actions { justify-self: end; }

/* ============================================================
   HERO
   ============================================================ */
.la-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(59,110,255,.18), transparent 60%),
    radial-gradient(700px 500px at 95% 110%, rgba(139,92,246,.16), transparent 60%),
    linear-gradient(150deg, #10101f 0%, #000 100%);
  padding: 120px 0 110px;
}
.la-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.la-hero__eyebrow { color: var(--la-primary); font-weight: 700; font-size: 13px; letter-spacing: .12em; margin-bottom: 20px; }
.la-hero__title { font-size: clamp(33px, 5vw, 56px); font-weight: 800; line-height: 1.07; letter-spacing: -.5px; }
.la-hero__sub { color: var(--la-soft); font-size: 19px; line-height: 1.6; margin: 22px 0 32px; max-width: 540px; }
.la-hero__buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.la-hero__stats { display: flex; gap: 30px; border-top: 1px solid var(--la-border); padding-top: 26px; }
.la-stat__num { font-family: var(--la-font-head,'Poppins'); font-size: 40px; font-weight: 700; color: #fff; line-height: 1; }
.la-stat__label { color: var(--la-muted); font-size: 14px; margin-top: 4px; }
.la-hero__visual img { width: 100%; height: auto; border-radius: 20px; }
.la-hero__visual--float { animation: la-float 6s ease-in-out infinite; }
@keyframes la-float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }

/* ============================================================
   SECTIONS génériques
   ============================================================ */
.la-section { padding: 110px 0; }
.la-section--alt { background: var(--la-bg-alt); }
.la-section--grad-purple {
  background: linear-gradient(140deg, #2a1247 0%, var(--la-bg) 100%);
}
.la-section--grad-soft { background: linear-gradient(160deg, #0c0c18 0%, #000 100%); }
.la-head { text-align: center; max-width: 640px; margin: 0 auto 46px; }
.la-head__title { font-size: clamp(28px, 4vw, 42px); font-weight: 700; margin-bottom: 12px; }
.la-head__sub { color: var(--la-muted); font-size: 18px; }
.la-eyebrow { color: var(--la-primary); font-weight: 700; font-size: 13px; letter-spacing: .1em; margin-bottom: 14px; }
.la-eyebrow--purple { color: #c4b5fd; }

/* ---------------- Cards grid ---------------- */
.la-grid { display: grid; gap: 18px; }
.la-grid--4 { grid-template-columns: repeat(4, 1fr); }
.la-grid--3 { grid-template-columns: repeat(3, 1fr); }
.la-grid--2 { grid-template-columns: repeat(2, 1fr); }

.la-card {
  background: var(--la-card); border: 1px solid var(--la-border);
  border-radius: var(--la-radius); padding: 28px 24px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.la-card:hover { transform: translateY(-6px); border-color: rgba(59,110,255,.45); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.la-card__icon { font-size: 30px; margin-bottom: 16px; }
.la-card__title { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.la-card__desc { color: var(--la-muted); font-size: 14px; line-height: 1.6; }

/* ---------------- Course cards ---------------- */
.la-course { background: var(--la-card); border: 1px solid var(--la-border); border-radius: var(--la-radius); overflow: hidden; transition: transform .22s, box-shadow .22s; display: flex; flex-direction: column; }
.la-course:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(59,110,255,.18); }
.la-course__thumb { aspect-ratio: 16/9; background-size: cover; background-position: center; }
.la-course__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.la-course__title { font-size: 19px; font-weight: 600; line-height: 1.3; }
.la-course__teacher { color: var(--la-muted); font-size: 14px; }
.la-course__meta { color: var(--la-primary); font-size: 14px; font-weight: 600; }
.la-course__meta .star { color: #fbbf24; }
.la-course__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; }
.la-course__price { font-family: var(--la-font-head,'Poppins'); font-size: 24px; font-weight: 700; color: #fff; }

/* ---------------- Split (students / instructors) ---------------- */
.la-split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.la-split img { width: 100%; border-radius: 20px; border: 1px solid var(--la-border); }
.la-split__title { font-size: clamp(27px, 3.6vw, 40px); font-weight: 700; margin-bottom: 22px; }
.la-checklist { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.la-checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--la-soft); font-size: 17px; }
.la-checklist li::before { content: '✓'; color: var(--la-primary); font-weight: 800; flex-shrink: 0; }
.la-ministats { display: flex; gap: 30px; margin: 26px 0; flex-wrap: wrap; }

/* ---------------- Creators ---------------- */
.la-creator { text-align: center; }
.la-creator__avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; border: 2px solid var(--la-border); }
.la-creator__name { font-size: 18px; font-weight: 600; }
.la-creator__spec { color: var(--la-primary); font-size: 14px; font-weight: 600; margin: 4px 0 10px; }
.la-creator__stats { color: var(--la-muted); font-size: 13px; line-height: 1.7; }

/* ---------------- Steps ---------------- */
.la-steps__label { font-weight: 700; font-size: 14px; letter-spacing: .08em; margin: 8px 0 22px; }
.la-step__num { font-family: var(--la-font-head,'Poppins'); font-size: 48px; font-weight: 800; color: var(--la-primary); line-height: 1; margin-bottom: 10px; }
.la-step__num--purple { color: var(--la-secondary); }
.la-step__title { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.la-step__desc { color: var(--la-muted); font-size: 14px; line-height: 1.6; }
.la-step { padding: 0 16px; }

/* ---------------- Reviews (glass) ---------------- */
.la-review {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; padding: 28px 26px; backdrop-filter: blur(8px);
}
.la-review__stars { color: #fbbf24; font-size: 17px; margin-bottom: 14px; }
.la-review__quote { color: #fff; font-size: 16px; line-height: 1.6; margin-bottom: 18px; }
.la-review__author strong { color: #fff; font-weight: 600; }
.la-review__author span { color: var(--la-muted); }

/* ---------------- Community counters ---------------- */
.la-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
.la-counter__num { font-family: var(--la-font-head,'Poppins'); font-size: 44px; font-weight: 700; color: #fff; }
.la-counter__label { color: var(--la-muted); font-size: 14px; margin-top: 4px; }

/* ---------------- Newsletter ---------------- */
.la-news {
  background: linear-gradient(135deg, #101018, #0b0b16);
  border: 1px solid var(--la-border); border-radius: 24px; padding: 60px 40px; text-align: center;
}
.la-news__form { display: flex; gap: 12px; justify-content: center; max-width: 480px; margin: 22px auto 0; flex-wrap: wrap; }
.la-news__input {
  flex: 1; min-width: 220px; background: var(--la-bg); border: 1px solid var(--la-border);
  border-radius: 10px; padding: 14px 16px; color: #fff; font-size: 15px; font-family: var(--la-font-body,'Inter');
}
.la-news__input::placeholder { color: var(--la-muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.la-footer { background: var(--la-bg); border-top: 1px solid var(--la-border); }
.la-footer__main { padding: 70px 0 50px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 30px; }
.la-footer__brand img { height: 56px; width: auto; margin-bottom: 16px; }
.la-footer__about { color: var(--la-muted); font-size: 14px; line-height: 1.7; max-width: 320px; margin-bottom: 18px; }
.la-footer__col h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 18px; }
.la-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.la-footer__col a { color: var(--la-muted); font-size: 14px; transition: color .18s; }
.la-footer__col a:hover { color: #fff; }
.la-social { display: flex; gap: 10px; }
.la-social a {
  width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); transition: background .18s, transform .18s;
}
.la-social a:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.la-social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.la-footer__bottom { border-top: 1px solid var(--la-border); padding: 22px 0; text-align: center; color: var(--la-muted); font-size: 13px; background: #000; }

/* footer minimal variant */
.la-footer--minimal .la-footer__main { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 50px 0 30px; }
.la-footer--minimal .la-footer__cols { display: none; }

/* ============================================================
   REVEAL animation
   ============================================================ */
/* Visible par défaut (sans JS / SEO). L'état "caché" n'est appliqué
   que lorsque le JS a marqué <html class="la-js">, puis révélé au scroll. */
.la-reveal { opacity: 1; transform: none; }
.la-js .la-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.la-js .la-reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .la-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .la-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .la-hero__grid, .la-split { grid-template-columns: 1fr; }
  .la-hero__visual { order: -1; }
  .la-footer__main { grid-template-columns: 1fr 1fr; }
  .la-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .la-section, .la-hero { padding: 70px 0; }
  .la-hero { padding-top: 90px; }
  .la-grid--4, .la-grid--3, .la-grid--2, .la-counters { grid-template-columns: 1fr; }
  .la-counters { grid-template-columns: repeat(2, 1fr); }
  .la-hero__title, .la-head, .la-hero__eyebrow, .la-hero__sub { text-align: center; }
  .la-hero__buttons, .la-hero__stats { justify-content: center; }
  .la-hero__sub { margin-left: auto; margin-right: auto; }
  .la-footer__main { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .la-footer__about { margin-left: auto; margin-right: auto; }

  /* mobile nav */
  .la-burger-label { display: block; }
  .la-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #000; border-bottom: 1px solid var(--la-border);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .la-menu { flex-direction: column; gap: 0; align-items: stretch; padding: 6px 0; width: 100%; }
  .la-menu > li { width: 100%; }
  .la-menu > li > a { border-radius: 0; padding: 14px 22px; border-top: 1px solid var(--la-border); }
  .la-menu li.has-children > a::after { margin-left: auto; }
  .la-submenu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-radius: 0; min-width: 0; padding: 0 0 6px 16px; background: rgba(255,255,255,.03);
  }
  .la-submenu a { padding: 11px 22px; }
  .la-burger:checked ~ .la-nav { max-height: 640px; overflow: auto; }
  .la-header--centered .la-header__inner { grid-template-columns: auto 1fr auto; }
}