/* styles.css — interface du service de transcription JADIS.
   Direction : sobre et fonctionnel. Mobile d'abord (téléphone tenu à une main).
   Palette neutre + un bleu calme pour l'action, un ambre VOYANT pour le garde-fou.
   Cibles tactiles >= 44 px ; saisies à 16 px (sinon iOS zoome au focus). */

:root {
  --fond:        #f4f5f7;
  --carte:       #ffffff;
  --bord:        #d8dce2;
  --texte:       #1c2530;
  --texte-doux:  #5a6675;
  --texte-faible:#8a95a3;

  --accent:      #1f5fa8;   /* bleu action */
  --accent-fort: #17457c;
  --accent-doux: #e8f0fa;

  --ok:          #15803d;   /* pastille couverture OK, discrète */
  --ok-fond:     #e7f4ec;

  --alerte:      #b45309;   /* garde-fou : ambre VOYANT */
  --alerte-fort: #92400e;
  --alerte-fond: #fef3c7;
  --alerte-bord: #f59e0b;

  --err:         #b91c1c;   /* erreurs */
  --err-fond:    #fdecea;

  /* Jauge de fiabilité : l'arc rouge VIF (gauche) → orange → vert VIF (droite). */
  --jauge-rouge:  #e01b1b;
  --jauge-orange: #f59e0b;
  --jauge-vert:   #16a34a;

  --rayon:       12px;
  --rayon-pt:    8px;
  --ombre:       0 1px 3px rgba(20, 30, 45, .10), 0 1px 2px rgba(20, 30, 45, .06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond:        #14181d;
    --carte:       #1d232b;
    --bord:        #333c47;
    --texte:       #e7ebf0;
    --texte-doux:  #a9b4c0;
    --texte-faible:#7c8794;
    --accent:      #4f97e6;
    --accent-fort: #6aa8ee;
    --accent-doux: #1b2c40;
    --ok:          #4ade80;
    --ok-fond:     #16281d;
    --alerte:      #fbbf24;
    --alerte-fort: #fcd34d;
    --alerte-fond: #3a2c0c;
    --alerte-bord: #b8860b;
    --err:         #f87171;
    --err-fond:    #341a1a;
    --jauge-rouge:  #f2555a;   /* un peu plus clair pour rester VIF sur fond sombre */
    --jauge-orange: #fbbf24;
    --jauge-vert:   #34d27a;
    --ombre:       0 1px 3px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

/* ── En-tête + navigation ────────────────────────────────────────────────── */

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--carte);
  border-bottom: 1px solid var(--bord);
  padding: env(safe-area-inset-top) 16px 0;
}

.app-header__titre {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 0 10px;
}
.app-header__marque { font-weight: 700; letter-spacing: .04em; }
.app-header__sous  { color: var(--texte-faible); font-size: .82rem; }

.nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.nav__btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--rayon-pt);
  background: transparent;
  color: var(--texte-doux);
  font-size: .92rem;
  font-family: inherit;
  cursor: pointer;
}
.nav__btn:hover { background: var(--fond); }
.nav__btn.est-actif {
  background: var(--accent-doux);
  color: var(--accent-fort);
  font-weight: 600;
}
.nav__btn--sortie { margin-left: auto; color: var(--texte-faible); }

/* ── Zone principale ─────────────────────────────────────────────────────── */

.app-main {
  max-width: 620px;
  margin: 0 auto;
  padding: 16px 16px calc(32px + env(safe-area-inset-bottom));
}

.vue[hidden] { display: none; }

/* ── Cartes / formulaires ────────────────────────────────────────────────── */

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 20px 18px;
}
.carte__titre { margin: 0 0 4px; font-size: 1.25rem; }
.carte__titre--nu { margin: 0; }
.carte__soustitre { margin: 16px 0 8px; font-size: 1rem; color: var(--texte-doux); }
.carte__aide { margin: 0 0 16px; color: var(--texte-doux); font-size: .9rem; }

/* ── Champs de saisie ────────────────────────────────────────────────────── */

.champ { display: block; margin-bottom: 16px; }
.champ__label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }
.champ__note  { display: block; color: var(--texte-faible); font-size: .82rem; margin-bottom: 6px; }
.champ__saisie {
  width: 100%;
  font: inherit;
  font-size: 16px;               /* pas de zoom iOS */
  color: var(--texte);
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-pt);
  padding: 12px;
  min-height: 46px;
}
.champ__saisie:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-doux);
}
.champ__zone { resize: vertical; min-height: 84px; line-height: 1.45; }
select.champ__saisie { appearance: none; -webkit-appearance: none; }

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-pt);
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--fond); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--bloc { width: 100%; margin-top: 4px; }

.btn--principal {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--principal:hover { background: var(--accent-fort); border-color: var(--accent-fort); }

.btn--secondaire {
  background: var(--carte);
  border-color: var(--accent);
  color: var(--accent-fort);
}
.btn--discret {
  background: transparent;
  border-color: var(--bord);
  color: var(--texte-doux);
  font-weight: 500;
  min-height: 40px;
  font-size: .88rem;
}
.btn--danger { border-color: transparent; color: var(--err); background: transparent; font-weight: 500; }
.btn--danger:hover { background: var(--err-fond); }
.btn--petit { min-height: 38px; padding: 6px 12px; font-size: .86rem; }
/* « + » qui déplie brut + JSON : petit, carré, discret. */
.btn--plus {
  min-width: 38px;
  padding: 6px 10px;
  border-color: var(--bord);
  color: var(--texte-doux);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

/* ── Messages ────────────────────────────────────────────────────────────── */

.message { margin: 4px 0 12px; padding: 10px 12px; border-radius: var(--rayon-pt); font-size: .9rem; }
.message[hidden] { display: none; }
.message--erreur { background: var(--err-fond); color: var(--err); border: 1px solid var(--err); }
.message--ok     { background: var(--ok-fond); color: var(--ok); border: 1px solid var(--ok); }

.flash {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0;
  padding: 10px 16px;
  background: var(--err);       /* défaut : erreur (rouge) */
  color: #fff;
  font-size: .9rem;
  text-align: center;
}
.flash[hidden] { display: none; }
/* Succès en VERT : un dépôt de plusieurs Go confirmé par un bandeau rouge ferait conclure à
   l'échec, et re-déposer (seconde transcription facturée + nouvelle montée). */
.flash--ok  { background: var(--ok); }
.flash--err { background: var(--err); }

/* ── Zone de dépôt ───────────────────────────────────────────────────────── */

.depot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 28px 16px;
  margin-bottom: 8px;
  border: 2px dashed var(--bord);
  border-radius: var(--rayon);
  background: var(--fond);
  cursor: pointer;
}
.depot:focus-visible,
.depot.survol { border-color: var(--accent); background: var(--accent-doux); outline: none; }
.depot__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.depot__icone { font-size: 1.8rem; color: var(--accent); line-height: 1; }
.depot__consigne { font-weight: 600; }
.depot__format { color: var(--texte-faible); font-size: .82rem; }
.depot__choisi {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: var(--rayon-pt);
  background: var(--accent-doux);
  color: var(--accent-fort);
  font-size: .9rem;
  word-break: break-all;
}
.depot__choisi[hidden] { display: none; }

/* ── Progression d'upload ────────────────────────────────────────────────── */

.progres { margin: 4px 0 16px; }
.progres[hidden] { display: none; }
.progres__barre {
  height: 12px;
  border-radius: 999px;
  background: var(--bord);
  overflow: hidden;
}
.progres__jauge {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .15s linear;
}
.progres__txt { margin: 6px 0 0; font-size: .85rem; color: var(--texte-doux); }
#depot-annuler { margin-top: 10px; }

/* ── Liste des jobs ──────────────────────────────────────────────────────── */

.liste-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.etat-vide { color: var(--texte-doux); text-align: center; padding: 40px 12px; }
.etat-vide[hidden] { display: none; }

.jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.job {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 14px 14px 12px;
}
.job__haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.job__nom { font-weight: 600; word-break: break-word; }
.job__meta { color: var(--texte-faible); font-size: .8rem; margin-top: 2px; }

.job__statut {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.job__statut--cours   { background: var(--accent-doux); color: var(--accent-fort); }
.job__statut--termine { background: var(--ok-fond); color: var(--ok); }
.job__statut--erreur  { background: var(--err-fond); color: var(--err); }
.job__statut .puce { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.job__statut--cours .puce { animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.job__erreur {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--rayon-pt);
  background: var(--err-fond);
  color: var(--err);
  font-size: .88rem;
}

/* ── Garde-fou : bandeau VOYANT (contrainte 5) ───────────────────────────── */

.couverture-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: .8rem;
  color: var(--ok);
}
.couverture-ok .puce { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

.couverture-alerte {
  margin-top: 12px;
  border: 2px solid var(--alerte-bord);
  border-left-width: 6px;
  border-radius: var(--rayon-pt);
  background: var(--alerte-fond);
  padding: 12px 14px;
}
.couverture-alerte__tete {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--alerte-fort);
  font-size: .95rem;
}
.couverture-alerte__icone { font-size: 1.15rem; line-height: 1; }
.couverture-alerte__detail { margin: 8px 0 0; color: var(--alerte-fort); font-size: .9rem; }
.couverture-alerte__listes { margin: 8px 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--alerte-fort); }
.couverture-alerte__listes li { margin-top: 4px; }
.couverture-alerte__listes .cle { font-weight: 600; }
.couverture-alerte__lien {
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
  color: var(--alerte-fort);
  text-decoration: underline;
}

/* ── Fiabilité : coin (statut + alerte) et détail replié ─────────────────────
   Fini la grosse jauge à aiguille. Un job fiable n'affiche que « Terminé » ; sous 75, une
   pastille ⚠ compacte se glisse à côté du statut, et le détail se déplie à la demande. */

/* Le coin empile la pastille de statut et l'alerte, alignées à droite (mobile d'abord). */
.job__coin {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.job__alerte {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.job__alerte-icone { font-size: .95em; line-height: 1; }
.job__alerte--orange {
  background: var(--alerte-fond);
  color: var(--alerte-fort);
  border: 1px solid var(--alerte-bord);
}
.job__alerte--rouge {
  background: var(--err-fond);
  color: var(--err);
  border: 1px solid var(--err);
}

/* Détail de couverture : discret, sous l'en-tête, uniquement quand il y a une alerte. */
.job__detail-fiab { margin-top: 10px; }
.job__detail-resume {
  cursor: pointer;
  list-style: none;
  font-size: .82rem;
  font-weight: 600;
  color: var(--texte-doux);
  padding: 4px 0;
}
.job__detail-resume::-webkit-details-marker { display: none; }
.job__detail-resume::after { content: " ▾"; font-size: .75em; }
.job__detail-fiab[open] .job__detail-resume::after { content: " ▴"; }
.job__detail-contenu {
  margin-top: 6px;
  border-top: 1px solid var(--bord);
  padding-top: 8px;
}

/* ── Actions & téléchargements d'un job ──────────────────────────────────── */

.job__fichiers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Volet des fichiers secondaires (brut + JSON), déplié par le « + ». Sous la rangée. */
.job__fichiers-volet { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.job__fichiers-volet[hidden] { display: none; }
.job__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bord);
}
.job__actions .pousse { margin-left: auto; }

/* ── État de la clé (réglages) ───────────────────────────────────────────── */

.etat-cle { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.etat-cle__label { color: var(--texte-doux); }
.etat-cle__valeur { font-weight: 600; }
.etat-cle__valeur.est-ok { color: var(--ok); }
.etat-cle__valeur.est-absente { color: var(--err); }

/* ── Écran large : on aère, sans changer le fond de l'ergonomie mobile ───── */

@media (min-width: 560px) {
  .carte { padding: 24px; }
  .app-header__sous { font-size: .9rem; }
}