/* Beauté du site (PLAN-AMELIORATIONS, étape 3 — maquette validée par Houzeifa le 21/10/2026).
   Chargé à la fin du <head> de l'accueil, de la bibliothèque, de « Mes lectures », de « Mon arabe » et des leçons / révision / lectures.
   Il ne touche à aucun texte, seulement à l'apparence. Identité gardée : rouge brique, crème, Scheherazade New / Reem Kufi / Karla.
   Écran seulement : la fiche imprimée garde ses réglages (09/10/2026).
   Les règles des leçons commencent par html.lx (classe posée par lecon-ui.js) : rien ne déborde sur les autres pages. */

@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@700&display=swap");

@media screen{

/* ── 1. Les mesures communes ─────────────────────────────────────────── */
:root{
  --line-fort:#a3847d;  /* trait des contrôles (boutons secondaires, champs) : 3,4 de contraste sur blanc (audit UX n° 19) */
  --ar-mot:1.9rem;      /* un mot seul (cartes, vignettes, exemples-phares) */
  --ar-phrase:1.5rem;   /* une phrase (règle, exemple, texte, question, correction) */
  --ar-tab:1.35rem;     /* dans un tableau, un choix, une case à remplir */
  --rayon:14px;         /* toutes les cartes */
  --rayon-g:18px;       /* les grands blocs (Continuer, encadrés de l'accueil) */
  --ombre:0 1px 2px rgba(90,45,38,.06),0 4px 14px rgba(90,45,38,.07);
  --ombre-h:0 2px 4px rgba(90,45,38,.08),0 8px 22px rgba(90,45,38,.10);
}
/* Titres arabes : le Kufi (Reem Kufi) est joli mais dur à lire pour certains élèves ; on prend Amiri gras (naskh classique, élégant, différent du texte de cours) (22/10/2026). */
html:root{--arT:"Scheherazade New","Amiri",serif}   /* 28/10/2026 : Scheherazade (la même écriture que les textes du cours, voyelles bien espacées) : plus facile à lire que Amiri gras */
.hero h1, .sechead h2, .gram > h3{font-weight:700}
html.lx .sechead h2, html.lx .rs-h b{letter-spacing:0;line-height:1.7}
html.lx .rs-h b{font-size:1.3rem;font-weight:600}
:root[data-theme="dark"]{
  --line-fort:#7d6661;
  --ombre:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.25);
  --ombre-h:0 2px 4px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35);
}
@media (max-width:520px){ :root{ --ar-mot:1.75rem; --ar-phrase:1.42rem; --ar-tab:1.3rem; } }

/* ── 2. Accueil, bibliothèque, Mes lectures : cartes de la même forme ── */
.lec, .porte, .afaire, details.bloc, .bientot, .racc{border-radius:var(--rayon)}
.cont, .calme{border-radius:var(--rayon-g)}
.lec, .porte, .racc{box-shadow:var(--ombre)}
.lec:hover, .porte:hover{box-shadow:var(--ombre-h)}
/* « Mes mots » : chaque mot est une carte, comme les leçons de la bibliothèque (22/10/2026) */
.mot, .regle{padding:10px 12px;margin:8px 0;border:1px solid var(--line);border-radius:var(--rayon);background:var(--paper);box-shadow:var(--ombre)}

/* ── 3. Leçons : une taille d'arabe par rôle ─────────────────────────── */
html.lx .itm .w, html.lx .card .qa, html.lx .phare .w, html.lx .pcard .pc-ar{font-size:var(--ar-mot)}
html.lx .exline, html.lx .rule .a, html.lx .qtext, html.lx .rowq .s, html.lx .diffbox, html.lx textarea.write,
html.lx details.sol .a, html.lx .verse .a, html.lx .verse .a2, html.lx .card .front{font-size:var(--ar-phrase)}
html.lx td.a, html.lx td.ac, html.lx .opt, html.lx .chipword, html.lx input.ans, html.lx .goals .a{font-size:var(--ar-tab)}
html.lx .pcard .exline{font-size:calc(var(--ar-phrase) * .85)}
html.lx .bin .drop .chipword{font-size:calc(var(--ar-tab) * .85)}
@media (max-width:600px){ html.lx #tarakib td.a{font-size:calc(var(--ar-tab) * .92)} }

/* ── 4. Leçons : des cartes de la même forme ─────────────────────────── */
html.lx .exo, html.lx .card, html.lx .itm, html.lx .phare > div, html.lx .pcard, html.lx .rs-ess, html.lx .qtext,
html.lx .bin, html.lx .diffbox, html.lx .kbd, html.lx details.sol, html.lx details.rs-pli, html.lx .note, html.lx .pion,
html.lx .lx-fin, html.lx .lx-plus-btn, html.lx details.lx-plus{border-radius:var(--rayon)}
html.lx .rule, html.lx .rs-attn{border-radius:0 var(--rayon) var(--rayon) 0}
/* ombre douce sur ce qu'on touche ou qu'on lit comme une carte ; rien sur les encadrés d'explication */
html.lx .exo, html.lx .card, html.lx .pcard, html.lx .phare > div{box-shadow:var(--ombre)}
html.lx .card:hover{box-shadow:var(--ombre-h)}
html.lx .itm{background:var(--paper);box-shadow:var(--ombre)}
html.lx .exo > header{padding:14px 18px}
html.lx .exo > div{padding:18px}

/* Règle en cartes (pilote leçon 3 validé le 22/10/2026, étendu à toutes les leçons et à la révision d'unité) : chaque temps de la règle (j'observe, j'analyse, la règle) est une carte comme dans Mes règles ;
   la règle ressort (bord plus marqué, ombre plus nette), l'analyse reste légère. Rien d'autre ne change. */
html.lx .rs{background:var(--paper);border:1px solid var(--line);border-radius:var(--rayon);box-shadow:var(--ombre);padding:12px 14px 14px;margin:16px 0}
html.lx .rs-h{margin-bottom:10px}
html.lx .rs:has(> .rule){border-color:var(--primary);box-shadow:var(--ombre-h)}
html.lx .rs > .rule{margin:0}
html.lx .rs:has(> p.an){box-shadow:none;background:transparent}
html.lx .rs-ess{box-shadow:var(--ombre);border-radius:var(--rayon)}
html.lx .gram .tw{margin:0 -4px}
html.lx details.rs-pli{box-shadow:var(--ombre)}
html.lx details.rs-loin{box-shadow:none}
/* Lectures : « les règles déjà vues » — mêmes cartes ombrées que les règles des leçons */
html.lx #regles-sec .carte{box-shadow:var(--ombre)}

/* ── 5. Un seul bouton plein par écran, les autres en contour ────────── */
html.lx .btn{border-radius:12px;min-height:44px;padding:10px 20px;letter-spacing:.01em}
html.lx .btn.sm{min-height:36px;border-radius:10px}
html.lx .btn.ghost{background:transparent;border:1.5px solid var(--line-fort);color:var(--primary)}
html.lx .btn.ghost:hover{border-color:var(--primary);background:var(--wash)}
/* nuit : le bouton plein reste brique (le rose clair de --primary donnait du blanc sur rose pâle, illisible) (25/10/2026) */
html.lx[data-theme="dark"] .btn:not(.ghost){background:#a94f45;color:#fff}
html.lx .opt{min-height:40px;min-width:48px;padding:6px 16px}
/* en pas-à-pas, le grand titre de partie (« قواعد النحو — Grammaire ») revient à chaque étape : plus petit */
html.lx #corps-lecon.mode-guide .sechead{border-bottom-width:1px;padding-bottom:6px;margin-bottom:16px}
html.lx #corps-lecon.mode-guide .sechead h2{font-size:1.2rem}
/* en haut d'une étape : les liens « Sommaire · Mon bilan · Me tester » plus discrets */
html.lx .lx-liens{gap:14px;font-size:.8rem;margin:10px 0 0}
html.lx .lx-liens button{color:var(--muted);font-weight:600}
html.lx .lx-liens button:hover{color:var(--primary)}

/* ── 6. Plus d'air sur téléphone ─────────────────────────────────────── */
@media (max-width:520px){
  html.lx td{padding:12px 8px}
  html.lx th{padding:10px 8px 12px}
  html.lx .goals li{padding:14px 0}
  html.lx .rowq{padding:14px 0;gap:10px}
  html.lx .grid2, html.lx .deck{gap:12px}
  html.lx .exo{margin:26px 0}
  html.lx .exo > div{padding:16px 14px}
  html.lx .exo > header{padding:12px 14px}
  html.lx .rule{padding:16px}
  html.lx .qtext{padding:18px 16px;line-height:2.4}
  html.lx .sechead{margin-bottom:24px}
  html.lx .acts{gap:12px}
}

/* ── 7. Mon arabe (maquette validée par Houzeifa le 21/10/2026) ───────── */
/* règles préfixées html.ma (classe de mon-arabe.html) : rien ne déborde sur les autres pages */
html.ma h2{font-size:1.02rem;border-bottom-width:1px;margin:34px 0 12px;padding-bottom:8px}
html.ma .maint h2{margin:0 0 8px;padding:0}
html.ma .rch-case{border-radius:var(--rayon);border-width:1.5px;min-height:48px;box-shadow:var(--ombre)}
/* « À travailler maintenant » : le seul bouton plein de la page */
html.ma .maint{border-width:1.5px;border-radius:var(--rayon-g);box-shadow:var(--ombre);padding:18px 18px 20px}
html.ma .maint .quoi .ar{font-size:var(--ar-phrase)}
html.ma .maint a.go{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:16px}
/* « Mes mots » : trois compteurs de la même forme ; « Voir tous mes mots » en contour */
html.ma .compteurs{gap:12px}
html.ma .compteurs div{border-radius:var(--rayon);padding:14px 10px}
html.ma .compteurs b{font-size:1.9rem;margin-bottom:2px}
html.ma a.lien{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;margin-top:14px;border:1.5px solid var(--line-fort);border-radius:12px}
html.ma a.lien:hover{text-decoration:none;border-color:var(--primary);background:var(--wash)}
/* cartes : leçons de « Ma grammaire », « À refaire », « À retenir » */
html.ma details.lec, html.ma .favs{border-radius:var(--rayon);box-shadow:var(--ombre)}
html.ma details.lec{margin-bottom:12px}
html.ma details.lec:hover{box-shadow:var(--ombre-h)}
html.ma details.lec > summary{padding:14px 16px;min-height:52px}
html.ma .exo{padding:12px 16px;min-height:56px}
html.ma .exo .x .ar, html.ma .favs .t{font-size:var(--ar-tab)}
/* l'intitulé français se lit toujours de gauche à droite (« ال et le tanwīn » s'affichait « et le tanwīn ال ») */
html.ma .exo .x small{margin-top:2px;direction:ltr;unicode-bidi:isolate;text-align:left}
html.ma .pas{padding:3px 10px}
html.ma .ent .outils button{min-height:36px;border-radius:10px;background:transparent;border:1.5px solid var(--line-fort);color:var(--primary)}
html.ma .ent .outils button:hover{border-color:var(--primary);background:var(--wash)}
html.ma .sous{margin:18px 0 8px}
@media (max-width:520px){
  html.ma .maint{padding:16px 14px 18px}
  html.ma .compteurs{gap:8px}
  html.ma .compteurs div{padding:12px 6px}
  html.ma details.lec > summary{padding:14px}
  html.ma .exo{padding:12px 14px;gap:10px}
  html.ma .ent .outils{padding:0 14px 12px}
}


/* ── 8. Habillage commun des pages d'exercice et de révision (lot 5, 21/10/2026) ─────────────────
   Mes mots, Mes règles, Exercices du professeur, Coin révision, Mots du Coran, Comprendre l'arabe (classe html.pg).
   En-tête plus compact, boutons et champs de la même forme, bouton inactif = phrase grise. Aucun texte touché. */
html.pg header.hero{padding:14px 0 16px}
html.pg header.hero a{display:inline-flex;align-items:center;min-height:36px;padding:0 4px;margin-left:-4px}
html.pg header.hero a:hover{text-decoration:underline}
html.pg header.hero h1{font-size:1.5rem;margin:.1em 0 0}
html.pg header.hero p{font-size:1rem;line-height:1.45}
html.pg h2{border-bottom-width:1px}
html.pg button{border-width:1.5px;border-radius:12px;min-height:44px}
html.pg button.pri{box-shadow:none}
html.pg[data-theme="dark"] button.pri{color:#181211}
html.pg button:not(.pri):not(:disabled):hover{border-color:var(--primary);background:var(--soft)}
/* un bouton inactif n'est plus un bouton grisé : c'est une phrase grise */
html.pg .actions button.pri:disabled,html.pg .bas button.pri:disabled{background:none;border-color:transparent;color:var(--muted);opacity:1;
  padding-left:2px;padding-right:2px;font-weight:500;cursor:default;text-align:left}
html.pg input[type=text],html.pg input:not([type]),html.pg textarea,html.pg select{border:1.5px solid var(--line-fort);border-radius:12px;min-height:46px;
  padding:8px 12px;font-size:16px;background:var(--paper);color:var(--ink)}
html.pg input:focus-visible,html.pg textarea:focus-visible,html.pg select:focus-visible{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
html.pg .compteurs div{border-radius:var(--rayon);box-shadow:var(--ombre)}
html.pg .seg button{border-radius:10px}
@media (max-width:520px){ html.pg .wrap{padding:0 14px} }


/* ── 9. Identité visuelle : en-tête commun (maquette validée le 24/10/2026, .outils/essais/maquette-entete.html) ──
   Bandeau bordeaux (plus sombre en nuit) qui défile ; « ← Accueil » en haut à gauche, boutons à droite ; titre sans emoji.
   Pages : <header class="hero entete"> ; leçons : lecon-ui.js (html.ident). */
:root{--band:#7c332c;--band-t:#fff;--band-s:#f0dcd8;--band-b:rgba(255,255,255,.22)}
:root[data-theme="dark"]{--band:#4a2522;--band-t:#f6e4e0;--band-s:#d9bcb6;--band-b:rgba(255,255,255,.16)}
html header.hero.entete{background:var(--band);color:var(--band-t);padding:6px 0 14px}
html header.hero.entete .en-l1{display:flex;align-items:center;gap:8px;min-height:44px}
html header.hero.entete a.en-ret{color:var(--band-t);opacity:.9;font-size:.88rem;font-weight:600;display:inline-flex;align-items:center;gap:2px;
  min-height:44px;padding:0 4px 0 0;margin:0;text-decoration:none}
html header.hero.entete a.en-ret:hover{opacity:1;text-decoration:underline}
html header.hero.entete a.en-ret .pi{width:18px;height:18px}
html header.hero.entete h1{font-size:1.4rem;font-weight:800;margin:2px 0 0;line-height:1.3}
html header.hero.entete p{font-family:var(--fr);font-size:.88rem;font-style:italic;color:var(--band-s);margin:2px 0 0}

}

/* Pictogrammes de navigation : pictos.svg (un seul fichier, remplaçable). Trait seul, couleur du texte autour. */
svg.pi{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:middle}

/* ── 10. Filet doré sous le bandeau, menu ⋯, petit fond à points (27/10/2026) : pages à bandeau (html.pg) ── */
:root{--filet:#d6a84f;--filet2:#ecd9a8}
:root[data-theme="dark"]{--filet:#b88a3a;--filet2:#6b5326}
html header.hero.entete{position:relative}
html.pg body{background-color:var(--wash);background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--primary) 12%,transparent) 1px,transparent 0);background-size:22px 22px;min-height:100vh}
header.entete .en-esp{flex:1}
header.entete .en-ico{width:44px;height:44px;min-height:44px;padding:0;border-radius:10px;border:1px solid var(--band-b);background:none;color:var(--band-t);display:grid;place-items:center}
header.entete .en-ico .pi{width:20px;height:20px}
.en-menu{position:absolute;right:16px;top:50px;z-index:60;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.22);padding:6px;min-width:230px;max-width:calc(100vw - 32px)}
.en-menu[hidden]{display:none}
.en-menu button,.en-menu a{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;padding:10px 12px;border-radius:8px;font:inherit;font-weight:400;min-height:44px;color:var(--ink);text-decoration:none;cursor:pointer}
.en-menu button:hover,.en-menu a:hover{background:var(--soft)}
.en-menu .pi{width:18px;height:18px}
.en-menu .sep{height:1px;background:var(--line);margin:5px 4px}

/* ── 11. Bandeau LÉGER (28/10/2026) : fond de la page, texte bordeaux, et seulement une fine bande bordeaux + filet doré en haut.
   Même habillage sur les pages à bandeau (header.entete) et sur les leçons (lx-bande). L'ancien bandeau plein est dans l'historique git (kalima-v203). ── */
:root{--band:var(--paper);--band-t:var(--deep);--band-s:var(--muted);--band-b:var(--line);--bande-h:#7c332c}
:root[data-theme="dark"]{--band:var(--paper);--band-t:var(--deep);--band-s:var(--muted);--band-b:var(--line);--bande-h:#a94f45}
html header.hero.entete, html.lx.ident .lx-bande{
  background-color:var(--paper);
  background-image:linear-gradient(var(--bande-h) 0 5px, var(--filet) 5px 7px, transparent 7px);
  border-bottom:1px solid var(--line);box-shadow:none}
html header.hero.entete{padding-top:14px}
html.lx.ident .lx-bande .lx-l1{padding-top:12px}
html.lx.ident .lx-bande .lx-tt .a, html header.hero.entete h1{color:var(--ink)}
html.lx.ident .lx-bande .lx-tt .a{font-family:"Scheherazade New","Amiri",serif;font-weight:700;font-size:2rem}
html header.hero.entete h1{font-weight:800}

/* ── 12. Petit écran : Plan et Me tester plus compacts, même ligne que « Étape 3/10 » (28/10/2026) ── */
@media (max-width:520px){
  html.lx.ident .lx-l2{gap:6px}
  html.lx.ident .lx-cpt{font-size:.76rem}
  html.lx.ident .lx-plan{padding:3px 9px 3px 7px;font-size:.76rem;min-height:44px;gap:4px}
  html.lx.ident .lx-plan .pi{width:14px;height:14px}
}

/* lot 1 de l'audit (H-06) : en nuit le bouton plein est saumon clair (#e0897c) ; texte blanc = 2,6:1, texte foncé = 7:1.
   Les .btn des leçons restent brique avec texte blanc (règle html.lx plus haut). */
:root[data-theme="dark"] :is(button.pri, a.pri, .ks-basnav button.pri, .kl-porte button:not(.lien), .cont, .badge, .code-f button,
  .bascule-an .on, .lec.encours .nb, .opt.pick, .chipword.pick, .chips-scroll a.on, .exo .no, .lx .seg button.on, .barre-sc .pts button.on,
  button.pri[aria-pressed="true"], .vx button[aria-pressed="true"], .cr-defi, .dct-b.pri, .kc-niv button[aria-pressed="true"]){color:#181211}

/* ── 13. Boutons : une seule forme (audit 11/2026, lot 7, séance 2, H-09) ────────────────────────────
   Un seul bouton plein par écran (« Suivant », « Continuer », « Commencer »). « Vérifier » et « Copier » sont des boutons
   secondaires : contour 1,5 px, texte brique. Toutes les cibles font au moins 44 px, rayon 12 px. */
html.lx .btn.sm{min-height:44px;border-radius:12px}
html.lx .opt{min-height:44px}
html.lx .acts .btn:not(.ghost),html.lx .btn[data-valider],html.lx .btn[data-v]{background:transparent;border:1.5px solid var(--primary);color:var(--primary)}
html.lx .acts .btn:not(.ghost):hover,html.lx .btn[data-valider]:hover,html.lx .btn[data-v]:hover{background:var(--wash)}
html.lx[data-theme="dark"] .acts .btn:not(.ghost),html.lx[data-theme="dark"] .btn[data-valider],html.lx[data-theme="dark"] .btn[data-v]{background:transparent;color:var(--primary)}
html.pg .lr-pt button.pri,html.pg .prop button.pri{background:transparent;border-color:var(--line-fort);color:var(--primary)}
html.pg[data-theme="dark"] .lr-pt button.pri,html.pg[data-theme="dark"] .prop button.pri{color:var(--primary)}
/* séance 9 du parcours (06/11/2026) : l'arabe d'un texte lu a la même taille dans tous les lecteurs (charte : 23 px téléphone / 24 px ordinateur) */
html.lx .qtext{font-size:23px}
@media (min-width:700px){ html.lx .qtext{font-size:24px} }

/* ── 14. U7 (audit UX 13/11/2026, n° 14, 15, 19) : bouton principal commun, trait fort des contrôles, une seule flèche « › » ──────────
   Bouton principal = bouton plein : 48 px, rayon 12 px, 16 px gras, sans flèche. Secondaire = contour --line-fort, 44 px.
   Le signe « ▶ » est réservé à l'audio ; « › » = ouvre quelque chose, « ‹ » = retour. */
html.pg button.pri, html.pg a.pri, html.lx .btn:not(.sm):not(.ghost), html.lx .acts .btn.pri{min-height:48px;border-radius:12px;font-size:1rem;font-weight:700}
html.pg button:not(.pri):not(:disabled), html.pg a.btn:not(.pri){border-color:var(--line-fort)}
html.pg input[type=checkbox], html.lx input[type=checkbox], html.pg input[type=radio], html.lx input[type=radio]{accent-color:var(--primary)}
html.pg .lien, html.ma a.lien, html.pg a.va{font-weight:700}