/* Hashirama — interface publique (refonte 04/10/2026, d'après la maquette) */
:root {
  --acc: #5fc29a;
  --onacc: #06241a;
  --bg: #f4f7f5;
  --pan: #ffffff;
  --sun: #e9efec;
  --line: #d3ddd8;
  --line2: #8ea39a;
  --fg: #14201c;
  --mut: #4a5d56;
  --link: #0b6a47;
  --sel: #d3eee0;
  --selfg: #0d5a3c;
  --okbg: #dcf2e6;
  --okfg: #0d5a3c;
  --errbg: #fde4e0;
  --errfg: #8a1c12;
  --warnbg: #fbf0d9;
  --warnfg: #6b4a07;
  --rayon: 18px;
  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fontd: 'Bricolage Grotesque', system-ui, sans-serif;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0e1413;
  --pan: #151e1c;
  --sun: #0a100f;
  --line: #25332f;
  --line2: #3b4f48;
  --fg: #e9f1ee;
  --mut: #a3b5af;
  --link: #7fd6b0;
  --sel: #1d3a31;
  --selfg: #8fe0bd;
  --okbg: #14302a;
  --okfg: #8fe0bd;
  --errbg: #3a1c1a;
  --errfg: #ffb4a8;
  --warnbg: #33290f;
  --warnfg: #f1cf85;
  color-scheme: dark;
}
/* Interface en pular, écriture arabe (12/10/2026) : Harmattan (conçue pour l'ajami ouest-africain) dessine
   ݕ ط ڃ ݧ ݝ et les voyelles ٜ (e) ٛ (o) ; corps un peu plus grand pour la lisibilité des voyelles */
html[lang="ff-Arab"] {
  --font: 'Hanken Grotesk', 'Scheherazade New', 'Harmattan', system-ui, sans-serif;
  --fontd: 'Bricolage Grotesque', 'Scheherazade New', 'Harmattan', system-ui, sans-serif;
}
html[lang="ff-Arab"] body { line-height: 1.7; }
[dir="rtl"] {
  --font: 'Noto Sans Arabic', 'Hanken Grotesk', system-ui, sans-serif;
  --fontd: 'Noto Sans Arabic', 'Bricolage Grotesque', system-ui, sans-serif;
}
/* pular en écriture arabe : Scheherazade New, même dans un bloc rtl (voir l'en-tête « corps × 1,3 ») */
:lang(ff-Arab) {
  /* police latine D'ABORD : elle n'a pas l'arabe, chaque lettre arabe passe à Scheherazade, le latin cité (traduction
     latine, BETA, texte français) reste en Hanken — Scheherazade a aussi des lettres latines, à empattements */
  --font: 'Hanken Grotesk', 'Scheherazade New', 'Harmattan', system-ui, sans-serif;
  --fontd: 'Bricolage Grotesque', 'Scheherazade New', 'Harmattan', system-ui, sans-serif;
}

/* ── Écriture arabe : corps × 1,3 (13/10/2026, auteur ; × 1,125 d'abord : « encore petit, je vois mal les signes ») ──
   Mesuré (13/10, Chrome, pour 100 px) : cœur des lettres (dent سـ) Harmattan 26–29, Scheherazade 32, Noto Sans Arabic 41,
   contre un x latin de 50 (Hanken) ; voyelles Harmattan 7–8, Noto 13, Scheherazade 19. « en » (ٜٜ, deux points
   superposés sous la lettre) vérifié à 110 px : net en Scheherazade ; Harmattan juste mais minuscule ; Noto Sans Arabic
   colle les points à la boucle de ه (hen ≈ he) ; Noto Naskh et Amiri n'en dessinent qu'un. D'où : pular en écriture
   arabe = Scheherazade New, arabe = Noto Sans Arabic, logo = Harmattan (inchangé), et × 1,3 pour les deux.
   (Historique : × 1,125 = règle typographique courante 16 → 18 px, insuffisante avec ces polices.)
   À effort de lecture égal, l'arabe entièrement voyellé (et l'ajami pular) demande un corps 10–15 % plus grand que le
   latin. Chaque taille s'écrit calc(Npx * var(--ech)) ; --ech vaut 1,3
   pour tout élément dont la LANGUE (:lang, héritée) est l'arabe ou le pular en écriture arabe, 1 sinon — un îlot latin
   dans l'interface arabe (BETA, texte français cité) garde sa taille, et inversement. Les éléments sans taille propre
   héritent de leur parent : aux frontières de langue, on corrige le rapport (130 % / ÷ 1,3). Hors facteur : le
   logo (forme fixe, identique dans toutes les langues) et les noms de langue en ajami des puces (18 px ≈ 14 × 1,3, fixés : ils s'affichent aussi dans l'interface latine). */
:root { --ech: 1; }
:where(:lang(ar), :lang(ff-Arab)) { --ech: 1.3; }
:where(:not(:lang(ar)):not(:lang(ff-Arab))) { --ech: 1; }
:where(:lang(ar), :lang(ff-Arab)) > :where([lang]:not(:lang(ar)):not(:lang(ff-Arab))) { font-size: calc(100% / 1.3); }
:where(:not(:lang(ar)):not(:lang(ff-Arab))) > :where([lang]:is(:lang(ar), :lang(ff-Arab))) { font-size: 130%; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font); font-size: calc(16px * var(--ech)); line-height: 1.5;
  background: var(--bg); color: var(--fg);
  min-height: 100vh; display: flex; flex-direction: column;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
h1 { margin: 0; font-family: var(--fontd); font-size: calc(30px * var(--ech)); line-height: 1.2; }
h2 { margin: 0; font-family: var(--fontd); font-size: calc(20px * var(--ech)); line-height: 1.3; }
.discret { color: var(--mut); margin: 0; }
.petit { font-size: calc(13px * var(--ech)); }
.centre { text-align: center; }
/* lien d'évitement masqué sans décalage hors écran (left: -9999px étirait la page en lecture droite → gauche) */
.evitement { position: absolute; top: 8px; inset-inline-start: 16px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement:focus { width: auto; height: auto; overflow: visible; clip-path: none; z-index: 3000; background: var(--pan); padding: 8px 12px; border-radius: 8px; }

/* ── Barre admin, en-tête ─────────────────────────────────────────────── */
.barre-admin {
  background: var(--sun); border-bottom: 1px solid var(--line); padding: 6px 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
  font-size: calc(13px * var(--ech)); color: var(--mut);
}
.barre-admin-etiquette { font-weight: 600; color: var(--fg); letter-spacing: .06em; text-transform: uppercase; font-size: calc(11px * var(--ech)); }
.devise { font-style: italic; color: var(--link); }
.btn-rond {
  width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--line2); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.btn-discret { border-color: transparent; color: var(--mut); }
.btn-discret:hover:not(:disabled) { background: var(--sun); color: var(--fg); }
/* Pouces (avis sur la traduction, 06/10/2026) */
.avis { display: inline-flex; gap: 4px; }
.btn-pouce[aria-pressed="true"] { background: var(--sel); color: var(--selfg); }
#btn-pouce-bas[aria-pressed="true"] { background: var(--warnbg); color: var(--warnfg); }
[data-theme="light"] .ico-soleil, [data-theme="dark"] .ico-lune { display: none; }
.btn-compte {
  min-height: 44px; padding: 0 16px 0 6px; border-radius: 22px; border: 1px solid var(--line2);
  display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none;
}
[dir="rtl"] .btn-compte { padding: 0 6px 0 16px; }
.avatar {
  width: 32px; height: 32px; border-radius: 16px; background: var(--acc); color: var(--onacc);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; text-transform: uppercase;
}
.avatar-grand { width: 56px; height: 56px; border-radius: 28px; font-size: calc(24px * var(--ech)); }
.bandeau {
  background: var(--errbg); color: var(--errfg); padding: 10px 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font-size: calc(14px * var(--ech)); font-weight: 500;
}

/* ── Boutons ──────────────────────────────────────────────────────────── */
.btn-principal {
  min-height: 48px; padding: 0 24px; border-radius: 12px; border: 0; background: var(--acc); color: var(--onacc);
  font-weight: 600; font-size: calc(17px * var(--ech)); display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none;
}
.btn-principal:hover:not(:disabled) { filter: brightness(1.06); }
.btn-petit { min-height: 44px; font-size: calc(16px * var(--ech)); }
.btn-contour {
  min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line2); background: transparent;
  font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.btn-contour:hover:not(:disabled) { background: var(--sun); }
.btn-contour[aria-expanded="true"] { background: var(--sel); color: var(--selfg); border-color: var(--acc); }
.btn-danger { border-color: var(--errfg); color: var(--errfg); }
.btn-danger-plein { background: var(--errfg); color: var(--pan); }
.lien { color: var(--link); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
[dir="rtl"] .fleche, [dir="rtl"] .miroir { transform: scaleX(-1); }

/* ── Page et vues ─────────────────────────────────────────────────────── */
.page { flex: 1 1 auto; width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 24px 40px; }
.vue.etroite { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.carte-form {
  max-width: 440px; margin: 24px auto 0; background: var(--pan); border: 1px solid var(--line);
  border-radius: var(--rayon); padding: 32px; display: flex; flex-direction: column; gap: 18px;
}
.panneau {
  background: var(--pan); border: 1px solid var(--line); border-radius: var(--rayon); padding: 20px 24px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
/* bouton image collé au bouton effacer, en fin de barre (13/10/2026) */
/* le menu image s'ouvre sous le bouton, aligné à son bord de fin (13/10/2026) */
.choix-image { position: relative; margin-inline-start: auto; }
.menu-image { min-width: 210px; }
.panneau-titre { font-size: calc(15px * var(--ech)); font-weight: 600; }
.titre-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.note { margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--sun); border: 1px solid var(--line); font-size: calc(14px * var(--ech)); color: var(--mut); }

/* ── Traducteur ───────────────────────────────────────────────────────── */
.traducteur { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.saisie {
  flex: 1 1 180px; min-height: 180px; width: 100%; resize: none; border: 0; outline: 0; padding: 0;
  background: transparent; font-size: calc(24px * var(--ech)); line-height: 1.35;
}
/* Taille selon la longueur (06/10/2026) : court ≤ 60 car., moyen ≤ 160, long au-delà */
.saisie[data-taille="moyen"] { font-size: calc(20px * var(--ech)); }
.saisie[data-taille="long"] { font-size: calc(17px * var(--ech)); line-height: 1.45; }
.saisie::placeholder { color: var(--mut); opacity: .7; }
.panneau-pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.compteur { display: flex; flex-direction: column; gap: 6px; font-size: calc(13px * var(--ech)); color: var(--mut); min-width: 120px; }
.compteur.plein { color: var(--errfg); }
.jauge { display: block; width: 120px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.jauge > span { display: block; height: 100%; width: 0; background: var(--acc); }
.jauge-fine { width: 96px; }
.jauge-epaisse { width: 100%; height: 8px; border-radius: 4px; }
.jauge.alerte > span, .compteur.plein .jauge > span { background: var(--errfg); }

.bascule { display: flex; padding: 3px; border-radius: 22px; background: var(--bg); border: 1px solid var(--line); }
.bascule button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 19px; background: transparent; color: var(--mut); font-size: calc(14px * var(--ech)); font-weight: 600; }
.bascule button[aria-pressed="true"] { background: var(--sel); color: var(--selfg); }

/* Ne rétrécit JAMAIS sous son contenu (flex-shrink 0) : avec un min-height explicite, un
   élément flex peut être comprimé à 180 px et une longue traduction débordait sur la
   ligne de version et les boutons (signalé le 04/10/2026). */
.sortie { flex: 1 0 auto; min-height: 180px; }
.sortie-vide { margin: 0; color: var(--mut); font-size: calc(20px * var(--ech)); opacity: .8; }
.sortie-texte { margin: 0; font-family: var(--fontd); font-size: calc(30px * var(--ech)); line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; text-align: start; }
.sortie-texte[data-taille="moyen"] { font-size: calc(24px * var(--ech)); line-height: 1.4; }
.sortie-texte[data-taille="long"] { font-size: calc(19px * var(--ech)); line-height: 1.5; font-weight: 500; }
/* Scheherazade New : voyelles du pular (ٜ e, ٛ o) et « en » (ٜٜ, deux points superposés) les plus nets (13/10/2026) */
.sortie-ajami { font-family: 'Scheherazade New', 'Harmattan', serif; font-weight: 500; font-size: calc(30px * var(--ech)); text-align: right; }
/* Ajami vocalisé (12/10/2026) : interligne large pour que les signes bas d'une ligne (points, kasra, U+065C) ne touchent pas
   les signes hauts de la suivante (chadda + voyelle) ; marge haute/basse pour ne pas couper la première/dernière ligne.
   Le texte latin garde son interligne. */
.sortie-ajami, .alternative-texte:lang(ff-Arab) { line-height: 2.1; padding-block: .35em; word-spacing: .08em; }
html[lang="ff-Arab"] .faq p, html[lang="ff-Arab"] .apropos p, html[lang="ff-Arab"] .apropos li, html[lang="ff-Arab"] .faq summary { line-height: 2.1; }
.sortie-ajami[data-taille="moyen"] { font-size: calc(24px * var(--ech)); }
.sortie-ajami[data-taille="long"] { font-size: calc(19px * var(--ech)); }
/* ── Documents structurés (OCR, 13/10/2026) : facture, ordonnance, lettre… rendues avec leur forme ──────────── */
/* texte simple de plusieurs lignes : les sauts de ligne de la source restent visibles */
.sortie-texte:not([data-taille="doc"]) { white-space: pre-line; }
.sortie-texte[data-taille="doc"] { font-family: var(--font); font-size: calc(16px * var(--ech)); font-weight: 400; line-height: 1.55; }
.sortie-ajami[data-taille="doc"] { font-size: calc(16px * var(--ech)); line-height: 2.1; }
.doc { overflow-wrap: anywhere; }
.doc > :first-child { margin-top: 0; }
.doc > :last-child { margin-bottom: 0; }
.doc p, .doc ul, .doc ol, .doc blockquote, .doc pre { margin: 0 0 .7em; }
.doc .doc-titre { font-family: var(--fontd); margin: .2em 0 .5em; line-height: 1.3; font-weight: 700; font-size: 1.05em; }
.doc .doc-t1 { font-size: 1.35em; }
.doc .doc-t2 { font-size: 1.18em; }
.doc ul, .doc ol { padding-inline-start: 1.4em; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.doc blockquote { margin-inline: 0; padding-inline-start: .9em; border-inline-start: 3px solid var(--line); color: var(--mut); }
.doc pre { white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: var(--bg); padding: .6em .8em; border-radius: 8px; }
.doc code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; }
/* un tableau large défile dans son cadre : la page ne déborde jamais (téléphone) */
.doc-tableau { overflow-x: auto; margin: 0 0 .9em; -webkit-overflow-scrolling: touch; }
.doc table { border-collapse: collapse; min-width: 100%; font-size: .95em; }
.doc th, .doc td { border: 1px solid var(--line); padding: .4em .65em; text-align: start; vertical-align: top; overflow-wrap: normal; }
.doc th { background: var(--bg); font-weight: 600; }
.doc td.doc-nombre { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.apercu-doc { margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; max-height: 340px; overflow: auto; font-size: calc(14px * var(--ech)); }
.apercu-titre { margin: 0 0 8px; font-size: calc(12px * var(--ech)); font-weight: 600; color: var(--mut); }
.bandeau-image { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: var(--sel); color: var(--selfg); font-size: calc(14px * var(--ech)); line-height: 1.45; }
.bandeau-image.erreur-image { background: var(--errbg); color: var(--errfg); }
.tournant { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: tourne .8s linear infinite; }
.panneau.depot { outline: 2px dashed var(--acc); outline-offset: -6px; }
/* raccourci Ctrl/⌘ + Entrée : affiché seulement avec souris et clavier */
.raccourci { display: none; font: 600 calc(12px * var(--ech)) / 1 ui-monospace, Consolas, monospace; color: var(--mut);
  padding: 4px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .raccourci { display: inline-block; margin-inline-start: auto; margin-inline-end: -6px; } }
@media (prefers-reduced-motion: reduce) { .tournant { animation: none; } }

/* ── Mots marqués (13/10/2026) : discrets, jamais criards ── */
.mot-change { background: color-mix(in srgb, var(--acc) 20%, transparent); border-radius: 4px; padding-inline: 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mot-incertain { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: .24em; text-decoration-color: var(--mut); }
/* ajami : points et voyelles SOUS les lettres → pointillé tracé plus bas, hors des signes */
.sortie-ajami .mot-incertain { text-decoration: none; border-bottom: 1.5px dotted var(--mut); padding-bottom: .12em; }
.legende-mots { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: calc(12px * var(--ech)); color: var(--mut); }
.legende-mots [hidden] { display: none; }
.echantillon { display: inline-block; width: 1.6em; height: .9em; vertical-align: -1px; }
.echantillon.mot-incertain { border-bottom: 1.5px dotted var(--mut); text-decoration: none; height: .7em; }

.chargement { display: flex; align-items: center; gap: 12px; color: var(--mut); font-size: calc(17px * var(--ech)); }
.rouage { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--acc); animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rouage { animation: none; } }

.erreur { min-height: 180px; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 20px; border-radius: 14px; background: var(--errbg); color: var(--errfg); }
.erreur p { margin: 0; }
.erreur-tete { display: flex; align-items: center; gap: 12px; }
.erreur-titre { font-family: var(--fontd); font-size: calc(22px * var(--ech)); font-weight: 700; line-height: 1.25; }
.erreur-auto { font-size: calc(14px * var(--ech)); opacity: .9; }
.erreur-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.erreur .btn-contour { border-color: currentColor; color: inherit; }

.ligne-version { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pastille { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 16px; font-size: calc(14px * var(--ech)); font-weight: 600; background: var(--okbg); color: var(--okfg); }
.pastille.neutre { background: var(--sun); color: var(--mut); }
/* brouillon affiché, relecture en cours (13/10/2026) : pastille qui respire doucement */
.pastille.attente { animation: respire 1.6s ease-in-out infinite; }
@keyframes respire { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pastille.attente { animation: none; } }
.pastille-ok { padding: 2px 10px; font-size: calc(13px * var(--ech)); }
.pastille-attente { padding: 2px 10px; font-size: calc(13px * var(--ech)); background: var(--warnbg); color: var(--warnfg); }
.versions { display: inline-flex; align-items: center; gap: 4px; font-size: calc(13px * var(--ech)); color: var(--mut); }
.versions span { min-width: 150px; text-align: center; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.panneau .actions { margin-top: 4px; }

.encadre { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.encadre p { margin: 0; }
.encadre-titre { font-weight: 700; font-size: calc(17px * var(--ech)); }
.choix { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.choix legend { padding: 0; margin-bottom: 8px; font-size: calc(14px * var(--ech)); font-weight: 500; }
.choix label {
  min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--line2);
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500;
}
.choix label:has(input:checked) { background: var(--sel); color: var(--selfg); border-color: var(--acc); }
.choix input, .case input { width: 18px; height: 18px; margin: 0; accent-color: var(--acc); flex: none; }
.champ { display: flex; flex-direction: column; gap: 6px; font-size: calc(14px * var(--ech)); font-weight: 500; }
.champ-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.champ-ligne .lien { font-weight: 400; }
.champ input, .champ textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line2);
  background: var(--bg); font-weight: 400; font-size: calc(16px * var(--ech));
}
.champ textarea { resize: vertical; min-height: 80px; }
.champ input:disabled { opacity: .7; }
.case { display: flex; align-items: flex-start; gap: 12px; font-size: calc(14px * var(--ech)); cursor: pointer; min-height: 44px; }
.case input { margin-top: 2px; }
.boutons-fin { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.form { display: flex; flex-direction: column; gap: 16px; }
.message-ok { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 14px; background: var(--okbg); color: var(--okfg); }
.message-attente { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--warnbg); color: var(--warnfg); margin-bottom: 20px; }
.message-erreur { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--errbg); color: var(--errfg); font-size: calc(14px * var(--ech)); }
.lien-dev { font-size: calc(13px * var(--ech)); }
.lien-dev a { color: var(--link); font-weight: 600; }

.alternatives { display: flex; flex-direction: column; gap: 10px; }
.alternative { border-inline-start: 3px solid var(--acc); padding-inline-start: 12px; }
.alternative p { margin: 0; }
.alternative-texte { font-family: var(--fontd); font-size: calc(20px * var(--ech)); font-weight: 600; }
.alternative-nuance { font-size: calc(14px * var(--ech)); color: var(--mut); }
.quota { margin: 24px 0 0; text-align: center; font-size: calc(14px * var(--ech)); color: var(--mut); }
.quota.epuise { color: var(--errfg); font-weight: 600; }

/* ── Historique, aide, compte, légal ──────────────────────────────────── */
.liste { display: flex; flex-direction: column; gap: 12px; }
.histo {
  background: var(--pan); border: 1px solid var(--line); border-radius: var(--rayon); padding: 18px 20px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.histo-textes { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.histo-date { font-size: calc(13px * var(--ech)); color: var(--mut); }
.histo-fr { font-size: calc(17px * var(--ech)); }
.histo-pular { font-family: var(--fontd); font-size: calc(20px * var(--ech)); font-weight: 600; color: var(--okfg); }
.histo-actions { display: flex; gap: 8px; }
.vide-grand { background: var(--pan); border: 1px solid var(--line); border-radius: var(--rayon); text-align: center; padding: 56px 24px; color: var(--mut); margin: 0; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--pan); border: 1px solid var(--line); border-radius: 14px; }
.faq summary { min-height: 56px; padding: 14px 20px; font-weight: 600; font-size: calc(17px * var(--ech)); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "▾"; color: var(--mut); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { margin: 0; padding: 0 20px 18px; color: var(--mut); }
.compte-identite { display: flex; align-items: center; gap: 16px; }
.compte-identite > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 20px; align-items: start; }
.grille .large { grid-column: 1 / -1; }
.grand-chiffre { margin: 0; font-family: var(--fontd); font-size: calc(40px * var(--ech)); font-weight: 700; }
.liste-compacte { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; }
.liste-compacte .element { border-bottom: 1px solid var(--line); padding-bottom: 10px; font-size: calc(14px * var(--ech)); }
.liste-compacte .element:last-child { border-bottom: 0; }
.statut { font-size: calc(12px * var(--ech)); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); }
.centre-col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.rond-ok { width: 64px; height: 64px; border-radius: 32px; background: var(--okbg); color: var(--okfg); display: flex; align-items: center; justify-content: center; }
.google { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.separateur { margin: 0; font-size: calc(13px * var(--ech)); color: var(--mut); }
.onglets { display: flex; flex-wrap: wrap; gap: 6px; }
.onglets a { min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--line2); display: inline-flex; align-items: center; font-weight: 600; text-decoration: none; }
.onglets a[aria-current="page"] { background: var(--sel); color: var(--selfg); border-color: var(--acc); }
.legal h1 { margin-bottom: 8px; }
.legal section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.legal h2 { margin-bottom: 6px; }
.legal p, .legal li { color: var(--mut); }
.legal p { margin: 0 0 8px; }
.legal .maj { font-size: calc(13px * var(--ech)); color: var(--mut); }

.apropos .chapo { font-size: calc(19px * var(--ech)); color: var(--fg); margin: 12px 0 4px; line-height: 1.55; }
.apropos ol { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--mut); }
.apropos li strong { color: var(--fg); }

/* ── Pied, notifications ──────────────────────────────────────────────── */
.pied { border-top: 1px solid var(--line); padding: 16px 24px; }
.pied-in { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; font-size: calc(14px * var(--ech)); color: var(--mut); }
.pied nav { display: flex; flex-wrap: wrap; gap: 0 16px; }
.pied nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.pied nav a:hover { text-decoration: underline; }
.toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: calc(14px * var(--ech)); box-shadow: 0 6px 20px rgba(0,0,0,.2); transition: opacity .4s; }
.toast-succes { background: var(--okfg); color: var(--pan); }
.toast-erreur { background: var(--errfg); color: var(--pan); }
.toast.disparait { opacity: 0; }

/* ── Langue du texte (pivot) ─────────────────────────────────────────── */
.choix-source {
  min-height: 44px; padding: 0 12px; margin-inline-start: -12px; border-radius: 10px; border: 0;
  background: transparent; font-size: calc(15px * var(--ech)); font-weight: 600; cursor: pointer; max-width: 100%;
}
.choix-source:hover { background: var(--sun); }
.choix-source option { color: #14201c; background: #fff; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; }
.puce { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 14px; background: var(--sun); border: 1px solid var(--line); font-size: calc(13px * var(--ech)); color: var(--mut); }
.puce-pivot { background: var(--sel); color: var(--selfg); border-color: transparent; font-weight: 500; }
.pivot-fr { margin: 0; font-size: calc(14px * var(--ech)); color: var(--mut); }
.pivot-fr span:last-child { color: var(--fg); font-style: italic; }


/* ── Mobile (d'après la maquette « responsive mobile », 04/10/2026) ──── */
@media (max-width: 860px) {

  /* Contenu : une colonne, gouttière 16 px, place pour la barre du bas */
  .traducteur { grid-template-columns: 1fr; gap: 16px; }
  .page { padding: 16px 16px 24px; }
  /* la barre fixe du bas ne doit jamais masquer le pied de page */
  body:has(.vue[data-vue="traduire"]:not([hidden])) .pied { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .panneau { padding: 16px; border-radius: 16px; }
  .saisie { font-size: calc(20px * var(--ech)); min-height: 100px; flex-basis: 100px; }
  .saisie[data-taille="moyen"] { font-size: calc(18px * var(--ech)); }
  .saisie[data-taille="long"] { font-size: calc(16px * var(--ech)); }
  .sortie { min-height: 90px; }
  .sortie-texte { font-size: calc(clamp(22px, 6vw, 26px) * var(--ech)); }
  .sortie-texte[data-taille="moyen"] { font-size: calc(19px * var(--ech)); }
  .sortie-texte[data-taille="long"] { font-size: calc(17px * var(--ech)); }
  .sortie-ajami { font-size: calc(clamp(22px, 6vw, 26px) * var(--ech)); }
  .sortie-ajami[data-taille="moyen"] { font-size: calc(19px * var(--ech)); }
  .sortie-ajami[data-taille="long"] { font-size: calc(17px * var(--ech)); }

  /* Barre « Traduire » fixe en bas (vue Traduire seulement) */
  .vue[data-vue="traduire"]::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 39;
    height: calc(76px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 95%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  }
  .vue[data-vue="traduire"] #btn-traduire {
    position: fixed; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    min-height: 52px; border-radius: 14px; font-size: calc(16px * var(--ech)); font-weight: 700;
  }
  .panneau-pied { padding-top: 12px; }

  /* Actions du résultat : rangée défilante de pastilles */
  .actions {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: -16px; padding-inline: 16px; padding-bottom: 4px; gap: 8px;
  }
  .actions::-webkit-scrollbar { display: none; }
  .actions .btn-contour { flex: none; border-radius: 20px; white-space: nowrap; min-height: 40px; padding: 0 14px; background: var(--sun); border-color: var(--line); }
  .actions .btn-contour:first-child { background: var(--sel); color: var(--selfg); border-color: transparent; }

  .carte-form { padding: 24px 20px; margin-top: 8px; }
  .grille { grid-template-columns: 1fr; }
  .pied { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .pied-in { justify-content: center; text-align: center; }
  .barre-admin { font-size: calc(12px * var(--ech)); gap: 8px; padding: 4px 16px; }
}
@media (max-width: 520px) {
  .versions span { min-width: 0; }
}

/* Texte spécialisé : traduction approximative (06/10/2026) */
.avert-qualite { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px;
  border-radius: 12px; background: var(--warnbg); color: var(--warnfg); font-size: calc(14px * var(--ech)); line-height: 1.45; }
.avert-qualite svg { flex: none; margin-top: 1px; }
.avert-source { margin: 0 0 12px; }

/* ══════════════════════ EN-TÊTE (refonte responsive, 12/10/2026) ══════════════════════
   Un seul HTML ; trois mises en page par media queries (≥ 1024, 640–1023, < 640) ; propriétés logiques
   uniquement (l'en-tête se retourne en dir="rtl"). Variables branchées sur le thème existant (data-theme). */
:root {
  --surface-page: #f3f5f4; --surface-card: #ffffff; --surface-hover: #e8edea; --line-h: #d6ddd9;
  --ink: #17201b; --ink-muted: #56625b; --brand: #5fc29a; --on-brand: #06241a; --brand-soft: #d5eee2;
  --brand-strong: #1e6e4b; --logo-title: #14201c; --logo-subtitle: #0b6a47; --focus: #1e6e4b;
  --h-entete: 64px; --marge-entete: 40px; --h-onglets: 64px;
}
[data-theme="dark"] {
  --surface-page: #111513; --surface-card: #1a201d; --surface-hover: #232b27; --line-h: #2c3631;
  --ink: #e7eeea; --ink-muted: #9aa8a1; --brand: #4cc28f; --on-brand: #0c1a13; --brand-soft: #1c3a2c;
  --brand-strong: #7fdcb0; --logo-title: #e7eeea; --logo-subtitle: #7fdcb0; --focus: #7fdcb0;
}
.visuel-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.entete :focus-visible, .barre-onglets :focus-visible, .evitement:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.entete {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: var(--surface-page); border-block-end: 1px solid var(--line-h);
  transition: box-shadow .2s ease;
}
.entete.defile { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
[data-theme="dark"] .entete.defile { box-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.entete-in {
  max-width: 1280px; margin-inline: auto; height: calc(var(--h-entete) - 1px); box-sizing: content-box;
  padding-inline: var(--marge-entete); padding-block-start: env(safe-area-inset-top, 0px);
  display: flex; align-items: center; gap: 16px;
}

/* Logo : tuile + ajami (Harmattan gras), deux lignes alignées à droite, espacées pour que les points sous ر ne
   touchent pas le alif de إ */
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--logo-title); flex: none; min-height: 44px; }
.marque-logo {
  width: 40px; height: 40px; border-radius: 10px; background: var(--brand); color: var(--on-brand);
  display: grid; place-items: center; font-family: 'Harmattan', serif; font-weight: 700; font-size: 30px; line-height: 1;
  padding-block-end: 4px; box-sizing: border-box;
}
/* Logo-mot (cahier des charges, 12/10/2026) : titre allongé de 6 tatweels, sous-titre niché SOUS le trait, entre la
   kasra du fa et la queue du ra ; tout en em : seul le font-size de .logo-word change selon l'écran */
.logo-word { position: relative; display: block; font-size: 34px; height: 1.88em; white-space: nowrap; font-family: 'Harmattan', serif; font-weight: 700; }
.logo-word b { display: block; font-size: 1em; line-height: 1.18em; color: var(--logo-title); font-weight: 700; }
.logo-word small { position: absolute; top: 1.88em; inset-inline-start: 0; font-size: .5em; line-height: 1; color: var(--logo-subtitle); }
/* top est en em du sous-titre : 1.88 × 17px = 32px sous le haut du titre */
.devise { font-family: 'Harmattan', serif; font-style: normal; color: var(--link); }
html [data-nom] { font-family: 'Harmattan', serif; }

/* Navigation (pilules) */
.menu { display: flex; gap: 4px; margin-inline: auto; }
.menu a {
  min-height: 40px; padding-inline: 16px; border-radius: 999px; display: inline-flex; align-items: center;
  font-size: calc(15px * var(--ech)); font-weight: 600; text-decoration: none; color: var(--ink);
}
.menu a:hover { background: var(--surface-hover); }
.menu a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-strong); }

.entete-droite { display: flex; align-items: center; gap: 8px; flex: none; }

/* Langue : une puce (globe, nom, chevron) + menu */
.langue { position: relative; }
.puce-langue {
  height: 40px; padding-inline: 12px 10px; border-radius: 999px; border: 1px solid var(--line-h);
  background: var(--surface-card); color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
  font-size: calc(14px * var(--ech)); font-weight: 600; cursor: pointer;
}
.puce-langue:hover { background: var(--surface-hover); }
.puce-langue .chevron { color: var(--ink-muted); transition: transform .15s; }
.puce-langue[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.langue-code { display: none; }
.langue-nom.ajami, .langue-code.ajami, .menu-flottant .ajami { font-family: 'Scheherazade New', 'Harmattan', 'Noto Sans Arabic', serif; font-weight: 700; font-size: 18px; }

.menu-flottant {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 60; min-width: 200px;
  margin: 0; padding: 6px; list-style: none; background: var(--surface-card); color: var(--ink);
  border: 1px solid var(--line-h); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}
.menu-flottant[hidden] { display: none; }
.menu-flottant [role="option"], .menu-flottant [role="menuitem"], .menu-flottant [role="menuitemcheckbox"] {
  min-height: 44px; padding-inline: 12px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; box-sizing: border-box; border: 0; background: none; color: inherit; font: inherit; font-weight: 500;
  text-decoration: none; cursor: pointer; text-align: start;
}
.menu-flottant [role="menuitem"][hidden] { display: none; }
.menu-flottant [role="option"]:hover, .menu-flottant [role="option"]:focus-visible,
.menu-flottant [role="menuitem"]:hover, .menu-flottant [role="menuitemcheckbox"]:hover { background: var(--surface-hover); }
.menu-flottant [aria-selected="true"] { background: var(--brand-soft); color: var(--brand-strong); }

/* Thème et connexion : 40 px de haut ; connexion pleine, même style que le bouton Traduire */
.btn-entete-rond { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-h); background: var(--surface-card); color: var(--ink); }
.btn-entete-rond:hover { background: var(--surface-hover); }
.btn-entete-plein {
  height: 40px; padding-inline: 18px; border-radius: 999px; background: var(--brand); color: var(--on-brand);
  display: inline-flex; align-items: center; font-size: calc(15px * var(--ech)); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.btn-entete-plein:hover { filter: brightness(1.06); }
.btn-entete-plein .txt-court { display: none; }
.btn-entete-plein[hidden], .btn-compte[hidden] { display: none; }
.btn-compte {
  height: 40px; padding-inline: 6px 16px; border-radius: 999px; border: 1px solid var(--line-h); background: var(--surface-card);
  display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; color: var(--ink);
}
.btn-compte .avatar { width: 30px; height: 30px; border-radius: 999px; }

/* Menu compte (téléphone) */
.compte-mobile { position: relative; display: none; }
.menu-compte { min-width: 250px; }
.menu-compte .interrupteur { width: 36px; height: 20px; border-radius: 999px; background: var(--line-h); position: relative; flex: none; }
.menu-compte .interrupteur::after {
  content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 16px; height: 16px;
  border-radius: 999px; background: var(--surface-card); transition: inset-inline-start .15s;
}
.menu-compte [aria-checked="true"] .interrupteur { background: var(--brand); }
.menu-compte [aria-checked="true"] .interrupteur::after { inset-inline-start: 18px; }
.mc-ecriture { padding: 10px 12px 6px; border-block-start: 1px solid var(--line-h); margin-block-start: 6px; display: grid; gap: 8px; }
.mc-ecriture > span:first-child { font-size: calc(13px * var(--ech)); color: var(--ink-muted); }
.mc-segments { display: flex; gap: 4px; background: var(--surface-page); border-radius: 999px; padding: 3px; }
.mc-segments button { flex: 1; min-height: 38px; border: 0; border-radius: 999px; background: none; color: var(--ink); font-weight: 600; cursor: pointer; }
.mc-segments button[aria-pressed="true"] { background: var(--surface-card); color: var(--brand-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* Barre d'onglets (téléphone seulement) */
.barre-onglets { display: none; }

/* ── Tablette 640–1023 px ── */
@media (max-width: 1023px) {
  :root { --marge-entete: 24px; }
  .langue-nom { display: none; }
  .langue-code { display: inline; }
  .btn-entete-plein .txt-long { display: none; }
  .btn-entete-plein .txt-court { display: inline; }
  .menu a { padding-inline: 12px; }
  .btn-compte > span:last-child { display: none; }
  .btn-compte { padding-inline: 4px; }
}

/* ── Téléphone < 640 px ── */
@media (max-width: 639px) {
  :root { --h-entete: 56px; --marge-entete: 16px; }
  .entete-in { gap: 8px; }
  .marque { gap: 10px; }
  .marque-logo { width: 36px; height: 36px; font-size: 26px; }
  .logo-word { font-size: 28px; }
  .menu, #btn-theme, #lien-connexion, #lien-compte { display: none !important; }
  .entete-droite { margin-inline-start: auto; }
  .puce-langue { height: 44px; padding-inline: 12px; }
  .puce-langue .chevron { display: none; }
  .compte-mobile { display: block; }
  .compte-mobile .btn-entete-rond { width: 44px; height: 44px; }

  .barre-onglets {
    display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45;
    background: var(--surface-card); border-block-start: 1px solid var(--line-h);
    padding-block-end: env(safe-area-inset-bottom, 0px);
  }
  .barre-onglets a {
    flex: 1; min-height: var(--h-onglets); display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; font-size: calc(11px * var(--ech)); font-weight: 600; text-decoration: none; color: var(--ink-muted);
  }
  .onglet-ico { width: 56px; height: 28px; border-radius: 999px; display: grid; place-items: center; }
  .barre-onglets a[aria-current="page"] { color: var(--brand-strong); }
  .barre-onglets a[aria-current="page"] .onglet-ico { background: var(--brand-soft); }

  /* le contenu et le pied de page passent au-dessus de la barre ; le bouton Traduire fixe se pose sur elle */
  body { padding-block-end: calc(var(--h-onglets) + env(safe-area-inset-bottom, 0px)); }
  .vue[data-vue="traduire"]::after { bottom: calc(var(--h-onglets) + env(safe-area-inset-bottom, 0px)); height: 76px; }
  .vue[data-vue="traduire"] #btn-traduire { bottom: calc(var(--h-onglets) + 12px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .entete, .puce-langue .chevron, .menu-compte .interrupteur::after { transition: none; } }
/* Badge « bêta » à côté du logo (le logo, lui, ne change pas) — 12/10/2026 */
.badge-beta {
  flex: none; align-self: center; margin-inline-start: -6px; padding: 2px 8px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-strong); border: 1px solid color-mix(in srgb, var(--brand-strong) 25%, transparent);
  font-size: calc(11px * var(--ech)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; cursor: help;
}
.badge-beta { font-family: 'Hanken Grotesk', system-ui, sans-serif; }   /* BETA partout, en latin ; seule l'explication est traduite */
@media (max-width: 639px) { .badge-beta { font-size: calc(10px * var(--ech)); padding: 1px 6px; margin-inline-start: -4px; } }

/* ══════════════ TRADUIRE SUR TÉLÉPHONE (19/10/2026, d'après les captures de l'auteur) ══════════════
   Une seule feuille : texte source en grand, trait court au centre, traduction en grand et en couleur, actions en
   icônes ; barre des langues [source ▾] → [Pular] + bouton rond Traduire, posée au-dessus du clavier pendant la saisie
   (la barre d'onglets s'efface alors). Ordinateur et tablette : inchangés. */
.barre-langues { display: none; }
@media (max-width: 639px) {
  .page:has(.vue[data-vue="traduire"]:not([hidden])) { padding-top: 0; }
  .vue[data-vue="traduire"] { padding-bottom: 96px; }
  .vue[data-vue="traduire"] .traducteur {
    gap: 0; margin-inline: -16px; background: var(--pan);
    border-radius: 0 0 28px 28px; border-block-end: 1px solid var(--line); padding-block-end: 6px;
    /* la feuille descend jusqu'à la barre des langues (en-tête, barre 76 px et onglets déduits) */
    grid-template-rows: auto 1fr;
    min-height: calc(100dvh - var(--h-entete) - 76px - var(--h-onglets) - env(safe-area-inset-bottom, 0px) - 10px);
  }
  body.en-saisie .vue[data-vue="traduire"] .traducteur { min-height: calc(100dvh - var(--h-entete) - 76px - var(--clavier, 0px) - 10px); }
  .traducteur > .panneau { background: transparent; border: 0; border-radius: 0; padding: 18px 20px 12px; gap: 8px; }
  .traducteur > .panneau:first-child { position: relative; padding-block-end: 24px; }
  .traducteur > .panneau:first-child::after {
    content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 27%; width: 46%; height: 2px;
    border-radius: 1px; background: var(--line);
  }
  /* rien de traduit encore : pas de bloc traduction, la source prend toute la feuille (comme les captures) ; il
     apparaît dès qu'on traduit (chargement, résultat ou erreur — #sortie-vide caché) */
  .traducteur:has(#sortie-vide:not([hidden])) { grid-template-rows: 1fr; }
  .traducteur:has(#sortie-vide:not([hidden])) > .panneau:last-child { display: none; }
  .traducteur:has(#sortie-vide:not([hidden])) > .panneau:first-child::after { display: none; }
  .traducteur:has(#sortie-vide:not([hidden])) .saisie { min-height: 40vh; }
  /* étiquettes de langue, petites, au-dessus de chaque texte */
  .traducteur .panneau-tete { min-height: 36px; }
  .traducteur .choix-source { min-height: 36px; font-size: calc(14px * var(--ech)); font-weight: 500; color: var(--mut); }
  .traducteur .panneau-titre { font-size: calc(14px * var(--ech)); font-weight: 500; color: var(--link); }
  /* textes en grand */
  .saisie { font-size: calc(clamp(24px, 7.4vw, 30px) * var(--ech)); line-height: 1.28; min-height: 92px; flex-basis: 92px; }
  .saisie[data-taille="moyen"] { font-size: calc(22px * var(--ech)); }
  .saisie[data-taille="long"] { font-size: calc(18px * var(--ech)); }
  .sortie { min-height: 72px; flex: 0 0 auto; }   /* les actions suivent le texte, comme sur les captures */
  .sortie-vide { font-size: calc(clamp(22px, 6.6vw, 27px) * var(--ech)); opacity: .55; }
  .sortie-texte { font-family: var(--font); }
  .sortie-texte, .sortie-ajami { font-size: calc(clamp(24px, 7.4vw, 30px) * var(--ech)); font-weight: 500; color: var(--link); line-height: 1.3; }
  .sortie-ajami { line-height: 2.1; }
  .sortie-texte[data-taille="moyen"], .sortie-ajami[data-taille="moyen"] { font-size: calc(22px * var(--ech)); }
  .sortie-texte[data-taille="long"], .sortie-ajami[data-taille="long"] { font-size: calc(18px * var(--ech)); }
  .panneau-pied { border-block-start: 0; padding-block-start: 0; gap: 8px; }
  .compteur { font-size: calc(12px * var(--ech)); min-width: 0; }
  .compteur .jauge { display: none; }
  .compteur.plein .jauge { display: block; width: 72px; }
  /* actions du résultat : icônes, alignées en fin de ligne */
  .actions {
    border-block-start: 0; padding-block-start: 2px; margin-inline: 0; padding-inline: 0; overflow: visible;
    justify-content: flex-end; gap: 2px;
  }
  .actions .btn-contour, .actions .btn-contour:first-child {
    width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--link);
  }
  .actions .btn-contour:hover:not(:disabled) { background: var(--sun); }
  .actions .btn-contour > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .actions .btn-pouce { color: var(--link); }

  /* barre des langues + Traduire, au-dessus de la barre d'onglets */
  .vue[data-vue="traduire"] .barre-langues {
    display: flex; align-items: center; gap: 8px; position: fixed; z-index: 41;
    inset-inline: 0; bottom: calc(var(--h-onglets) + env(safe-area-inset-bottom, 0px)); height: 76px;
    padding-inline: 16px calc(16px + 52px + 10px);
  }
  .pilule-langue {
    flex: 1 1 0; min-width: 0; height: 48px; padding-inline: 12px; border-radius: 24px; border: 1px solid var(--line);
    background: var(--pan); color: var(--fg); font-size: calc(15px * var(--ech)); font-weight: 600;
    display: grid; place-items: center; text-align: center; text-align-last: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-appearance: none; appearance: none;
  }
  select.pilule-langue { cursor: pointer; }
  .pilule-langue option { color: #14201c; background: #fff; }
  .barre-fleche { flex: none; color: var(--mut); }
  .vue[data-vue="traduire"] #btn-traduire {
    left: auto; right: auto; inset-inline-end: 16px; width: 52px; min-height: 52px; height: 52px; padding: 0; border-radius: 26px;
  }
  .vue[data-vue="traduire"] #btn-traduire > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* pendant la saisie : plus de barre d'onglets, barre des langues juste au-dessus du clavier */
  body.en-saisie .barre-onglets { display: none; }
  body.en-saisie { padding-block-end: 0; }
  body.en-saisie .vue[data-vue="traduire"]::after { bottom: var(--clavier, 0px); }
  body.en-saisie .vue[data-vue="traduire"] .barre-langues { bottom: var(--clavier, 0px); }
  body.en-saisie .vue[data-vue="traduire"] #btn-traduire { bottom: calc(var(--clavier, 0px) + 12px); }
}

/* ═══════════ APPRENDRE — parcours, séance plein écran, retour qui enseigne (refonte 24/10/2026) ═══════════
   Parcours : chemin vertical de cartes (état + barre + anneau) · Séance : une question à la fois, plein écran ·
   Retour : bande verte (juste) ou ambre (à revoir) en bas, forme attendue avec sa partie porteuse en surbrillance. */
.vue[data-vue="apprendre"] { --ap-ombre: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .06); }
.ap-parcours { max-width: 760px; margin: 0 auto; display: grid; gap: 28px; padding-block: 8px 40px; }
.ap-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Firen, le guide */
.ap-firen { width: 64px; height: 64px; flex: none; }
.ap-firen svg { width: 100%; height: 100%; display: block; }
.ap-firen-petit { width: 48px; height: 48px; }
.ap-firen-grand { width: 112px; height: 112px; }
@media (prefers-reduced-motion: no-preference) {
  .ap-firen.saute svg { animation: ap-saute .5s cubic-bezier(.3, 1.6, .5, 1); }
  .ap-firen.penche svg { animation: ap-penche .6s ease-in-out; }
}
@keyframes ap-saute { 0% { transform: translateY(0); } 40% { transform: translateY(-8px) scale(1.04); } 100% { transform: none; } }
@keyframes ap-penche { 0%, 100% { transform: none; } 30% { transform: rotate(-6deg); } 70% { transform: rotate(4deg); } }

.ap-accueil { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.ap-accueil h1 { font: 700 clamp(26px, 4vw, 34px)/1.1 var(--fontd); margin: 0 0 8px; text-wrap: balance; }
.ap-bulle { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--pan); border: 1px solid var(--line); color: var(--fg); line-height: 1.5; max-width: 52ch; }
.ap-global { display: grid; justify-items: center; gap: 4px; font-size: 13px; color: var(--mut); text-align: center; }
@media (max-width: 639px) {
  .ap-accueil { grid-template-columns: auto minmax(0, 1fr); }
  .ap-global { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; text-align: left; }
}

/* Anneau de progression */
.ap-anneau { position: relative; display: inline-grid; place-items: center; }
.ap-anneau svg { display: block; transform: rotate(-90deg); }
.ap-anneau .fond { stroke: var(--sun); }
.ap-anneau .plein { stroke: var(--acc); transition: stroke-dashoffset .6s ease; }
.ap-anneau b { position: absolute; font: 700 13px var(--font); color: var(--fg); font-variant-numeric: tabular-nums; }

/* Chemin des leçons */
.ap-chemin { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.ap-chemin::before { content: ""; position: absolute; left: 31px; top: 30px; bottom: 30px; width: 3px; border-radius: 3px; background: var(--line); }
.ap-etape { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; position: relative; }
.ap-noeud { width: 64px; height: 64px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; position: relative; z-index: 1; }
.ap-etape[data-etat="fini"] .ap-noeud .plein { stroke: var(--link); }
.ap-carte { background: var(--pan); border: 1px solid var(--line); border-radius: var(--rayon); padding: 16px 18px; display: grid; gap: 10px;
  box-shadow: var(--ap-ombre); cursor: pointer; text-align: left; color: var(--fg); font: inherit; width: 100%; }
.ap-carte:hover { border-color: var(--acc); }
.ap-carte:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.ap-carte-haut { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.ap-carte h3 { margin: 0; font: 700 18px/1.25 var(--fontd); }
.ap-carte p { margin: 0; color: var(--mut); font-size: 15px; line-height: 1.5; }
.ap-etat { font: 700 12px var(--font); letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--sun); color: var(--mut); white-space: nowrap; }
.ap-etape[data-etat="cours"] .ap-etat { background: var(--warnbg); color: var(--warnfg); }
.ap-etape[data-etat="fini"] .ap-etat { background: var(--okbg); color: var(--okfg); }
.ap-carte-bas { display: flex; align-items: center; gap: 12px; }
.ap-progres { flex: 1; height: 8px; border-radius: 8px; background: var(--sun); overflow: hidden; }
.ap-progres span { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--acc); transition: width .6s ease; }
.ap-carte-cta { font: 700 14px var(--font); color: var(--link); white-space: nowrap; }

/* Séance plein écran */
.ap-session { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body.ap-ouvert { overflow: hidden; }
.ap-haut { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; max-width: 760px; margin: 0 auto;
  box-sizing: border-box; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); }
.ap-fermer { width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--mut); cursor: pointer; display: grid; place-items: center; }
.ap-fermer:hover { background: var(--sun); color: var(--fg); }
.ap-barre { height: 12px; border-radius: 12px; background: var(--sun); overflow: hidden; }
.ap-barre span { display: block; height: 100%; width: 0; background: var(--acc); border-radius: 12px; transition: width .4s ease; }
.ap-compteur { font: 700 14px var(--font); color: var(--mut); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

.ap-scene { overflow-y: auto; display: grid; align-content: safe center; justify-items: center; gap: 16px; text-align: center;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
.ap-scene > * { width: 100%; max-width: 640px; }
.ap-lecon-nom { margin: 0; font: 700 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.ap-question { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; font-family: var(--fontd); }
.ap-q-mot { font-size: clamp(32px, 7vw, 46px); font-weight: 700; color: var(--fg); overflow-wrap: anywhere; }
.ap-q-fleche { font-size: clamp(24px, 5vw, 32px); color: var(--mut); }
.ap-q-cible { font-size: clamp(22px, 4.6vw, 30px); font-weight: 700; color: var(--link); text-wrap: balance; }
.ap-q-indice { margin: 0; color: var(--mut); font-size: 16px; }
.ap-scene .ap-rappel-btn { width: auto; max-width: none; justify-self: center; display: inline-flex; gap: 6px; align-items: center; font: 600 14px var(--font);
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--pan); color: var(--fg); cursor: pointer; }
.ap-rappel-btn[aria-expanded="true"] { background: var(--sel); color: var(--selfg); border-color: var(--acc); }
.ap-rappel { text-align: left; background: var(--sun); border-radius: 14px; padding: 14px 16px; line-height: 1.55; color: var(--fg); }
.ap-rappel b { display: block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); margin-bottom: 4px; }
.ap-form { display: grid; gap: 12px; margin-top: 8px; }
.ap-form input { width: 100%; box-sizing: border-box; font: 600 clamp(22px, 5vw, 28px) var(--font); text-align: center; padding: 16px 18px;
  border-radius: 16px; border: 2px solid var(--line); background: var(--pan); color: var(--fg); }
.ap-form input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px var(--sel); }
.ap-form input:disabled { opacity: .75; }
.ap-touches { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ap-touches button { min-width: 48px; height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--pan);
  color: var(--fg); font: 600 22px var(--font); cursor: pointer; box-shadow: 0 2px 0 var(--line); }
.ap-touches button:active { transform: translateY(2px); box-shadow: none; }

.ap-pied { display: grid; justify-items: center; border-top: 1px solid var(--line); background: var(--bg);
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
.ap-action { width: 100%; max-width: 640px; min-height: 56px; border-radius: 16px; border: 0; background: var(--acc); color: var(--onacc);
  font: 700 18px var(--font); cursor: pointer; box-shadow: 0 3px 0 rgb(0 0 0 / .12); }
.ap-action:disabled { background: var(--sun); color: var(--mut); box-shadow: none; cursor: default; }
.ap-second { width: 100%; max-width: 640px; min-height: 52px; border-radius: 16px; border: 2px solid var(--line); background: transparent; color: var(--fg); font: 700 17px var(--font); cursor: pointer; }
.ap-action:focus-visible, .ap-second:focus-visible, .ap-fermer:focus-visible, .ap-rappel-btn:focus-visible, .ap-touches button:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

/* Retour en bande */
.ap-retour { position: absolute; left: 0; right: 0; bottom: 0; background: var(--okbg); color: var(--okfg); border-top: 3px solid currentColor;
  padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.ap-retour.ambre { background: var(--warnbg); color: var(--warnfg); }
@media (prefers-reduced-motion: no-preference) { .ap-retour:not([hidden]) { animation: ap-monte .28s ease-out; } }
@keyframes ap-monte { from { transform: translateY(100%); } to { transform: none; } }
.ap-retour-int { max-width: 640px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: start; }
.ap-retour-int .ap-action { grid-column: 1 / -1; margin-top: 6px; }
.ap-retour.ambre .ap-action { background: var(--warnfg); color: var(--warnbg); }
.ap-retour-texte { display: grid; gap: 4px; min-width: 0; }
.ap-retour-texte p { margin: 0; }
.ap-retour-titre { font: 700 19px var(--fontd); }
.ap-retour-forme { font: 700 24px var(--font); color: var(--fg); overflow-wrap: anywhere; }
.ap-retour-forme .fort { color: inherit; background: color-mix(in srgb, var(--acc) 35%, transparent); border-radius: 6px; padding: 0 3px; box-shadow: inset 0 -3px 0 var(--acc); }
.ap-retour.ambre .ap-retour-forme .fort { background: color-mix(in srgb, var(--warnfg) 25%, transparent); box-shadow: inset 0 -3px 0 var(--warnfg); }
.ap-retour-pourquoi { color: var(--fg); line-height: 1.5; }
.ap-retour-ecart { color: var(--fg); opacity: .85; font-size: 15px; line-height: 1.5; }
.ap-retour-ecart:empty { display: none; }

/* Fin de séance */
.ap-fin { position: absolute; inset: 0; background: var(--bg); display: grid; align-content: center; justify-items: center; gap: 14px; text-align: center;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
.ap-fin-titre { margin: 0; font: 700 clamp(26px, 5vw, 34px) var(--fontd); }
.ap-fin-texte { margin: 0; color: var(--mut); max-width: 44ch; line-height: 1.5; }
.ap-fin-boutons { display: grid; gap: 10px; width: 100%; max-width: 420px; margin-top: 8px; }
.ap-retour .ap-action:focus-visible { outline-color: currentColor; }

/* ── Unité en trois temps : découverte, régularité, pratique variée (refonte 24/10/2026) ── */
.ap-etape-bloc { display: grid; gap: 16px; justify-items: center; width: 100%; max-width: 640px; }
.ap-etape-bloc > * { width: 100%; }
.ap-guide { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; }
.ap-titre-etape { margin: 0; font: 700 clamp(24px, 5vw, 30px) var(--fontd); }
.fort { background: color-mix(in srgb, var(--acc) 35%, transparent); box-shadow: inset 0 -3px 0 var(--acc); border-radius: 5px; padding: 0 2px; }

.ap-exemples { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; text-align: left; }
.ap-exemples li { background: var(--pan); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 6px; box-shadow: var(--ap-ombre); }
.ap-ex-pu { font: 700 clamp(20px, 4.5vw, 24px) var(--font); color: var(--fg); overflow-wrap: anywhere; }
.ap-ex-fr { color: var(--mut); font-size: 15px; }
.ap-ex-source { justify-self: start; font: 700 11px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--okfg); background: var(--okbg); padding: 2px 8px; border-radius: 999px; }
.ap-ex-source.moteur { color: var(--mut); background: var(--sun); }

.ap-onglets { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ap-onglets button { font: 600 14px var(--font); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--pan); color: var(--fg); cursor: pointer; }
.ap-onglets button[aria-selected="true"] { background: var(--acc); color: var(--onacc); border-color: var(--acc); }
.ap-tableau { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--pan); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-align: left; }
.ap-tableau td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: baseline; }
.ap-tableau tr:first-child td { border-top: 0; }
.ap-tableau .pers { color: var(--mut); font-size: 13px; width: 30%; }
.ap-tableau .pu { font: 700 20px var(--font); }
.ap-tableau .frs { display: block; color: var(--mut); font-size: 13px; font-weight: 400; margin-top: 2px; }
.ap-reg-regle { margin: 0; text-align: left; background: var(--sun); border-radius: 14px; padding: 12px 14px; line-height: 1.55; }

.ap-type { margin: 0; font: 700 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.ap-trou { margin: 0; font: 700 clamp(20px, 4.6vw, 26px)/1.5 var(--font); color: var(--fg); }
.ap-trou .blanc { display: inline-block; min-width: 4.5em; border-bottom: 3px dashed var(--acc); margin: 0 4px; color: var(--link); }
.ap-options { display: grid; gap: 10px; }
.ap-options button { min-height: 58px; border-radius: 16px; border: 2px solid var(--line); background: var(--pan); color: var(--fg);
  font: 700 clamp(19px, 4.4vw, 22px) var(--font); cursor: pointer; box-shadow: 0 3px 0 var(--line); padding: 8px 14px; }
.ap-options button:hover:not(:disabled) { border-color: var(--acc); }
.ap-options button[aria-pressed="true"] { border-color: var(--acc); background: var(--sel); color: var(--selfg); }
.ap-options button.bon { border-color: var(--okfg); background: var(--okbg); color: var(--okfg); }
.ap-options button.mauvais { border-color: var(--warnfg); background: var(--warnbg); color: var(--warnfg); }
.ap-options button:focus-visible, .ap-paires button:focus-visible, .ap-onglets button:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.ap-paires { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-paires .col { display: grid; gap: 10px; align-content: start; }
.ap-paires button { min-height: 56px; border-radius: 14px; border: 2px solid var(--line); background: var(--pan); color: var(--fg); cursor: pointer;
  font: 600 15px var(--font); padding: 8px 10px; box-shadow: 0 3px 0 var(--line); text-align: center; }
.ap-paires .col-pu button { font: 700 18px var(--font); }
.ap-paires button[aria-pressed="true"] { border-color: var(--acc); background: var(--sel); color: var(--selfg); }
.ap-paires button.fait { border-color: var(--okfg); background: var(--okbg); color: var(--okfg); box-shadow: none; cursor: default; opacity: .8; }
.ap-paires button.secoue { border-color: var(--warnfg); }
@media (prefers-reduced-motion: no-preference) { .ap-paires button.secoue { animation: ap-secoue .35s; } }
@keyframes ap-secoue { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ap-notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; text-align: left; }
.ap-notes:empty { display: none; }
.ap-notes li { position: relative; padding: 10px 12px 10px 34px; border-radius: 12px; border: 1px dashed var(--line); color: var(--fg); font-size: 15px; line-height: 1.5; }
.ap-notes li::before { content: "i"; position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--link); color: var(--pan); font: 700 11px/16px var(--font); text-align: center; }

/* ═══════════════════════════════ CONJUGUER (24/10/2026) ═══════════════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cj { max-width: 1040px; margin: 0 auto; padding: 24px 16px 96px; }
.cj-tete { text-align: center; max-width: 640px; margin: 0 auto 20px; }
.cj-tete h1 { font: 700 calc(30px * var(--ech, 1)) / 1.2 var(--fontd); margin: 0 0 6px; }
.cj-intro { color: var(--mut); margin: 0 0 18px; font-size: calc(16px * var(--ech, 1)); }
.cj-recherche { position: relative; }
.cj-recherche input { width: 100%; box-sizing: border-box; font: 500 calc(19px * var(--ech, 1)) var(--font); padding: 14px 18px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--pan); color: var(--fg); }
.cj-recherche input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 25%, transparent); }
.cj-sugg { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; text-align: left;
  background: var(--pan); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,.14); max-height: 360px; overflow: auto; }
.cj-sugg li { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.cj-sugg li[aria-selected="true"], .cj-sugg li:hover { background: var(--sel); color: var(--selfg); }
.cj-s-inf { font-weight: 700; white-space: nowrap; }
.cj-s-sens { color: var(--mut); font-size: calc(14px * var(--ech, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-touches { display: flex; gap: 6px; justify-content: center; margin: 10px 0 4px; }
.cj-touches button { font: 600 calc(17px * var(--ech, 1)) var(--font); min-width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--pan); color: var(--fg); cursor: pointer; }
.cj-essais { color: var(--mut); font-size: calc(14px * var(--ech, 1)); margin: 8px 0 0; }
.cj-essais button { font: 600 calc(14px * var(--ech, 1)) var(--font); border: none; background: none; color: var(--link); cursor: pointer; padding: 2px 4px; text-decoration: underline; text-underline-offset: 3px; }
.cj-etat { text-align: center; color: var(--mut); }
.ap-reg-lien { text-align: center; margin: 14px 0 0; }
.ap-reg-lien a { color: var(--link); font-weight: 600; text-underline-offset: 3px; }

/* Conjuguer, présentation Konngol (25/10/2026) : teintes = ce que la forme exprime */
:root { --t-cours: #2f6fb3; --t-acquis: #1f8a5b; --t-prevu: #b26a00; --t-mode: #7b4bb3; --neg: #b3261e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-cours: #7fb2ec; --t-acquis: #6fd3a2; --t-prevu: #f0b45c; --t-mode: #c3a1ef; --neg: #ff9b8f; } }
:root[data-theme="dark"] { --t-cours: #7fb2ec; --t-acquis: #6fd3a2; --t-prevu: #f0b45c; --t-mode: #c3a1ef; --neg: #ff9b8f; }
[data-teinte="cours"] { --t: var(--t-cours); } [data-teinte="acquis"] { --t: var(--t-acquis); }
[data-teinte="prevu"] { --t: var(--t-prevu); } [data-teinte="mode"] { --t: var(--t-mode); }
.cj-verbe { text-align: center; margin: 28px 0 18px; }
.cj-verbe h2 { font: 800 calc(36px * var(--ech, 1)) / 1.1 var(--fontd); margin: 0; }
.cj-sens { color: var(--mut); margin: 6px 0 10px; }
.cj-en { font-style: italic; }
.cj-puces { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.cj-puce { font-size: calc(13px * var(--ech, 1)); color: var(--mut); background: var(--sun); border-radius: 999px; padding: 4px 10px; }
.cj-puce b { color: var(--fg); }
.cj-voix { margin: 8px 0; }
.cj-legende { max-width: 680px; margin: 8px auto 0; text-align: left; color: var(--mut); font-size: calc(14px * var(--ech, 1)); }
.cj-legende summary { cursor: pointer; color: var(--link); font-weight: 600; text-align: center; }
.cj-lecteur { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 14px; }
.cj-rail { position: sticky; top: 84px; background: var(--pan); border: 1px solid var(--line); border-radius: var(--rayon); padding: 14px; }
.cj-modes { display: flex; gap: 4px; background: var(--sun); border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.cj-modes button { flex: 1; font: 600 calc(13px * var(--ech, 1)) var(--font); border: none; background: none; color: var(--mut); padding: 8px 6px; border-radius: 9px; cursor: pointer; }
.cj-modes button[aria-selected="true"] { background: var(--pan); color: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cj-rail-titre { font-size: calc(12px * var(--ech, 1)); text-transform: uppercase; letter-spacing: .05em; color: var(--mut); margin: 4px 0 8px; font-weight: 700; }
.cj-fams { display: flex; flex-wrap: wrap; gap: 6px; }
.cj-fam { font: 700 calc(15px * var(--ech, 1)) var(--font); padding: 6px 11px; border-radius: 10px; cursor: pointer; border: 1.5px solid color-mix(in srgb, var(--t) 45%, transparent);
  color: var(--t); background: color-mix(in srgb, var(--t) 8%, var(--pan)); }
.cj-fam[aria-selected="true"] { background: var(--t); color: var(--pan); border-color: var(--t); }
.cj-teintes { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: calc(12px * var(--ech, 1)); color: var(--mut); margin: 10px 0; }
.cj-teintes i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--t); margin-right: 5px; vertical-align: middle; }
.cj-patrons { display: grid; gap: 6px; }
.cj-patrons button, .cj-variantes button, .cj-temps button { text-align: left; font: 600 calc(15px * var(--ech, 1)) var(--font); color: var(--fg); background: var(--pan);
  border: 1px solid var(--line); border-left: 4px solid var(--t, var(--line2)); border-radius: 10px; padding: 8px 10px; cursor: pointer; display: grid; gap: 2px; }
.cj-patrons button small, .cj-variantes button small { font-weight: 500; color: var(--mut); font-size: calc(12px * var(--ech, 1)); }
.cj-patrons button[aria-selected="true"], .cj-variantes button[aria-selected="true"], .cj-temps button[aria-selected="true"] { background: color-mix(in srgb, var(--t, var(--acc)) 14%, var(--pan)); border-color: var(--t, var(--acc)); }
.cj-temps { display: grid; gap: 6px; }
.cj-temps button { border-left-color: var(--acc); }
.cj-point { color: var(--neg); font-size: 10px; margin-right: 4px; vertical-align: middle; }
.cj-note-rail { color: var(--mut); font-size: calc(12px * var(--ech, 1)); margin: 10px 0 0; }
.cj-panneau { background: var(--pan); border: 1px solid var(--line); border-top: 5px solid var(--t); border-radius: var(--rayon); padding: 18px 20px; }
.cj-panneau header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.cj-patron { font: 800 calc(24px * var(--ech, 1)) var(--fontd); color: var(--t, var(--fg)); }
.cj-patron-neg { font: 600 calc(17px * var(--ech, 1)) var(--font); color: var(--neg); }
.cj-quand { color: var(--mut); margin: 6px 0 12px; line-height: 1.45; }
.cj-variantes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; margin: 0 0 12px; }
.cj-options { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: calc(14px * var(--ech, 1)); color: var(--mut); margin: 0 0 12px; }
.cj-options select { font: 500 calc(14px * var(--ech, 1)) var(--font); padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--pan); color: var(--fg); max-width: 100%; }
.cj-options small { flex-basis: 100%; }
.cj-table { width: 100%; border-collapse: collapse; }
.cj-table th, .cj-table td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--sun); vertical-align: top; }
.cj-table thead th { border-top: none; font-size: calc(12px * var(--ech, 1)); text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
.cj-table tbody th { font-weight: 500; color: var(--mut); font-size: calc(13px * var(--ech, 1)); width: 8.5em; }
.cj-f { display: block; font: 600 calc(17px * var(--ech, 1)) var(--font); }
.cj-table td.neg .cj-f { color: var(--neg); }
.cj-eq { display: block; color: var(--mut); font-style: italic; font-size: calc(13px * var(--ech, 1)); margin-top: 2px; }
.cj-groupe { font: 600 calc(14px * var(--ech, 1)) var(--font); color: var(--t); margin: 18px 0 8px; }
.cj-tout { margin-bottom: 8px; }
.cj-tout > summary { cursor: pointer; display: grid; gap: 2px; padding: 10px 12px; background: var(--pan); border: 1px solid var(--line);
  border-left: 4px solid var(--t); border-radius: 10px; font-weight: 700; }
.cj-tout > summary small { font-weight: 400; color: var(--mut); }
.cj-tout[open] > summary { margin-bottom: 8px; }
.cj-fr h3 { font: 700 calc(22px * var(--ech, 1)) var(--fontd); margin: 0 0 4px; }
.cj-fr-carte { background: var(--pan); border: 1px solid var(--line); border-left: 5px solid var(--t); border-radius: 14px; padding: 14px 16px; margin: 10px 0; }
.cj-fr-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cj-rang { font-weight: 800; color: var(--mut); }
.cj-freq { font-size: calc(12px * var(--ech, 1)); background: var(--okbg); color: var(--okfg); border-radius: 999px; padding: 2px 8px; }
.cj-ex { margin: 4px 0 8px; }
.cj-ex .neg { color: var(--neg); }
.cj-ouvrir { font: 600 calc(14px * var(--ech, 1)) var(--font); border: none; background: none; color: var(--link); cursor: pointer; padding: 0; }
.cj-participes { background: var(--pan); border: 1px solid var(--line); border-radius: var(--rayon); padding: 18px 20px; margin-top: 20px; }
.cj-participes h3 { font: 700 calc(20px * var(--ech, 1)) var(--fontd); margin: 0 0 8px; }
.cj-pp-classe { display: block; margin: 14px 0 6px; color: var(--mut); font-size: calc(14px * var(--ech, 1)); }
.cj-pp-classe select { margin-left: 6px; font: 500 calc(14px * var(--ech, 1)) var(--font); padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--pan); color: var(--fg); }
@media (max-width: 820px) { .cj-lecteur { grid-template-columns: minmax(0, 1fr); } .cj-rail { position: static; } }
@media (max-width: 520px) { .cj-verbe h2 { font-size: calc(30px * var(--ech, 1)); } .cj-panneau { padding: 14px; } .cj-table tbody th { width: 6em; } .cj-patron { font-size: calc(20px * var(--ech, 1)); } }
@media (max-width: 520px) {
  .cj-table thead { display: none; }
  .cj-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; border-top: 1px solid var(--sun); padding: 6px 0; }
  .cj-table tbody th { grid-column: 1 / -1; width: auto; border: none; padding: 2px 0; }
  .cj-table tbody td { border: none; padding: 2px 0; }
  .cj-participes .cj-table tbody tr { grid-template-columns: 1fr 1fr; }
}
.cj-temps { display: flex; flex-wrap: wrap; gap: 6px; }
.cj-temps button { display: inline-block; border-left-width: 1px; border-radius: 999px; padding: 6px 12px; font-size: calc(14px * var(--ech, 1)); }
/* parties du parcours (25/10/2026) */
.ap-partie { position: relative; z-index: 1; background: var(--bg); padding: 18px 0 4px 78px; }
.ap-partie:first-child { padding-top: 0; }
.ap-partie-num { font: 700 calc(12px * var(--ech, 1)) var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--link); }
.ap-partie h2 { font: 800 calc(22px * var(--ech, 1)) / 1.2 var(--fontd); margin: 2px 0 2px; }
.ap-partie p { color: var(--mut); margin: 0; font-size: calc(14px * var(--ech, 1)); }
@media (max-width: 520px) { .ap-partie { padding-left: 0; } }
/* Conjuguer : résumé (25/10/2026) — le verbe une fois, les pronoms ensemble, les exceptions à part */
.cj-vues { display: inline-flex; gap: 4px; background: var(--sun); border-radius: 10px; padding: 3px; }
.cj-vues button { font: 600 calc(13px * var(--ech, 1)) var(--font); border: none; background: none; color: var(--mut); padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.cj-vues button[aria-selected="true"] { background: var(--pan); color: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cj-resume { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cj-bloc { background: var(--bg); border: 1px solid var(--sun); border-radius: 12px; padding: 12px 14px; }
.cj-bloc h4 { margin: 0 0 8px; font-size: calc(12px * var(--ech, 1)); text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
.cj-ligne { margin: 0; font: 600 calc(18px * var(--ech, 1)) / 1.9 var(--font); }
.cj-ligne .cj-f { display: inline; }
.cj-pronoms { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.cj-pronoms span { font-size: calc(14px * var(--ech, 1)); line-height: 1.5; padding: 1px 8px; border-radius: 999px; background: var(--sun); color: var(--fg); cursor: help; }
.cj-bloc.neg .cj-f, .cj-bloc.neg .cj-ligne { color: var(--neg); }
.cj-exceptions { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--line); }
.cj-exceptions li { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
.cj-exceptions .cj-f { display: inline; background: var(--warnbg); border-radius: 6px; padding: 0 6px; }
.cj-pers-e { color: var(--warnfg); font-size: calc(13px * var(--ech, 1)); font-weight: 600; min-width: 7.5em; }
.cj-note-resume { color: var(--mut); font-size: calc(13px * var(--ech, 1)); margin: 10px 0 0; }
@media (max-width: 620px) { .cj-resume { grid-template-columns: 1fr; } }
/* résumé en accolade (25/10/2026, auteur) : pronoms empilés } verbe conjugué */
.cj-accolade { display: flex; align-items: center; gap: 10px; }
.cj-avant { font: 600 calc(18px * var(--ech, 1)) var(--font); }
.cj-accolade .cj-pronoms { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.cj-accolade .cj-pronoms li { display: flex; align-items: baseline; gap: 8px; line-height: 1.35; }
.cj-accolade .cj-pronoms b { font: 600 calc(17px * var(--ech, 1)) var(--font); min-width: 3.2em; }
.cj-accolade .cj-pronoms small { color: var(--mut); font-size: calc(12px * var(--ech, 1)); }
.cj-brace { width: 16px; align-self: stretch; color: var(--line2); flex: none; }
.cj-accolade > .cj-f { font: 700 calc(22px * var(--ech, 1)) var(--font); }
.cj-bloc.neg .cj-pronoms b, .cj-bloc.neg .cj-avant { color: var(--neg); }
.cj-accolade > .cj-f, .cj-accolade .cj-pronoms small { white-space: nowrap; }
.cj-bloc { min-width: 0; }
@media (max-width: 520px) { .cj-accolade .cj-pronoms small { display: none; } .cj-accolade > .cj-f { white-space: normal; font-size: calc(19px * var(--ech, 1)); } }
/* mot placé devant (hari, haray, ko bee…) : il vaut pour toutes les personnes → { ; son sens en bref dessous */
.cj-avant { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cj-avant b { font: 700 calc(18px * var(--ech, 1)) var(--font); color: var(--t, var(--fg)); background: color-mix(in srgb, var(--t, var(--acc)) 12%, transparent); border-radius: 8px; padding: 1px 8px; white-space: nowrap; }
.cj-avant small { color: var(--mut); font-size: calc(11.5px * var(--ech, 1)); max-width: 7em; line-height: 1.25; margin-top: 3px; }
.cj-bloc.neg .cj-avant b { color: var(--neg); background: color-mix(in srgb, var(--neg) 10%, transparent); }
.cj-resume { grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); }
.cj-bloc { overflow-x: auto; }
/* marges réduites sur mobile (auteur 25/10/2026 : « 2 à quelques pixels suffisent ») */
@media (max-width: 520px) {
  main.page { padding-left: 6px; padding-right: 6px; }
  .cj { padding-left: 0; padding-right: 0; }
  .cj-rail { padding: 10px 8px; }
  .cj-panneau { padding: 12px 8px; }
  .cj-bloc { padding: 10px 8px; }
  .cj-participes { padding: 12px 8px; }
  .cj-fr-carte { padding: 12px 10px; }
}
@media (max-width: 520px) {
  /* parcours : anneaux plus petits, cartes plus près du bord */
  .ap-etape { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
  .ap-noeud { width: 40px; height: 40px; }
  .ap-noeud svg { width: 40px; height: 40px; }
  .ap-chemin::before { left: 19px; }
  .ap-carte { padding: 12px 12px; }
  .ap-partie { padding-left: 0; }
  /* séance plein écran : 6 px sur les bords */
  .ap-haut { padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  .ap-scene { padding-left: max(6px, env(safe-area-inset-left, 0px)); padding-right: max(6px, env(safe-area-inset-right, 0px)); }
  .ap-pied { padding-left: max(6px, env(safe-area-inset-left, 0px)); padding-right: max(6px, env(safe-area-inset-right, 0px)); }
  .ap-retour { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 520px) { .ap-noeud .ap-anneau, .ap-noeud .ap-anneau svg { width: 40px; height: 40px; } .ap-noeud .ap-anneau b { font-size: 13px; } }
@media (max-width: 520px) {
  /* compensations bord à bord alignées sur la marge de page de 6 px */
  .actions { margin-inline: -6px; padding-inline: 6px; }
  .vue[data-vue="traduire"] .traducteur { margin-inline: -6px; }
}
/* « Depuis le français » : modes puis temps (25/10/2026) */
.cj-fr-mode { padding: 8px 0; border-top: 1px solid var(--sun); }
.cj-fr-mode:first-child { border-top: none; padding-top: 0; }
.cj-fr-mode .cj-rail-titre { margin: 2px 0 6px; color: var(--fg); }
.cj-fr-temps { margin: 6px 0 4px; font-size: calc(12px * var(--ech, 1)); color: var(--mut); font-weight: 600; }

/* ═══════════════ HISTORIQUE : panneau à droite (25/10/2026, demande de l'auteur) ═══════════════ */
.outils-trad { display: flex; justify-content: center; gap: 12px; margin: 18px 0 4px; }
.btn-outil { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  color: var(--fg); font: 600 calc(13px * var(--ech, 1)) var(--font); padding: 4px 10px; border-radius: 14px; }
.btn-outil svg { width: 26px; height: 26px; padding: 14px; box-sizing: content-box; border-radius: 50%; border: 1px solid var(--line2); background: var(--pan); }
.btn-outil:hover svg, .btn-outil[aria-expanded="true"] svg { background: var(--sel); color: var(--selfg); border-color: var(--acc); }
.btn-outil:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.barre-hist { display: none; }
.voile-hist { position: fixed; inset: 0; z-index: 900; background: rgb(0 0 0 / .25); }
.panneau-hist { position: fixed; z-index: 901; top: 0; bottom: 0; inset-inline-end: 0; width: min(420px, 100%); background: var(--pan);
  border-inline-start: 1px solid var(--line); box-shadow: -8px 0 32px rgb(0 0 0 / .18); display: flex; flex-direction: column; gap: 10px;
  padding: max(14px, env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.hist-tete { display: flex; align-items: center; gap: 10px; position: sticky; top: calc(-1 * max(14px, env(safe-area-inset-top, 0px))); background: var(--pan); padding: 4px 0 8px; z-index: 1; }
.hist-tete h2 { flex: 1; margin: 0; font: 700 calc(20px * var(--ech, 1)) var(--fontd); }
.panneau-hist .note { margin: 0; }
.panneau-hist .histo { flex-direction: column; align-items: stretch; }
body.hist-ouvert { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .panneau-hist:not([hidden]) { animation: hist-entree .22s ease-out; }
  @keyframes hist-entree { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  [dir="rtl"] .panneau-hist:not([hidden]) { animation-name: hist-entree-rtl; }
  @keyframes hist-entree-rtl { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 639px) {
  .outils-trad { display: none; }
  .barre-hist { display: inline-grid; margin-inline-start: auto; }
  .panneau-hist { width: 100%; border: none; padding-left: 10px; padding-right: 10px; }
}
/* panneau toujours à droite (demande de l'auteur), cartes compactes */
.panneau-hist { inset-inline-end: auto; right: 0; left: auto; border-inline-start: none; border-left: 1px solid var(--line); box-shadow: -8px 0 32px rgb(0 0 0 / .18); }
[dir="rtl"] .panneau-hist:not([hidden]) { animation-name: hist-entree; }
.panneau-hist .histo { padding: 12px 14px; gap: 8px; }
.panneau-hist .histo-textes { flex: 0 0 auto; }
.panneau-hist .histo-pular { font-size: calc(18px * var(--ech, 1)); }
.panneau-hist .histo-actions { justify-content: flex-end; }
.panneau-hist .histo-fr[dir="auto"] { text-align: start; }

/* ═══════════════ JANGA-WINDA : lire et écrire en pular (25/10/2026) ═══════════════ */
.jw { max-width: 1040px; margin: 0 auto; padding: 16px 16px 96px; }
.jw h1 { font: 800 calc(30px * var(--ech, 1)) / 1.15 var(--fontd); margin: 0 0 6px; }
.jw-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 8px 0 18px; }
.jw-tete p { color: var(--mut); margin: 0; }
.jw-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--pan); color: var(--fg); font: 600 calc(15px * var(--ech, 1)) var(--font); text-decoration: none; cursor: pointer; }
.jw-btn.jw-principal { background: var(--acc); color: var(--onacc); border-color: var(--acc); }
.jw-btn[aria-pressed="true"] { background: var(--sel); color: var(--selfg); border-color: var(--acc); }
.jw-lien { background: none; border: none; color: var(--link); font: 600 calc(14px * var(--ech, 1)) var(--font); cursor: pointer; padding: 6px 4px; text-decoration: underline; text-underline-offset: 3px; }
.jw-danger { color: var(--errfg); }
.jw-retour { display: inline-block; margin: 4px 0 12px; color: var(--link); font-weight: 600; text-decoration: none; }
.jw-meta { color: var(--mut); font-size: calc(14px * var(--ech, 1)); margin: 2px 0; }
.jw-meta a { color: var(--link); }
.jw-barre { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jw-onglets { display: flex; gap: 4px; background: var(--sun); border-radius: 12px; padding: 4px; }
.jw-onglets button { border: none; background: none; color: var(--mut); font: 600 calc(14px * var(--ech, 1)) var(--font); padding: 8px 12px; border-radius: 9px; cursor: pointer; }
.jw-onglets button[aria-selected="true"] { background: var(--pan); color: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.jw-recherche { flex: 1 1 240px; max-width: 380px; font: 500 calc(15px * var(--ech, 1)) var(--font); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--pan); color: var(--fg); }
.jw-genres { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.jw-genres button { border: 1px solid var(--line); background: var(--pan); color: var(--fg); border-radius: 999px; padding: 6px 12px; font: 600 calc(13px * var(--ech, 1)) var(--font); cursor: pointer; }
.jw-genres button[aria-pressed="true"] { background: var(--sel); color: var(--selfg); border-color: var(--acc); }
.jw-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; }
.jw-sous { font: 700 calc(18px * var(--ech, 1)) var(--fontd); margin: 22px 0 10px; }
.jw-carte { display: grid; gap: 6px; text-decoration: none; color: var(--fg); }
.jw-carte-titre { font-weight: 700; line-height: 1.25; }
.jw-carte-meta { color: var(--mut); font-size: calc(12.5px * var(--ech, 1)); }
.jw-carte-lieu { color: var(--mut); font-size: calc(12px * var(--ech, 1)); letter-spacing: .02em; }
.jw-lieu { font-style: italic; }
.jw-pays select { font: 500 calc(14px * var(--ech, 1)) var(--font); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--pan); color: var(--fg); max-width: 100%; }
.jw-visibilite { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; justify-items: start; }
.jw-visibilite p { margin: 0; color: var(--mut); font-size: calc(13.5px * var(--ech, 1)); }
/* couvertures : rendu « livre » de l'Atelier de couvertures (25/10/2026) — fond et motif posés en style par JangaCouv.css() */
.jw-couv { --txt: #fff; --ombre: 0 2px 4px rgba(0,0,0,.55); position: relative; aspect-ratio: 2 / 3; border-radius: 3px 8px 8px 3px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 18px 11px; text-align: center; color: var(--txt); background-color: #1e293b;
  box-shadow: 0 10px 20px rgba(0,0,0,.18), inset 3px 0 10px rgba(0,0,0,.12); transition: transform .25s ease, box-shadow .25s ease; }
.jw-couv.encre-sombre { --txt: #111827; --ombre: 0 1px 0 rgba(255,255,255,.35); }
.jw-couv::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: linear-gradient(to right, rgba(0,0,0,.3), rgba(255,255,255,.1)); z-index: 2; }
.jw-couv::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 40%); z-index: 1; pointer-events: none; }
.jw-couv-texte { position: relative; z-index: 3; text-shadow: var(--ombre); display: grid; gap: 5px; max-height: 100%; overflow: hidden; overflow-wrap: break-word; hyphens: auto; }
.jw-couv-titre { font: 700 calc(15px * var(--ech, 1)) / 1.15 var(--fontd); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.jw-couv-ajami { font: 500 calc(11px * var(--ech, 1)) / 1.5 var(--font); opacity: .92; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.jw-couv-auteur { font-size: 9px; text-transform: uppercase; letter-spacing: .16em; opacity: .85; }
.jw-couv.grand { width: 180px; flex: none; padding: 26px 15px; }
.jw-couv.grand .jw-couv-titre { font-size: calc(21px * var(--ech, 1)); }
.jw-couv.grand .jw-couv-ajami { font-size: calc(15px * var(--ech, 1)); -webkit-line-clamp: 2; }
.jw-couv.grand .jw-couv-auteur { font-size: 11px; }
@media (hover: hover) { .jw-carte:hover .jw-couv { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 16px 28px rgba(0,0,0,.25), inset 3px 0 10px rgba(0,0,0,.12); } }
.jw-couv-img { padding: 0; background: var(--line); }
.jw-couv-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* titre posé sur l'image : en bas, sur un voile sombre (lisible quelle que soit l'image) */
.jw-couv-img.titree { align-items: flex-end; padding: 0 11px 16px; }
.jw-couv-img.titree.grand { padding: 0 15px 24px; }
.jw-couv-img.titree::after { background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 45%, transparent 70%), linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 40%); }
.jw-couv-img .jw-couv-texte { --txt: #fff; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
/* atelier dans le formulaire de l'œuvre */
.jw-atelier { display: grid; grid-template-columns: 190px 1fr; gap: 18px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.jw-atelier > legend { font-weight: 600; padding: 0 4px; }
.jw-at-apercu { display: grid; gap: 6px; justify-items: center; align-content: start; }
.jw-at-apercu .jw-couv { width: 170px; }
.jw-at-nom { margin: 0; color: var(--mut); font-size: calc(13px * var(--ech, 1)); }
.jw-at-reglages { display: grid; gap: 12px; align-content: start; }
.jw-at-reglages fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.jw-at-reglages legend, .jw-at-etiq { font-weight: 600; font-size: calc(13px * var(--ech, 1)); margin-bottom: 6px; display: flex; justify-content: space-between; width: 100%; }
.jw-at-etiq output { font-weight: 400; color: var(--mut); }
.jw-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.jw-pastille { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); cursor: pointer; padding: 0; position: relative; }
.jw-pastille[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg); }
.jw-pastille.libre { background: conic-gradient(#e11d48, #f59e0b, #16a34a, #0ea5e9, #6d28d9, #e11d48); overflow: hidden; }
.jw-pastille.libre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.jw-seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.jw-seg label { text-align: center; padding: 5px 4px; border-radius: 7px; cursor: pointer; font-size: calc(13px * var(--ech, 1)); position: relative; }
.jw-seg input { position: absolute; opacity: 0; pointer-events: none; }
.jw-seg label:has(input:checked) { background: var(--pan); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.jw-seg label:has(input:focus-visible) { outline: 2px solid var(--link); }
.jw-at-reglages input[type=range] { width: 100%; accent-color: var(--fg); }
.jw-at-motifs { grid-column: 1 / -1; display: grid; gap: 10px; }
.jw-at-familles { display: flex; flex-wrap: wrap; gap: 6px; }
.jw-at-familles button { font: inherit; font-size: calc(13px * var(--ech, 1)); border: 1px solid var(--line); background: transparent; color: var(--fg); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.jw-at-familles button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.jw-at-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 10px; max-height: 430px; overflow-y: auto; padding: 6px 4px 6px 6px; }
.jw-at-vignette { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; display: grid; gap: 4px; text-align: left; }
.jw-at-vignette[hidden] { display: none; }
.jw-at-vignette .jw-couv { padding: 10px 6px; }
.jw-at-vignette .jw-couv-titre { font-size: 10px; }
.jw-at-vignette .jw-couv-auteur { font-size: 7px; }
.jw-at-vignette small { font-size: 11px; color: var(--mut); }
.jw-at-vignette[aria-pressed="true"] .jw-couv { outline: 3px solid var(--fg); outline-offset: 3px; }
.jw-at-vignette:focus-visible .jw-couv { outline: 3px solid var(--link); outline-offset: 3px; }
@media (max-width: 560px) { .jw-atelier { grid-template-columns: 1fr; } .jw-at-apercu .jw-couv { width: 150px; } .jw-at-apercu .jw-couv-titre { font-size: calc(19px * var(--ech, 1)); } }
.jw-image { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; }
.jw-image legend { font-weight: 600; padding: 0 4px; }
.jw-image-ligne { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.jw-image-vignettes { display: flex; gap: 8px; }
.jw-image-vignettes .jw-couv { width: 72px; }
.jw-image-actions { display: grid; gap: 10px; flex: 1 1 240px; justify-items: start; }
.jw-image-actions p { margin: 0; }
.jw-fichier { cursor: pointer; }
#jw-image-nouvelle { display: grid; gap: 10px; }
#jw-image-nouvelle[hidden] { display: none; }
#jw-canvas { width: 128px; height: 200px; border-radius: 8px; box-shadow: 0 2px 8px rgb(0 0 0 / .15); }
.jw-mes .jw-couv-ajami, .jw-mes .jw-couv-auteur { display: none; }
/* charte de Janga-winda */
.jw-charte { max-width: 720px; line-height: 1.6; }
.jw-charte h3 { margin: 22px 0 8px; font-size: calc(17px * var(--ech, 1)); }
.jw-charte ul { padding-left: 20px; display: grid; gap: 6px; }
.jw-valeurs { display: grid; gap: 8px; margin: 0; }
.jw-valeurs div { border-left: 3px solid var(--accent, #5cc49a); padding: 2px 0 2px 12px; }
.jw-valeurs dt { font-weight: 700; display: inline; }
.jw-valeurs dt::after { content: ' — '; font-weight: 400; }
.jw-valeurs dd { display: inline; margin: 0; }
.jw-charte-pli { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.jw-charte-pli summary { cursor: pointer; font-weight: 600; }
.jw-vide { text-align: center; padding: 40px 16px; color: var(--mut); grid-column: 1 / -1; }
.jw-vide .jw-btn { margin: 6px 4px 0; }
.jw-attente { color: var(--mut); text-align: center; padding: 30px; }
.jw-fiche { display: flex; gap: 22px; align-items: flex-start; }
.jw-fiche-texte { flex: 1; min-width: 0; }
.jw-resume { margin: 12px 0; line-height: 1.6; }
.jw-resume-fr { margin: 8px 0; color: var(--mut); }
.jw-resume-fr summary { cursor: pointer; color: var(--link); font-weight: 600; }
.jw-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 6px; }
.jw-chapitres { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: ch; }
.jw-chapitres li a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 6px; border-top: 1px solid var(--line); text-decoration: none; color: var(--fg); }
.jw-chapitres li a::before { counter-increment: ch; content: counter(ch); color: var(--mut); min-width: 1.6em; }
.jw-chapitres li a span { flex: 1; font-weight: 600; }
.jw-chapitres small { color: var(--mut); }
.jw-signal-form { display: grid; gap: 10px; max-width: 460px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--pan); margin-top: 8px; }
.jw-signal-form label, .jw-form label { display: grid; gap: 4px; font-weight: 600; font-size: calc(14px * var(--ech, 1)); }
.jw-signal-form select, .jw-signal-form input, .jw-form input, .jw-form textarea, .jw-form select {
  font: 500 calc(16px * var(--ech, 1)) var(--font); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--pan); color: var(--fg); }
.jw-ok { color: var(--okfg); background: var(--okbg); padding: 8px 12px; border-radius: 10px; }
.jw-err:not(:empty) { color: var(--errfg); background: var(--errbg); padding: 8px 12px; border-radius: 10px; }
.jw-liseuse { max-width: 720px; margin: 0 auto; }
.jw-lis-barre { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; top: 0; background: var(--bg); padding: 6px 0; z-index: 2; }
.jw-lis-outils { display: flex; gap: 6px; align-items: center; }
.jw-bascule { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.jw-bascule button { border: none; background: var(--pan); color: var(--fg); padding: 6px 12px; font: 600 calc(13px * var(--ech, 1)) var(--font); cursor: pointer; }
.jw-bascule button[aria-pressed="true"] { background: var(--sel); color: var(--selfg); }
.jw-rond { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--pan); color: var(--fg); font-weight: 700; cursor: pointer; }
.jw-lis-tete { margin: 14px 0 8px; }
.jw-texte { line-height: 1.75; overflow-wrap: break-word; }
.jw-texte[dir="rtl"] { line-height: 2.1; }
.jw-texte p { margin: 0 0 1em; }
.jw-texte h3 { font: 700 1.1em var(--fontd); margin: 1.4em 0 .6em; }
.jw-pause { border: none; text-align: center; margin: 1.6em 0; }
.jw-pause::after { content: "* * *"; color: var(--mut); letter-spacing: .4em; }
.jw-lis-pied { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 16px 0; margin-top: 24px; }
.jw-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.jw-profil { margin-bottom: 18px; }
.jw-badge { display: inline-block; background: var(--okbg); color: var(--okfg); border-radius: 999px; padding: 3px 10px; font-size: calc(13px * var(--ech, 1)); font-weight: 600; }
.jw-form { display: grid; gap: 14px; max-width: 680px; }
.jw-ligne { display: flex; gap: 12px; flex-wrap: wrap; }
.jw-ligne label { flex: 1 1 150px; }
.jw-form .jw-accord { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.jw-accord input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.jw-aide { color: var(--mut); font-size: calc(13px * var(--ech, 1)); margin: -8px 0 0; }
.jw-mes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.jw-mes a { display: flex; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--pan); text-decoration: none; color: var(--fg); }
.jw-mes .jw-couv { width: 56px; flex: none; padding: 6px 4px; }
.jw-mes .jw-couv-titre { font-size: 8.5px; }
.jw-mes small { display: block; color: var(--mut); }
.jw-editeur { display: grid; gap: 10px; max-width: 780px; margin: 0 auto; }
.jw-ed-titre { font: 700 calc(22px * var(--ech, 1)) var(--fontd); border: none; border-bottom: 1px solid var(--line); background: none; color: var(--fg); padding: 8px 2px; }
.jw-ed-outils { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.jw-ed-outils .jw-aide { margin: 0; }
.jw-touches { display: flex; gap: 6px; }
.jw-touches button { min-width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--pan); color: var(--fg); font: 600 calc(17px * var(--ech, 1)) var(--font); cursor: pointer; }
.jw-ed-texte { min-height: 55vh; resize: vertical; font: 400 calc(18px * var(--ech, 1)) / 1.7 var(--font); padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--pan); color: var(--fg); }
.jw-ed-texte:focus, .jw-ed-titre:focus { outline: none; border-color: var(--acc); }
.jw-ed-pied { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.jw-apercu { border: 1px dashed var(--line2); border-radius: 14px; padding: 16px; background: var(--pan); }
@media (max-width: 640px) {
  .jw { padding-left: 0; padding-right: 0; }
  .jw-fiche { flex-direction: column; }
  .jw-couv.grand { width: 140px; }
  .jw-couv.grand .jw-couv-titre { font-size: calc(18px * var(--ech, 1)); }
  .jw-grille { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px 10px; }
  .jw-recherche { max-width: none; }
}

/* Sélecteur de langue : avertissement sous « pular » (interface traduite automatiquement, non relue — 26/10/2026) */
#menu-langue .langue-ff { display: grid; gap: 2px; }
#menu-langue .langue-avert { display: block; max-width: 240px; font-size: calc(11.5px * var(--ech, 1)); line-height: 1.35; color: var(--mut); white-space: normal; font-family: var(--font); }
#menu-langue .langue-avert::before { content: '⚠ '; color: #b26a00; }