/* =========================================================
   NEKO School — l'app
   Meme DA que le site : encre, papier, ambre. Ni rouge ni vert pour
   l'etat d'une reponse — le rouge ne signale QUE la dette et le vert
   QUE ce qui est paye. Juste / faux passent donc par l'ambre, le
   papier eteint, un signe ecrit (✓ / ✗) et un texte.
   ========================================================= */

.page-school{ background:var(--ink); }

/* sans ca, tout display: en dur ecrase l'attribut hidden — le panneau
   de connexion s'ouvrait au chargement */
[hidden]{ display:none !important; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* ---------- barre ---------- */
.sk__bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,40px);
  border-bottom:1px solid var(--line);
  background:rgba(8,9,11,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.sk__back{
  display:inline-flex; align-items:center; gap:8px;
  /* flex:none : sans ca, la barre etant trop large sur telephone, le
     lien se faisait ecraser a 0px et disparaissait purement. */
  flex:none; min-height:40px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--paper-mute); transition:color .3s var(--ease);
}
.sk__back:hover{ color:var(--paper); }
.sk__back svg{ flex:none; height:14px; width:14px; }

.sk__brand{
  margin:0;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--paper);
}
.sk__right{ display:flex; align-items:center; gap:10px; }
.sk__brand{ min-width:0; }

.sk__langs{ display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:999px; }
.sk__lang{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; min-height:30px;
  padding:5px 11px; border-radius:999px;
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.1em;
  color:var(--paper-mute); transition:color .25s var(--ease), background .25s var(--ease);
}
.sk__lang:hover{ color:var(--paper); }
.sk__lang.is-on{ background:var(--warm); color:#000; }

.sk__acct{
  flex:none; white-space:nowrap;
  padding:8px 16px; min-height:34px;
  border:1px solid var(--line); border-radius:999px;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  color:var(--paper-dim);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.sk__acct:hover{ color:var(--paper); border-color:rgba(244,242,237,.26); }

/* ---------- ossature ---------- */
.sk__main{
  max-width:760px; margin:0 auto;
  padding:clamp(40px,7vh,80px) clamp(18px,4vw,32px) clamp(80px,14vh,150px);
}
.sk__boot{ display:grid; place-items:center; min-height:44vh; }
.sk__spin{
  height:26px; width:26px; border-radius:50%;
  border:1.5px solid var(--line); border-top-color:var(--paper-mute);
  animation:skSpin 1s linear infinite;
}
@keyframes skSpin{ to{ transform:rotate(360deg); } }

/* ---------- sommaire ---------- */
.sk__head{ margin-bottom:clamp(32px,5vh,52px); }
.sk__h{ margin:0 0 12px; font-size:clamp(28px,5vw,44px); font-weight:700; letter-spacing:-.03em; }
.sk__sub{ margin:0 0 28px; font-size:15px; line-height:1.6; color:var(--paper-dim); }

.sk__prog{ height:3px; border-radius:999px; background:rgba(244,242,237,.09); overflow:hidden; }
.sk__progFill{
  display:block; height:100%; width:var(--p,0%);
  background:var(--warm);
  transition:width .6s var(--ease);
}
.sk__progLab{
  margin:10px 0 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--paper-mute);
}
.sk__note{ margin:16px 0 0; font-size:12.5px; line-height:1.5; color:var(--paper-mute); }

.sk__list{ margin:0; padding:0; list-style:none; }
.sk__mod{
  display:flex; align-items:baseline; gap:10px;
  margin:30px 0 8px; padding-top:18px;
  border-top:1px solid var(--line);
}
.sk__mod:first-child{ margin-top:0; padding-top:0; border-top:0; }
.sk__modN{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--warm); }
.sk__modT{ font-size:15px; font-weight:600; letter-spacing:-.01em; }

.sk__item + .sk__item{ border-top:1px solid rgba(244,242,237,.06); }
.sk__link{
  display:flex; align-items:center; gap:14px;
  padding:15px 12px; margin:0 -12px;
  border-radius:10px;
  transition:background .25s var(--ease);
}
.sk__link:hover{ background:rgba(244,242,237,.04); }
.sk__id{
  flex:none; font-family:var(--mono); font-size:11px;
  font-variant-numeric:tabular-nums; color:var(--paper-mute);
}
.sk__t{ flex:1; font-size:14.5px; line-height:1.35; }
.sk__meta{ flex:none; font-family:var(--mono); font-size:10px; color:var(--paper-mute); }
.sk__check{ flex:none; color:var(--warm); font-size:13px; }
.sk__flag{
  flex:none; padding:3px 7px;
  border:1px solid var(--line); border-radius:4px;
  font-family:var(--mono); font-size:8px; letter-spacing:.1em; color:var(--paper-mute);
}
.sk__item.is-done .sk__t{ color:var(--paper-dim); }

/* ---------- lecon ---------- */
.sk__lhead{ margin-bottom:28px; }
.sk__lkick{
  margin:0 0 14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--warm);
}
.sk__lh{ margin:0 0 10px; font-size:clamp(25px,4.2vw,38px); font-weight:700; letter-spacing:-.03em; line-height:1.1; }
.sk__lmeta{ margin:0; font-family:var(--mono); font-size:11px; color:var(--paper-mute); }

.sk__warn{
  margin:0 0 24px; padding:13px 18px;
  border:1px solid rgba(240,196,138,.28); border-radius:12px;
  font-size:13px; line-height:1.5; color:var(--warm);
}

.sk__goals{
  margin:0 0 32px; padding:20px 24px;
  border:1px solid var(--line); border-radius:14px;
  background:rgba(244,242,237,.02);
}
.sk__goalsT{
  margin:0 0 10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-mute);
}
.sk__goals ul{ margin:0; padding-left:18px; }
.sk__goals li{ margin:5px 0; font-size:14px; line-height:1.5; color:var(--paper-dim); }

/* ---------- corps markdown ---------- */
.md{ font-size:16px; line-height:1.72; color:var(--paper-dim); }
.md h1, .md h2, .md h3{ color:var(--paper); letter-spacing:-.02em; line-height:1.2; }
.md h1{ margin:44px 0 14px; font-size:27px; }
.md h2{ margin:40px 0 12px; font-size:22px; }
.md h3{ margin:32px 0 10px; font-size:17px; }
.md p{ margin:0 0 17px; }
.md strong{ color:var(--paper); font-weight:600; }
.md em{ color:var(--warm); font-style:normal; }
.md a{ color:var(--warm); border-bottom:1px solid rgba(240,196,138,.35); }
.md ul, .md ol{ margin:0 0 17px; padding-left:22px; }
.md li{ margin:7px 0; }
.md blockquote{
  margin:24px 0; padding:2px 0 2px 20px;
  border-left:2px solid rgba(240,196,138,.4);
  color:var(--paper-mute);
}
.md code{
  padding:2px 6px; border-radius:5px;
  background:rgba(244,242,237,.07);
  font-family:var(--mono); font-size:.86em; color:var(--paper);
}
.md pre{
  margin:22px 0; padding:18px 20px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--ink-soft);
  overflow-x:auto;
}
.md pre code{ padding:0; background:none; font-size:12.5px; line-height:1.65; }
.md table{ width:100%; margin:22px 0; border-collapse:collapse; font-size:14px; }
.md th, .md td{ padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); }
.md th{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-mute); }
.md hr{ margin:36px 0; border:0; border-top:1px solid var(--line); }
.md img{ border-radius:12px; }

/* ---------- navigation de leçon ---------- */
.sk__lnav{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:48px; padding-top:28px;
  border-top:1px solid var(--line);
}
.sk__btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px; border-radius:999px;
  border:1px solid var(--line);
  font-size:13.5px; font-weight:500; color:var(--paper-dim);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.sk__btn:hover{ color:var(--paper); border-color:rgba(244,242,237,.26); }
.sk__btn--solid{ background:var(--paper); border-color:var(--paper); color:#000; }
.sk__btn--solid:hover{ background:#fff; border-color:#fff; color:#000; }

/* ---------- quiz ---------- */
.sk__qh{ margin:0 0 26px; font-size:clamp(20px,3.2vw,27px); font-weight:600; letter-spacing:-.02em; line-height:1.3; }
.sk__choices{ display:flex; flex-direction:column; gap:10px; }
.sk__choice{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; padding:17px 22px; text-align:left;
  border:1px solid var(--line); border-radius:14px;
  font-size:15px; line-height:1.45; color:var(--paper-dim);
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.sk__choice:hover:not(:disabled){ color:var(--paper); border-color:rgba(244,242,237,.28); background:rgba(244,242,237,.03); }
.sk__choice:disabled{ cursor:default; }
/* juste / faux : le signe et le contraste portent l'etat, pas une
   couleur — le vert et le rouge ont deja un sens dans cette DA */
.sk__choice.is-right{ border-color:var(--warm); background:rgba(240,196,138,.1); color:var(--paper); }
.sk__choice.is-wrong{ border-style:dashed; color:var(--paper-mute); }
.sk__mark{ flex:none; font-family:var(--mono); font-size:15px; }
.sk__choice.is-right .sk__mark{ color:var(--warm); }

.sk__why{
  margin:22px 0 0; padding:0;
  font-size:14px; line-height:1.6; color:var(--paper-mute);
  opacity:0; transition:opacity .4s var(--ease);
}
.sk__why.is-in{ opacity:1; }
.sk__quiz .sk__btn{ margin-top:26px; }

/* ---------- panneau de connexion ---------- */
.sk__sheet{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding:20px;
  background:rgba(8,9,11,.82);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.sk__sheetBox{
  position:relative; width:100%; max-width:420px;
  padding:34px;
  border:1px solid var(--line); border-radius:20px;
  background:var(--ink-soft);
}
.sk__close{
  position:absolute; top:14px; right:18px;
  font-size:24px; line-height:1; color:var(--paper-mute);
}
.sk__close:hover{ color:var(--paper); }
.sk__authT{ margin:0 0 10px; font-size:21px; font-weight:600; letter-spacing:-.02em; }
.sk__authD{ margin:0 0 24px; font-size:14px; line-height:1.55; color:var(--paper-dim); }
.sk__form{ display:flex; flex-direction:column; gap:10px; }
.sk__input{
  width:100%; padding:14px 18px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--ink); color:var(--paper);
  font:inherit; font-size:14px;
}
.sk__input:focus{ outline:none; border-color:var(--warm); }
.sk__msg{ margin:16px 0 0; font-size:13px; color:var(--warm); min-height:1.2em; }

/* Quatre elements dans une barre de 320px ne tiennent pas sur une ligne :
   la barre debordait du viewport et poussait toute la page en defilement
   horizontal. On la passe sur deux rangees — retour + marque en haut,
   langues + compte en bas — plutot que de tronquer un libelle. */
@media (max-width:620px){
  .sk__bar{ flex-wrap:wrap; row-gap:12px; }
  .sk__brand{ flex:1 1 auto; }
  .sk__right{ flex-basis:100%; justify-content:space-between; }
}
@media (max-width:560px){
  /* reduit a sa fleche, le lien ne fait plus que 14px de large */
  .sk__back span{ display:none; }
  .sk__back{ min-width:40px; }
  .sk__lnav .sk__btn{ flex:1; justify-content:center; }
}

/* Tactile : les trois langues passent a 44px, comme la pastille de nav. */
@media (hover:none){
  .sk__lang{ min-height:38px; }
}