/* ==========================================================================
   Kurdi School — les pages de contenu (lexique, grammaire, alphabet, phrases,
   programme, FAQ). Elles sont GÉNÉRÉES par outils/construire_seo.py et servent
   d'abord à être lues : par un humain qui cherche une règle, et par un moteur
   qui cherche une réponse à citer. Aucune animation, aucune dépendance —
   rien ici ne peut faire une page blanche.
   Elles empruntent les variables de site.css, chargé juste avant.
   ========================================================================== */

/* 88 px, et 78 sous 420 px où la barre ne fait plus que 64 : c'était 104 pour
   une barre de 72, soit 32 px d'air en haut d'une page qui doit montrer son
   invitation avant le premier défilement. Chaque pixel gagné ici est un pixel
   de plus pour `.appel-haut`, qui vient après le chapô. */
.doc{max-width:900px;margin:0 auto;padding:88px 0 72px}
@media (max-width:419px){.doc{padding-top:78px}}
.doc h1{font-size:clamp(1.9rem,5vw,2.7rem);margin-bottom:14px}
.doc h2{font-size:1.45rem;margin:44px 0 12px;scroll-margin-top:88px}
.doc h3{font-family:var(--f-disp);color:var(--encre);font-size:1.08rem;margin:26px 0 8px;scroll-margin-top:88px}
.doc p{margin-bottom:12px}
.doc ul{padding-left:20px;list-style:disc;margin-bottom:12px}
.doc li{margin-bottom:6px}
.doc a:not(.btn){color:var(--ciel-d);text-decoration:underline;text-underline-offset:2px}
.doc a:not(.btn):hover{color:var(--encre)}
.doc b{color:var(--encre)}

/* Le fil d'Ariane : où l'on est, en une ligne. */
.fil{font-size:.85rem;color:var(--encre-3);margin-bottom:12px}
.fil a{color:var(--encre-3);display:inline-block;padding:7px 0}
.fil span{color:var(--encre-2)}

/* Le résumé : la réponse à la question de la page, avant tout le reste. */
.chapo{font-size:1.14rem;font-weight:600;color:var(--encre-2);border-left:4px solid var(--soleil);padding:2px 0 2px 16px;margin:0 0 8px}
.date{font-size:.85rem;color:var(--encre-3);margin-bottom:14px}
/* Sur un téléphone, le chapô fait cinq à sept lignes : à 1,14 rem il poussait
   l'invitation sous la ligne de flottaison. Il reste plus gros que le texte
   courant, et l'allemand — qui est le plus long des trois — repasse au-dessus
   du pli à 375 px. */
@media (max-width:480px){.chapo{font-size:1.05rem;line-height:1.5}}

/* ---------- L'INVITATION, DANS LE PREMIER ÉCRAN ----------
   Mesuré le 20/09/2026 à 375 px : le premier appel à créer un compte était à
   94,9 % de la page sur l'alphabet et à 99,4 % sur les phrases, et le mot
   « gratuit » n'y paraissait qu'une fois, tout en bas. Une page qui ne dit son
   prix — zéro — qu'après huit à quatre-vingt-cinq écrans ne le dit à personne.
   Cette ligne tient entre la date et le sommaire : elle ne déplace ni le H1 ni
   le chapô, qui sont au-dessus, et coûte deux lignes au sommaire.
   Le liseré vert, et non grenade : il dit « gratuit », pas « achète ». */
.appel-haut{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 10px;
  background:var(--papier-2);border:1px solid var(--ligne);border-left:4px solid var(--vert);
  border-radius:var(--r);padding:12px 16px;font-weight:600;font-size:.98rem;color:var(--encre-2)}
.appel-haut>span{flex:1 1 240px;min-width:0}
.appel-haut b{color:var(--encre)}
.appel-haut [data-chiffre]{color:var(--encre);font-weight:800}
.appel-haut .btn{flex:0 0 auto;margin-left:auto}
/* Sous 560 px le bouton prend la ligne entière : posé au bout d'un texte qui
   se replie, il se retrouvait seul et minuscule dans un coin. */
@media (max-width:560px){
  .appel-haut{padding:12px 14px}
  .appel-haut .btn{margin-left:0;width:100%}
}

/* Le sommaire : toutes les ancres de la page, d'un coup d'œil. */
.somm{background:var(--papier-2);border:1px solid var(--ligne);border-radius:var(--r);padding:18px 20px;margin:26px 0 10px}
.somm h2{font-family:var(--f-disp);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3);margin:0 0 10px}
.somm ul{list-style:none;padding:0;margin:0;columns:2;column-gap:26px}
@media (max-width:640px){.somm ul{columns:1}}
.somm li{margin-bottom:2px;break-inside:avoid}
.somm a{text-decoration:none;font-weight:600;display:inline-block;padding:6px 0}
.somm a:hover{text-decoration:underline}

/* Les tableaux : le lexique, les lettres, les phrases. */
.tab{width:100%;border-collapse:collapse;margin:12px 0 22px;font-size:.97rem}
.tab th{text-align:left;font-family:var(--f-disp);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3);padding:8px 12px;border-bottom:2px solid var(--ligne-2)}
.tab td{padding:9px 12px;border-bottom:1px solid var(--ligne);vertical-align:top}
.tab tr:nth-child(even) td{background:rgba(255,255,255,.6)}
.tab .ku{font-weight:700;color:var(--encre);width:46%}
/* Un mot ne se coupe pas ; une phrase se replie. Le nowrap d'origine poussait la
   table des phrases a 503 px de large dans une fenetre de 390. */
.tab td.ku{overflow-wrap:break-word}
.doc-tab-large{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Les tableaux venus des astuces du cours, écrits en HTML dans le contenu.
   Ce HTML n'est pas retaillable — il appartient aux leçons — donc c'est le
   bloc qui cède : il défile plutôt que de pousser la page. */
.regle{overflow-x:auto}
.regle table{width:100%;border-collapse:collapse;margin:10px 0 14px;font-size:.95rem}
.regle th{text-align:left;font-family:var(--f-disp);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3);padding:7px 10px;border-bottom:2px solid var(--ligne-2)}
.regle td{padding:8px 10px;border-bottom:1px solid var(--ligne)}
.regle p{margin-bottom:10px}
.regle b{color:var(--encre)}
.regle i{color:var(--encre-2)}

/* Une carte de règle : le titre de la compétence, puis sa règle. */
.bloc{background:var(--papier-2);border:1px solid var(--ligne);border-radius:var(--r);padding:20px 22px;margin:16px 0}
.bloc h3{margin-top:0}
.bloc-ex{margin-top:10px;padding-top:10px;border-top:1px dashed var(--ligne-2);font-size:.95rem}
.bloc-ex b{display:inline-block;min-width:0}

/* Sur les fenêtres les plus étroites (320 px), la carte rend sa marge au
   tableau qu'elle contient. */
@media (max-width:420px){
  .bloc{padding:16px 14px}
  .regle td,.regle th{padding:7px 7px}
  .tab td,.tab th{padding:8px 8px}
}

/* L'index des règles : une ligne par unité, ses règles en liens. */
.index-regles{background:var(--papier-2);border:1px solid var(--ligne);border-radius:var(--r);padding:16px 20px;margin:12px 0 8px}
.index-regles p{margin:0 0 8px;line-height:1.9}
.index-regles p:last-child{margin-bottom:0}
.index-regles a{padding:4px 0;display:inline-block}

/* Question / réponse. */
.qr{border-bottom:1px solid var(--ligne);padding-bottom:14px;margin-bottom:14px}
.qr h2{font-size:1.18rem;margin:22px 0 8px}

/* L'invitation, en bas de chaque page. */
.appel{background:var(--nuit);color:#EAECF7;border-radius:var(--r-l);padding:28px 30px;margin:44px 0 0;text-align:center}
.appel h2{color:#fff;margin:0 0 8px;font-size:1.35rem}
.appel p{color:#B6BCDA;margin-bottom:18px}
.appel .btn{margin:0 auto}
/* La deuxieme porte : « ou situe-toi d'abord ». Elle vient APRES le bouton,
   parce que le premier chemin reste l'inscription — et son lien est un vrai
   lien, souligne, avec une cible qu'on touche au doigt. */
.appel.appel-test{background:#F3EBDD;color:var(--encre);margin-top:44px}
.appel.appel-test h2{color:var(--encre)}
.appel.appel-test p{color:#4B4F6B}
.appel.appel-test+.appel{margin-top:16px}
.appel .appel-ou{margin:16px 0 0;font-size:.95rem;color:#B6BCDA}
.appel .appel-ou a{color:#FFD9C2;text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:3px;display:inline-block;padding:6px 2px;margin:-6px -2px}

/* ---------- LA MINI-LEÇON, AU MILIEU DU TEXTE ----------
   Le bloc `.demo-ex` est celui des accueils, et son style vit dans site.css :
   ici on ne pose que le cadre autour, et la façon dont il se lit SANS
   JavaScript. C'est la pièce qui convertit le mieux — on essaie avant de
   s'inscrire — et elle n'existait que là où arrivent ceux qui connaissaient
   déjà Kurdi School.

   SANS JAVASCRIPT, TOUT EST LÀ : les trois questions, leurs réponses, et un
   lien pour commencer. Rien n'est `hidden` dans le HTML ; c'est `html.js`,
   posé par le script du <head>, qui replie le bloc en une question à la fois.
   La page ne peut donc jamais montrer un cadre vide. */
/* Un fond PLAT, pas un dégradé : le banc de rendu ne sait pas lire la couleur
   de fond sous un dégradé et classe tout ce qu'il porte en « contraste non
   mesurable ». Un bloc qu'on ne peut pas mesurer est un bloc qu'on ne
   surveille plus. Le rose du bandeau d'essai des accueils, en aplat. */
.doc-demo{background:#F3E4E2;border:1px solid var(--ligne);border-radius:var(--r-l);
  padding:22px 20px 24px;margin:40px 0}
.doc-demo h2{margin:0 0 6px;font-size:1.3rem}
.doc-demo>p{color:var(--encre-2);margin-bottom:16px}
.doc-demo .demo-ex{margin:0 auto}
.doc-demo .demo-fin h3{margin:6px 0 8px}
/* Quatre réponses d'une ou deux lettres : en ligne, centrées, comme les trois
   terminaisons de la mini-leçon des accueils (`.opts-3` dans site.css). */
.demo-ex .opts-court{grid-template-columns:repeat(4,1fr)}
.demo-ex .opts-court button{text-align:center;font-family:var(--f-disp);font-size:1.2rem;padding:12px 6px}
.demo-sansjs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 14px;margin:16px 0 0;font-weight:700;color:var(--encre-2);text-align:center}
html.js .doc-demo .demo-q{display:none}
html.js .doc-demo .demo-q.est-on{display:block}
html.js .demo-sansjs{display:none}
/* Sans script : les trois questions se suivent, séparées, et ni la jauge ni
   la ligne de verdict n'ont de sens — elles ne bougeront jamais. */
html:not(.js) .doc-demo .demo-haut,
html:not(.js) .doc-demo .verdict{display:none}
html:not(.js) .doc-demo .demo-q+.demo-q{margin-top:18px;padding-top:18px;border-top:1px solid var(--ligne)}
@media (max-width:420px){
  .doc-demo{padding:18px 12px 20px}
  .doc-demo .demo-ex{padding:16px 14px}
}

/* Le pied : les autres pages de contenu, toujours accessibles. */
.pied-doc{border-top:1px solid var(--ligne);padding:26px 0 40px;font-size:.92rem;color:var(--encre-3)}
.pied-doc nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:12px}
.pied-doc a{color:var(--encre-2);text-decoration:none;display:inline-block;padding:8px 0}
.pied-doc a:hover{text-decoration:underline}

/* Le compte d une section, a cote de son titre. */
.doc h3 .cpt{font-family:var(--f-body);font-weight:600;font-size:.85rem;color:var(--encre-3);letter-spacing:0}

/* ==========================================================================
   Le test de niveau (test.html, en/test.html).

   La page se lit SANS JavaScript : dix questions dans une liste ordonnée,
   numérotées, toutes visibles. Rien n'est caché ici que sous `html.js` — la
   classe est posée par le script du <head>, donc la liste ne clignote jamais
   avant d'être repliée. C'est la même règle que partout ailleurs sur le site.
   ========================================================================== */

html.js .test-liste{list-style:none;padding-left:0}
html.js .test-liste .test-q{display:none}
html.js .test-liste .test-q.est-on{display:block}

.test{margin:18px 0 0}
.doc .test-liste{padding-left:22px;margin:0}
.test-q{margin:0 0 26px;padding:0 0 20px;border-bottom:1px solid var(--ligne)}
.test-q:last-child{border-bottom:0;padding-bottom:0}
.test-ku{font-family:var(--f-disp);font-weight:700;color:var(--encre);font-size:1.3rem;line-height:1.3;margin-bottom:4px}
.test-sens{color:var(--encre-3);font-size:.95rem;margin-bottom:14px}
.test-opts{display:grid;gap:10px;max-width:520px}

/* Trois grands boutons, de la même taille et de la même couleur : rien dans
   leur apparence ne trahit le bon — la page ne le connaît pas. */
.test-opt{display:block;width:100%;text-align:left;font-family:var(--f-body);font-size:1.05rem;font-weight:700;color:var(--encre);background:var(--papier-2);border:0;border-radius:14px;padding:14px 18px;min-height:56px;cursor:pointer;box-shadow:0 3px 0 var(--ligne-2),inset 0 0 0 2px var(--ligne-2);transition:box-shadow .12s,transform .08s}
.test-opt:hover{box-shadow:0 3px 0 var(--ligne-2),inset 0 0 0 2px var(--ciel)}
.test-opt:active{transform:translateY(3px);box-shadow:0 0 0 var(--ligne-2),inset 0 0 0 2px var(--ciel-d)}
.test-opt.est-pris{color:var(--ciel-txt);box-shadow:0 3px 0 var(--ciel-d),inset 0 0 0 2px var(--ciel-d)}

/* L'avancement : « 3 / 10 » et une jauge. Pas de minuteur, jamais. */
.test-cmd{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.test-pas{font-family:var(--f-disp);font-weight:800;font-size:.9rem;letter-spacing:.08em;color:var(--encre-3);margin:0;white-space:nowrap}
.test-jauge{flex:1;height:10px;border-radius:99px;background:var(--ligne);overflow:hidden}
.test-jauge i{display:block;height:100%;width:10%;background:var(--soleil);border-radius:99px;transition:width .25s}
.test-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.test-nav button[disabled]{opacity:.45;cursor:default}

/* Le résultat : il s'affiche en entier, toujours, avant toute demande. */
.test-verdict{font-family:var(--f-disp);font-weight:800;color:var(--encre);font-size:clamp(1.5rem,4.4vw,2.2rem);line-height:1.15;margin:0 0 8px}
.test-note{font-size:1.1rem;font-weight:700;color:var(--encre-2);margin-bottom:20px}
.test-depart{background:var(--papier-2);border:1px solid var(--ligne);border-radius:var(--r);padding:18px 20px;margin:0 0 24px}
.test-depart-lab{display:block;font-family:var(--f-disp);font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3);margin-bottom:8px}
.test-depart b{display:block;font-family:var(--f-disp);font-size:1.15rem;color:var(--encre);margin-bottom:4px}
.test-depart span+span{display:block;color:var(--encre-2)}

.doc .test-corrige{list-style:none;padding:0;margin:0 0 8px}
.test-corrige li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--ligne)}
.test-corrige li::before{position:absolute;left:0;top:14px;font-weight:800;font-size:1.05rem}
.test-corrige li.est-juste::before{content:"\2713";color:var(--vert-d)}
.test-corrige li.est-faux::before{content:"\2717";color:var(--rouge)}
.test-corrige .k{display:block;font-weight:700;color:var(--encre);font-size:1.05rem}
.test-corrige .r{display:block;font-size:.97rem;margin-top:5px}
.test-corrige .m{display:block;font-size:.92rem;color:var(--rouge);margin-top:2px}
.test-corrige .x{display:block;font-size:.9rem;color:var(--encre-3);margin-top:4px}
.test-cta{text-align:center;margin:28px 0 0}

/* Le bloc adresse : après le résultat, jamais avant. */
.test-piste{background:var(--papier-2);border:1px solid var(--ligne);border-radius:var(--r);padding:22px 24px;margin:30px 0 0}
.test-piste h3{margin-top:0}
.test-lab{display:block;font-family:var(--f-disp);font-weight:700;font-size:.85rem;color:var(--encre-2);margin-bottom:6px}
.test-piste input[type=email]{display:block;width:100%;box-sizing:border-box;font-family:var(--f-body);font-size:1rem;color:var(--encre);background:#fff;border:2px solid var(--ligne-2);border-radius:12px;padding:13px 15px;margin-bottom:12px}
.test-piste input[type=email]:focus{outline:2px solid var(--focus);outline-offset:1px}
.test-piste .btn{width:100%}
.test-fine{font-size:.87rem;color:var(--encre-3);margin:14px 0 0}
.test-avis{font-weight:700;margin:12px 0 0}
.test-avis.ok{color:var(--vert-txt)}
.test-avis.ko{color:var(--rouge)}

/* Le pot de miel. Ni `type=hidden` ni `display:none` sur le conteneur : un
   robot sait lire les deux et s'abstient. Déporté hors de l'écran, comme sur
   la page de compte, il n'est rempli que par ce qui remplit tout. */
.test-piste .pot{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* Les dix unités, pour lire « par où commencer » sans avoir passé le test. */
.doc .test-unites{list-style:none;padding:0;margin:12px 0 14px}
.test-unites li{padding:10px 0;border-bottom:1px solid var(--ligne)}
.test-unites b{display:block;font-family:var(--f-disp);color:var(--encre)}
.test-unites span{display:block;font-size:.95rem;color:var(--encre-3)}