/* L'éditeur : les deux colonnes, la barre de syntaxe, les vignettes du chapitre. */

/* ============================================================
   L'ÉDITEUR
   Deux colonnes : ce qu'on écrit, ce que ça donne. L'aperçu vient du serveur,
   par la même fonction que l'affichage — c'est la seule façon d'être sûr que
   ce qu'on voit est ce qui sera publié.
   ============================================================ */
/* ÉCRIRE N'EST PAS LIRE : L'ÉDITEUR PREND L'ÉCRAN (21 septembre 2026,
   « l'interface de modification des .md, c'est trop petit »). La colonne de
   lecture est bornée pour que l'œil suive la ligne ; ici deux colonnes se font
   face — la source et l'aperçu — et chaque caractère retiré à l'une est une
   ligne repliée de plus. Les marges du contenu sont rendues, et la page va
   d'un bord à l'autre. */
.editor { display: flex; flex-direction: column; min-height: 70vh; min-height: 70dvh;
  width: calc(100% + 2 * clamp(20px, 3.5vw, 64px)); margin-left: clamp(-64px, -3.5vw, -20px); }
.ed-bar { position: sticky; top: 0; z-index: 5; background: var(--bg);
  padding: 10px 0; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.ed-name { font-family: var(--mono); font-size: var(--fs-floor); color: var(--fg3); }
.ed-state { font-size: var(--fs-floor); color: var(--fg3); min-width: 5em; }

.ed-flaw { display: none; margin: 10px 0 0; padding: 10px 13px; border-radius: 9px;
  background: color-mix(in srgb, var(--red) 14%, var(--bg2));
  border: 1px solid var(--red); color: var(--fg); font-size: var(--fs-ui);
  font-family: var(--mono); }
.ed-flaw.visible { display: block; }

.ed-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: start; margin-top: 14px; }
.ed-left { display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ed-left:focus-within { border-color: var(--blue); }

/* ---- la barre d'outils ----
   Personne ne retient « ::: quoi » ni « où=POSTE HÔTE ». Un éditeur qui oblige
   à ouvrir la documentation à côté n'est pas un éditeur : la syntaxe du moteur
   est donc à portée de clic, groupée par intention. */
.ed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 6px 8px; background: var(--bg3); border-bottom: 1px solid var(--line); }
.ed-tool { min-width: 32px; height: 30px; padding: 0 8px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--fg2); font: inherit; font-size: var(--fs-ui); line-height: 1; cursor: pointer; }
.ed-tool:hover { background: var(--bg2); border-color: var(--line); color: var(--fg); }
.ed-tool strong, .ed-tool em, .ed-tool code { font-size: var(--fs-ui); }
.ed-sep { width: 1px; height: 16px; margin: 0 5px; background: var(--line); }

/* ON Y ÉCRIT DES HEURES : le texte y est de la taille du texte qu'on lit, pas
   de celle d'un libellé de bouton (--fs-ui, 13,3 px mesurés). */
.ed-source {
  width: 100%; min-height: 72vh; min-height: 72dvh; flex: 1; resize: vertical;
  background: var(--bg2); color: var(--fg); border: none;
  padding: 16px 18px;
  font-family: var(--mono); font-size: var(--fs); line-height: 1.7;
  tab-size: 2;
}
.ed-source:focus { outline: none; }
.ed-foot { padding: 4px 12px; background: var(--bg3); border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--fs-floor); color: var(--fg3); }

.ed-preview { min-height: 78vh; min-height: 78dvh; max-height: 88vh; max-height: 88dvh;
  overflow: auto;
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 4px 18px 18px; }
.ed-preview .module { margin: 0; }

/* Sur un écran étroit, deux colonnes de 300 px ne servent ni à écrire ni à
   relire : l'aperçu passe dessous. */
@media (max-width: 1000px) {
  .editor { width: 100%; margin-left: 0; }
  .ed-columns { grid-template-columns: 1fr; }
  .ed-source { min-height: 40vh; min-height: 40dvh; }
  .ed-preview { min-height: 40vh; min-height: 40dvh; max-height: none; }
}

/* ---- la bande d'images du chapitre ----
   Ce qui est déjà déposé dans le img/ voisin du .md. Les vignettes sont
   petites et carrées : c'est un aide-mémoire pour retrouver un fichier, pas
   une galerie. */
.ed-images { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 12px 0 0; }
.ed-images-t { font-family: var(--mono); font-size: var(--fs-floor); color: var(--fg3); }
.ed-thumb { position: relative; width: 64px; height: 64px; padding: 0;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; cursor: pointer; }
.ed-thumb:hover { border-color: var(--blue); }
.ed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-thumb-x { position: absolute; top: 1px; right: 3px; width: 16px; height: 16px;
  line-height: 15px; text-align: center; border-radius: 50%;
  background: var(--bg); color: var(--fg3); font-size: var(--fs-ui); opacity: 0; }
.ed-thumb:hover .ed-thumb-x { opacity: 1; }
.ed-thumb-x:hover { color: var(--red); }

/* Une pièce jointe n'a pas de vignette : son extension tient lieu d'image. */
.ed-thumb.ed-file { display: flex; align-items: center; justify-content: center; }
.ed-file-ext { font-family: var(--mono); font-size: var(--fs-floor); font-weight: 700;
  color: var(--fg3); letter-spacing: .5px; }
.ed-thumb.ed-file:hover .ed-file-ext { color: var(--blue); }

/* Le champ pendant qu'on traîne un fichier au-dessus : sans retour visuel, on
   ne sait pas si le lâcher va faire quelque chose. */
.ed-source.drop { border-color: var(--blue); background: var(--bg3); }

/* ============================================================
   IMPRESSION — ce que l'application ajoute ne s'imprime pas
   ============================================================ */
@media print {
  #account, .ed-bar, .dlg-back, .toolbar.foot, .editor .ed-source { display: none !important; }
  .ed-columns { grid-template-columns: 1fr; }
  .ed-preview { border: none; padding: 0; }
}

/* ═══════════ AU DOIGT : 48 PX, DANS LES DEUX DIMENSIONS ═══════════
   Mesuré à 390 px le 9 septembre 2026, avant correction : les trente boutons
   de la barre de l'éditeur à 45 × 26, les actions d'une ligne de
   l'administration à 45 × 30, le filtre des pages à 40 de haut, la case d'une
   ligne à 13 × 13. Ces trois écrans sont ceux où l'on VISE le plus. */
@media (max-width: 1000px), (pointer: coarse) {
  /* 48 PX DE HAUT, ET UNE SEULE RANGÉE QUI DÉFILE. À 26 px de haut les
     vingt-huit boutons tenaient sur deux lignes ; passés à 48 ils en
     occupaient CINQ, soit 261 px mesurés le 9 septembre 2026 — un tiers d'un
     écran de 844 avant la première ligne de texte. Les règles 3 et 4 de UI.md
     se contredisent ici, et c'est le NOMBRE qu'on déplace, pas la cible qu'on
     rétrécit : la rangée défile du doigt, et une flèche au bord le dit (UI.md, règle 46). */
  .ed-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ed-tools::-webkit-scrollbar { display: none; }
  .ed-tool { flex: 0 0 auto; min-width: 48px; height: 48px; }
}

/* ═══════════ AU TÉLÉPHONE : L'ÉDITEUR SE RESSERRE ═══════════
   Mêmes barres, mêmes 48 px : seuls les écarts entre la barre, le champ et
   l'aperçu baissent. */
@media (max-width: 1000px), (pointer: coarse) {
  .ed-bar { padding: 7px 0; }
  .ed-columns { gap: 10px; margin-top: 10px; }
  .ed-images { margin-top: 8px; }
}