/* Lernanto — landing produit. Identité pixel-art du design system de l'app
   (design/tokens/ du dépôt Lernanto) : papier/encre/ambre, angles droits,
   bordures 3px, ombres portées dures. Press Start 2P (display) + Handjet (corps).
   Un seul thème, assumé : l'univers papier de l'app. */

:root {
  --ink: #23201c;
  --paper: #f2e7cc;
  --surface: #fbf4e0;
  --sunken: #efe6ce;
  --desk: #c9b98f;
  --text-2: #5a5348;
  --text-3: #8a8272;
  --rule: #c9b98f;
  --ambre: #eaa427;
  --bleu: #3f6fb0;
  --vert: #3f9c48;
  --vert-bg: #8fd694;
  --rouge: #e8564a;

  /* La coche. `✓` (U+2713) est ABSENT de Press Start 2P : il venait d'une police de repli, et
     sur iOS le repli d'un glyphe manquant ne dessine parfois rien du tout. Elle est donc dessinée,
     dans la grammaire des icônes de l'app (grille de 16, trait de 2 cellules, angles vifs). */
  --coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M3 7h2v2H3zM5 9h2v2H5zM7 11h2v2H7zM9 9h2v2H9zM11 7h2v2h-2zM13 5h2v2h-2z'/%3E%3C/svg%3E");

  /* familles (comparateur) */
  --fam-romance: #d1495b;     --fam-romance-tint: #f7dfe2;
  --fam-germanic: #3f6fb0;    --fam-germanic-tint: #dbe4f1;
  --fam-hellenic: #7d5ba6;    --fam-hellenic-tint: #e7ddf0;
  --fam-slavic: #c9702f;      --fam-slavic-tint: #f4e2d2;
  --fam-baltic: #4a9d7f;      --fam-baltic-tint: #d9ece4;
  --fam-uralic: #b0843a;      --fam-uralic-tint: #efe3cb;
  --fam-celtic: #4e8c4a;      --fam-celtic-tint: #dcebd6;
  --fam-semitic: #b0567a;     --fam-semitic-tint: #f0dbe5;
  --fam-constructed: #2f8f8f; --fam-constructed-tint: #d6ecec;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Handjet", "Courier New", monospace;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
}

.px { font-family: "Press Start 2P", "Courier New", monospace; }

a { color: var(--bleu); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
}

.wrap { max-width: 1020px; margin: 0 auto; padding: 0 20px; }

/* ---- header ---- */
header.top {
  border-bottom: 3px solid var(--ink);
  background: var(--paper);
  position: sticky; top: 0; z-index: 20;
}
header.top .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
}
.brand img { width: 36px; height: 36px; image-rendering: pixelated; display: block; }
.brand .name {
  font-family: "Press Start 2P", monospace;
  font-size: 15px; letter-spacing: 0.06em;
}
nav.anchors { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
nav.anchors a {
  font-family: "Press Start 2P", monospace;
  font-size: 9px; letter-spacing: 0.08em;
  color: var(--ink); text-decoration: none; text-transform: uppercase;
  padding: 6px 2px;
}
nav.anchors a:hover { color: var(--bleu); }
.lang {
  font-family: "Press Start 2P", monospace;
  font-size: 9px; letter-spacing: 0.08em;
}
.lang a { color: var(--bleu); text-decoration: none; }
.lang [aria-current] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.lang .sep { color: var(--text-3); margin: 0 4px; }

/* ---- hero ---- */
.hero { padding: 64px 0 56px; }
.hero .wrap { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.hero .pitch { flex: 1 1 420px; min-width: 0; }
.hero-copy {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--text-2);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.35;
}
.eyebrow {
  font-family: "Press Start 2P", monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2);
  background: var(--surface);
  border: 2px solid var(--ink);
  display: inline-block;
  padding: 8px 10px 7px;
  margin: 0 0 24px;
}
/* Le séparateur du bandeau et les puces de la liste « zéro donnée » étaient des glyphes
   ABSENTS de Press Start 2P (■ U+25A0) ou dessinés par la police de corps : ils retombaient
   sur la ligne de base au lieu de se centrer. Ce sont désormais de vrais carrés dessinés,
   dont la position ne dépend d'aucune police. */
.eyebrow .dot { color: var(--ambre); }
/* Les pastilles carrées (drapeau des maquettes, liste « zéro donnée », croquettes) sont
   DESSINÉES et non écrites : ■ U+25A0 est absent de Press Start 2P, il venait d'une police
   de repli et retombait sur la ligne de base. */
.sq {
  display: inline-block; width: 7px; height: 7px; background: currentColor;
  vertical-align: 0.15em; margin-right: 6px;
}
.zero ul { list-style: none; padding-left: 0; }
.zero li { position: relative; padding-left: 24px; }
.zero li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 9px; height: 9px; background: var(--ambre);
}
h1 {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(22px, 4.2vw, 38px);
  line-height: 1.45;
  margin: 0 0 20px;
  text-wrap: balance;
}
h1 .amber { color: var(--ambre); text-shadow: 2px 2px 0 var(--ink); }
.hero .lead {
  font-size: 26px; line-height: 1.45; color: var(--text-2);
  margin: 0 0 28px; max-width: 34em;
}
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  font-family: "Press Start 2P", monospace;
  font-size: 11px; letter-spacing: 0.06em;
  display: inline-block;
  padding: 14px 18px 12px;
  border: 3px solid var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 80ms steps(2, end), box-shadow 80ms steps(2, end);
}
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn.primary { background: var(--ambre); color: var(--ink); }
.btn.ghost { background: var(--surface); color: var(--ink); }
.btn[aria-disabled="true"] { cursor: default; }
.soon-note {
  font-size: 19px; color: var(--text-3); margin: 12px 0 0;
}

/* ---- phone mockup ---- */
.device { flex: 0 0 auto; margin: 0 auto; }
.phone {
  width: 292px;
  background: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--desk);
  padding: 14px 10px;
}
.screen { background: var(--paper); border: 2px solid var(--ink); padding: 12px; }
.scr-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: "Press Start 2P", monospace; font-size: 8px;
  color: var(--text-2); margin-bottom: 10px; letter-spacing: 0.05em;
}
.scr-head .flag { color: var(--vert); }
.qcard {
  background: var(--surface); border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 14px 10px; text-align: center; margin-bottom: 12px;
}
.qcard .ask {
  font-family: "Press Start 2P", monospace; font-size: 14px; margin: 0 0 6px;
}
.qcard .dir { font-size: 17px; color: var(--text-3); margin: 0; }
.opt {
  font-family: "Press Start 2P", monospace; font-size: 9px;
  border: 2px solid var(--ink); background: var(--surface);
  padding: 10px 10px 9px; margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.opt.good { background: var(--vert-bg); }
/* La case de droite existe sur les quatre options (elle réserve la place) ; seule la bonne
   réponse porte la coche. */
.opt .mk { display: inline-block; width: 13px; height: 13px; flex: none; }
.opt.good .mk {
  background-color: var(--ink);
  -webkit-mask: var(--coche) center / contain no-repeat;
  mask: var(--coche) center / contain no-repeat;
}
.scr-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: "Press Start 2P", monospace; font-size: 8px; color: var(--text-3);
  margin-top: 10px;
}
.ticks { display: inline-flex; gap: 3px; align-items: center; }
.ticks .t { width: 5px; height: 5px; background: var(--vert); }
.ticks .t.todo { background: var(--desk); }

/* ---- sections ---- */
section.band { padding: 56px 0; }
section.band.alt { background: var(--surface); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
section.band:not(.alt) + section.band:not(.alt) { border-top: 3px solid var(--ink); }
h2 {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(16px, 2.6vw, 22px);
  line-height: 1.5;
  margin: 0 0 12px;
  text-wrap: balance;
}
h2 .tag { color: var(--ambre); }
.sub { font-size: 24px; color: var(--text-2); margin: 0 0 32px; max-width: 36em; }

.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.card {
  background: var(--surface);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 22px;
}
section.band.alt .card { background: var(--paper); }
.card h3 {
  font-family: "Press Start 2P", monospace;
  font-size: 12px; line-height: 1.6; margin: 0 0 12px;
}
.card h3 .ico { color: var(--ambre); margin-right: 8px; }
.card p { margin: 0; font-size: 21px; color: var(--text-2); }
.card p + p { margin-top: 10px; }
.card p strong { color: var(--ink); }

/* ---- langues ---- */
.famgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.fam {
  border: 3px solid var(--ink);
  background: var(--surface);
  box-shadow: 5px 5px 0 var(--ink);
}
.fam h3 {
  font-family: "Press Start 2P", monospace;
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0; padding: 10px 14px 9px;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
}
.fam ul { list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.fam li {
  font-size: 20px;
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 2px 10px;
}
.fam.romance h3 { background: var(--fam-romance-tint); }
.fam.germanic h3 { background: var(--fam-germanic-tint); }
.fam.slavic h3 { background: var(--fam-slavic-tint); }
.fam.uralic h3 { background: var(--fam-uralic-tint); }
.fam.baltic h3 { background: var(--fam-baltic-tint); }
.fam.other h3 { background: var(--fam-constructed-tint); }

/* ---- zéro donnée ---- */
.zero {
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 8px 8px 0 var(--ambre);
  padding: 32px 28px;
}
.zero h2 { color: var(--paper); }
.zero h2 .tag { color: var(--ambre); }
.zero p { font-size: 23px; margin: 0 0 14px; color: var(--paper); }
.zero p:last-child { margin-bottom: 0; }
.zero .dim { color: var(--desk); }
.zero a { color: var(--ambre); }
.zero ul { font-size: 25px; margin: 0 0 14px; padding-left: 1.2em; }
.zero li { margin-bottom: 4px; }
.zero .zero-points { list-style: none; margin: 0; padding: 0; }
.zero .zero-points li { margin: 0 0 18px; }
.zero .zero-points li:last-child { margin-bottom: 0; }
.zero .dark-fold .sub { color: var(--desk); }
.zero .dark-fold summary:hover .sub { color: var(--paper); }
.zero .dark-fold .more { background: var(--surface); color: var(--ink); }
.zero .dark-fold summary:hover .more { background: var(--ambre); }

/* ---- croquettes ---- */
.croq { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.croq figure {
  margin: 0; background: var(--paper); border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink); padding: 20px;
}
.croq .meta {
  font-family: "Press Start 2P", monospace; font-size: 8px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2); display: flex; gap: 10px; margin-bottom: 12px;
}
.croq .meta .lvl { color: var(--vert); }
.croq blockquote { margin: 0 0 10px; font-size: 21px; }
.croq figcaption { font-size: 19px; color: var(--text-3); }

/* ---- prix ---- */
.pricelist { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; max-width: 44em; }
.pricelist li {
  border: 2px solid var(--ink); background: var(--paper);
  padding: 12px 16px; font-size: 22px;
  display: flex; gap: 12px; align-items: baseline;
}
.pricelist .mk {
  flex: none; display: inline-block; width: 15px; height: 15px; margin-top: 4px;
  background-color: var(--vert);
  -webkit-mask: var(--coche) center / contain no-repeat;
  mask: var(--coche) center / contain no-repeat;
}
.honest { font-size: 21px; color: var(--text-2); max-width: 40em; margin: 0; }
.limit-list {
  max-width: 40em;
  margin: 0;
  padding-left: 1.2em;
  color: var(--text-2);
  font-size: 24px;
}
.limit-list li { margin-bottom: 10px; }
.limit-list li:last-child { margin-bottom: 0; }
.limit-list li::marker { color: var(--ambre); }
.fold-body > .pricelist:last-child { margin-bottom: 0; }

/* ---- enseignants ---- */
.teachers {
  display: flex; gap: 24px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  border: 3px solid var(--ink); background: var(--surface);
  box-shadow: 6px 6px 0 var(--ink); padding: 24px;
}
.teachers p { margin: 0; font-size: 23px; max-width: 34em; }
.teachers p strong { display: block; font-family: "Press Start 2P", monospace; font-size: 12px; line-height: 1.7; margin-bottom: 8px; }

/* ---- FAQ ---- */
.faq details {
  border: 3px solid var(--ink); background: var(--surface);
  margin-bottom: 14px;
}
.faq summary {
  font-family: "Press Start 2P", monospace; font-size: 11px; line-height: 1.7;
  padding: 16px 18px 14px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ambre); flex: none; }
.faq details[open] summary::after { content: "-"; }
.faq details[open] summary { border-bottom: 2px dashed var(--rule); }
.faq .a { padding: 14px 18px 18px; font-size: 22px; color: var(--text-2); }
.faq .a p { margin: 0 0 10px; }
.faq .a p:last-child { margin-bottom: 0; }
.faq .a strong { color: var(--ink); }

/* ---- pages document (politique commerciale, enseignants, presse) ---- */
.doc { max-width: 780px; margin: 0 auto; padding: 48px 20px 72px; }
.doc h1 { font-size: clamp(18px, 3.4vw, 28px); margin-bottom: 12px; }
.doc .updated {
  font-family: "Press Start 2P", monospace; font-size: 8px;
  letter-spacing: 0.1em; color: var(--text-3); margin: 0 0 36px;
}
.doc h2 { margin-top: 44px; font-size: clamp(13px, 2.2vw, 17px); }
.doc h2:first-of-type { margin-top: 0; }
.doc p, .doc li { font-size: 22px; }
.doc p { margin: 0 0 16px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 1.3em; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--ambre); }
.doc .note {
  border: 2px solid var(--ink); border-left: 8px solid var(--ambre);
  background: var(--surface); padding: 12px 16px; margin: 20px 0;
  font-size: 21px; color: var(--text-2);
}
.doc .note strong { color: var(--ink); }
.doc table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 21px; }
.doc th {
  font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: left; color: var(--text-2);
  border-bottom: 3px solid var(--ink); padding: 8px 10px 8px 0;
}
.doc td { border-bottom: 1px solid var(--rule); padding: 9px 10px 9px 0; vertical-align: top; }
.doc .steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.doc .steps li {
  counter-increment: step;
  border: 2px solid var(--ink); background: var(--surface);
  padding: 12px 16px 12px 54px; position: relative;
}
.doc .steps li::before {
  content: counter(step);
  font-family: "Press Start 2P", monospace; font-size: 12px;
  position: absolute; left: 14px; top: 14px; color: var(--ambre);
  text-shadow: 1px 1px 0 var(--ink);
}
.doc .assets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 20px 0; }
.doc .assets a {
  display: block; border: 3px solid var(--ink); background: var(--surface);
  box-shadow: 4px 4px 0 var(--ink); padding: 14px; text-decoration: none;
  color: var(--ink); font-size: 20px; text-align: center;
}
.doc .assets a img { max-width: 96px; height: auto; image-rendering: pixelated; display: block; margin: 0 auto 10px; }
.doc .assets a .fmt { color: var(--text-3); font-size: 18px; display: block; }

/* ---- footer ---- */
footer.site {
  border-top: 3px solid var(--ink);
  background: var(--surface);
  padding: 40px 0 48px;
  font-size: 19px;
  color: var(--text-2);
}
footer.site .idline { margin: 0 0 20px; line-height: 1.6; }
footer.site nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
footer.site nav a { color: var(--ink); }
footer.site .meta { color: var(--text-3); margin: 0; }
footer.site .editline { margin: 0 0 20px; }

@media (max-width: 640px) {
  /* l'en-tête complet ferait ~40 % de l'écran : il ne doit pas rester collé */
  header.top { position: static; }
  header.top .wrap { row-gap: 4px; }
  nav.anchors { gap: 14px; }
  .hero { padding: 40px 0 40px; }
  .hero .wrap { gap: 32px; }
  body { font-size: 21px; }
  .btn { width: 100%; text-align: center; }
}

/* ---- pourquoi / why (landing) ---- */
#pourquoi .honest + .honest,
#why .honest + .honest { margin-top: 20px; }

/* ---- d'où viennent les mots / where the words come from ---- */
.duo { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.duo .voies { flex: 1 1 400px; min-width: 0; display: grid; gap: 24px; }

/* maquette de l'écran Recherche — reprend .phone / .screen / .scr-head du hero */
.srch-field {
  font-family: "Press Start 2P", monospace; font-size: 10px; margin: 0 0 10px;
  background: var(--surface); border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); padding: 12px 10px 11px; color: var(--ink);
}
.srch-field .caret { color: var(--ambre); }
.srch-filters { display: flex; gap: 6px; margin-bottom: 12px; }
.srch-filters span {
  flex: 1; text-align: center; font-family: "Press Start 2P", monospace; font-size: 7px;
  border: 2px solid var(--ink); background: var(--surface); color: var(--text-2);
  padding: 8px 1px 7px; letter-spacing: 0.02em;
}
.srch-filters .on { background: var(--ink); color: var(--ambre); }
.srch-count { font-size: 15px; color: var(--text-3); margin: 0 0 10px; }
.srch-row {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); padding: 9px; margin-bottom: 9px;
}
.srch-row:last-child { margin-bottom: 0; }
.srch-row .dot { width: 12px; height: 12px; border: 2px solid var(--ink); flex: none; }
.srch-row .dot.new { background: var(--desk); }
.srch-row .dot.seen { background: var(--bleu); }
.srch-row .dot.known { background: var(--vert); }
.srch-row .w { flex: 1; min-width: 0; }
.srch-row .tw { font-family: "Press Start 2P", monospace; font-size: 9px; display: block; }
.srch-row .sw { font-size: 15px; color: var(--text-2); display: block; margin-top: 5px; }
.srch-row .add {
  font-family: "Press Start 2P", monospace; font-size: 7px; flex: none;
  background: var(--vert); color: var(--paper); border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink); padding: 7px 6px 6px;
}
.srch-row .st { font-family: "Press Start 2P", monospace; font-size: 7px; flex: none; }
.srch-row .st.seen { color: var(--bleu); }
.srch-row .st.known { color: var(--vert); }

/* ---- sections repliables : le titre et une ligne restent visibles ---- */
h2 + .fold { margin-top: -8px; }
.fold summary {
  list-style: none; cursor: pointer;
  display: flex; gap: 24px; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary .sub { margin: 0; flex: 1 1 320px; }
.fold summary:hover .sub { color: var(--ink); }
.fold .more {
  font-family: "Press Start 2P", monospace; font-size: 9px; letter-spacing: 0.06em;
  color: var(--ink); background: var(--paper);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 11px 12px 10px; flex: none; white-space: nowrap;
}
section.band.alt .fold .more { background: var(--surface); }
.fold .more::before { content: ">"; color: var(--ambre); margin-right: 8px; }
.fold summary:hover .more { background: var(--ambre); }
.fold .more .c { display: none; }
.fold[open] .more .o { display: none; }
.fold[open] .more .c { display: inline; }
.fold-body { padding-top: 32px; }
.fold-body .honest + .honest { margin-top: 20px; }
.fold-body .honest + .cards3, .fold-body .honest + .duo,
.fold-body .honest + .famgrid, .fold-body .honest + .croq { margin-top: 28px; }

@media (max-width: 640px) {
  .fold summary { gap: 16px; }
  .fold .more { width: 100%; text-align: center; }
}