/* ==========================================================
   Styles d'Omni-Transcripteur
   Principe : « mobile d'abord » (on dessine pour le téléphone,
   puis on adapte pour les grands écrans).
   ========================================================== */

/* ---------- Couleurs du thème clair (par défaut) ----------
   Les « variables » (--nom) permettent de changer toutes les
   couleurs d'un coup pour le thème sombre. */
:root {
  --fond: #f7f7f5;
  --surface: #ffffff;
  --texte: #1a1a1a;
  --texte-doux: #4a4a4a;
  --bordure: #c9c9c4;
  --accent: #1f5fa8;          /* bleu de l'application */
  --accent-texte: #ffffff;    /* texte posé sur le bleu */
  --focus: #b35c00;           /* contour visible quand on navigue au clavier */
  --erreur-fond: #fdecea;
  --erreur-texte: #8a1c12;
  --succes-fond: #e7f4ea;
  --succes-texte: #1d5c2e;
  --info-fond: #e8f0fa;
  --info-texte: #17406e;
  --enregistrement: #c62828;  /* point rouge pendant l'enregistrement */
  /* Couleurs des intervenants (toujours accompagnées du nom écrit) */
  --voix-0: #1f5fa8;
  --voix-1: #b35c00;
  --voix-2: #2e7d32;
  --voix-3: #8e24aa;
  --voix-4: #c62828;
  --voix-5: #00796b;
  --voix-6: #ad1457;
  --voix-7: #6d4c41;
}

/* ---------- Couleurs du thème sombre ----------
   Appliquées automatiquement si le téléphone est en mode sombre. */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #121417;
    --surface: #1d2025;
    --texte: #f2f2f2;
    --texte-doux: #c4c7cc;
    --bordure: #4a4f57;
    --accent: #8ab4f8;
    --accent-texte: #0b1a2e;
    --focus: #ffb86b;
    --erreur-fond: #3b1714;
    --erreur-texte: #ffb4ab;
    --succes-fond: #15301d;
    --succes-texte: #a6dcb2;
    --info-fond: #172a42;
    --info-texte: #b9d4f5;
    --enregistrement: #ff6b6b;
    --voix-0: #8ab4f8;
    --voix-1: #ffb86b;
    --voix-2: #81c995;
    --voix-3: #d7aefb;
    --voix-4: #f28b82;
    --voix-5: #78d9cc;
    --voix-6: #f48fb1;
    --voix-7: #d7b19d;
  }
}

/* ---------- Bases ---------- */

/* Un élément marqué « hidden » reste toujours caché,
   même si une autre règle lui donne un affichage */
[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Taille de texte de base : grande et lisible sur téléphone */
  font-size: 112.5%; /* = 18 px */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

/* Colonne centrale : pleine largeur sur téléphone,
   limitée en largeur sur ordinateur */
.page {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ---------- En-tête ---------- */
.entete {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.entete__icone {
  border-radius: 0.75rem;
  flex-shrink: 0;
}

h1 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.2;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.05rem;
}

.entete__intro {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

/* ---------- Cartes (les grands blocs de la page) ---------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 1rem;
  padding: 1rem;
}

.carte > p {
  margin: 0 0 0.75rem;
}

.petit {
  font-size: 0.9rem;
  color: var(--texte-doux);
}

.gras {
  font-weight: 700;
}

/* ---------- Barres de progression ---------- */
progress {
  width: 100%;
  height: 1.25rem;
  accent-color: var(--accent);
}

.progression {
  margin-bottom: 0.75rem;
}

.progression p,
#zone-traitement p {
  margin: 0.4rem 0;
}

/* ---------- Messages (info, succès, erreur) ---------- */
.message {
  margin: 0.75rem 0 0;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--info-fond);
  color: var(--info-texte);
}

.message[data-type="erreur"] {
  background: var(--erreur-fond);
  color: var(--erreur-texte);
}

.message[data-type="succes"] {
  background: var(--succes-fond);
  color: var(--succes-texte);
}

/* ---------- Formulaires ---------- */
.etiquette {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.liste-deroulante {
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  border: 2px solid var(--bordure);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
}

fieldset {
  border: 1px solid var(--bordure);
  border-radius: 0.75rem;
  margin: 1rem 0 0.5rem;
  padding: 0.5rem 0.75rem;
}

legend {
  font-weight: 700;
  padding: 0 0.25rem;
}

.choix {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
}

.choix + .choix {
  border-top: 1px solid var(--bordure);
}

.choix input {
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.choix label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Section Réglages repliable */
.reglages summary {
  cursor: pointer;
  list-style-position: inside;
  min-height: 2.5rem;
}

.reglages summary h2 {
  display: inline;
  margin: 0;
}

/* Lien de la section « À propos » (à la fin des Réglages) : même couleur que
   le texte autour, juste souligné ; une adresse trop longue pour un petit
   écran passe à la ligne au lieu de déborder. */
.a-propos-lien a {
  color: inherit;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* ---------- Enregistrement ---------- */
.chrono {
  font-size: 1.2rem;
  margin: 0 0 1rem;
}

.chrono strong {
  font-variant-numeric: tabular-nums; /* chiffres de largeur fixe : le texte ne bouge pas */
  font-size: 1.5rem;
}

.point-rouge {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--enregistrement);
}

/* ---------- Texte transcrit ---------- */
.texte-transcrit {
  max-height: 60vh;
  overflow-y: auto;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bordure);
  border-radius: 0.5rem;
  background: var(--fond);
}

.texte-transcrit p {
  margin: 0.5rem 0;
}

.texte-transcrit time {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}

/* ---------- Interrupteur « Reconnaître les intervenants » ---------- */
.interrupteur {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.interrupteur label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  cursor: pointer;
}

/* La case à cocher prend l'apparence d'un interrupteur (rail + bouton rond) */
.interrupteur input {
  appearance: none;
  flex-shrink: 0;
  width: 3.2rem;
  height: 1.9rem;
  margin: 0;
  border: 2px solid var(--bordure);
  border-radius: 1rem;
  background: var(--fond);
  position: relative;
  cursor: pointer;
}

.interrupteur input::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--texte-doux);
}

.interrupteur input:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.interrupteur input:checked::before {
  left: auto;
  right: 0.2rem;
  background: var(--accent-texte);
}

.interrupteur input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.zone-intervenants {
  margin: 0 0 1rem;
  padding: 0.75rem;
  border: 1px dashed var(--bordure);
  border-radius: 0.75rem;
}

.zone-intervenants p {
  margin: 0 0 0.6rem;
}

.zone-intervenants progress {
  margin-bottom: 0.6rem;
}

/* ---------- Blocs par intervenant ---------- */
.bloc-voix {
  border-left: 0.35rem solid var(--couleur-voix, var(--accent));
  padding: 0.1rem 0 0.1rem 0.75rem;
  margin: 0.75rem 0;
}

.bloc-voix__nom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.pastille {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--couleur-voix, var(--accent));
  flex-shrink: 0;
}

/* ---------- Liste des intervenants (renommer, corriger) ---------- */
.legende-voix {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--bordure);
  border-radius: 0.75rem;
}

.legende-voix__titre {
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.legende-voix ul {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.legende-voix li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-left: 0.35rem solid var(--couleur-voix, var(--accent));
  padding-left: 0.6rem;
  margin-bottom: 0.35rem;
}

.legende-voix__nom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.legende-voix .bouton {
  width: auto;
}

.legende-voix > .bouton {
  width: 100%;
}

.legende-voix > p.petit {
  margin: 0.5rem 0 0;
}

/* Une phrase en mode « Corriger qui parle » */
.ligne-corrigible {
  border-left: 0.35rem solid var(--couleur-voix, var(--accent));
  padding: 0.4rem 0 0.4rem 0.75rem;
  margin: 0.5rem 0;
}

.ligne-corrigible p {
  margin: 0.25rem 0 0;
}

.liste-deroulante--petite {
  min-height: 2.75rem;
  margin-bottom: 0;
  padding: 0.3rem 0.5rem;
  font-weight: 600;
}

/* ---------- Mode JDR : capture en direct ---------- */
.zone-capture {
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px dashed var(--bordure);
  border-radius: 0.75rem;
}

.zone-capture > div > p,
.zone-capture > p {
  margin: 0 0 0.75rem;
}

.champ-texte {
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  border: 2px solid var(--bordure);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
}

.champ-texte:focus-visible,
.liste-deroulante:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.etapes {
  margin: 0 0 0.75rem;
  padding-left: 1.4rem;
}

.etapes li {
  margin-bottom: 0.4rem;
}

/* Encadrés repliables « Conseils » et « Limites » */
.conseils {
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bordure);
  border-radius: 0.75rem;
  background: var(--fond);
}

.conseils summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.4rem 0; /* zone facile à toucher (le triangle ▸ reste visible) */
}

.conseils summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.conseils h3 {
  margin: 0.75rem 0 0.25rem;
  font-size: 1rem;
}

.conseils ul {
  margin: 0.25rem 0 0.5rem;
  padding-left: 1.2rem;
}

.conseils li {
  margin-bottom: 0.4rem;
}

/* Indicateurs de niveau sonore (une barre par piste) */
.niveau {
  margin-bottom: 0.75rem;
}

.niveau label {
  display: block;
  font-weight: 600;
}

.niveau p {
  margin: 0.2rem 0 0;
}

.niveau__barre {
  height: 1.5rem;
}

/* Fenêtre de consentement */
.fenetre {
  max-width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 1rem;
  border: 2px solid var(--accent);
  border-radius: 1rem;
  background: var(--surface);
  color: var(--texte);
}

.fenetre::backdrop {
  background: rgb(0 0 0 / 0.6);
}

.fenetre ul {
  padding-left: 1.2rem;
}

.fenetre li {
  margin-bottom: 0.4rem;
}

.fenetre .choix {
  margin: 0.75rem 0 1rem;
  padding: 0.6rem;
  border: 1px solid var(--bordure);
  border-radius: 0.5rem;
}

/* ---------- Historique ---------- */
.liste-historique {
  list-style: none;
  margin: 0;
  padding: 0;
}

.element-historique {
  padding: 0.75rem 0;
}

.element-historique + .element-historique {
  border-top: 1px solid var(--bordure);
}

.element-historique p {
  margin: 0 0 0.25rem;
}

.element-historique__titre {
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ---------- Boutons ---------- */
.installation {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bouton {
  /* Gros boutons, faciles à toucher avec le pouce */
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--accent);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

.bouton--principal {
  background: var(--accent);
  color: var(--accent-texte);
}

.bouton--secondaire {
  border-style: dashed;
}

.bouton--discret {
  border-color: var(--bordure);
  font-weight: 500;
}

.boutons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Petits boutons côte à côte (toujours au moins 44 px de haut) */
.boutons--ligne {
  flex-direction: row;
  flex-wrap: wrap;
}

.boutons--ligne .bouton {
  width: auto;
  flex: 1 1 auto;
}

.bouton--petit {
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  font-size: 1rem;
}

/* Contour bien visible quand le bouton est sélectionné au clavier */
.bouton:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Bouton désactivé : grisé, mais le texte reste lisible */
.bouton:disabled {
  cursor: not-allowed;
  background: var(--surface);
  color: var(--texte-doux);
  border-color: var(--bordure);
  border-style: solid;
}

.note {
  margin: 0;
  text-align: center;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

/* ---------- Pied de page ---------- */
.pied {
  margin-top: auto; /* pousse le pied de page en bas de l'écran */
  text-align: center;
  color: var(--texte-doux);
  font-size: 0.9rem;
}

.pied p {
  margin: 0;
}

/* Respecte le réglage « réduire les animations » du téléphone */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Note d'installation (section À propos) : inutile une fois l'application
   installée, puisqu'elle s'ouvre alors dans sa propre fenêtre (mode
   d'affichage autre que « browser », celui d'un onglet de navigateur). */
@media not all and (display-mode: browser) {
  .note-installation { display: none; }
}