/* acces.css — barre d'accessibilite partagee (ecoute, taille du texte, mode lisible).
   Tous les selecteurs sont prefixes par .pse-acces ou body.pse-acces-on : ce fichier peut
   etre ajoute a n'importe quelle page sans toucher a sa mise en page existante.
   Aucune dependance reseau. La police Atkinson Hyperlegible est celle du depot. */

/* La police du mode lisible est servie par le depot lui-meme : sans cet import,
   'Atkinson Hyperlegible' n'existe que si elle est installee sur la machine, et le
   mode lisible retombe silencieusement sur Verdana. Chemin relatif a ce fichier. */
@import url("../fonts/atkinson.css");

:root { --pse-fs: 1; }

/* ── La barre ──────────────────────────────────────────────────────────── */
.pse-acces {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 7px 10px;
  background: #0f172a; color: #e2e8f0;
  border-bottom: 1px solid #1e293b;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1;
}
.pse-acces .pse-lab {
  font-weight: 700; font-size: 12px; letter-spacing: .02em;
  color: #94a3b8; margin-right: 2px;
}
.pse-acces .pse-sep { width: 1px; height: 20px; background: #334155; margin: 0 4px; }
.pse-acces button {
  appearance: none; -webkit-appearance: none;
  border: 1px solid #334155; background: #1e293b; color: #e2e8f0;
  border-radius: 8px; padding: 7px 11px;
  font: inherit; font-weight: 700; cursor: pointer;
  min-height: 34px; min-width: 34px;
}
.pse-acces button:hover:not(:disabled) { background: #334155; }
.pse-acces button:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
.pse-acces button:disabled { opacity: .4; cursor: default; }
.pse-acces button.pse-on { background: #2563eb; border-color: #2563eb; color: #fff; }
.pse-acces .pse-etat { font-size: 12px; color: #94a3b8; margin-left: auto; padding-left: 8px; }

/* ── Boutons de lecture par partie ───────────────────────────────────────
   Actives seulement sur les pages qui declarent window.PSE_ACCES_PARTIES.
   Ils restent petits et s'alignent sur les titres sans modifier la structure
   pedagogique du cours. */
.pse-audio-partie {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; min-width: 34px; min-height: 34px;
  margin-left: 8px; padding: 0;
  border: 1px solid #cbd5e1; border-radius: 999px;
  background: #fff; color: #0f172a;
  font: 700 15px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  vertical-align: middle; cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}
.pse-audio-partie:hover { background: #eff6ff; border-color: #93c5fd; }
.pse-audio-partie:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
.pse-audio-partie.pse-on { background: #2563eb; border-color: #2563eb; color: #fff; }
.pse-audio-partie.pse-pause { background: #f59e0b; border-color: #d97706; color: #111827; }

/* La barre est fixe en haut : on decale ce qui est dessous.
   Les pages ordinaires reculent le corps ; les pages a ecrans superposes
   (auto-evaluations : .screen est en position fixed, inset 0) reculent le haut. */
body.pse-acces-on { padding-top: var(--pse-bar, 52px); }
body.pse-acces-on .screen { top: var(--pse-bar, 52px); }

/* ── Fenetres qui se posent par-dessus la page ──────────────────────────
   Un panneau en position fixed part de top:0, donc sous la barre : son titre
   et son bord haut disparaissent. On le fait commencer sous la barre et on
   lui retire d'autant de hauteur, pour qu'il reste entierement visible et
   defilant. Regle partagee : elle vaut pour toutes les pages, sans les
   toucher une par une. */
body.pse-acces-on .modal,
body.pse-acces-on .overlay,
body.pse-acces-on .popup,
body.pse-acces-on .lightbox {
  top: var(--pse-bar, 52px) !important;
  height: calc(100dvh - var(--pse-bar, 52px)) !important;
  max-height: calc(100dvh - var(--pse-bar, 52px)) !important;
}
/* Repli pour les navigateurs sans unite dvh (iOS ancien). */
@supports not (height: 100dvh) {
  body.pse-acces-on .modal,
  body.pse-acces-on .overlay,
  body.pse-acces-on .popup,
  body.pse-acces-on .lightbox {
    height: calc(100vh - var(--pse-bar, 52px)) !important;
    max-height: calc(100vh - var(--pse-bar, 52px)) !important;
  }
}

@media print { .pse-acces { display: none; } body.pse-acces-on { padding-top: 0; } }

/* ── Mode lisible : police du depot + espacement ────────────────────────── */
body.pse-dys, body.pse-dys .q-text, body.pse-dys .answer-option,
body.pse-dys .vf-option, body.pse-dys .ord-text, body.pse-dys .doc-text,
body.pse-dys .eval-card-title, body.pse-dys .text-answer, body.pse-dys .q-multi-hint,
body.pse-dys .consigne, body.pse-dys .opt, body.pse-dys .option, body.pse-dys .doc,
body.pse-dys .doc-content, body.pse-dys .corrige, body.pse-dys textarea,
body.pse-dys input[type="text"] {
  font-family: 'Atkinson Hyperlegible', Verdana, system-ui, sans-serif !important;
  letter-spacing: .03em;
  word-spacing: .09em;
}
body.pse-dys .q-text, body.pse-dys .answer-option, body.pse-dys .doc-text,
body.pse-dys .consigne, body.pse-dys .opt, body.pse-dys .option,
body.pse-dys .doc, body.pse-dys .doc-content, body.pse-dys .corrige { line-height: 1.8 !important; }

/* ── Taille du texte ────────────────────────────────────────────────────
   Pilotee par la taille de police de la racine (voir acces.js) : toutes les
   tailles exprimees en rem dans la page suivent automatiquement. Rien a
   declarer par element, donc rien a maintenir quand la page evolue.
   La barre elle-meme est en px : elle ne bouge pas. */

/* ── Telephone : une seule ligne ────────────────────────────────────────
   Sur un ecran etroit la barre passait sur deux lignes (89 px) et mangeait
   la place de la question. On retire les intitules de groupe et les mots des
   boutons ; les pictogrammes et les zones tactiles restent. */
@media (max-width: 560px) {
  .pse-acces { gap: 5px; padding: 6px 8px; }
  .pse-acces .pse-lab,
  .pse-acces .pse-sep,
  .pse-acces .pse-etat { display: none; }
  .pse-acces #psePause .pse-mot { display: none; }
  .pse-acces button { padding: 7px 9px; min-height: 40px; }
  .pse-acces #pseLire { padding: 7px 11px; }
}

/* ── Tableaux sur telephone ─────────────────────────────────────────────
   Un tableau de releve ne se replie pas : on le fait defiler dans son cadre
   plutot que de laisser la page deborder sur le cote. */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; }
.tw > table { margin: 0; min-width: 26rem; }
/* Un tableau de saisie tient deja dans la largeur : le cadre le protege si
   son contenu grandit, sans forcer un defilement qui n'a pas lieu d'etre. */
.tw-libre > table { min-width: 0; }

/* ── Bouton « effacer mes reponses » (voir effacer.js) ──────────────────── */
.pse-effacer {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: #b45309; border: 2px solid #b45309;
  border-radius: 10px; padding: 9px 15px; min-height: 44px;
  font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer;
}
.pse-effacer:hover { background: #fef3c7; }
.pse-efface-dit { margin-left: 10px; font-size: .9rem; color: #15803d; font-weight: 700; }
@media print { .pse-effacer, .pse-efface-dit { display: none !important; } }