:root {
  --ardoise: #1d2a30;
  --craie: #eeeae0;
  --surligneur: #ffcf3f;
  --papier: #e9e7e0;
  --encre: #16232a;
  --liseré: #c8c4b6;
  --gris: #6b7880;

  --flou: 3.5px;
  --taille-lecture: 30px;
  --zoom: 1.35;

  --barre: 56px;
  --colonne: 300px;

  --ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --lecture: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--papier);
  color: var(--encre);
  font-family: var(--ui);
  min-height: 100dvh;
  padding-top: var(--barre);   /* place pour la barre fixe, annulé en desktop */
}

/* ---------- barre mobile / tablette ---------- */

.barre-haut {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--barre);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--papier);
  border-bottom: 1px solid var(--liseré);
}

.barre-haut h1 {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.hamburger, .hamburger::before, .hamburger::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--encre);
  content: "";
}
.hamburger { position: relative; margin: 0 auto; }
.hamburger::before { position: absolute; top: -5px; }
.hamburger::after  { position: absolute; top: 5px; }

.jauge.fine {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
}

/* ---------- panneau de paramétrage ---------- */

.panneau {
  position: fixed;
  top: var(--barre);
  left: 0;
  right: 0;
  z-index: 25;
  max-height: calc(100vh - var(--barre));
  max-height: calc(100dvh - var(--barre));
  overflow-y: auto;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  background: var(--papier);
  border-bottom: 1px solid var(--liseré);
  transform: translateY(-102%);
  visibility: hidden;      /* fermé = hors du parcours clavier */
  pointer-events: none;    /* et hors de portée du doigt */
  transition: transform 200ms ease, visibility 0s linear 200ms;
}

.panneau.ouvert {
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: transform 200ms ease;
}

.titre-panneau { display: none; }

.voile {
  position: fixed;
  top: var(--barre); left: 0; right: 0; bottom: 0;
  z-index: 20;
  background: rgba(29, 42, 48, 0.45);
}

.bloc { margin-bottom: 22px; }
.bloc:last-of-type { margin-bottom: 12px; }

.bloc h3 {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--liseré);
  font-size: 13px;
  font-weight: 600;
  color: var(--gris);
}

/* ---------- commandes ---------- */

.bouton-fichier, .bouton {
  display: inline-block;
  background: var(--encre);
  color: var(--papier);
  border: none;
  border-radius: 2px;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.bouton-plat {
  background: transparent;
  border: 1px solid var(--liseré);
  border-radius: 2px;
  padding: 9px 13px;
  font: inherit;
  font-size: 14px;
  color: inherit;
  cursor: pointer;
}

.bouton-fichier:hover, .bouton:hover { background: #0d181e; }
.bouton-plat:hover { border-color: var(--encre); }

select, input[type="number"], textarea {
  font: inherit;
  font-size: 14px;
  color: inherit;
  background: #fff;
  border: 1px solid var(--liseré);
  border-radius: 2px;
  padding: 8px 9px;
  width: 100%;
}

:is(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--surligneur);
  outline-offset: 2px;
}

.champ {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
}

.champ .unite { font-weight: 400; color: var(--gris); font-size: 12px; }

.reglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; }

.transport { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

.rond {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--liseré);
  background: #fff;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.rond.principal {
  width: 44px; height: 44px;
  background: var(--encre);
  color: var(--papier);
  border-color: var(--encre);
  font-size: 15px;
}

.jauge { height: 3px; background: var(--liseré); }
.jauge-remplie { height: 100%; width: 0; background: var(--encre); }
.jauge.fine .jauge-remplie { background: var(--surligneur); }

.compteur { margin: 8px 0 0; font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; }

.aide { margin: 0; font-size: 12px; line-height: 1.5; color: var(--gris); }

/* ---------- scène de lecture ---------- */

main { display: grid; align-content: center; min-height: calc(100dvh - var(--barre)); }

.etat { padding: 48px 24px; text-align: center; color: #5c6a72; font-size: 15px; }
.etat.erreur { color: #8a2f22; }

.scene {
  background: var(--ardoise);
  min-height: calc(100dvh - var(--barre));
  display: grid;
  align-items: center;
  padding: 6dvh 5vw;
}

.texte {
  margin: 0 auto;
  max-width: 34ch;
  color: var(--craie);
  font-family: var(--lecture);
  font-size: var(--taille-lecture);
  line-height: 2;
  text-wrap: pretty;
}

.mot { display: inline-block; }

.mot, .liant { transition: filter 120ms linear, opacity 120ms linear, transform 120ms ease; }

.floute { filter: blur(var(--flou)); opacity: 0.5; }

/* Le mot courant grossit sur place : pas de soulignement, et pas de
   recomposition du paragraphe puisqu'il déborde sur ses voisins flous. */
.actif {
  filter: none;
  opacity: 1;
  font-weight: 700;
  color: #fff;
  transform: scale(var(--zoom));
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mot, .liant, .panneau { transition: none; }
}

/* ---------- dialogue de saisie ---------- */

dialog {
  border: 1px solid var(--liseré);
  border-radius: 2px;
  padding: 20px;
  width: min(640px, 92vw);
  background: #fff;
}

dialog::backdrop { background: rgba(29, 42, 48, 0.55); }
dialog h2 { margin: 0 0 12px; font-size: 16px; }
dialog textarea { resize: vertical; }

.actions-dialogue { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* ---------- desktop : colonne fixe à gauche ---------- */

@media (min-width: 1024px) {
  body {
    display: grid;
    grid-template-columns: var(--colonne) 1fr;
    padding-top: 0;
  }

  .barre-haut, .voile { display: none; }

  .panneau {
    position: sticky;
    top: 0;
    left: auto; right: auto;
    height: 100dvh;
    max-height: none;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    border-bottom: none;
    border-right: 1px solid var(--liseré);
    padding: 22px 20px;
  }

  .titre-panneau {
    display: block;
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 600;
  }

  .reglages { grid-template-columns: 1fr; }

  main, .scene { min-height: 100dvh; }
  .texte { max-width: 30ch; }
}

@media (max-width: 560px) {
  .texte { max-width: 100%; }
}