/* Couleurs reprises de la palette du clavier (KeyboardTheme.kt). */
:root {
  --fond: #EEF0F2;
  --surface: #FFFFFF;
  --surface-2: #E3E6E9;
  --filet: #D0D3D7;
  --encre: #1F1F1F;
  --encre-2: #555A5F;
  --vert: #00843F;
  --bleu: #0072BB;
  --ocre: #A86A00;
  --lien: #0B63A5;
  --k-fond: #EEF0F2;
  --k-fonction: #DADCE0;
  --k-encre: #1F1F1F;
  --k-att: #555A5F;
  --k-filet: #D0D3D7;

  --f-titre: "Gentium Book Plus", "Gentium Plus", "Noto Serif", Georgia, serif;
  --f-texte: "Andika", "Noto Sans", "DejaVu Sans", system-ui, sans-serif;
  --f-tifinagh: "Noto Sans Tifinagh", "Ebrima", sans-serif;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.3125rem;
  --t-xl: 1.75rem;
  --t-xxl: clamp(2.1rem, 1.5rem + 2.6vw, 3rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #1A1A1A;
    --surface: #232425;
    --surface-2: #2C2E30;
    --filet: #3C4043;
    --encre: #E8EAED;
    --encre-2: #9AA0A6;
    --vert: #00A550;
    --bleu: #4DA3FF;
    --ocre: #E8A33D;
    --lien: #7FB2E5;
    --k-fond: #1A1A1A;
    --k-fonction: #303030;
    --k-encre: #E8EAED;
    --k-att: #9AA0A6;
    --k-filet: #3C4043;
  }
}
:root[data-theme="dark"] {
  --fond: #1A1A1A;
  --surface: #232425;
  --surface-2: #2C2E30;
  --filet: #3C4043;
  --encre: #E8EAED;
  --encre-2: #9AA0A6;
  --vert: #00A550;
  --bleu: #4DA3FF;
  --ocre: #E8A33D;
  --lien: #7FB2E5;
  --k-fond: #1A1A1A;
  --k-fonction: #303030;
  --k-encre: #E8EAED;
  --k-att: #9AA0A6;
  --k-filet: #3C4043;
}

body {
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: var(--t-m);
  line-height: 1.62;
  padding-inline: 20px;
  padding-block: 0;
}
h1, h2, h3 {
  font-family: var(--f-titre);
  font-weight: 700;
  line-height: 1.18;
  text-wrap: balance;
  margin: 0;
}
p, ul, ol { margin: 0; }
a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; border-radius: 3px; }
.kab { font-family: var(--f-titre); font-style: italic; }
.tif { font-family: var(--f-tifinagh); }
kbd {
  font-family: var(--f-texte);
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 0 0.4em;
  white-space: nowrap;
}

.page { max-width: 72rem; margin-inline: auto; padding-block: 3rem 3rem; }

/* ---------- En-tête ---------- */
.entete { display: grid; gap: 1.1rem; max-width: 48rem; padding-bottom: 2.5rem; }
.surtitre { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); }
h1 { font-size: var(--t-xxl); }
.chapo { font-size: var(--t-l); line-height: 1.5; }
.enbref {
  list-style: none; padding: 0; margin-top: 0.5rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  border-top: 1px solid var(--filet);
}
.enbref li { padding: 0.8rem 1.2rem 0.9rem 0; border-bottom: 1px solid var(--filet); font-size: var(--t-s); }
.enbref strong { display: block; font-family: var(--f-titre); font-size: var(--t-m); }

/* ---------- Corps : sommaire + texte ---------- */
.corps { display: grid; gap: 2.5rem; }
@media (min-width: 62rem) {
  .corps { grid-template-columns: 13.5rem minmax(0, 1fr); gap: 3.5rem; align-items: start; }
  .sommaire { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; }
}
.sommaire { font-size: var(--t-s); }
.sommaire p { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 0.5rem; }
.sommaire ul { list-style: none; padding: 0; display: grid; gap: 0.15rem; }
.sommaire ul ul { padding-left: 0.9rem; margin: 0.1rem 0 0.3rem; }
.sommaire a { color: var(--encre); text-decoration: none; display: block; padding: 0.12rem 0; }
.sommaire a:hover { color: var(--lien); text-decoration: underline; }
@media (max-width: 61.99rem) {
  .sommaire { border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding-block: 1rem; }
  .sommaire > ul { columns: 2 12rem; column-gap: 2rem; }
  .sommaire li { break-inside: avoid; }
}

main { display: grid; gap: 4rem; min-width: 0; }
section { display: grid; gap: 1.1rem; scroll-margin-top: 1rem; }
section > p, section > ul, section > ol, .lecture { max-width: 42rem; }
h2 { font-size: var(--t-xl); padding-top: 0.2rem; }
h3 { font-size: var(--t-l); margin-top: 1.2rem; display: flex; align-items: center; gap: 0.55rem; scroll-margin-top: 1rem; }
h3 svg { width: 1.3rem; height: 1.3rem; fill: currentColor; flex: 0 0 auto; }
section ul, section ol { padding-left: 1.3rem; display: grid; gap: 0.4rem; }
.intro { font-size: var(--t-l); line-height: 1.5; color: var(--encre); }
.petit { font-size: var(--t-s); color: var(--encre-2); }

.etapes { counter-reset: e; list-style: none; padding-left: 0 !important; gap: 0.9rem !important; }
.etapes li { counter-increment: e; display: grid; grid-template-columns: 2rem 1fr; gap: 0.6rem; }
.etapes li::before {
  content: counter(e); font-family: var(--f-titre); font-weight: 700; font-size: var(--t-l);
  color: var(--encre-2); line-height: 1.3;
}

.asavoir { max-width: 42rem; font-size: var(--t-s); display: grid; gap: 0.3rem; padding-top: 0.9rem; border-top: 1px solid var(--filet); }
.asavoir b.etiquette { font-size: var(--t-xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--encre-2); font-weight: 400; }

/* Tableaux */
.defile { overflow-x: auto; border: 1px solid var(--filet); border-radius: 10px; background: var(--surface); max-width: 42rem; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-s); }
th, td { text-align: left; vertical-align: top; padding: 0.5rem 0.85rem; }
thead th { font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); font-weight: 400; border-bottom: 1px solid var(--filet); }
tbody tr + tr td { border-top: 1px solid var(--filet); }
td.lettres { font-family: var(--f-titre); font-size: 1.15rem; letter-spacing: 0.08em; }

/* Figures */
figure { margin: 0; display: grid; gap: 0.5rem; max-width: 42rem; }
figcaption { font-size: var(--t-xs); color: var(--encre-2); }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; max-width: 42rem; align-items: start; }
.capture { border-radius: 12px; border: 1px solid var(--filet); display: block; width: 100%; height: auto; }
figure > .capture { max-width: 26rem; }

/* ---------- Maquettes de clavier ---------- */
.k {
  background: var(--k-fond); color: var(--k-encre);
  border: 1px solid var(--filet); border-radius: 14px; overflow: hidden;
  width: 100%; max-width: 26rem;
}
.k-barre { display: flex; align-items: stretch; min-height: 2.6rem; border-bottom: 1px solid var(--k-filet); }
.k-chevron { flex: 0 0 2.3rem; display: grid; place-items: center; color: var(--k-encre); }
.k-chevron svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.k-prop {
  flex: 1 1 0; min-width: 0; text-align: center; padding: 0.45rem 0.3rem 0.6rem;
  font-size: 0.95rem; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k-prop + .k-prop { border-left: 1px solid var(--k-filet); }
.k-prop::after { content: ""; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.3rem; height: 2px; border-radius: 1px; background: var(--kt, transparent); }
.k-prop.c { --kt: var(--vert); font-weight: 700; }
.k-prop.b { --kt: var(--bleu); }
.k-prop.o { --kt: var(--ocre); }
.formes .k-prop::after { background: none; height: 0; border-bottom: 2px solid var(--kt); }
.formes .k-prop.b::after { border-bottom-style: dashed; }
.formes .k-prop.o::after { border-bottom-style: dotted; border-bottom-width: 3px; }
.k-touches { padding: 0.4rem 0.3rem 0.5rem; display: grid; gap: 0.3rem; }
.k-rang { display: flex; gap: 0.2rem; }
.k-t {
  flex: 1 1 0; min-width: 0; height: 2.55rem; position: relative;
  display: grid; place-items: center; font-size: 1.05rem; border-radius: 8px; color: var(--k-encre);
}
.k-t sup, .k-t sub { position: absolute; right: 0.18rem; font-size: 0.58rem; line-height: 1; color: var(--k-att); }
.k-t sup { top: 0.22rem; }
.k-t sub { bottom: 0.22rem; }
.k-t.f { background: var(--k-fonction); font-size: 0.72rem; }
.k-t.large { flex-grow: 1.25; }
.k-t.espace { flex-grow: 4; border-radius: 999px; font-size: 0.72rem; color: var(--k-att); }
.k-t svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.k-t.kab-lettre { box-shadow: inset 0 0 0 2px var(--vert); }

/* Panneau d'outil */
.panneau { background: var(--k-fond); color: var(--k-encre); border: 1px solid var(--filet); border-radius: 14px; max-width: 26rem; overflow: hidden; }
.panneau-tete { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0.6rem 0.2rem 1rem; font-size: var(--t-xs); color: var(--k-att); letter-spacing: 0.04em; border-top: 1px solid var(--k-filet); }
.panneau-tete span:last-child { font-size: 1rem; color: var(--k-encre); }
.panneau-corps { padding: 0.1rem 1rem 0.9rem; display: grid; gap: 0.35rem; justify-items: start; }
.panneau .mot { font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.panneau .att { font-size: 0.8rem; color: var(--k-att); }
.puce {
  display: inline-flex; align-items: center; gap: 0.35rem; background: var(--k-fonction); color: var(--k-encre);
  border-radius: 999px; padding: 0.25rem 0.8rem; font-size: 0.85rem; white-space: nowrap;
}
.puce.actif { font-weight: 700; }
.rangee-puces { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ligne-res { display: grid; grid-template-columns: 6rem 1fr; gap: 0.6rem; padding: 0.35rem 1rem; border-top: 1px solid var(--k-filet); align-items: baseline; font-size: 0.85rem; }
.ligne-res b { font-size: 1rem; }
.ligne-res span { color: var(--k-att); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.requete { padding: 0.55rem 0.9rem; font-size: 0.95rem; }

/* Thèmes */
.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.75rem 1.25rem; }
.theme { display: grid; gap: 0.5rem; align-content: start; }
.theme h3 { margin-top: 0; font-size: var(--t-m); font-family: var(--f-texte); }
.theme p { font-size: var(--t-s); color: var(--encre-2); }
.mini .k-t { height: 1.7rem; font-size: 0.8rem; }
.mini .k-t sup, .mini .k-t sub { display: none; }
.mini .k-barre { min-height: 2.1rem; }
.mini .k-prop { font-size: 0.82rem; }
.k.clair {
  --k-fond: #EEF0F2; --k-fonction: #DADCE0; --k-encre: #1F1F1F; --k-att: #555A5F; --k-filet: #D0D3D7;
  --vert: #00843F; --bleu: #0072BB; --ocre: #A86A00;
}
.k.tamazgha {
  --k-fond: #16191D; --k-fonction: #26303A; --k-encre: #EEF2F5; --k-att: #A9B4BE; --k-filet: #34404B;
  --vert: #2FBF71; --bleu: #4DA3FF; --ocre: #F2C94C;
}
.k-bande { height: 4px; background: linear-gradient(90deg, #1E88E5 0 33.3%, #2FBF71 33.3% 66.6%, #F2C94C 66.6% 100%); }
.yaz { font-family: var(--f-tifinagh); color: #FF7A70; font-size: 1rem; }

footer { margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--filet); font-size: var(--t-xs); color: var(--encre-2); display: grid; gap: 0.4rem; max-width: 48rem; }

@media (max-width: 30rem) {
  .page { padding-block: 2rem 2rem; }
  main { gap: 3rem; }
  .k-t { height: 2.2rem; font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html { scroll-behavior: smooth; }

/* ---------- Ajouts pour les trois manuels ---------- */
.retour { font-size: var(--t-s); }
.retour a { color: var(--encre-2); text-decoration: none; }
.retour a:hover { color: var(--lien); text-decoration: underline; }
.ui {
  display: inline-block; font-size: 0.9em; line-height: 1.35; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--filet); border-radius: 5px; padding: 0 0.4em;
}
code { font-size: 0.88em; background: var(--surface-2); border-radius: 4px; padding: 0.05em 0.35em; overflow-wrap: anywhere; }
.vert { color: var(--vert); font-weight: 700; }
.bleu { color: var(--bleu); font-weight: 700; }
.ocre { color: var(--ocre); font-weight: 700; }
figure > .capture.large { max-width: 42rem; }
figure > .capture.moyenne { max-width: 34rem; }
figure > .capture.etroite { max-width: 20rem; }