:root {
  --fond: #f4f5f7;
  --surface: #ffffff;
  --bord: #e2e5ea;
  --texte: #1c2330;
  --doux: #687385;
  --accent: #2d5bd7;
  --accent-fonce: #2148b0;
  --danger: #c23b3b;
  --ok: #1f8a4c;
  --rayon: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte); background: var(--fond);
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0 0 10px; font-weight: 600; }
h2 { font-size: 18px; } h3 { font-size: 14px; }
code { background: #eef0f4; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.aide { color: var(--doux); font-size: 12px; font-weight: 400; }
.erreur { color: var(--danger); min-height: 1em; }
.etat { color: var(--doux); font-size: 13px; margin: 0; min-height: 18px; }
.etat.erreur { color: var(--danger); }
.etat.ok { color: var(--ok); }

/* boutons et champs */
.btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  border: 1px solid var(--bord); background: var(--surface); color: var(--texte);
  padding: 7px 12px; border-radius: var(--rayon); cursor: pointer; font: inherit;
}
.btn:hover { border-color: #c5cad3; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.principal:hover { background: var(--accent-fonce); }
.btn.discret { border-color: transparent; background: transparent; color: var(--doux); }
.btn.danger { color: var(--danger); }
.btn.petit { padding: 4px 8px; font-size: 12px; }
.btn.icone { padding: 5px 8px; }
.btn.plein { width: 100%; justify-content: center; }
input, select, textarea {
  font: inherit; color: inherit; border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 7px 9px; background: var(--surface);
}
input:focus, select:focus, textarea:focus { outline: 2px solid #c9d6f7; border-color: var(--accent); }
.titre { font-size: 16px; font-weight: 600; border-color: transparent; background: transparent; min-width: 220px; }
.titre:hover { border-color: var(--bord); }
.ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.separateur { flex: 1; }
.champ-ligne { display: inline-flex; align-items: center; gap: 7px; color: var(--doux); }

/* connexion */
.connexion { min-height: 100%; display: grid; place-items: center; }
.carte-connexion {
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 28px; width: 340px; display: grid; gap: 14px;
}
.carte-connexion label { display: grid; gap: 6px; }
.carte-connexion h1 { font-size: 19px; }

/* structure */
#appli { height: 100%; display: flex; flex-direction: column; }
.barre {
  display: flex; align-items: center; gap: 18px; padding: 0 16px; height: 50px;
  background: var(--surface); border-bottom: 1px solid var(--bord); flex: none;
}
.marque { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.marque i { color: var(--accent); }
.barre nav { display: flex; gap: 2px; flex: 1; }
.onglet {
  border: 0; background: none; font: inherit; color: var(--doux); cursor: pointer;
  padding: 8px 12px; border-radius: var(--rayon); display: inline-flex; gap: 7px; align-items: center;
}
.onglet:hover { color: var(--texte); }
.onglet.actif { color: var(--accent); background: #edf1fc; }
.vue { flex: 1; display: flex; min-height: 0; }
.liste {
  width: 240px; flex: none; border-right: 1px solid var(--bord); background: var(--surface);
  padding: 12px; overflow: auto;
}
.liste ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.liste li {
  padding: 8px 10px; border-radius: var(--rayon); cursor: pointer;
  display: grid; gap: 1px;
}
.liste li:hover { background: var(--fond); }
.liste li.actif { background: #edf1fc; }
.liste li b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste li small { color: var(--doux); font-size: 12px; }
.vide { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--doux); }

/* éditeur de projet */
.editeur { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 12px 16px 14px; gap: 6px; }
.outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.colonnes {
  flex: 1; min-height: 0; display: grid; gap: 12px;
  grid-template-columns: minmax(280px, 1fr) minmax(380px, 1.35fr) 290px;
}
.colonnes > div {
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  display: flex; flex-direction: column; min-height: 0;
}
.entete-col {
  padding: 10px 12px; border-bottom: 1px solid var(--bord); font-weight: 600;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.entete-col .aide { margin-left: auto; }
.pied-col { padding: 6px 12px; border-top: 1px solid var(--bord); color: var(--doux); font-size: 12px; }
#p-texte {
  flex: 1; border: 0; border-radius: 0; resize: none; padding: 12px; font-size: 15px; line-height: 1.6;
}
#p-texte:focus { outline: none; }

#segments { list-style: none; margin: 0; padding: 6px; overflow: auto; flex: 1; counter-reset: seg; }
.seg {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 10px; align-items: start;
  padding: 8px; border-radius: var(--rayon); border: 1px solid transparent;
}
.seg:hover { background: #fafbfc; border-color: var(--bord); }
.seg.en-cours { background: #f2f5fd; }
.seg.lecture { border-color: var(--accent); background: #f2f5fd; }
.seg .num { color: var(--doux); font-size: 12px; padding-top: 2px; text-align: right; }
.seg .txt { font-size: 14px; }
.seg .txt.sans-prise { color: var(--doux); }
.seg .cmd { display: flex; gap: 4px; align-items: center; }
.seg .meta { grid-column: 2 / 4; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--doux); }
.seg .meta select { padding: 2px 4px; font-size: 12px; }
.seg .meta input { width: 62px; padding: 2px 5px; font-size: 12px; }
.seg .meta label { display: inline-flex; gap: 5px; align-items: center; }
.pastille { width: 8px; height: 8px; border-radius: 50%; background: #c8cdd6; display: inline-block; }
.pastille.ok { background: var(--ok); }

#reglages { padding: 10px 12px; overflow: auto; display: grid; gap: 12px; }
.reglage { display: grid; gap: 3px; }
.reglage .haut { display: flex; justify-content: space-between; font-weight: 500; }
.reglage output { color: var(--accent); font-variant-numeric: tabular-nums; }
.reglage input[type=range] { width: 100%; padding: 0; accent-color: var(--accent); }
.reglage .aide { line-height: 1.3; }
details.avance summary { cursor: pointer; color: var(--doux); font-weight: 500; }
details.avance[open] { display: grid; gap: 12px; }
.actions-reglages { padding: 0 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.col-reglages > .aide { padding: 8px 12px 12px; margin: 0; }

/* voix */
.panneau { flex: 1; padding: 18px 22px; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.conseils { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px 14px; }
.conseils p { margin: 0; }
.grille-form { display: grid; gap: 14px; grid-template-columns: 1fr 200px auto; align-items: end; }
.grille-form > label { display: grid; gap: 6px; }
.grille-form .case { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; }
.grille-form .sources, .grille-form > button, .grille-form > .etat { grid-column: 1 / -1; }
.grille-form > button { justify-self: start; }
.sources { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.source, .bloc { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px; display: grid; gap: 10px; align-content: start; }
blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--bord); color: #3c4555; font-size: 13px; }
.chrono { font-variant-numeric: tabular-nums; color: var(--doux); }
.chrono.actif { color: var(--danger); font-weight: 600; }
.petite-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.petite-liste li { display: flex; align-items: center; gap: 8px; }
.petite-liste audio { height: 32px; flex: 1; }
audio { width: 100%; max-width: 640px; }
.curseur { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 280px; }
.curseur input { flex: 1; accent-color: var(--accent); }
#vd-essai { width: 100%; resize: vertical; }

/* dictionnaire */
.panneau.large { max-width: none; }
.tableau { border-collapse: collapse; width: 100%; background: var(--surface); border: 1px solid var(--bord); }
.tableau th, .tableau td { padding: 6px 10px; border-bottom: 1px solid var(--bord); text-align: left; }
.tableau th { font-weight: 600; font-size: 12px; color: var(--doux); }
.tableau td input[type=text] { width: 100%; }

@media (max-width: 1150px) {
  .colonnes { grid-template-columns: 1fr 1fr; }
  .col-reglages { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .vue { flex-direction: column; }
  .liste { width: auto; border-right: 0; border-bottom: 1px solid var(--bord); max-height: 180px; }
  .colonnes { grid-template-columns: 1fr; }
  .grille-form, .sources { grid-template-columns: 1fr; }
}