/* Mai Pen Rai : papier frais, encre indigo, souci (marigold) comme seule couleur vive.
   Mise en page : colonne de lecture étroite, grandes lettres thaïes comme élément visuel principal. */
:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --ink: #1c2340;
  --muted: #5b6283;
  --line: #dde0ec;
  --accent: #f2a516;
  --accent-ink: #1c2340;
  --jade: #1f7f68;
  --font-display: "Mali", "Noto Sans Thai Looped", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Noto Sans Thai Looped", system-ui, sans-serif;
  --font-thai: "Noto Sans Thai Looped", "Mali", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121629; --surface: #1a1f38; --ink: #e8ebf6; --muted: #a2a8c6;
    --line: #2c3357; --accent: #f5b83d; --accent-ink: #121629; --jade: #4cc3a3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121629; --surface: #1a1f38; --ink: #e8ebf6; --muted: #a2a8c6;
  --line: #2c3357; --accent: #f5b83d; --accent-ink: #121629; --jade: #4cc3a3;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 1.0625rem/1.65 var(--font-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 68rem; margin: 0 auto; }
.read { max-width: 40rem; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0; }
.thai { font-family: var(--font-thai); }
.eyebrow { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

/* En-tête */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; }
.logo b { font-family: var(--font-display); font-size: 1.35rem; }
.logo span { font-family: var(--font-thai); color: var(--muted); font-size: 1rem; }
.nav { display: flex; align-items: center; gap: 1.1rem; font-size: .95rem; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a[aria-current="page"], .nav a:hover { color: var(--ink); }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: .8rem; font-weight: 700; }
.lang span { padding: .2rem .6rem; }
.lang .on { background: var(--ink); color: var(--bg); }
.lang .off { color: var(--muted); }

/* Boutons */
.btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; padding: .75rem 1.3rem; border-radius: 999px; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.btn:hover { filter: brightness(1.05); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }

/* Pied de page */
.site-foot { border-top: 1px solid var(--line); margin-top: 4rem; padding-block: 1.6rem; color: var(--muted); font-size: .9rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }

/* Bandeau d'aperçu */
.proto { background: var(--surface); border: 1px dashed var(--line); border-radius: 10px; padding: .6rem .9rem; font-size: .85rem; color: var(--muted); margin-top: 1rem; }
.draft { display: inline-block; background: var(--jade); color: var(--bg); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .55rem; border-radius: 4px; }

/* Page lettre */
.letter-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem; margin-top: 2rem; align-items: start; }
@media (max-width: 760px) { .letter-grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } }
.stage { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.2rem; }
.stage svg { width: 100%; height: auto; display: block; }
.glyph-ghost { fill: var(--line); }
.glyph-ink { fill: var(--ink); }
.trace-mask path { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.start-dot { fill: var(--accent); }
.stage-bar { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: .8rem; flex-wrap: wrap; }
.stage-bar small { color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-block: 1.4rem; }
@media (max-width: 460px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact { border-top: 2px solid var(--ink); padding-top: .5rem; }
.fact dt { font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.fact dd { margin: .15rem 0 0; font-family: var(--font-display); font-size: 1.15rem; }
.keyword { display: flex; align-items: center; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; }
.keyword svg { width: 64px; height: 64px; flex: none; }
.keyword .thai { font-size: 1.6rem; }
.tip { border-left: 4px solid var(--accent); padding: .2rem 0 .2rem 1rem; margin-top: 1.4rem; }
details.more { margin-top: 1.4rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
details.more summary { cursor: pointer; padding: .8rem 1rem; font-weight: 700; }
details.more div { padding: 0 1rem 1rem; color: var(--muted); }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; }

/* Alphabet */
.abc { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .7rem; margin-top: 1.8rem; }
.abc a, .abc span { display: grid; place-items: center; gap: .1rem; aspect-ratio: 1; max-width: 100%; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; position: relative; }
.abc .l { font-family: var(--font-thai); font-size: 2.3rem; line-height: 1; }
.abc .n { font-size: .72rem; color: var(--muted); }
.abc a { border: 2px solid var(--ink); }
.abc a:hover { background: var(--accent); color: var(--accent-ink); }
.abc a:hover .n { color: var(--accent-ink); }
.abc span { opacity: .45; }
.abc .old::after { content: "rare"; position: absolute; top: 5px; right: 6px; font-size: .6rem; font-weight: 700; text-transform: uppercase; color: var(--jade); opacity: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; font-size: .88rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.logo b { white-space: nowrap; }
@media (max-width: 520px) { .logo span { display: none; } .nav { gap: .8rem; } }

/* Accueil */
.hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:2rem; align-items:center; padding-block:3rem 2rem; }
@media (max-width:760px) { .hero { grid-template-columns:minmax(0,1fr); padding-block:2rem 1rem; } }
.hero p.lead { font-size:1.2rem; color:var(--muted); margin:1rem 0 1.6rem; max-width:34rem; }
.hero .ctas { display:flex; flex-wrap:wrap; gap:.8rem; }
.big { font-family:var(--font-thai); font-size:clamp(4.5rem,13vw,9rem); line-height:1.15; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:1rem; }
.big small { display:block; font-family:var(--font-body); font-size:.95rem; color:var(--muted); }
.why { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.4rem; }
@media (max-width:760px) { .why { grid-template-columns:minmax(0,1fr); } }
.why article { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.2rem; display:grid; gap:.4rem; align-content:start; }
.why .thai { font-size:1.5rem; color:var(--jade); }
.road { list-style:none; padding:0; margin:1.6rem 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; counter-reset:s; }
@media (max-width:900px) { .road { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px) { .road { grid-template-columns:minmax(0,1fr); } }
.road li { border-top:3px solid var(--ink); padding-top:.7rem; display:grid; gap:.3rem; align-content:start; counter-increment:s; }
.road li:first-child { border-color:var(--accent); }
.road li h3::before { content:counter(s) ". "; color:var(--muted); }
section.block { margin-top:3.5rem; }
.logo b { white-space: nowrap; }
@media (max-width: 520px) { .logo span { display: none; } .nav { gap: .8rem; } }

/* Accueil v2 : bandeau illustré + deux cartes */
.hero-band { position: relative; margin-top: 1.5rem; border-radius: 24px; overflow: hidden; min-height: 22rem; display: grid; align-items: end; background: linear-gradient(160deg, #f8c46a 0%, #e9875a 45%, #6b4fa0 100%); }
.hero-art { position: absolute; inset: 0; }
.hero-art .sign { position: absolute; font-family: var(--font-thai); font-weight: 600; color: #fff; background: rgba(28,35,64,.55); padding: .2rem .8rem; border-radius: 8px; font-size: clamp(1.1rem, 3vw, 1.8rem); }
.hero-art .s1 { top: 10%; left: 6%; transform: rotate(-3deg); }
.hero-art .s2 { top: 18%; right: 8%; transform: rotate(2deg); background: rgba(31,127,104,.75); }
.hero-art .s3 { top: 42%; left: 38%; transform: rotate(-1deg); background: rgba(232,116,42,.8); }
.hero-art .s4 { top: 34%; right: 22%; transform: rotate(4deg); }
.hero-text { position: relative; padding: 2rem; background: linear-gradient(to top, rgba(18,22,41,.85), rgba(18,22,41,0)); color: #fff; display: grid; gap: .8rem; justify-items: start; }
.hero-text .eyebrow { color: #f5e6c8; }
.hero-text h1 { color: #fff; }
.teasers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 700px) { .teasers { grid-template-columns: minmax(0, 1fr); } .hero-band { min-height: 20rem; } .hero-art .s3, .hero-art .s4 { display: none; } }
.teaser { display: grid; gap: .5rem; align-content: start; padding: 1.4rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.teaser:hover { border-color: var(--accent); }
.teaser .thai { font-size: 1.8rem; color: var(--jade); }
.teaser h2 { font-size: 1.35rem; }
.more-link { color: var(--muted); font-weight: 700; font-size: .95rem; }

/* Polices de démonstration et exercice de repérage */
.police-boucles { font-family: "Noto Sans Thai Looped", var(--font-thai); }
.police-moderne { font-family: "Kanit", "Noto Sans Thai", sans-serif; }
.police-manuscrite { font-family: "Charm", var(--font-thai); }
.police-ronde { font-family: "Itim", var(--font-thai); }
.variantes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
.variantes figure { margin: 0; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .3rem; }
.variantes .v { font-size: 2.6rem; line-height: 1.3; display: block; }
.variantes figcaption { font-size: .72rem; color: var(--muted); }
.exercice { margin-top: 2.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.4rem; }
.ex-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; max-width: 22rem; margin: 1rem 0; }
.ex-case { aspect-ratio: 1; max-width: 100%; font-size: 2.6rem; border-radius: 14px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.ex-case:hover:not(:disabled) { border-color: var(--accent); }
.ex-case.bon { background: var(--jade); color: var(--bg); border-color: var(--jade); }
.ex-case.eteint { opacity: .35; }
.ex-case.faux { animation: trembler .35s; border-color: #d0453a; }
@keyframes trembler { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.ex-msg { font-weight: 700; min-height: 1.6em; }
.ex-bar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* Classes de consonnes */
:root { --c-moyenne: #e3f1ec; --c-haute: #fdebd0; --c-basse: #e6e8f6; --c-moyenne-ink: #1f7f68; --c-haute-ink: #b4600f; --c-basse-ink: #4a52a0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-moyenne: #1d3b34; --c-haute: #44331b; --c-basse: #262b4d; --c-moyenne-ink: #6fd3b6; --c-haute-ink: #f5b562; --c-basse-ink: #a9b0f0; } }
:root[data-theme="dark"] { --c-moyenne: #1d3b34; --c-haute: #44331b; --c-basse: #262b4d; --c-moyenne-ink: #6fd3b6; --c-haute-ink: #f5b562; --c-basse-ink: #a9b0f0; }
.abc .c-moyenne { background: var(--c-moyenne); }
.abc .c-haute { background: var(--c-haute); }
.abc .c-basse { background: var(--c-basse); }
.abc span.c-moyenne, .abc span.c-haute, .abc span.c-basse { opacity: 1; }
.abc a.dispo { border: 3px solid var(--ink); }
.abc [hidden] { display: none !important; }
.classes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.filtre { font: inherit; font-weight: 700; font-size: .9rem; padding: .45rem .9rem; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.filtre span { opacity: .6; margin-left: .2rem; }
.filtre.c-moyenne { background: var(--c-moyenne); color: var(--c-moyenne-ink); }
.filtre.c-haute { background: var(--c-haute); color: var(--c-haute-ink); }
.filtre.c-basse { background: var(--c-basse); color: var(--c-basse-ink); }
.filtre.actif { border-color: var(--ink); }