/* LECTOR : la page de lecture (COPIE de scriba.css de SCRIBA v2, plus la section LECTOR en fin de fichier). Ne consomme QUE des jetons
   (lector-jetons.css et socle/web/tokens.css), aucune valeur en dur. */

.lector {
  width: 100%;
  max-width: calc(var(--lector-mesure) + 2 * var(--lector-marge));
  margin: 0 auto;
  padding: var(--lector-v-4) var(--lector-marge);
  box-sizing: border-box;
  flex: 1 0 auto;
}
.lector h1 { margin: 0 0 var(--lector-v-3); }
.lector h2 { margin: 0 0 var(--lector-v-2); }

.lector-encadre {
  background: var(--iav-fond-bloc);
  border: 1px solid var(--iav-bordure);
  border-radius: var(--lector-rayon);
  padding: var(--lector-encadre-interieur);
  margin: 0 0 var(--lector-v-3);
}
.lector-encadre .iav-champ { margin: 0 0 var(--lector-v-2); }
.lector-encadre .iav-champ-etiquette { margin-bottom: var(--lector-v-1); }
.lector-encadre > :last-child { margin-bottom: 0; }

/* Lien et dépôt : l'un sous l'autre sur téléphone, côte à côte au-delà. */
.lector-sources { display: grid; gap: var(--lector-v-2); grid-template-columns: 1fr; margin-bottom: var(--lector-v-2); }
@media (min-width: 720px) { .lector-sources { grid-template-columns: 1fr 1fr; } }
.lector-sources .iav-champ { margin: 0; }

.lector-depot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: var(--lector-depot-hauteur);
  padding: var(--lector-v-1);
  border: 2px dashed var(--iav-bordure);
  border-radius: var(--lector-rayon);
  background: var(--iav-fond-page);
  color: var(--iav-texte-secondaire);
  cursor: pointer;
  box-sizing: border-box;
}
.lector-depot:hover, .lector-depot.survol { border-color: var(--iav-focus); background: var(--iav-fond-survol); }
.lector-depot:focus-within { outline: 2px solid var(--iav-focus); outline-offset: 2px; }
.lector-depot.choisi { color: var(--iav-texte-principal); border-style: solid; }
.lector-depot input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Rangée d'actions : à droite sur grand écran, pleine largeur sur téléphone. */
.lector-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--lector-v-1);
  margin-top: var(--lector-v-2);
}
@media (max-width: 600px) { .lector-actions .iav-bouton { flex: 1 1 100%; } }

.lector-barre {
  height: var(--lector-barre-hauteur);
  background: var(--iav-bordure);
  border-radius: var(--lector-barre-hauteur);
  overflow: hidden;
  margin: var(--lector-v-1) 0;
}
.lector-barre > span { display: block; height: 100%; width: 0; background: var(--iav-bleu-lien); transition: width .4s; }
.lector-etape { margin: 0; color: var(--iav-texte-secondaire); }
.lector-avis { margin: var(--lector-v-1) 0 0; color: var(--iav-avertissement-texte); }

.lector-texte {
  white-space: pre-wrap;
  max-height: var(--lector-texte-hauteur);
  overflow-y: auto;
  margin: 0;
  padding: var(--lector-encadre-interieur);
  background: var(--iav-fond-page);
  border: 1px solid var(--iav-bordure);
  border-radius: var(--lector-rayon);
  font: inherit;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.lector-meta { margin: 0 0 var(--lector-v-1); color: var(--iav-texte-secondaire); }

.lector-liste { list-style: none; margin: 0; padding: 0; }
.lector-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lector-v-1);
  padding: var(--lector-v-1) 0;
  border-bottom: 1px solid var(--iav-bordure);
}
.lector-liste li:last-child { border-bottom: 0; }
.lector-liste-titre { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.lector-liste-date { display: block; color: var(--iav-texte-secondaire); }
.lector-liste-actions { display: flex; gap: var(--lector-v-1); flex: 0 0 auto; margin-left: auto; }
.lector-liste-vide { color: var(--iav-texte-secondaire); margin: 0; }

[hidden] { display: none !important; }

/* ── v2 : vue d'une transcription ────────────────────────────────────────── */
.lector-titre-ligne { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
                      gap: var(--lector-v-2); margin: 0 0 var(--lector-v-3); }
.lector-titre-ligne h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lector-sources-seul { grid-template-columns: 1fr !important; }
.lector-bascules { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lector-v-1) var(--lector-v-2);
                   margin: 0 0 var(--lector-v-2); }
.lector-bascules .iav-case { margin: 0; }
.lector-version-etiquette { margin: 0 0 0 auto; }
.lector-version { width: auto; min-width: 0; max-width: 100%; }
@media (max-width: 600px) { .lector-version-etiquette { margin-left: 0; } .lector-version { width: 100%; } }
div.lector-texte { white-space: normal; }
div.lector-texte p { margin: 0 0 var(--lector-v-2); white-space: pre-wrap; }
div.lector-texte p:last-child { margin-bottom: 0; }
.lector-edition { display: block; width: 100%; box-sizing: border-box; min-height: var(--lector-texte-hauteur); resize: vertical; }
.lector-video { margin: var(--lector-v-2) 0 0; }
.lector-video .lector-note { margin-top: var(--lector-v-1); }
.lector-puces { margin: 0 0 var(--lector-v-2); padding-left: var(--lector-v-3); }
.lector-puces li { margin-bottom: var(--lector-v-1); }
.lector-meta { overflow-wrap: anywhere; }
.lector-legal-page h2 { margin-top: var(--lector-v-3); }

/* ── LECTOR : zone de texte, drapeaux de lecture, lecteur ────────────────── */
.lector-zone { display: block; width: 100%; box-sizing: border-box; min-height: var(--lector-zone-hauteur);
               resize: vertical; line-height: 1.6; }
.lector-zone-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--lector-v-1);
                    margin-top: var(--lector-v-1); }
.lector-zone-pied .lector-note { margin: 0; }
.lector-choix-langue { border: 0; margin: 0 0 var(--lector-v-2); padding: 0; min-width: 0; }
.lector-choix-langue legend { padding: 0; margin-bottom: var(--lector-v-1); }
.lector-drapeaux { display: flex; flex-wrap: wrap; gap: var(--lector-v-1); }
.lector-drapeaux .lector-drapeau { min-height: var(--lector-cible); }
.lector-drapeaux .lector-drapeau img { width: var(--lector-drapeau-grand); }
.lector-drapeau.propose:not(.actif) { border-style: dashed; border-color: var(--iav-focus); }
.lector-lecteur { display: block; width: 100%; height: var(--lector-lecteur-hauteur); margin: var(--lector-v-1) 0; }
.lector-origine { margin: 0 0 var(--lector-v-2); overflow-wrap: anywhere; }
.lector-origine a { color: var(--iav-bleu-lien); }
.lector-liste-titre button { all: unset; cursor: pointer; color: var(--iav-bleu-lien); overflow-wrap: anywhere; }
.lector-liste-titre button:focus-visible { outline: 2px solid var(--iav-focus); outline-offset: 2px; }
.lector-liste li.courant { background: var(--iav-fond-survol); }
.lector-liste-drapeau { width: var(--lector-drapeau-largeur); height: auto; flex: 0 0 auto; }

/* Vitesse de lecture et arrêt */
.lector-vitesses { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lector-v-1); margin: var(--lector-v-1) 0 0; }
.lector-vitesses-etiquette { color: var(--iav-texte-secondaire); margin-inline-end: var(--lector-v-1); }
.lector-vitesse { min-width: var(--lector-cible); min-height: var(--lector-cible); }
.lector-vitesse[aria-checked="true"] { border-color: var(--iav-focus); font-weight: var(--iav-graisse-forte); }

/* ── Mission 2.0 : pages publiques (accueil court, confidentialité) et réglages ── */
.lector-public-intro { margin: 0 0 var(--lector-v-3); max-width: var(--lector-mesure); }
.lector-public-langues { list-style: none; margin: 0 0 var(--lector-v-2); padding: 0;
                         display: flex; flex-wrap: wrap; gap: var(--lector-v-1) var(--lector-v-2); }
.lector-public-langues li { display: flex; align-items: center; gap: var(--lector-v-1); }
.lector-public-langues img { width: var(--lector-drapeau-grand); height: auto; border-radius: 2px; }
.lector-texte-legal h2 { margin-top: var(--lector-v-3); }
.lector-texte-legal p, .lector-texte-legal li { overflow-wrap: anywhere; }
.lector-reglages .iav-champ { margin: 0 0 var(--lector-v-2); }
.lector-reglages input[type="number"] { max-width: 12rem; }