@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --paper: #fbf1df;
  --paper-line: #e4d3ad;
  --ink: #262147;
  --ink-soft: #52487a;
  --coral: #e85d4c;
  --coral-ink: #7c2f22;
  --marigold: #f4a93b;
  --marigold-ink: #8a5c10;
  --leaf: #4c9a6a;
  --leaf-ink: #205c3a;
  --sky: #3e7cb1;
  --sky-ink: #1c3f5c;
  --card-bg: #fffdf7;
  --shadow: 220 60% 20%;
  --focus: #1c3f5c;
  --youtube: #ff0000;
}

:root[data-theme="dark"] {
  --paper: #1b2038;
  --paper-line: #2b3155;
  --ink: #f3ecda;
  --ink-soft: #c7c0e6;
  --coral: #ff8770;
  --coral-ink: #ffe3da;
  --marigold: #ffc15e;
  --marigold-ink: #3a2a0c;
  --leaf: #7fd2a0;
  --leaf-ink: #0d2c1c;
  --sky: #7fbdec;
  --sky-ink: #0d2438;
  --card-bg: #242a4a;
  --focus: #ffc15e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1b2038;
    --paper-line: #2b3155;
    --ink: #f3ecda;
    --ink-soft: #c7c0e6;
    --coral: #ff8770;
    --coral-ink: #ffe3da;
    --marigold: #ffc15e;
    --marigold-ink: #3a2a0c;
    --leaf: #7fd2a0;
    --leaf-ink: #0d2c1c;
    --sky: #7fbdec;
    --sky-ink: #0d2438;
    --card-bg: #242a4a;
    --focus: #ffc15e;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 33px,
      var(--paper-line) 33px, var(--paper-line) 34px
    ),
    var(--paper);
  color: var(--ink);
  font-family: 'Nunito', ui-rounded, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: 'Fredoka', ui-rounded, 'Segoe UI', sans-serif;
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}

a { color: inherit; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 2px dashed var(--paper-line);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.logo-mark {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  background: linear-gradient(135deg, var(--coral), var(--marigold));
  display: grid;
  place-items: center;
  color: #fff8ee;
  font-size: 1.15rem;
  transform: rotate(-6deg);
  box-shadow: 0 4px 10px hsl(var(--shadow) / 0.25);
}
.logo small {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.1rem;
}

/* ---------- primary nav + dropdowns ---------- */
nav.primary {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.5rem);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.2vw, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links > li { position: relative; }
.nav-links > li > a,
.nav-links > li > button.nav-top {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0.6rem 0.5rem;
}
.nav-links > li > a::after,
.nav-links > li > button.nav-top::after {
  content: "";
  position: absolute;
  left: 0.5rem; right: 0.5rem; bottom: 0.35rem;
  height: 3px;
  border-radius: 3px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav-links > li > a:hover::after,
.nav-links > li:hover > button.nav-top::after,
.nav-links > li.open > button.nav-top::after { transform: scaleX(1); }
.caret { font-size: 0.6rem; transition: transform 0.2s ease; }
.nav-links > li.open .caret { transform: rotate(180deg); }

/* dropdown panel (single column, e.g. Confidentialité) */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--card-bg);
  border: 2px solid var(--paper-line);
  border-radius: 16px;
  box-shadow: 0 16px 30px hsl(var(--shadow) / 0.18);
  padding: 0.6rem;
  display: none;
  z-index: 50;
}
.nav-links > li:hover > .dropdown,
.nav-links > li.open > .dropdown { display: block; }
.dropdown a {
  display: block;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
}
.dropdown a:hover { background: color-mix(in srgb, var(--coral) 12%, transparent); color: var(--coral-ink); }
.dropdown a.dd-locked { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; opacity: 0.82; }
.dropdown a.dd-locked .dd-lock { font-size: 0.8rem; }

/* ---------- sitewide lesson search ---------- */
.search-trigger { font-size: 1.1rem; }
.search-panel { min-width: 300px; padding: 0.9rem; }
.search-input {
  width: 100%;
  border: 2px solid var(--paper-line);
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--paper);
  color: var(--ink);
}
.search-input:focus { outline: none; border-color: var(--sky); }
.search-results {
  margin-top: 0.7rem;
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.6rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
}
.search-result:hover, .search-result.is-active {
  background: color-mix(in srgb, var(--coral) 12%, transparent);
  color: var(--coral-ink);
}
.search-result .sr-icon { font-size: 1.3rem; flex: none; }
.search-result .sr-text { min-width: 0; }
.search-result .sr-title {
  display: block;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.25;
}
.search-result .sr-cat {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-top: 0.1rem;
}
.search-status, .search-hint {
  margin: 0.5rem 0.2rem 0.1rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 700;
}
@media (min-width: 921px) {
  .search-panel { left: auto; right: 0; width: min(380px, 92vw); }
}

/* mega menu (Leçons) */
.megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 88vw);
  background: var(--card-bg);
  border: 2px solid var(--paper-line);
  border-radius: 20px;
  box-shadow: 0 20px 40px hsl(var(--shadow) / 0.2);
  padding: 1.2rem;
  display: none;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
  z-index: 50;
}
.nav-links > li.has-mega:hover > .megamenu,
.nav-links > li.has-mega.open > .megamenu { display: grid; }
.mega-col h4 {
  font-family: 'Fredoka', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mega-color, var(--coral));
  margin: 0.3rem 0.5rem 0.5rem;
}
.mega-col a {
  display: block;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
  padding: 0.5rem 0.5rem;
  border-radius: 10px;
  line-height: 1.25;
}
.mega-col a:hover { background: color-mix(in srgb, var(--mega-color, var(--coral)) 14%, transparent); }
.mega-col.col-1 { --mega-color: var(--coral); }
.mega-col.col-2 { --mega-color: var(--marigold); }
.mega-col.col-3 { --mega-color: var(--leaf); }
.mega-col.col-4 { --mega-color: var(--sky); }
.mega-col.col-5 { --mega-color: var(--coral-ink); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary {
  background: var(--coral);
  color: #fff9f2;
  box-shadow: 0 5px 0 var(--coral-ink);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--coral-ink); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--coral-ink); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink-soft);
}
.btn-ghost:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.btn-small { padding: 0.5rem 1rem; font-size: 0.85rem; }
/* Quiet, repeatable "Je vérifie" tier — visually lighter than a hero .btn-primary
   so pages with many inline checks don't read as a wall of identical coral pills. */
.btn-check {
  background: color-mix(in srgb, var(--sky) 12%, var(--card-bg));
  color: var(--sky-ink);
  border: 2px solid color-mix(in srgb, var(--sky) 45%, transparent);
  padding: 0.55rem 1.2rem;
  font-size: 0.9rem;
}
.btn-check:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--sky);
  background: color-mix(in srgb, var(--sky) 20%, var(--card-bg));
}
.btn-check:active:not(:disabled) { transform: translateY(0); }
.btn:disabled {
  cursor: progress;
  opacity: 0.65;
  transform: none !important;
  box-shadow: none !important;
}

/* mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--ink-soft);
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--ink);
}

/* ---------- hero ---------- */
.hero {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  position: relative;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--sky-ink);
  background: color-mix(in srgb, var(--sky) 22%, var(--card-bg));
  padding: 0.35rem 0.9rem 0.35rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.eyebrow .dot {
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--sky);
}
.hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
  color: var(--ink);
}
.hero h1 .accent {
  color: var(--coral);
  position: relative;
  display: inline-block;
}
.hero-sub {
  margin-top: 1.1rem;
  max-width: 46ch;
  font-size: 1.08rem;
  color: var(--ink-soft);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.8rem;
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 700;
}
.stars { color: var(--marigold); letter-spacing: 0.05em; font-size: 1rem; }

/* sticker cards */
.sticker-stack {
  position: relative;
  height: clamp(300px, 34vw, 420px);
}
.sticker {
  position: absolute;
  width: clamp(150px, 15vw, 190px);
  background: var(--card-bg);
  border-radius: 20px;
  padding: 1.1rem 1.1rem 1rem;
  box-shadow: 0 14px 28px hsl(var(--shadow) / 0.18);
  text-align: center;
  animation: float 6s ease-in-out infinite;
}
.sticker .emoji { font-size: 2.6rem; line-height: 1; display: inline-block; }
.sticker-1 .emoji { animation: spin-slow 9s linear infinite; transform-origin: 50% 55%; }
.sticker-2 .emoji { animation: cat-wiggle 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
.sticker-3 .emoji { animation: wave-hand 1.8s ease-in-out infinite; transform-origin: 70% 75%; }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cat-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}
@keyframes wave-hand {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(16deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(16deg); }
  80% { transform: rotate(-4deg); }
}
.sticker .fr {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  margin-top: 0.5rem;
  font-size: 1.05rem;
}
.sticker .say {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 700;
  margin-top: 0.15rem;
}
.sticker-1 { top: 0; left: 8%; transform: rotate(-7deg); border: 3px solid var(--coral); animation-delay: 0s; }
.sticker-2 { top: 14%; right: 2%; transform: rotate(6deg); border: 3px solid var(--leaf); animation-delay: 1.2s; z-index: 2; }
.sticker-3 { bottom: 2%; left: 22%; transform: rotate(-3deg); border: 3px solid var(--marigold); animation-delay: 2.4s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}
.sticker-1 { --r: -7deg; }
.sticker-2 { --r: 6deg; }
.sticker-3 { --r: -3deg; }

/* ---------- section shells ---------- */
section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.kicker {
  display: block;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 0.6rem;
}
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.section-head p { margin-top: 0.8rem; color: var(--ink-soft); font-size: 1.02rem; }

/* ---------- tabs / four categories ---------- */
.tabs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.3rem;
}
.tab-card {
  background: var(--card-bg);
  border-radius: 22px;
  padding: 1.6rem 1.4rem;
  position: relative;
  box-shadow: 0 10px 0 var(--tab-ink, var(--coral-ink)), 0 16px 30px hsl(var(--shadow) / 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-top: 6px solid var(--tab-color, var(--coral));
}
.tab-card:hover { transform: translateY(-6px); }
.tab-card .tab-icon {
  width: 3rem; height: 3rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tab-color, var(--coral)) 20%, var(--card-bg));
  display: grid; place-items: center;
  font-size: 1.5rem;
  margin-bottom: 0.9rem;
}
.tab-card h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.tab-card p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.tab-card .tag {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--tab-color, var(--coral));
}
.tab-1 { --tab-color: var(--coral); --tab-ink: var(--coral-ink); }
.tab-2 { --tab-color: var(--marigold); --tab-ink: var(--marigold-ink); }
.tab-3 { --tab-color: var(--leaf); --tab-ink: var(--leaf-ink); }
.tab-4 { --tab-color: var(--sky); --tab-ink: var(--sky-ink); }
.tab-5 { --tab-color: var(--coral-ink); --tab-ink: var(--ink); }

/* ---------- path / how it works ---------- */
.path-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.path-rail::before {
  content: "";
  position: absolute;
  top: 28px; left: 6%; right: 6%;
  height: 0;
  border-top: 3px dashed var(--ink-soft);
  opacity: 0.35;
}
.step {
  position: relative;
  text-align: center;
  padding-top: 0.2rem;
}
.step-num {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--card-bg);
  border: 3px solid var(--step-color, var(--sky));
  display: grid; place-items: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--step-color, var(--sky));
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.step p { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.step-1 { --step-color: var(--coral); }
.step-2 { --step-color: var(--marigold); }
.step-3 { --step-color: var(--leaf); }
.step-4 { --step-color: var(--sky); }

/* ---------- word of the day ---------- */
.word-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sky) 16%, var(--card-bg)), var(--card-bg));
  border-radius: 26px;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2rem);
  border: 2px dashed color-mix(in srgb, var(--sky) 45%, transparent);
}
.word-badge {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--sky);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
}
.word-main .fr-word {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--ink);
}
.word-main .meaning { color: var(--ink-soft); font-weight: 700; font-size: 0.95rem; }
.word-emoji { font-size: 3rem; }

/* ---------- teachers/parents trust ---------- */
.trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.trust-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.check {
  flex: none;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--leaf);
  color: #fff;
  display: grid; place-items: center;
  font-size: 0.8rem;
  margin-top: 0.1rem;
}
.stat-panel {
  background: var(--ink);
  color: var(--paper);
  border-radius: 26px;
  padding: clamp(1.8rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.stat b {
  display: block;
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-variant-numeric: tabular-nums;
  color: var(--marigold);
}
.stat span { font-size: 0.8rem; opacity: 0.85; font-weight: 700; }

/* ---------- final cta ---------- */
.final-cta {
  text-align: center;
  background: linear-gradient(160deg, var(--coral), color-mix(in srgb, var(--coral) 70%, var(--marigold)));
  border-radius: 30px;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem);
  color: #fff9f2;
  position: relative;
  overflow: hidden;
}
.final-cta h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: #fff9f2; }
.final-cta p { margin-top: 0.7rem; opacity: 0.95; max-width: 50ch; margin-left: auto; margin-right: auto; }
.final-cta .hero-actions { justify-content: center; margin-top: 1.7rem; }
.final-cta .btn-primary { background: #fff9f2; color: var(--coral-ink); box-shadow: 0 5px 0 rgba(0,0,0,0.18); }
.final-cta .btn-ghost { border-color: rgba(255,255,255,0.6); color: #fff9f2; }
.final-cta .btn-ghost:hover { background: rgba(255,255,255,0.15); }

/* ---------- breadcrumb ---------- */
.breadcrumb {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.4rem;
}
.breadcrumb a { text-decoration: none; color: var(--sky-ink); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { opacity: 0.5; }

/* ---------- simple page hero (lessons, legal) ---------- */
.page-hero {
  padding: clamp(2.2rem, 5vw, 3.2rem) 0 clamp(1.5rem, 3vw, 2rem);
}
.page-hero .kicker { margin-bottom: 0.5rem; }
.page-hero h1 { font-size: clamp(2rem, 4.2vw, 2.8rem); }
.page-hero p { margin-top: 0.9rem; max-width: 60ch; color: var(--ink-soft); font-size: 1.03rem; }
.page-hero.theme-coral .kicker { color: var(--coral); }
.page-hero.theme-marigold .kicker { color: var(--marigold-ink); }
.page-hero.theme-leaf .kicker { color: var(--leaf-ink); }
.page-hero.theme-sky .kicker { color: var(--sky-ink); }

/* ---------- lesson hub grid (reuses tab-card look, smaller) ---------- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
.hub-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 1.4rem 1.3rem;
  text-decoration: none;
  display: block;
  border-top: 6px solid var(--tab-color, var(--coral));
  box-shadow: 0 8px 0 var(--tab-ink, var(--coral-ink)), 0 14px 26px hsl(var(--shadow) / 0.12);
  transition: transform 0.2s ease;
}
.hub-card:hover { transform: translateY(-5px); }
.hub-card h3 { font-size: 1.05rem; margin-bottom: 0.35rem; color: var(--ink); }
.hub-card p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }
.hub-card .tag { display: inline-block; margin-top: 0.7rem; font-size: 0.7rem; font-weight: 800; color: var(--tab-color, var(--coral)); }
.hub-module-heading {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.7rem;
  margin: 1.6rem 0 0.1rem;
  padding-top: 1.3rem;
  border-top: 2px dashed var(--paper-line);
}
.hub-module-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.hub-module-heading h3 { font-size: 1.15rem; margin: 0; }
.hub-module-heading .module-when { font-size: 0.72rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; background: color-mix(in srgb, var(--tab-color, var(--coral)) 16%, var(--card-bg)); padding: 0.2rem 0.6rem; border-radius: 999px; }
.hub-module-heading .module-theme { flex-basis: 100%; font-size: 0.85rem; color: var(--ink-soft); }
.hub-card.is-soon { opacity: 0.78; cursor: default; }
.hub-card.is-soon:hover { transform: none; }
.hub-card .tag.tag-soon { color: var(--ink-soft); }
.hub-card.is-locked { opacity: 0.72; }
.hub-card.is-locked:hover { transform: none; }
.hub-card .tag.tag-locked { color: var(--marigold-ink); }

/* ---------- lesson detail page ---------- */
.lesson-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
.lesson-card {
  background: var(--card-bg);
  border-radius: 22px;
  padding: clamp(1.6rem, 4vw, 2.2rem);
  border: 2px dashed var(--paper-line);
}
.lesson-card h2 { font-size: 1.3rem; margin-bottom: 0.8rem; }
.lesson-card ul { padding-left: 1.2rem; color: var(--ink-soft); }
.lesson-card li { margin-bottom: 0.5rem; }
.soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: color-mix(in srgb, var(--marigold) 22%, var(--card-bg));
  color: var(--marigold-ink);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.side-card {
  background: var(--ink);
  color: var(--paper);
  border-radius: 22px;
  padding: 1.5rem;
}
.side-card h3 { font-size: 1rem; margin-bottom: 0.6rem; color: var(--marigold); }
.side-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.side-card a { text-decoration: none; font-weight: 700; font-size: 0.9rem; color: var(--paper); opacity: 0.9; }
.side-card a:hover { opacity: 1; text-decoration: underline; }

/* ---------- compiler buttons grid (education technologique) ---------- */
.compiler-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  margin-top: 1.2rem;
}
.compiler-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--card-bg);
  border: 2px solid var(--paper-line);
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.compiler-card:hover { transform: translateY(-3px); border-color: var(--sky); }
.compiler-card .ic { font-size: 1.7rem; }
.compiler-card b { display: block; font-family: 'Fredoka', sans-serif; font-size: 1rem; }
.compiler-card span { display: block; font-size: 0.82rem; color: var(--ink-soft); }
.safety-note {
  margin-top: 1.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--sky) 12%, var(--card-bg));
  border-left: 4px solid var(--sky);
  padding: 0.8rem 1rem;
  border-radius: 10px;
}

/* ---------- HTML code playground (éducation technologique) ---------- */
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem; }
.snippet-bar { margin-bottom: 1.2rem; }
.snippet-btn {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  background: color-mix(in srgb, var(--sky) 16%, var(--card-bg));
  color: var(--sky-ink);
  border: 2px solid color-mix(in srgb, var(--sky) 35%, transparent);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.snippet-btn:hover { transform: translateY(-2px); }
.code-playground {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 1.2rem;
}
.editor-pane, .preview-pane {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.editor-pane { background: var(--ink); }
.pane-label {
  display: block;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--paper);
  opacity: 0.6;
  padding: 0.6rem 0.9rem 0;
}
.editor-pane textarea {
  flex: 1;
  min-height: 260px;
  width: 100%;
  background: transparent;
  color: #d9f0e3;
  border: none;
  resize: vertical;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.7rem 0.9rem 1rem;
}
.editor-pane textarea:focus { outline: none; }
.preview-pane { background: var(--card-bg); border: 2px solid var(--paper-line); }
.preview-pane .browser-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.8rem;
  background: color-mix(in srgb, var(--ink) 6%, var(--card-bg));
  border-bottom: 2px solid var(--paper-line);
}
.browser-bar span:not(.pane-label) {
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--paper-line);
}
.browser-bar span:not(.pane-label):nth-child(1) { background: var(--coral); }
.browser-bar span:not(.pane-label):nth-child(2) { background: var(--marigold); }
.browser-bar span:not(.pane-label):nth-child(3) { background: var(--leaf); }
.preview-pane .browser-bar .pane-label { padding: 0; margin-left: 0.4rem; color: var(--ink-soft); opacity: 1; }
.preview-pane iframe {
  flex: 1;
  min-height: 260px;
  width: 100%;
  border: none;
  background: #fff;
}

/* jump navigation for long reference pages */
.jump-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.8rem; }
.jump-nav a {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--card-bg);
  border: 2px solid var(--paper-line);
  text-decoration: none;
  color: var(--ink-soft);
}
.jump-nav a:hover { border-color: var(--coral); color: var(--coral-ink); }

/* JS demo output panel (cours pratique JS) */
.js-output-panel {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--paper-line);
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
}
.js-output-panel .browser-bar { justify-content: space-between; }
.js-output-panel .browser-bar .pane-label { color: var(--ink-soft); opacity: 1; }
.js-output-panel .run-btn {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.76rem;
  background: var(--leaf);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
}
.js-output-panel .run-btn:hover { filter: brightness(1.08); }
.js-output-panel .js-out {
  flex: 1;
  min-height: 90px;
  padding: 0.9rem 1rem;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.88rem;
  color: var(--ink);
  white-space: pre-wrap;
}
.js-output-panel .js-out:empty::before { content: "Clique sur Exécuter pour voir le résultat…"; color: var(--ink-soft); font-style: italic; }
.js-output-panel .js-demo-target { padding: 0.9rem 1rem 0.3rem; }
.js-output-panel.compiler .js-out { min-height: 260px; }

/* free-form compiler sections (Cours pratique) */
.compiler-section { margin-bottom: 2.4rem; }
.compiler-section h2 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.compiler-section > p { color: var(--ink-soft); margin-bottom: 1rem; }
.code-playground-triple {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 1rem;
}
.code-playground-triple .editor-pane textarea { min-height: 220px; }
.code-playground-triple .preview-pane iframe { min-height: 220px; }
.compiler-divider {
  border: none;
  border-top: 3px dashed var(--paper-line);
  margin: 2.2rem 0 2.4rem;
}

/* step-by-step static demos (cours pratique) */
.step-guide { display: grid; gap: 1.3rem; margin-top: 1rem; }
.step-guide-item {
  background: var(--card-bg);
  border: 2px dashed var(--paper-line);
  border-radius: 20px;
  padding: 1.3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  align-items: stretch;
}
.step-guide-item h3 { font-size: 1rem; margin-bottom: 0.6rem; }
.code-sample {
  background: var(--ink);
  color: #d9f0e3;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  overflow-x: auto;
  margin: 0;
  white-space: pre-wrap;
}
.mini-preview { border-radius: 12px; overflow: hidden; border: 2px solid var(--paper-line); display: flex; flex-direction: column; }
.mini-preview .browser-bar { display: flex; gap: 0.3rem; padding: 0.45rem 0.6rem; background: color-mix(in srgb, var(--ink) 6%, var(--card-bg)); }
.mini-preview .browser-bar span { width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.mini-preview iframe { flex: 1; min-height: 110px; width: 100%; border: none; background: #fff; }

/* ---------- click-to-reveal Q&A (listening comprehension checks) ---------- */
.qa-list { display: grid; gap: 0.8rem; }
.qa-item {
  background: var(--card-bg);
  border: 2px solid var(--paper-line);
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  transition: border-color 0.15s ease;
}
.qa-item[open] { border-color: var(--sky); }
.qa-item summary {
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary .qa-toggle {
  flex: none;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--sky-ink);
  background: color-mix(in srgb, var(--sky) 16%, var(--card-bg));
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  transition: transform 0.15s ease;
}
.qa-item[open] summary .qa-toggle { transform: rotate(180deg); }
.qa-item p { margin: 0.7rem 0 0; color: var(--leaf-ink); font-weight: 700; animation: fade-up 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
  .qa-item summary .qa-toggle, .qa-item p { animation: none; transition: none; }
}

/* ---------- quiz widget ---------- */
.quiz-progress { font-size: 0.8rem; font-weight: 800; color: var(--ink-soft); margin-bottom: 0.6rem; }
.quiz-question h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.quiz-options { display: grid; gap: 0.7rem; margin-bottom: 1rem; }
.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card-bg);
  border: 2px solid var(--paper-line);
  border-radius: 14px;
  padding: 0.8rem 1rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.quiz-option:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--sky); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--sky) 60%, transparent); }
.quiz-option:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.quiz-option:disabled { cursor: default; }
.quiz-options .quiz-option { animation: fade-up 0.3s ease both; }
.quiz-options .quiz-option:nth-child(2) { animation-delay: 0.05s; }
.quiz-options .quiz-option:nth-child(3) { animation-delay: 0.1s; }
.quiz-options .quiz-option:nth-child(4) { animation-delay: 0.15s; }
.quiz-options .quiz-option:nth-child(n+5) { animation-delay: 0.2s; }
.quiz-option.is-correct { background: color-mix(in srgb, var(--leaf) 25%, var(--card-bg)); border-color: var(--leaf); animation: quiz-correct-pop 0.4s ease; }
.quiz-option.is-wrong { background: color-mix(in srgb, var(--coral) 20%, var(--card-bg)); border-color: var(--coral); animation: quiz-wrong-shake 0.4s ease; }
@keyframes quiz-correct-pop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes quiz-wrong-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.quiz-feedback { font-weight: 800; font-size: 0.9rem; margin-bottom: 1rem; min-height: 1.4rem; transform-origin: center; }
.quiz-feedback.ok, .quiz-feedback.ko { padding: 0.65rem 0.9rem; border-radius: 14px; }
.quiz-feedback.ok { color: var(--leaf-ink); background: color-mix(in srgb, var(--leaf) 14%, var(--card-bg)); border: 2px solid color-mix(in srgb, var(--leaf) 32%, var(--paper-line)); }
.quiz-feedback.ko { color: var(--coral-ink); background: color-mix(in srgb, var(--coral) 12%, var(--card-bg)); border: 2px solid color-mix(in srgb, var(--coral) 32%, var(--paper-line)); }
.quiz-result { text-align: center; }
.quiz-result .stars { font-size: 1.8rem; display: block; margin-bottom: 0.6rem; letter-spacing: 0.15em; color: var(--marigold); }
.quiz-result b { font-family: 'Fredoka', sans-serif; font-size: 1.6rem; display: block; margin-bottom: 0.4rem; }
.quiz-report { text-align: left; margin: 1.3rem 0; }
.quiz-report h4 { font-family: 'Fredoka', sans-serif; font-size: 1rem; margin-bottom: 0.7rem; color: var(--coral-ink); }
.quiz-report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.quiz-report-list li {
  background: color-mix(in srgb, var(--coral) 8%, var(--card-bg));
  border: 2px solid color-mix(in srgb, var(--coral) 28%, var(--paper-line));
  border-radius: 14px;
  padding: 0.8rem 1rem;
  animation: fade-up 0.3s ease both;
}
.quiz-report-list li:nth-child(2) { animation-delay: 0.05s; }
.quiz-report-list li:nth-child(3) { animation-delay: 0.1s; }
.quiz-report-list li:nth-child(4) { animation-delay: 0.15s; }
.quiz-report-list li:nth-child(n+5) { animation-delay: 0.2s; }
.qr-question { font-weight: 800; margin: 0 0 0.5rem; }
.qr-your { margin: 0 0 0.3rem; color: var(--coral-ink); }
.qr-correct { margin: 0 0 0.3rem; color: var(--leaf-ink); }
.qr-why { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--ink-soft); background: color-mix(in srgb, var(--sky) 14%, var(--card-bg)); border-radius: 10px; padding: 0.5rem 0.7rem; }
.quiz-report-perfect { font-weight: 800; color: var(--leaf-ink); margin: 1rem 0; }
@media (prefers-reduced-motion: reduce) {
  .quiz-option.is-correct, .quiz-option.is-wrong, .quiz-report-list li { animation: none; }
}

/* ---------- quiz reflection timer ---------- */
.quiz-timer { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; }
.quiz-timer-icon { flex: none; font-size: 1.15rem; }
.quiz-timer-track {
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sky) 14%, var(--card-bg));
  border: 2px solid var(--paper-line);
  overflow: hidden;
}
.quiz-timer-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--leaf), var(--sky));
  transition: width 1s linear, background 0.3s ease;
}
.quiz-timer-fill.is-warning { background: linear-gradient(90deg, var(--marigold), var(--coral)); }
.quiz-timer-fill.is-danger { background: var(--coral); animation: quiz-timer-pulse 0.6s ease-in-out infinite; }
.quiz-timer-count { flex: none; min-width: 2.1em; text-align: right; font-weight: 800; font-size: 0.85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.quiz-timer-count.is-danger { color: var(--coral-ink); }
@keyframes quiz-timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.quiz-feedback.timeout { color: var(--coral-ink); }
@media (prefers-reduced-motion: reduce) {
  .quiz-timer-fill.is-danger { animation: none; }
}

/* ---------- English lessons: vocab / pets / grammar / exercises ---------- */
.lesson-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.4rem 0 0; }

.vocab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; }
.vocab-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 1.2rem 1.3rem;
  border-top: 5px solid var(--tab-color, var(--coral));
  box-shadow: 0 10px 22px hsl(var(--shadow) / 0.12);
}
.vocab-card .vocab-icon {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tab-color, var(--coral)) 20%, var(--card-bg));
  display: grid; place-items: center;
  font-size: 1.3rem;
  margin-bottom: 0.7rem;
}
.vocab-card h3 { font-size: 1rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--tab-color, var(--coral)); margin-bottom: 0.3rem; }
.vocab-card p { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 0.5rem; }
.vocab-card .example { font-size: 0.85rem; font-style: italic; color: var(--ink); margin: 0; }
.vocab-card .example a { color: var(--tab-color, var(--coral)); font-weight: 700; text-decoration: none; }
.vocab-card .example a:hover { text-decoration: underline; }
.vocab-card .niveau-tag {
  display: inline-block; font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 0.7rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--marigold-ink); background: color-mix(in srgb, var(--marigold) 24%, var(--card-bg));
  border: 2px solid color-mix(in srgb, var(--marigold) 50%, transparent);
  border-radius: 999px; padding: 0.15rem 0.65rem; margin-bottom: 0.55rem;
}

/* ---------- Dictionnaire page ---------- */
.word-chip.filter-chip { cursor: pointer; border: none; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease; }
.word-chip.filter-chip:hover { transform: translateY(-2px); }
.word-chip.filter-chip.is-active {
  background: var(--coral); color: #fff9f2;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--coral) 45%, transparent);
}
.dict-count { margin: 0.8rem 0.2rem 0.6rem; font-size: 0.85rem; font-weight: 800; color: var(--ink-soft); }

/* ---------- Dictionnaire : fiche-mot (page dédiée à un mot) ---------- */
.word-fiche {
  background: var(--card-bg); border-radius: 22px; padding: 1.6rem 1.8rem;
  border: 2px solid var(--paper-line); box-shadow: 0 12px 26px hsl(var(--shadow) / 0.1);
  margin-bottom: 1.6rem;
}
.word-fiche h2 { font-size: 1.3rem; margin-bottom: 0.8rem; }
.word-vedette { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.word-vedette .word-icon {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--tab-color, var(--coral)) 20%, var(--card-bg));
  display: grid; place-items: center; font-size: 1.7rem;
}
.word-vedette h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.word-vedette .word-phon { font-family: 'Nunito', sans-serif; font-weight: 700; color: var(--ink-soft); font-size: 1.05rem; }
.word-speak-btn {
  border: 2px solid var(--paper-line); background: var(--card-bg); border-radius: 50%;
  width: 2.2rem; height: 2.2rem; flex: none; display: grid; place-items: center;
  font-size: 1.05rem; cursor: pointer; color: var(--sky-ink); padding: 0;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.word-speak-btn:hover { border-color: var(--sky); background: color-mix(in srgb, var(--sky) 14%, var(--card-bg)); transform: translateY(-2px); }
.word-speak-btn:active { transform: translateY(0) scale(0.94); }
.word-speak-btn-main { width: 2.6rem; height: 2.6rem; font-size: 1.25rem; }
.word-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.7rem 0 1.1rem; }
.word-chip.chip-leaf { background: color-mix(in srgb, var(--leaf) 18%, var(--card-bg)); color: var(--leaf-ink); border-color: color-mix(in srgb, var(--leaf) 40%, transparent); }
.word-chip.chip-coral { background: color-mix(in srgb, var(--coral) 16%, var(--card-bg)); color: var(--coral-ink); border-color: color-mix(in srgb, var(--coral) 40%, transparent); }
.word-chip.chip-marigold { background: color-mix(in srgb, var(--marigold) 20%, var(--card-bg)); color: var(--marigold-ink); border-color: color-mix(in srgb, var(--marigold) 45%, transparent); }
.word-chip.word-chip-say { cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.word-chip.word-chip-say:hover, .word-chip.word-chip-say:focus-visible { transform: translateY(-2px); }
.word-chip.word-chip-say .chip-say-icon { margin-right: 0.35rem; }
.word-def { font-size: 1.05rem; line-height: 1.75; margin: 0 0 1rem; }
.word-example { background: color-mix(in srgb, var(--sky) 10%, var(--card-bg)); border-left: 4px solid var(--sky); border-radius: 0 12px 12px 0; padding: 0.8rem 1.1rem; font-style: italic; margin: 0 0 1rem; }
.word-syn-ant { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.word-syn-ant .box { border-radius: 14px; padding: 0.9rem 1.1rem; border: 2px dashed var(--paper-line); }
.word-syn-ant h4 { font-family: 'Fredoka', sans-serif; font-size: 0.85rem; margin-bottom: 0.5rem; }
.word-syn-ant.syn h4 { color: var(--leaf-ink); }
.word-syn-ant.ant h4 { color: var(--coral-ink); }
.word-source { font-size: 0.85rem; color: var(--ink-soft); margin-top: 1rem; }
.word-source a { color: var(--tab-color, var(--coral)); font-weight: 700; text-decoration: none; }
.word-source a:hover { text-decoration: underline; }

/* ---------- conjugaison colorée (radical / terminaison / pronom) ---------- */
.conj-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: var(--ink-soft); margin: 0.6rem 0 1.2rem; }
.conj-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.conj-legend .swatch { width: 0.9rem; height: 0.9rem; border-radius: 4px; display: inline-block; }
.conj-legend .swatch.pronom { background: var(--sky); }
.conj-legend .swatch.radical { background: var(--coral); }
.conj-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.conj-tabs button {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.85rem;
  padding: 0.5rem 1.05rem; border-radius: 999px; border: 2px solid var(--paper-line);
  background: var(--card-bg); color: var(--ink); cursor: pointer; transition: all 0.15s ease;
}
.conj-tabs button:hover { border-color: var(--sky); }
.conj-tabs button.is-active { background: var(--sky); border-color: var(--sky); color: #fff9f2; }
.conj-block { display: none; }
.conj-block.is-active { display: block; }
.conj-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border-radius: 16px; overflow: hidden; }
.conj-table td { padding: 0.6rem 1rem; border-bottom: 2px dashed var(--paper-line); font-size: 1rem; font-family: 'Fredoka', sans-serif; }
.conj-table tr:last-child td { border-bottom: none; }
.conj-table td.conj-pronom-cell { color: var(--sky-ink); font-weight: 700; width: 40%; }
.conj-radical, .conj-aux { color: var(--coral-ink); font-weight: 800; }
.conj-fin, .conj-participe { color: var(--ink); font-weight: 500; }

.pet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.pet-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 1.1rem 1rem;
  text-align: center;
  border: 2px solid var(--paper-line);
}
.pet-card .pet-emoji { font-size: 2.6rem; margin-bottom: 0.4rem; }
.pet-card h3 { font-family: 'Fredoka', sans-serif; font-size: 1rem; margin-bottom: 0.5rem; }
.pet-card p { font-size: 0.82rem; color: var(--ink-soft); margin: 0.25rem 0; text-align: left; }
.pet-card p b { color: var(--ink); }

/* ---------- email/letter reading card ---------- */
.mail-card { border-radius: 16px; overflow: hidden; border: 2px solid var(--paper-line); background: var(--card-bg); }
.mail-card .browser-bar { justify-content: flex-start; gap: 0.5rem; }
.mail-card .browser-bar .mail-from { margin-left: 0.6rem; font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.mail-body { padding: 1.4rem 1.6rem; }
.mail-body .mail-meta { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--ink-soft); }
.mail-body .mail-meta b { color: var(--ink); }
.mail-body p { margin: 0 0 0.9rem; line-height: 1.75; }
.mail-body p:last-child { margin-bottom: 0; }

/* ---------- clickable word-chip choices (pronunciation games etc.) ---------- */
.word-chip.pickable { cursor: pointer; font-family: 'Fredoka', sans-serif; transition: transform 0.15s ease; }
.word-chip.pickable:hover:not(:disabled) { transform: translateY(-2px); }
.word-chip.pickable:disabled { cursor: default; }
.word-chip.pick-correct { background: color-mix(in srgb, var(--leaf) 28%, var(--card-bg)); border-color: var(--leaf); color: var(--leaf-ink); animation: pop-in 0.35s cubic-bezier(.34,1.56,.64,1); }
.word-chip.pick-wrong { background: color-mix(in srgb, var(--coral) 22%, var(--card-bg)); border-color: var(--coral); color: var(--coral-ink); animation: shake 0.4s ease; }

.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.rule-item { display: flex; gap: 0.8rem; align-items: flex-start; background: var(--card-bg); border-radius: 16px; padding: 1rem 1.1rem; border: 2px solid var(--paper-line); }
.rule-item .rule-icon {
  flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: color-mix(in srgb, var(--leaf) 22%, var(--card-bg));
  display: grid; place-items: center; font-size: 1.1rem;
}
.rule-item.danger .rule-icon { background: color-mix(in srgb, var(--coral) 26%, var(--card-bg)); }
.rule-item h4 { font-family: 'Fredoka', sans-serif; font-size: 0.95rem; margin-bottom: 0.2rem; }
.rule-item h4 a { text-decoration: none; }
.rule-item h4 a:hover { color: var(--coral); text-decoration: underline; }
.rule-item p { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.rule-item.danger h4 { color: var(--coral-ink); }

.dialogue { display: grid; gap: 0.8rem; max-width: 640px; }
.dialogue-bubble { border-radius: 18px; padding: 0.9rem 1.1rem; max-width: 85%; font-size: 0.95rem; }
.dialogue-bubble b { display: block; font-family: 'Fredoka', sans-serif; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.2rem; opacity: 0.75; }
.dialogue-bubble.child { background: color-mix(in srgb, var(--sky) 20%, var(--card-bg)); }
.dialogue-bubble.dad { background: color-mix(in srgb, var(--marigold) 22%, var(--card-bg)); margin-left: auto; }

.imperative-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.imperative-box { border-radius: 18px; padding: 1.3rem 1.4rem; border: 2px dashed var(--paper-line); background: var(--card-bg); }
.imperative-box.aff { border-color: var(--leaf); }
.imperative-box.neg { border-color: var(--coral); }
.imperative-box.sky { border-color: var(--sky); }
.imperative-box h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.imperative-box ul { margin: 0.7rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); }
.imperative-box li { margin-bottom: 0.4rem; }
.imperative-box li b { color: var(--ink); }
.imperative-box .rule-note { margin-top: 0.7rem; font-size: 0.82rem; color: var(--ink-soft); }

.cross {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--coral); color: #fff; display: grid; place-items: center;
  font-size: 0.8rem; margin-top: 0.1rem;
}
.dodont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.dodont-col h4 { font-family: 'Fredoka', sans-serif; font-size: 0.95rem; margin-bottom: 0.7rem; }
.dodont-col.yes h4 { color: var(--leaf-ink); }
.dodont-col.no h4 { color: var(--coral-ink); }

.word-bank { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0 1.2rem; }
.word-chip {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.8rem;
  background: color-mix(in srgb, var(--sky) 16%, var(--card-bg));
  color: var(--sky-ink); border: 2px solid color-mix(in srgb, var(--sky) 35%, transparent);
  border-radius: 999px; padding: 0.35rem 0.85rem;
}

.tf-list { display: grid; gap: 1rem; }
.tf-item { background: var(--card-bg); border: 2px solid var(--paper-line); border-radius: 16px; padding: 1rem 1.2rem; }
.tf-item .statement { font-weight: 700; margin: 0 0 0.7rem; }
.tf-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.tf-btn {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.85rem;
  padding: 0.45rem 1.1rem; border-radius: 999px; border: 2px solid var(--paper-line);
  background: var(--card-bg); cursor: pointer; color: var(--ink);
}
.tf-btn:hover:not(:disabled) { border-color: var(--sky); }
.tf-btn:disabled { cursor: default; }
.tf-btn.pick-correct { background: color-mix(in srgb, var(--leaf) 28%, var(--card-bg)); border-color: var(--leaf); }
.tf-btn.pick-wrong { background: color-mix(in srgb, var(--coral) 22%, var(--card-bg)); border-color: var(--coral); }
.tf-btn.missed { outline: 2px dashed var(--marigold); outline-offset: 2px; }

.freewrite {
  width: 100%; min-height: 140px; border: 2px dashed var(--paper-line); border-radius: 16px;
  padding: 1rem 1.2rem; font-family: 'Nunito', sans-serif; font-size: 1rem; line-height: 1.6;
  background: var(--card-bg); color: var(--ink); resize: vertical;
}
.freewrite:focus { outline: none; border-color: var(--sky); }
.tf-explain { margin-top: 0.6rem; font-size: 0.85rem; font-weight: 700; min-height: 1.2rem; }
.tf-explain.ok { color: var(--leaf-ink); }
.tf-explain.ko { color: var(--coral-ink); }

.fillblank-item { margin-bottom: 1rem; font-size: 0.98rem; }
.fillblank-item input[type="text"] {
  border: 2px solid var(--paper-line); border-radius: 10px; padding: 0.35rem 0.6rem;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.95rem; width: 150px;
  background: var(--card-bg); color: var(--ink);
}
.fillblank-item input.is-right { border-color: var(--leaf); background: color-mix(in srgb, var(--leaf) 16%, var(--card-bg)); }
.fillblank-item input.is-wrong { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 14%, var(--card-bg)); }
.fillblank-item .answer-hint { font-size: 0.8rem; color: var(--leaf-ink); font-weight: 700; margin-left: 0.5rem; }
.exercise-actions { margin-top: 1rem; display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.exercise-score { font-weight: 800; font-size: 0.9rem; color: var(--ink-soft); }

.info-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border-radius: 16px; overflow: hidden; }
.info-table th, .info-table td { text-align: left; padding: 0.7rem 1rem; border-bottom: 2px dashed var(--paper-line); font-size: 0.9rem; }
.info-table th { color: var(--ink-soft); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; background: color-mix(in srgb, var(--sky) 10%, var(--card-bg)); }
.info-table td { color: var(--ink); }
.info-table tr:last-child td { border-bottom: none; }

.profile-card { display: flex; gap: 1.2rem; align-items: flex-start; background: var(--card-bg); border-radius: 20px; padding: 1.4rem 1.6rem; border: 2px dashed var(--paper-line); }
.profile-card .profile-avatar { flex: none; width: 4rem; height: 4rem; border-radius: 50%; background: color-mix(in srgb, var(--sky) 22%, var(--card-bg)); display: grid; place-items: center; font-size: 2rem; }
.profile-card p { margin: 0 0 0.5rem; }
.profile-card p:last-child { margin-bottom: 0; }

@media (max-width: 920px) {
  .imperative-grid { grid-template-columns: 1fr; }
  .dodont-grid { grid-template-columns: 1fr; }
  .profile-card { flex-direction: column; align-items: center; text-align: center; }
}

/* ---------- about page: testimonials & video ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.3rem; }
.testimonial-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 1.5rem 1.6rem;
  border-top: 6px solid var(--tab-color, var(--sky));
  box-shadow: 0 10px 22px hsl(var(--shadow) / 0.14);
}
.testimonial-card .quote-mark {
  font-family: 'Fredoka', sans-serif;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--tab-color, var(--sky));
  opacity: 0.5;
  margin-bottom: 0.3rem;
}
.testimonial-card p.quote { font-style: italic; color: var(--ink); margin: 0 0 1rem; }
.testimonial-card .author { font-weight: 800; font-size: 0.88rem; color: var(--ink-soft); }
.testimonial-card .author span { display: block; font-weight: 700; font-size: 0.78rem; opacity: 0.75; }
.testimonial-card.placeholder { border-top-style: dashed; opacity: 0.8; }
.testimonial-card.placeholder p.quote { color: var(--ink-soft); }

.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 32px hsl(var(--shadow) / 0.2);
  border: 3px solid var(--paper-line);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.youtube-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  background: color-mix(in srgb, var(--coral) 10%, var(--card-bg));
  border-radius: 18px;
  padding: 1.2rem 1.4rem;
  margin-top: 1.4rem;
}
.youtube-cta .yt-icon { flex: none; font-size: 2rem; }
.youtube-cta p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; flex: 1; min-width: 200px; }

/* ---------- legal / article pages ---------- */
.legal-updated {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--leaf-ink);
  background: color-mix(in srgb, var(--leaf) 20%, var(--card-bg));
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.legal-article {
  background: var(--card-bg);
  border-radius: 24px;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 2px dashed var(--paper-line);
  max-width: 800px;
}
.legal-article h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 0.7rem;
  color: var(--ink);
}
.legal-article h2:first-child { margin-top: 0; }
.legal-article p { margin: 0 0 0.9rem; color: var(--ink-soft); }
.legal-article ul { margin: 0 0 0.9rem; padding-left: 1.2rem; color: var(--ink-soft); }
.legal-article li { margin-bottom: 0.4rem; }
.legal-article strong { color: var(--ink); }
.legal-article a { color: var(--sky-ink); text-decoration: underline; }
.legal-toc {
  background: var(--card-bg);
  border-radius: 18px;
  border: 2px solid var(--paper-line);
  padding: 1.2rem 1.3rem;
  font-size: 0.88rem;
}
.legal-toc h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.6rem; color: var(--coral); }
.legal-toc ol { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); display: grid; gap: 0.4rem; }
.legal-toc a { text-decoration: none; color: inherit; }
.legal-toc a:hover { color: var(--coral); }
.legal-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 2rem;
  align-items: start;
}
.contact-card {
  background: var(--card-bg);
  border: 2px dashed var(--paper-line);
  border-radius: 20px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1rem;
}
.contact-card b { font-family: 'Fredoka', sans-serif; display: block; margin-bottom: 0.3rem; }
.contact-card a.mail { color: var(--coral-ink); font-weight: 800; text-decoration: none; }
.contact-card a.mail:hover { text-decoration: underline; }
.fill-in { background: color-mix(in srgb, var(--marigold) 25%, transparent); padding: 0.05rem 0.35rem; border-radius: 5px; }

/* ---------- project idea: poster mockup ---------- */
.poster-mock {
  position: relative;
  max-width: 440px;
  margin: 1.6rem auto 2rem;
  background: var(--card-bg);
  border: 3px dashed var(--paper-line);
  border-radius: 22px;
  padding: 2.2rem 1.7rem 1.7rem;
  box-shadow: 0 20px 40px hsl(var(--shadow) / 0.18);
  transform: rotate(-1.5deg);
}
.poster-mock .tape {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 96px;
  height: 30px;
  background: color-mix(in srgb, var(--marigold) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--marigold) 70%, transparent);
  border-radius: 3px;
  opacity: 0.9;
}
.poster-mock .poster-title {
  font-family: 'Fredoka', sans-serif;
  text-align: center;
  font-size: 1.15rem;
  margin: 0 0 1.2rem;
  color: var(--ink);
}
.poster-mock .poster-line {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}
.poster-mock .poster-line:last-child { margin-bottom: 0; }
.poster-mock .poster-line .q-icon {
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--leaf) 22%, var(--card-bg));
  display: grid;
  place-items: center;
  font-size: 0.95rem;
}
.poster-mock .poster-line b { color: var(--ink); display: block; }
.poster-mock .poster-line span { color: var(--ink-soft); }

/* ---------- footer ---------- */
footer {
  border-top: 2px dashed var(--paper-line);
  padding: 3rem 0 2rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
}
.foot-brand .logo { margin-bottom: 0.8rem; }
.foot-brand p { color: var(--ink-soft); font-size: 0.9rem; max-width: 30ch; }
.foot-col h4 {
  font-family: 'Fredoka', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.8rem;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.foot-col a { text-decoration: none; font-weight: 700; font-size: 0.88rem; color: var(--ink-soft); }
.foot-col a:hover { color: var(--coral); }
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  border-top: 2px dashed var(--paper-line);
  padding-top: 1.4rem;
}
.foot-links { display: flex; gap: 1.2rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.foot-links a { text-decoration: none; font-weight: 800; font-size: 0.8rem; color: var(--ink-soft); }
.foot-links a:hover { color: var(--coral); }
.copyright { font-size: 0.8rem; color: var(--ink-soft); }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }
  nav.primary .nav-links {
    display: none;
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--paper);
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.25rem 2rem;
    overflow-y: auto;
    gap: 0.2rem;
    z-index: 45;
  }
  nav.primary.open .nav-links { display: flex; }
  .nav-links > li { width: 100%; }
  .nav-links > li > a, .nav-links > li > button.nav-top {
    width: 100%;
    justify-content: space-between;
    padding: 0.9rem 0.3rem;
    font-size: 1.02rem;
    border-bottom: 1px dashed var(--paper-line);
  }
  .dropdown, .megamenu {
    position: static;
    display: none;
    width: 100%;
    transform: none;
    box-shadow: none;
    border: none;
    grid-template-columns: 1fr;
    padding: 0 0 0 0.8rem;
  }
  .nav-links > li.open > .dropdown,
  .nav-links > li.open > .megamenu { display: grid; }
  .mega-col h4 { margin-top: 0.8rem; }
  .hero .wrap { grid-template-columns: 1fr; }
  .sticker-stack { margin-top: 1rem; }
  .tabs-grid { grid-template-columns: repeat(2, 1fr); }
  .path-rail { grid-template-columns: repeat(2, 1fr); row-gap: 2.2rem; }
  .path-rail::before { display: none; }
  .trust { grid-template-columns: 1fr; }
  .word-card { grid-template-columns: 1fr; text-align: center; }
  .word-card .word-emoji { justify-self: center; }
  .lesson-body { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .compiler-grid { grid-template-columns: 1fr; }
  .code-playground { grid-template-columns: 1fr; }
  .step-guide-item { grid-template-columns: 1fr; }
  .code-playground-triple { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tabs-grid { grid-template-columns: 1fr; }
  .path-rail { grid-template-columns: 1fr; }
  .stat-panel { grid-template-columns: 1fr 1fr; }
  .hub-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(.22,1,.36,1), transform 0.65s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(60ms * var(--reveal-i, 0));
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- hero entrance (page load, not scroll) ---------- */
.hero .eyebrow, .hero h1, .hero-sub, .hero-actions, .hero-trust {
  animation: hero-in 0.7s cubic-bezier(.22,1,.36,1) both;
}
.hero h1 { animation-delay: 0.06s; }
.hero-sub { animation-delay: 0.14s; }
.hero-actions { animation-delay: 0.22s; }
.hero-trust { animation-delay: 0.3s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.sticker {
  animation: float 6s ease-in-out infinite, sticker-in 0.6s cubic-bezier(.34,1.56,.64,1) both;
}
.sticker-1 { animation-delay: 0s, 0.15s; }
.sticker-2 { animation-delay: 1.2s, 0.3s; }
.sticker-3 { animation-delay: 2.4s, 0.45s; }
@keyframes sticker-in {
  from { opacity: 0; transform: translateY(14px) scale(0.9) rotate(var(--r, 0deg)); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--r, 0deg)); }
}

/* ---------- hover polish: ring glow on interactive cards ---------- */
.tab-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 10px 0 var(--tab-ink, var(--coral-ink)), 0 22px 40px hsl(var(--shadow) / 0.18), 0 0 0 3px color-mix(in srgb, var(--tab-color, var(--coral)) 32%, transparent);
}
.hub-card:hover {
  transform: translateY(-5px) scale(1.012);
  box-shadow: 0 8px 0 var(--tab-ink, var(--coral-ink)), 0 18px 32px hsl(var(--shadow) / 0.16), 0 0 0 3px color-mix(in srgb, var(--tab-color, var(--coral)) 30%, transparent);
}
.vocab-card, .pet-card, .compiler-card { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.vocab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px hsl(var(--shadow) / 0.16), 0 0 0 3px color-mix(in srgb, var(--tab-color, var(--coral)) 28%, transparent);
}
.pet-card:hover { transform: translateY(-4px); border-color: var(--sky); }
.compiler-card:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 28%, transparent); }
.btn { will-change: transform; }
.btn:hover { filter: brightness(1.03); }

/* ---------- quiz / exercise celebration states ---------- */
@keyframes pop-in {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes stars-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
@keyframes feedback-zoom-in {
  0% { transform: scale(0.35) rotate(-2deg); opacity: 0; }
  55% { transform: scale(1.12) rotate(1deg); opacity: 1; }
  75% { transform: scale(0.96) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes why-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--marigold) 25%, transparent); }
}

.quiz-option.is-correct, .tf-btn.pick-correct, .fillblank-item input.is-right {
  animation: pop-in 0.35s cubic-bezier(.34,1.56,.64,1);
}
.quiz-option.is-wrong, .tf-btn.pick-wrong, .fillblank-item input.is-wrong {
  animation: shake 0.4s ease;
}
.tf-explain.ok, .tf-explain.ko {
  animation: fade-up 0.3s ease;
}
.quiz-feedback.ok, .quiz-feedback.ko {
  animation: feedback-zoom-in 0.6s cubic-bezier(.34,1.56,.64,1);
}
.quiz-why-pop {
  display: inline-block;
  border-radius: 10px;
  transform-origin: center;
  animation:
    feedback-zoom-in 0.5s cubic-bezier(.34,1.56,.64,1) 0.25s both,
    why-glow-pulse 1.6s ease-in-out 0.75s 3;
}
.quiz-result { animation: pop-in 0.4s cubic-bezier(.34,1.56,.64,1); }
.quiz-result .stars { animation: stars-in 0.6s ease 0.15s both; }
.exercise-score:not(:empty) { display: inline-block; animation: fade-up 0.3s ease; }

/* ---------- animated nav dropdowns (desktop only — mobile keeps its own
   position:static accordion behavior further down, where display:none must
   stay in control so closed panels don't reserve layout space) ---------- */
@media (min-width: 921px) {
  .dropdown, .megamenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .megamenu { display: grid; }
  .dropdown { display: block; }
  .nav-links > li:hover > .dropdown,
  .nav-links > li.open > .dropdown,
  .nav-links > li.has-mega:hover > .megamenu,
  .nav-links > li.has-mega.open > .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
  }
}

@media (max-width: 920px) {
  nav.primary .nav-links {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }
  nav.primary.open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticker, .sticker .emoji { animation: none; }
  .btn, .tab-card, .hub-card, .compiler-card, .vocab-card, .pet-card { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .eyebrow, .hero h1, .hero-sub, .hero-actions, .hero-trust,
  .quiz-option.is-correct, .quiz-option.is-wrong, .tf-btn.pick-correct, .tf-btn.pick-wrong,
  .fillblank-item input.is-right, .fillblank-item input.is-wrong,
  .quiz-feedback.ok, .quiz-feedback.ko, .tf-explain.ok, .tf-explain.ko, .quiz-why-pop,
  .quiz-result, .quiz-result .stars, .exercise-score:not(:empty) {
    animation: none;
  }
  .dropdown, .megamenu, nav.primary .nav-links { transition: none; }
  /* Universal safety net: catches every animation/transition on the site,
     including ones defined in dictee.css or in a lesson page's own inline
     <style> block, without needing to enumerate each keyframe by name. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Shared network-error toast (used by js/exercises-client.js) ---------- */
.cs-toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  z-index: 999;
  max-width: min(90vw, 420px);
  padding: 0.85rem 1.3rem;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  color: #fff9f2;
  background: linear-gradient(135deg, var(--coral), var(--marigold));
  box-shadow: 0 10px 28px hsl(var(--shadow) / 0.35);
  transform: translate(-50%, 130%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.cs-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cs-toast { transition: opacity 0.15s ease; transform: translate(-50%, 0); }
}

/* ---------- comptes parent/enseignant + profils enfants ---------- */
.account-form { display: grid; gap: 1.1rem; max-width: 420px; }
.account-form label { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700; margin-bottom: 0.4rem; }
.account-form input[type="email"],
.account-form input[type="password"],
.account-form input[type="text"] {
  width: 100%; border: 2px solid var(--paper-line); border-radius: 12px; padding: 0.7rem 0.9rem;
  font-family: 'Nunito', sans-serif; font-size: 1rem; background: var(--card-bg); color: var(--ink);
}
.account-form input:focus { outline: none; border-color: var(--sky); }
.account-form .field-error { color: var(--coral-ink); font-size: 0.85rem; font-weight: 700; margin-top: 0.3rem; min-height: 1.1rem; }
.account-form .form-status { font-weight: 700; font-size: 0.9rem; min-height: 1.2rem; }
.account-form .form-status.ok { color: var(--leaf-ink); }
.account-form .form-status.ko { color: var(--coral-ink); }
.account-switch { margin-top: 1.2rem; font-size: 0.9rem; color: var(--ink-soft); }
.consent-row { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; margin: 0; }
.consent-row input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.15rem; accent-color: var(--leaf); cursor: pointer; }
.consent-row a { color: var(--sky-ink); font-weight: 700; text-decoration: none; }
.consent-row a:hover { text-decoration: underline; }

.code-hero {
  text-align: center; font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: clamp(2.2rem, 7vw, 3.2rem); letter-spacing: 0.12em;
  background: color-mix(in srgb, var(--marigold) 18%, var(--card-bg));
  border: 3px dashed color-mix(in srgb, var(--marigold) 55%, transparent);
  border-radius: 20px; padding: 1rem 1.4rem; color: var(--marigold-ink);
}
.code-input {
  width: 100%; text-align: center; letter-spacing: 0.3em; text-transform: uppercase;
  font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 1.8rem;
  border: 3px solid var(--paper-line); border-radius: 16px; padding: 0.8rem;
  background: var(--card-bg); color: var(--ink);
}
.code-input:focus { outline: none; border-color: var(--sky); }

.child-list { display: grid; gap: 1rem; margin-top: 1.2rem; }
.child-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--card-bg); border: 2px solid var(--paper-line); border-radius: 16px; padding: 1rem 1.3rem;
}
.child-row .child-name { font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 1.05rem; }
.child-row .child-code { font-family: 'Fredoka', sans-serif; font-weight: 800; letter-spacing: 0.1em; color: var(--marigold-ink); background: color-mix(in srgb, var(--marigold) 20%, var(--card-bg)); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.85rem; }
.child-row .child-stats { font-size: 0.85rem; color: var(--ink-soft); }
.child-row .child-actions { display: flex; gap: 0.5rem; }

.hub-card .done-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 0.7rem;
  color: var(--leaf-ink); background: color-mix(in srgb, var(--leaf) 22%, var(--card-bg));
  border: 2px solid color-mix(in srgb, var(--leaf) 45%, transparent);
  border-radius: 999px; padding: 0.2rem 0.6rem; margin-bottom: 0.5rem;
}
#nav-account .btn { padding: 0.55rem 1.1rem; }
#nav-account .nav-account-name { font-weight: 800; color: var(--ink); text-decoration: none; }
#nav-account .nav-account-name:hover { text-decoration: underline; }

/* ---------- assistant chatbot widget ---------- */
@keyframes chat-launch-in { from { opacity: 0; transform: scale(0.5) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes chat-panel-in { from { opacity: 0; transform: scale(0.92) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes chat-dot-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes chat-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }

#cs-chatbot { position: fixed; z-index: 900; right: clamp(1rem, 4vw, 2rem); bottom: clamp(1rem, 4vw, 2rem); font-family: 'Nunito', ui-rounded, 'Segoe UI', sans-serif; }

.cs-chat-launcher {
  position: relative; width: 62px; height: 62px; border-radius: 999px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  background: linear-gradient(145deg, var(--coral), var(--marigold));
  box-shadow: 0 6px 0 var(--coral-ink), 0 16px 30px hsl(var(--shadow) / 0.28);
  color: #fff9f2; animation: chat-launch-in 0.5s cubic-bezier(.34,1.56,.64,1) 0.4s both;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cs-chat-launcher:hover { transform: translateY(-3px) scale(1.05); }
.cs-chat-launcher:active { transform: translateY(0) scale(0.97); }
.cs-chat-launcher::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  animation: chat-ping 2.2s cubic-bezier(0,0,0.2,1) infinite;
  pointer-events: none;
}
#cs-chatbot.is-open .cs-chat-launcher::after { animation: none; }
.cs-chat-launcher .cs-chat-dot {
  position: absolute; top: -2px; right: -2px; width: 16px; height: 16px; border-radius: 999px;
  background: var(--leaf); border: 2px solid var(--card-bg); font-size: 0.55rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
#cs-chatbot.is-open .cs-chat-launcher .cs-chat-icon-open { display: block; }
#cs-chatbot.is-open .cs-chat-launcher .cs-chat-icon-closed { display: none; }
.cs-chat-launcher .cs-chat-icon-open { display: none; }

.cs-chat-panel {
  position: absolute; right: 0; bottom: 78px; width: min(380px, calc(100vw - 2rem)); height: min(560px, calc(100vh - 7rem));
  background: var(--card-bg); border-radius: 22px; overflow: hidden; display: none; flex-direction: column;
  box-shadow: 0 24px 50px hsl(var(--shadow) / 0.28); border: 3px solid var(--paper-line);
  transform-origin: bottom right;
}
#cs-chatbot.is-open .cs-chat-panel { display: flex; animation: chat-panel-in 0.28s cubic-bezier(.2,.8,.3,1) both; }

.cs-chat-head {
  background: linear-gradient(120deg, var(--coral), var(--marigold)); color: #fff9f2;
  padding: 0.9rem 1rem; display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0;
}
.cs-chat-head .cs-chat-avatar {
  width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center; font-family: 'Fredoka', sans-serif; font-weight: 800; flex-shrink: 0;
}
.cs-chat-head .cs-chat-titles { flex: 1; min-width: 0; }
.cs-chat-head h3 { margin: 0; font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 1rem; }
.cs-chat-head p { margin: 0; font-size: 0.75rem; opacity: 0.9; }
.cs-chat-close {
  background: rgba(255,255,255,0.2); border: none; color: #fff; width: 30px; height: 30px; border-radius: 999px;
  cursor: pointer; font-size: 1rem; line-height: 1; flex-shrink: 0; transition: background 0.15s ease;
}
.cs-chat-close:hover { background: rgba(255,255,255,0.35); }

.cs-chat-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.cs-chat-msg { max-width: 84%; padding: 0.6rem 0.9rem; border-radius: 16px; font-size: 0.9rem; line-height: 1.45; animation: fade-up 0.25s ease both; white-space: pre-wrap; }
.cs-chat-msg.bot { align-self: flex-start; background: #fff; border: 2px solid var(--paper-line); border-bottom-left-radius: 4px; color: var(--ink); }
.cs-chat-msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--coral), var(--marigold)); color: #fff9f2; border-bottom-right-radius: 4px; }
.cs-chat-msg.error { align-self: flex-start; background: color-mix(in srgb, var(--coral) 14%, #fff); border: 2px solid color-mix(in srgb, var(--coral) 40%, transparent); color: var(--coral-ink); animation: shake 0.4s ease both, fade-up 0.25s ease both; }

.cs-chat-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; align-self: flex-start; max-width: 100%; }
.cs-chat-quick button {
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.78rem; color: var(--sky-ink);
  background: color-mix(in srgb, var(--sky) 14%, #fff); border: 2px solid color-mix(in srgb, var(--sky) 30%, transparent);
  border-radius: 999px; padding: 0.4rem 0.8rem; cursor: pointer; transition: transform 0.12s ease, background 0.15s ease;
}
.cs-chat-quick button:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--sky) 22%, #fff); }

.cs-chat-typing { align-self: flex-start; display: flex; gap: 0.25rem; padding: 0.7rem 0.9rem; background: #fff; border: 2px solid var(--paper-line); border-radius: 16px; border-bottom-left-radius: 4px; }
.cs-chat-typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-soft); animation: chat-dot-bounce 1.1s ease-in-out infinite; }
.cs-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.cs-chat-typing span:nth-child(3) { animation-delay: 0.3s; }

.cs-chat-foot { flex-shrink: 0; border-top: 2px solid var(--paper-line); padding: 0.7rem; background: var(--card-bg); }
.cs-chat-form { display: flex; gap: 0.5rem; align-items: flex-end; }
.cs-chat-input {
  flex: 1; resize: none; max-height: 90px; font-family: inherit; font-size: 0.9rem; padding: 0.6rem 0.9rem;
  border: 2px solid var(--paper-line); border-radius: 14px; background: #fff; color: var(--ink); line-height: 1.4;
}
.cs-chat-input:focus { outline: none; border-color: var(--sky); }
.cs-chat-send {
  width: 42px; height: 42px; border-radius: 999px; border: none; cursor: pointer; flex-shrink: 0;
  background: var(--coral); color: #fff; font-size: 1.05rem; box-shadow: 0 4px 0 var(--coral-ink);
  display: flex; align-items: center; justify-content: center; transition: transform 0.12s ease, opacity 0.15s ease;
}
.cs-chat-send:hover:not(:disabled) { transform: translateY(-1px); }
.cs-chat-send:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: translateY(3px); }
.cs-chat-send .cs-spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; border-radius: 999px; animation: spin-slow 0.7s linear infinite; }
.cs-chat-send.is-loading .cs-spin { display: block; }
.cs-chat-send.is-loading .cs-send-icon { display: none; }
.cs-chat-disclaimer { margin: 0.5rem 0 0; font-size: 0.68rem; color: var(--ink-soft); text-align: center; }

@media (max-width: 480px) {
  #cs-chatbot { right: 1rem; bottom: 1rem; }
  .cs-chat-panel { position: fixed; inset: 0; width: 100%; height: 100%; border-radius: 0; border-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-chat-launcher, .cs-chat-panel, .cs-chat-msg, .cs-chat-typing span, .cs-chat-launcher::after { animation: none !important; }
}