/* ═══════════════════════════════════════════════════════════════════════════
   STUDIO AUDIO — feuille unique.

   TROIS PARTIS PRIS, et ils expliquent tout le reste.

   1. LES JETONS VIENNENT DE NETAIX. Ce produit est sorti du depot, pas de la
      marque : memes neutres, meme bleu d'action, meme echelle de rayons. Un
      utilisateur passe de l'un a l'autre sans changer de monde.

   2. DEUX THEMES, VRAIMENT. L'ancien Studio portait `#0d1115` EN DUR : il
      restait noir dans une application en theme clair. Ici chaque couleur
      passe par un jeton, redefini sous `[data-theme]` ET sous la preference
      systeme — les trois etats, pas deux.

   3. UNE SEULE TEINTE DE SIGNATURE. Le teal identifie le produit audio ; le
      bleu Netaix reste reserve a l'ACTION principale (regle de la charte).
      Deux accents qui se disputent la meme fonction, c'est du bruit.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Neutres — theme clair par defaut, comme la charte Netaix */
  --ground:        #F2F4F7;
  --frame:         #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F4F6F9;
  --surface-hover: #EAEEF3;
  --elevated:      #FFFFFF;
  --border:        #DDE3EA;
  --border-strong: #C3CCD6;

  --text-1: #12161B;
  --text-2: #5A6673;
  --text-3: #8A94A0;

  /* Action principale — bleu Netaix, inchange d'un produit a l'autre */
  --cta:       #2E7BF6;
  --cta-hover: #5596FF;
  --cta-fg:    #FFFFFF;
  --cta-rgb:   46,123,246;

  /* Signature du produit audio */
  --studio:       #0E9E93;
  --studio-vivid: #14B8A6;
  --studio-rgb:   14,158,147;
  --studio-dim:   rgba(14,158,147,0.10);

  --danger:  #D8323D;
  --warning: #B8860B;
  --success: #0A9D5C;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;

  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-2: 0 4px 12px rgba(16,24,40,.08), 0 12px 32px -8px rgba(16,24,40,.14);

  /* Echelle de niveaux — jamais de « 9999 » (regle du design system Netaix) */
  --z-content: 0;
  --z-sticky:  40;
  --z-modal:   500;
  --z-toast:   900;

  --rail-w: 76px;
}

/* Theme sombre : (a) preference systeme quand rien n'est impose, (b) choix
   explicite. Les deux redefinissent les MEMES jetons — aucune couleur n'a sa
   seule definition dans un de ces blocs. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:        #0B0E12;
    --frame:         #14181E;
    --surface:       #14181E;
    --surface-2:     #1B2027;
    --surface-hover: #232932;
    --elevated:      #1E242C;
    --border:        #2C333D;
    --border-strong: #3C444F;
    --text-1: #F2F5F8;
    --text-2: #A3ADB9;
    --text-3: #77828F;
    --studio-dim: rgba(20,184,166,0.14);
    --shadow-1: 0 1px 2px rgba(0,0,0,.40);
    --shadow-2: 0 4px 12px rgba(0,0,0,.36), 0 20px 48px -12px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --ground:        #0B0E12;
  --frame:         #14181E;
  --surface:       #14181E;
  --surface-2:     #1B2027;
  --surface-hover: #232932;
  --elevated:      #1E242C;
  --border:        #2C333D;
  --border-strong: #3C444F;
  --text-1: #F2F5F8;
  --text-2: #A3ADB9;
  --text-3: #77828F;
  --studio-dim: rgba(20,184,166,0.14);
  --shadow-1: 0 1px 2px rgba(0,0,0,.40);
  --shadow-2: 0 4px 12px rgba(0,0,0,.36), 0 20px 48px -12px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Fond EXPLICITE : sans lui la page emprunte celui de son hote et se
     retrouve en texte clair sur fond clair. */
  background: var(--ground);
  color: var(--text-1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
/* Sans cette regle, `x-cloak` n'est qu'un attribut decoratif et tout le
   contenu conditionnel clignote avant qu'Alpine ne demarre. Elle ne vaut
   QUE pour les elements masques par defaut : la poser par balayage ferait
   une page blanche le jour ou Alpine ne demarre pas. */
[x-cloak] { display: none !important; }

h1, h2, h3 { font-family: 'Montserrat', 'Inter', system-ui, sans-serif; text-wrap: balance; margin: 0; }

/* ═══ COQUILLE ══════════════════════════════════════════════════════════════
   Un rail, un en-tete, une surface de travail. La meme ossature que Netaix :
   l'utilisateur n'a pas a reapprendre ou regarder. */

.app { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; }

.rail {
  background: var(--frame);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0; gap: 6px;
  position: sticky; top: 0; height: 100vh;
  z-index: var(--z-sticky);
}
.rail__mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(145deg, var(--studio-vivid), var(--studio));
  display: grid; place-items: center; color: #fff;
  margin-bottom: 14px; flex-shrink: 0;
}
.rail__spacer { flex: 1; }

.rail-btn {
  width: 52px; height: 52px; border-radius: var(--radius);
  border: 1px solid transparent; background: transparent;
  color: var(--text-2); cursor: pointer;
  display: grid; place-items: center; gap: 3px;
  position: relative;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.rail-btn:hover { background: var(--surface-hover); color: var(--text-1); }
.rail-btn:active { transform: scale(.94); }
.rail-btn[aria-current="true"] { background: var(--studio-dim); color: var(--studio); }
/* Le liseré dit « vous etes ici » sans recourir a la couleur seule. */
/* Mesure a l'ecran : a `left: -14px` le lisere sortait du rail et se faisait
   rogner par le bord de la fenetre — on ne voyait qu'un filet. Il se pose
   maintenant DANS le rail. */
.rail-btn[aria-current="true"]::before {
  content: ""; position: absolute; left: -12px; top: 50%; translate: 0 -50%;
  width: 3px; height: 26px; border-radius: 0 3px 3px 0; background: var(--studio);
}
.rail { position: sticky; overflow: visible; }
.rail-btn__label { font-size: 9px; letter-spacing: .02em; }
.rail-btn:focus-visible, .btn:focus-visible, .chip:focus-visible {
  outline: 2px solid var(--cta); outline-offset: 2px;
}

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 28px; border-bottom: 1px solid var(--border);
  background: var(--frame); position: sticky; top: 0; z-index: var(--z-sticky);
}
.topbar__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
/* La PROMESSE, pas la fonction. « Transcription » dit ce que fait la machine ;
   « une reunion devient un compte rendu » dit ce que gagne l'utilisateur. */
.topbar__promise { font-size: 13px; color: var(--text-2); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.workspace { padding: 28px; max-width: 980px; width: 100%; margin: 0 auto; flex: 1; }

/* ═══ LES TROIS TEMPS ═══════════════════════════════════════════════════════
   Source → Onde → Resultat. Les quatre metiers suivent le MEME rythme : c'est
   la coherence d'usage, et elle vaut mieux que quatre ecrans astucieux. */

.beat { margin-bottom: 26px; }
.beat__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.beat__num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 10px; font-weight: 700; color: var(--text-2);
  display: inline-grid; place-items: center; flex-shrink: 0;
}
.beat__title { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-2); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-1);
}

/* Zone de depot : etat au repos, survol, et fichier accepte. */
.drop {
  /* `display: block` obligatoire : c'est un <label>, donc EN LIGNE par defaut,
     et sa bordure en tirets se fragmentait en morceaux detaches. Vu a l'ecran,
     pas deduit. */
  display: block;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  padding: 26px; text-align: center; color: var(--text-2);
  background: var(--surface-2); cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.drop:hover, .drop.is-over { border-color: var(--studio); background: var(--studio-dim); color: var(--text-1); }
.drop__hint { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }

.source-split { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 16px; align-items: center; }
.source-split__or { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 720px) {
  .source-split { grid-template-columns: 1fr; }
  .source-split__or { text-align: center; }
}

/* ═══ L'ONDE ════════════════════════════════════════════════════════════════
   UN SEUL objet visuel pour les quatre metiers, qui CHANGE D'ETAT au lieu
   d'etre remplace. C'est lui qui porte l'animation, et c'est ce qui fait que
   l'application semble repondre plutot que traiter.

   Quatre etats : au repos, a l'ecoute (barres pilotees par le micro), au
   travail (anneau qui tourne), termine. Chaque etat se lit AUSSI sans la
   couleur — forme et mouvement different. */

.wave {
  display: grid; place-items: center; gap: 14px;
  padding: 30px 20px; border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: background .3s ease, border-color .3s ease;
}
.wave[data-state="listening"] { background: var(--studio-dim); border-color: rgba(var(--studio-rgb), .35); }
.wave[data-state="working"]   { background: var(--surface-2); border-color: var(--border-strong); }
.wave[data-state="done"]      { background: rgba(10,157,92,.08); border-color: rgba(10,157,92,.30); }

.wave__disc {
  width: 108px; height: 108px; border-radius: 50%; position: relative;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-2); cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), color .2s ease, border-color .2s ease;
}
.wave__disc:hover { transform: scale(1.04); }
.wave__disc:active { transform: scale(.97); }
.wave[data-state="listening"] .wave__disc { color: var(--studio); border-color: var(--studio); }
.wave[data-state="done"] .wave__disc { color: var(--success); border-color: rgba(10,157,92,.45); }

/* Halo : il RESPIRE a l'ecoute, il TOURNE au travail. Deux mouvements
   distincts, donc deux etats distincts au premier coup d'oeil. */
.wave__disc::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid transparent; pointer-events: none;
}
.wave[data-state="listening"] .wave__disc::after {
  border-color: rgba(var(--studio-rgb), .35);
  animation: respire 2.4s ease-in-out infinite;
}
.wave[data-state="working"] .wave__disc::after {
  border-top-color: var(--studio); border-right-color: rgba(var(--studio-rgb), .25);
  animation: tourne .9s linear infinite;
}
@keyframes respire { 0%,100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.09); opacity: .25; } }
@keyframes tourne  { to { transform: rotate(360deg); } }

/* Les barres suivent le niveau REEL du micro (`--niveau`, pose par le JS).
   Une animation decorative mentirait sur ce que la machine entend. */
.wave__bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.wave__bar {
  width: 4px; border-radius: 2px; background: var(--studio);
  height: calc(6px + var(--niveau, 0) * 28px);
  transition: height .09s linear;
  opacity: .85;
}
.wave__bar:nth-child(2n)  { height: calc(5px + var(--niveau, 0) * 20px); }
.wave__bar:nth-child(3n)  { height: calc(4px + var(--niveau, 0) * 32px); }
/* Au repos, un niveau nul donnait des barres de 4 px : on lisait des POINTS,
   pas un egaliseur. Un plancher de 30 % dessine la forme sans pretendre que le
   micro entend quelque chose — l'opacite dit le repos. */
.wave[data-state="idle"] .wave__bar,
.wave[data-state="done"] .wave__bar { height: 11px; }
.wave[data-state="idle"] .wave__bar:nth-child(2n) { height: 17px; }
.wave[data-state="idle"] .wave__bar:nth-child(3n) { height: 8px; }
.wave[data-state="idle"] .wave__bars, .wave[data-state="done"] .wave__bars { opacity: .30; }

.wave__state { font-size: 14px; font-weight: 600; }
.wave__hint  { font-size: 12.5px; color: var(--text-2); }
.wave__timer { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-2); }

/* Respecter le reglage systeme : une animation ininterrompue peut etre
   douloureuse, et rien ici n'a besoin de bouger pour etre comprehensible. */
@media (prefers-reduced-motion: reduce) {
  .wave__disc::after, .wave__bar, .wave__disc { animation: none !important; transition: none !important; }
}

/* ═══ COMMANDES ═════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-1); font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.btn:hover { background: var(--surface-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--cta); border-color: var(--cta); color: var(--cta-fg); }
.btn--primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-hover); color: var(--text-1); }
.btn--danger { color: var(--danger); border-color: rgba(216,50,61,.35); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  cursor: pointer; transition: all .16s ease;
}
.chip[aria-pressed="true"] { background: var(--studio-dim); border-color: rgba(var(--studio-rgb),.4); color: var(--studio); }

.field { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-1);
  font: inherit; font-size: 14px; }
.field:focus { outline: 2px solid var(--cta); outline-offset: -1px; border-color: var(--cta); }
textarea.field { min-height: 150px; resize: vertical; line-height: 1.6; }

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.label { font-size: 12px; font-weight: 600; color: var(--text-2); }

/* ═══ RESULTAT ══════════════════════════════════════════════════════════════ */

.result { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.result__head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-2);
}
.result__body { padding: 16px 18px; max-height: 420px; overflow-y: auto; white-space: pre-wrap; line-height: 1.65; }
.result__meta { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-3); }

/* Lecteur : la barre de progression est CLIQUABLE — un lecteur qu'on ne peut
   pas deplacer oblige a reecouter depuis le debut. */
.player { display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.player__btn {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--studio); background: var(--studio); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: transform .16s cubic-bezier(.34,1.56,.64,1);
}
.player__btn:hover { transform: scale(1.07); }
.player__track { flex: 1; height: 5px; border-radius: 3px; background: var(--border); cursor: pointer; position: relative; }
.player__fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--studio); width: 0%; transition: width .1s linear; }
.player__time { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-2); min-width: 84px; text-align: right; }

/* Etat vide : il dit ce que la surface fera, pas « aucune donnee ». */
.empty { text-align: center; padding: 34px 20px; color: var(--text-3); }
.empty__title { font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }

.notice {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius);
  font-size: 13px; line-height: 1.5; border: 1px solid;
}
.notice--info { background: var(--studio-dim); border-color: rgba(var(--studio-rgb),.3); color: var(--text-1); }
.notice--warn { background: rgba(184,134,11,.10); border-color: rgba(184,134,11,.32); color: var(--text-1); }
.notice--err  { background: rgba(216,50,61,.10); border-color: rgba(216,50,61,.32); color: var(--text-1); }

.toast {
  position: fixed; bottom: 22px; left: 50%; translate: -50% 0;
  background: var(--elevated); border: 1px solid var(--border); box-shadow: var(--shadow-2);
  padding: 11px 17px; border-radius: var(--radius); font-size: 13.5px;
  z-index: var(--z-toast); animation: monte .24s cubic-bezier(.16,1,.3,1);
}
@keyframes monte { from { opacity: 0; translate: -50% 10px; } to { opacity: 1; translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* Entree des panneaux : un decalage de 6 px suffit a dire « ceci a change »
   sans faire attendre. Au-dela de ~200 ms, une transition se subit. */
.panel-in { animation: entre .22s cubic-bezier(.16,1,.3,1); }
@keyframes entre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel-in { animation: none; } }

/* Tableaux et blocs larges : ils defilent DANS leur conteneur, la page ne part
   jamais de travers. */
.scroll-x { overflow-x: auto; }

@media (max-width: 640px) {
  :root { --rail-w: 62px; }
  .workspace { padding: 18px 14px; }
  .topbar { padding: 14px 16px; }
  .topbar__promise { display: none; }
  .rail-btn__label { display: none; }
}