/* Orateur — refonte visuelle
   Valeurs issues de la maquette Orateur.dc.html. Aucune dépendance. */

:root {
  --fond: #0d1117;
  --surface: #161b22;
  --surface-haute: #1c2230;
  --bord: #2a3140;
  --texte: #e6edf3;
  --texte-faible: #8b949e;
  --accent: #4c8dff;
  --vert: #3fb950;
  --orange: #d29922;
  --rouge: #f85149;

  --rayon: 14px;
  --police: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

#app { max-width: 430px; margin: 0 auto; padding: 22px 18px 46px; }

section { display: flex; flex-direction: column; gap: 24px; }

/* Sans cette règle, `display: flex` ci-dessus écrase l'attribut `hidden`
   et tous les écrans s'affichent simultanément.
   Même cause pour .champ et .actions, qui sont aussi masqués par `hidden`. */
section[hidden],
.champ[hidden],
.actions[hidden],
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 0; }

/* ---------------------------------------------------------------- Texte */

h1, h2 {
  margin: 0;
  font: 600 28px/1.15 var(--police);
  letter-spacing: -.5px;
}

/* Titres de section du rapport */
h3 {
  margin: 0;
  font: 400 15px/1.2 var(--police);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--texte-faible);
}

/* Libellés de formulaire, légèrement plus discrets */
label {
  display: block;
  margin: 0;
  font: 400 13px/1.2 var(--police);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--texte-faible);
}

.aide {
  margin: 0;
  font: 400 13px/1.45 var(--police);
  color: var(--texte-faible);
  text-wrap: pretty;
}
.aide.ok { color: var(--vert); }
.aide.echec { color: var(--orange); }

.etiquette {
  margin: 0;
  font: 400 13px/1.2 var(--police);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--texte-faible);
}

/* Regroupe un libellé et son contrôle */
.champ { display: flex; flex-direction: column; gap: 8px; }

/* ---------------------------------------------------------- Segmentés */

.segmente {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 5px;
}

.segmente button {
  min-height: 44px;
  padding: 11px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--texte-faible);
  font: 400 15px/1 var(--police);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.segmente button.actif {
  background: var(--surface-haute);
  color: var(--texte);
  font-weight: 600;
}

/* ------------------------------------------------------- Cartes de mode */

.cartes { display: grid; gap: 10px; }

.carte-mode {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 15px 16px;
  border-radius: var(--rayon);
  background: var(--surface);
  border: 1px solid var(--bord);
  color: var(--texte);
  font-family: var(--police);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.carte-mode.actif { background: var(--surface-haute); border-color: var(--accent); }
.carte-mode b { font: 600 16px/1.25 var(--police); }
.carte-mode span { font: 400 13px/1.45 var(--police); color: var(--texte-faible); text-wrap: pretty; }
.carte-mode .meta { font: 400 12px/1.2 var(--police); color: var(--accent); padding-top: 3px; }

/* ------------------------------------------------------------- Champs */

select,
textarea,
input[type="url"] {
  appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 13px 14px;
  background: var(--surface);
  color: var(--texte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  font: 400 16px/1.3 var(--police);
}

textarea { resize: none; line-height: 1.45; }
select:focus, textarea:focus, input:focus { outline: 1px solid var(--accent); }

/* ------------------------------------------------------------ Boutons */

button.primaire,
button.secondaire {
  width: 100%;
  min-height: 44px;
  padding: 16px;
  border-radius: var(--rayon);
  border: 0;
  font: 600 17px/1.2 var(--police);
  cursor: pointer;
}

button.primaire { background: var(--accent); color: #fff; }
button.secondaire { background: var(--surface); color: var(--texte); border: 1px solid var(--bord); }

button.lien {
  width: 100%;
  min-height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  color: var(--texte-faible);
  font: 400 15px/1.2 var(--police);
  cursor: pointer;
}

.actions { display: flex; flex-direction: column; gap: 12px; }

/* ----------------------------------------------------------- Exercice */

.entete-exercice { display: flex; gap: 8px; }

.badge {
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: 600 12px/1.2 var(--police);
}
.badge.secondaire { background: var(--surface-haute); color: var(--texte-faible); }

blockquote {
  margin: 0;
  padding: 15px 17px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  font: 400 16px/1.6 var(--police);
  text-wrap: pretty;
}

.objectif { margin: 0; font: 400 14px/1.55 var(--police); color: var(--texte-faible); text-wrap: pretty; }

#contexte-bloc { display: flex; flex-direction: column; gap: 10px; }

#fil { display: flex; flex-direction: column; gap: 12px; }

.bulle {
  max-width: 88%;
  padding: 13px 16px;
  font: 400 15px/1.5 var(--police);
  text-wrap: pretty;
}

.bulle.interlocuteur {
  background: var(--surface-haute);
  border: 1px solid var(--bord);
  border-radius: 16px 16px 16px 5px;
}

.bulle.orateur {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  border-radius: 16px 16px 5px 16px;
}

/* ------------------------------------------------------ Enregistrement */

/* Plein écran : la scène occupe toute la hauteur visible */
#ecran-enregistrement { min-height: 100dvh; justify-content: center; }

.scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex: 1;
  padding: 10px 0 30px;
}

#chrono {
  font: 200 76px/1 var(--police);
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
}
#chrono.valide { color: var(--vert); }
#chrono.depasse { color: var(--orange); }
#chrono.critique { color: var(--rouge); }
/* Phase de préparation : couleur d'accent, pour distinguer du temps de parole */
#chrono.prepa { color: var(--accent); }

#restant { text-align: center; }

/* Le halo vit derrière le bouton et réagit au niveau sonore.
   Il doit être nettement plus grand que le bouton (104 px) pour être visible :
   à l'échelle 1 il fait déjà 150 px, soit un anneau de 23 px tout autour. */
.micro-zone {
  position: relative;
  display: grid;
  place-items: center;
  width: 300px;
  height: 300px;
}

.halo {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(248, 81, 73, .38) 0%,
              rgba(248, 81, 73, .38) 62%,
              rgba(248, 81, 73, .12) 82%,
              rgba(248, 81, 73, 0) 100%);
  transform: scale(1);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  will-change: transform;
}
.halo.actif { opacity: 1; }

.micro {
  position: relative;
  z-index: 1;
  width: 104px;
  height: 104px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: background .2s, transform .1s;
}
.micro:active { transform: scale(.95); }
.micro:disabled { opacity: .45; cursor: default; }

.micro::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  border-radius: 9px;
  background: #fff;
}

.micro.enregistre { background: var(--rouge); }
.micro.enregistre::after { width: 30px; height: 30px; border-radius: 5px; }

#actions-rec { width: 100%; padding-top: 8px; }

/* -------------------------------------------------------------- Attente */

#ecran-attente {
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 70dvh;
}

.spinner {
  width: 42px; height: 42px;
  border: 3px solid var(--bord);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: orbspin .9s linear infinite;
}
@keyframes orbspin { to { transform: rotate(360deg); } }

#etat-attente { margin: 0; font: 400 15px/1.2 var(--police); color: var(--texte-faible); }

/* -------------------------------------------------------------- Rapport */

#rapport { display: flex; flex-direction: column; gap: 28px; }

.bloc { display: flex; flex-direction: column; gap: 10px; }

.score-global {
  font: 200 66px/1.05 var(--police);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.score-legende {
  margin: 2px 0 0;
  font: 400 13px/1.4 var(--police);
  color: var(--texte-faible);
  text-align: center;
}

.groupes-barres { display: flex; flex-direction: column; gap: 24px; }
.groupe-barres { display: flex; flex-direction: column; gap: 11px; }

.jauge {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 14px/1.3 var(--police);
}

/* 124px : nécessaire pour « Traitement de l'objection » sur une seule ligne */
.jauge > span { flex: 0 0 124px; color: var(--texte-faible); }

.barre {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: var(--surface-haute);
  overflow: hidden;
}
.barre > div { height: 100%; border-radius: 4px; transition: width .5s ease; }

.jauge > b {
  flex: 0 0 34px;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.barre > div.bas   { background: var(--rouge); }
.barre > div.moyen { background: var(--orange); }
.barre > div.haut  { background: var(--vert); }

.jauge > b.bas   { color: var(--rouge); }
.jauge > b.moyen { color: var(--orange); }
.jauge > b.haut  { color: var(--vert); }

.encadre {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 17px;
  background: rgba(76, 141, 255, .09);
  border: 1px solid rgba(76, 141, 255, .28);
  border-radius: var(--rayon);
}

.encadre b {
  font: 600 12px/1.2 var(--police);
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--accent);
}

.encadre p { margin: 0; font: 400 16px/1.6 var(--police); text-wrap: pretty; }
.encadre.secondaire p { font-size: 15px; }

.texte-simple { margin: 0; font: 400 15px/1.6 var(--police); text-wrap: pretty; }

/* Cartes de phase */

.phase {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border-left: 3px solid var(--bord);
  border-radius: var(--rayon);
}
.phase.ok { border-left-color: var(--vert); }
.phase.moyen { border-left-color: var(--orange); }
.phase.faible { border-left-color: var(--rouge); }
.phase.manque { border-left-color: var(--rouge); }

.phase-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font: 400 14px/1.3 var(--police);
}
.phase-tete b { font-weight: 600; text-transform: capitalize; }
.phase-tete span { font-size: 13px; color: var(--texte-faible); font-variant-numeric: tabular-nums; }

.phase q {
  font: italic 400 13px/1.5 var(--police);
  color: var(--texte-faible);
  text-wrap: pretty;
}
.phase q::before, .phase q::after { content: ""; }

.phase p { margin: 0; font: 400 14px/1.5 var(--police); text-wrap: pretty; }

/* Bloc Grammaire : une carte par faute relevée */

.faute {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 15px;
  margin-top: 8px;
  background: var(--surface);
  border-left: 3px solid var(--orange);
  border-radius: var(--rayon);
}

.faute-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.faute-tete q {
  font: italic 400 14px/1.45 var(--police);
  color: var(--texte-faible);
  text-wrap: pretty;
}
.faute-tete q::before, .faute-tete q::after { content: ""; }

.faute-tete span {
  flex: 0 0 auto;
  font: 400 11px/1.2 var(--police);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--texte-faible);
}

.faute .correction {
  margin: 0;
  font: 600 15px/1.4 var(--police);
  color: var(--vert);
}

.faute p { margin: 0; font: 400 13px/1.5 var(--police); text-wrap: pretty; }

/* Bloc Forme : une mesure par ligne, avec son détail */

.ligne-forme {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--bord);
}
.ligne-forme:last-child { border-bottom: 0; padding-bottom: 0; }

.ligne-forme > span {
  font: 400 14px/1.3 var(--police);
  color: var(--texte-faible);
}

.ligne-forme > b {
  font: 600 19px/1 var(--police);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ligne-forme > em {
  grid-column: 1 / -1;
  font: italic 400 13px/1.45 var(--police);
  color: var(--texte-faible);
  text-wrap: pretty;
}

/* Listes à puces */

.liste-simple {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.liste-simple li {
  position: relative;
  padding-left: 14px;
  font: 400 14px/1.7 var(--police);
  text-wrap: pretty;
}

.liste-simple li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--bord);
}

.liste-simple.forts li::before { background: var(--vert); }
.liste-simple.ameliorer li::before { background: var(--orange); }

/* Transcription repliable */

details {
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--rayon);
}

details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  font: 400 14px/1.2 var(--police);
  color: var(--texte-faible);
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "Afficher"; color: var(--accent); }
details[open] summary::after { content: "Masquer"; }

details p {
  margin: 12px 0 0;
  font: 400 14px/1.6 var(--police);
  color: var(--texte-faible);
  text-wrap: pretty;
}

/* ---------------------------------------------------------- Progression */

#courbe svg { display: block; width: 100%; height: 200px; }

#liste-historique { display: flex; flex-direction: column; gap: 8px; }

.ligne-histo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  background: var(--surface);
  border-radius: var(--rayon);
}

.ligne-histo .gauche { display: flex; flex-direction: column; gap: 3px; }
.ligne-histo .titre { font: 600 14px/1.3 var(--police); }
.ligne-histo .date { font: 400 12px/1.3 var(--police); color: var(--texte-faible); }

.ligne-histo .note {
  font: 300 21px/1 var(--police);
  font-variant-numeric: tabular-nums;
}
.ligne-histo .note.bas   { color: var(--rouge); }
.ligne-histo .note.moyen { color: var(--orange); }
.ligne-histo .note.haut  { color: var(--vert); }