/* ===========================================================================
   Studio voix — feuille de style de l'IHM
   ===========================================================================
   Choix assume : AUCUNE dependance externe (ni CDN Tailwind, ni Google Fonts,
   ni HTMX distant). Deux raisons, et la seconde est redhibitoire :
     1. Le CDN Tailwind est documente comme « pas pour la production ».
     2. Le studio est LOCAL et HORS-LIGNE. Un lien CDN rend l'IHM dependante
        d'Internet : sur un VPS ferme, en coulisses de spectacle ou en demo
        client, elle s'afficherait nue.
   On ecrit donc du CSS moderne : variables, cascade layers, container queries
   la ou c'est utile, `color-scheme`, `prefers-reduced-motion`, focus visible.
   Polices de la suite (Syne, DM Sans, JetBrains Mono, licence OFL) HEBERGEES
   dans static/fonts : meme identite que ProfilPilot, sans Google Fonts.
   =========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* Polices locales (static/fonts, OFL). `swap` : le texte s'affiche tout de
   suite en police systeme, puis bascule — jamais de page blanche. */
@font-face { font-family: "Syne"; font-weight: 700; font-display: swap;
  src: url("/static/fonts/syne-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Syne"; font-weight: 800; font-display: swap;
  src: url("/static/fonts/syne-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 600 700; font-display: swap;
  src: url("/static/fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }

/* ─────────────────────────────── reset ─────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-font-smoothing: antialiased; }
  img, svg, video, audio, canvas { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; text-wrap: balance; }
  p { text-wrap: pretty; }
  [hidden] { display: none !important; }
}

/* ─────────────────────────────── tokens ────────────────────────────────── */
@layer tokens {
  :root {
    color-scheme: dark;

    /* Palette jaikit : noir profond + OR unique accent (comme jaikit.fr /
       profilpilot). Le studio partage ainsi l'identite de la suite. */
    --bg:        #0a0a0f;
    --bg-raise:  #12121a;
    --bg-sunken: #07070b;
    --surface:   #1c1c28;
    --surface-2: #232331;
    --line:      #2c2c3a;
    --line-soft: #232330;

    --text:      #f0ece4;
    --text-dim:  #c8c4bc;
    --text-mute: #6b6878;

    --accent:      #d4a853;
    --accent-weak: #3a2c08;
    --accent-text: #e8c278;
    --warn:        #f0b429;
    --warn-weak:   #3a2c08;
    --bad:         #e85d4a;
    --bad-weak:    #3a1414;

    --radius:    12px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --shadow:    0 10px 30px -12px rgb(0 0 0 / 0.6);
    --ring:      0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

    --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
    --step-0:  clamp(0.9rem, 0.88rem + 0.1vw, 0.95rem);
    --step-1:  clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
    --step-2:  clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);

    --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;
    --display: "Syne", var(--font);
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
            "Liberation Mono", monospace;
  }

  /* Theme clair (« jour ») : meme grammaire, creme chaude + or assombri. */
  :root[data-theme="light"] {
    color-scheme: light;
    --bg:        #faf8f4;
    --bg-raise:  #ffffff;
    --bg-sunken: #f0ece4;
    --surface:   #ffffff;
    --surface-2: #f5f2ec;
    --line:      #e2ddd2;
    --line-soft: #ece7dd;
    --text:      #0a0a0f;
    --text-dim:  #1c1c28;
    --text-mute: #6b6878;
    --accent:      #b8862b;
    --accent-weak: #f5e6c0;
    --accent-text: #8a6420;
    --warn:        #9a6a06;
    --warn-weak:   #fdf3dc;
    --bad:         #b42323;
    --bad-weak:    #fde8e8;
    --shadow:    0 10px 30px -18px rgb(40 30 10 / 0.28);
  }
}

/* ──────────────────────────────── base ────────────────────────────────── */
@layer base {
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.55;
    min-height: 100dvh;
  }
  a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
  h1, h2, .brand, .card__title { font-family: var(--display); letter-spacing: -.2px; }

  /* Accessibilite : un anneau de focus visible au clavier, jamais a la souris. */
  :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

  /* Respecter le reglage systeme : pas d'animation imposee. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }

  .skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: #02110d; padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0;
  }
  .skip:focus { left: 0; }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ─────────────────────────────── layout ──────────────────────────────── */
@layer layout {
  .shell { max-width: 1280px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }

  .topbar {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  /* L'en-tete ne doit jamais passer a la ligne : les pastilles d'environnement
   s'effacent avant les onglets, qui defilent horizontalement si besoin. */
.topbar__in { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; flex-wrap: nowrap; }
/* Specificite deliberement plus forte que `.row`, definie plus bas dans la
   meme couche : sans cela `flex-wrap: wrap` gagnait et les pastilles
   passaient a la ligne, doublant la hauteur de l'en-tete. */
.topbar__in .topbar__env { flex: 0 1 auto; flex-wrap: nowrap; overflow: hidden; }
/* Les onglets ayant desormais leur propre rangee, les pastilles ne leur
   disputent plus la place : elles ne s'effacent qu'au vrai etroit. */
@media (max-width: 760px) { .topbar__env { display: none; } }

/* Jauge d'occupation memoire. La couleur passe a l'alerte au-dela de 75 %
   via `data-niveau`, pour qu'une carte pleine se voie sans lire le chiffre. */
.jauge {
  height: .55rem; border-radius: 999px; overflow: hidden;
  background: var(--line-soft, rgba(127,127,127,.25)); margin-top: .25rem;
}
.jauge__barre {
  height: 100%; width: 0; border-radius: 999px;
  background: var(--accent); transition: width .3s ease, background .3s ease;
}
.jauge__barre[data-niveau="tendu"] { background: var(--warn, #d08700); }
.jauge__barre[data-niveau="sature"] { background: var(--bad, #c0392b); }

/* Rangee des onglets. Elle occupe toute la largeur, ce qui suffit aux dix
   onglets (997 px) la ou la rangee partagee n'en offrait que 744. */
.topbar__nav {
  display: flex; padding-bottom: .35rem;
  border-top: 1px solid color-mix(in oklab, var(--line) 55%, transparent);
  padding-top: .35rem;
}

  .brand { display: flex; align-items: center; gap: .55rem; font-weight: 650;
           letter-spacing: -0.01em; text-decoration: none; color: var(--text); flex: 0 0 auto; }
  .brand__mark {
    width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm);
    background: var(--accent); color: #02110d;
    display: grid; place-items: center; font-weight: 800;
  }

  /* `min-width: 0` est indispensable : par defaut un element flex ne descend
     pas sous la largeur de son contenu, donc la barre de 10 onglets poussait
     la page entiere au lieu de defiler dans son propre cadre.
     `flex-wrap: wrap` : sur une rangee dediee, un onglet de trop passe a la
     ligne et reste CLIQUABLE, au lieu de disparaitre dans un defilement que
     rien ne signale. */
  .tabs {
    display: flex; gap: .15rem; flex-wrap: wrap;
    width: 100%; min-width: 0;
  }
  /* Tres etroit : on repasse au defilement, mais avec une ombre a droite qui
     montre qu'il reste des onglets. */
  @media (max-width: 560px) {
    .tabs {
      flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
      mask-image: linear-gradient(to right, #000 85%, transparent);
    }
    .tabs::-webkit-scrollbar { display: none; }
  }

  main { padding-block: 1.5rem 4rem; }

  .grid { display: grid; gap: 1rem; }
  .grid--kpi  { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
  .grid--two  { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
  .grid--pads { grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr)); }

  .stack { display: grid; gap: 1rem; }
  .row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
  .row--tight { gap: .35rem; }
  .spread { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

/* ───────────────────────────── components ────────────────────────────── */
@layer components {

  .tab {
    padding: .45rem .8rem; border-radius: var(--radius-sm);
    color: var(--text-dim); font-size: var(--step-0); white-space: nowrap;
    transition: background .15s, color .15s;
  }
  .tab:hover { background: var(--surface); color: var(--text); }
  .tab[aria-selected="true"] { background: var(--surface-2); color: var(--accent-text); font-weight: 550; }

  .card {
    background: var(--bg-raise); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 1.15rem;
  }
  .card--flush { padding: 0; overflow: hidden; }
  .card__head { display: flex; align-items: baseline; gap: .6rem; justify-content: space-between; margin-bottom: .9rem; }
  .card__title { font-size: var(--step-1); }
  .card__hint { color: var(--text-mute); font-size: var(--step--1); }

  .kpi { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1rem 1.15rem; }
  .kpi__val { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; }
  .kpi__lab { color: var(--text-mute); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; }
  .kpi__sub { color: var(--text-dim); font-size: var(--step--1); margin-top: .15rem; }

  .chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
    font-size: var(--step--1); color: var(--text-dim); white-space: nowrap;
  }
  .chip--ok   { background: var(--accent-weak); border-color: color-mix(in oklab, var(--accent) 45%, transparent); color: var(--accent-text); }
  .chip--warn { background: var(--warn-weak);   border-color: color-mix(in oklab, var(--warn) 45%, transparent);   color: var(--warn); }
  .chip--bad  { background: var(--bad-weak);    border-color: color-mix(in oklab, var(--bad) 45%, transparent);    color: var(--bad); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: var(--radius-sm);
    background: var(--surface); border: 1px solid var(--line); color: var(--text);
    font-size: var(--step-0); font-weight: 500;
    transition: background .15s, border-color .15s, transform .05s;
  }
  .btn:hover:not(:disabled) { background: var(--surface-2); border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); }
  .btn:active:not(:disabled) { transform: translateY(1px); }
  .btn:disabled { opacity: .5; cursor: not-allowed; }
  .btn--primary { background: var(--accent); border-color: var(--accent); color: #02110d; font-weight: 600; }
  .btn--primary:hover:not(:disabled) { background: color-mix(in oklab, var(--accent) 85%, white); }
  .btn--ghost { background: transparent; }
  .btn--danger { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 40%, var(--line)); }
  .btn--sm { padding: .3rem .6rem; font-size: var(--step--1); }
  .btn--block { width: 100%; }

  .field { display: grid; gap: .3rem; }
  .field > label { font-size: var(--step--1); color: var(--text-dim); font-weight: 500; }
  .input, .select, .textarea {
    width: 100%; padding: .55rem .7rem;
    background: var(--bg-sunken); border: 1px solid var(--line);
    border-radius: var(--radius-sm); color: var(--text);
  }
  .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
  .textarea { min-height: 7rem; resize: vertical; font-family: inherit; }
  .range { width: 100%; accent-color: var(--accent); }

  .table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
  .table th {
    text-align: left; padding: .6rem .8rem; color: var(--text-mute);
    font-size: var(--step--1); font-weight: 500; text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-raise);
  }
  .table td { padding: .55rem .8rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
  .table tr:last-child td { border-bottom: 0; }
  .table tbody tr:hover { background: var(--surface); }

  /* Pad de regie : gros, lisible de loin, utilisable en coulisses. */
  .pad {
    position: relative; display: grid; gap: .3rem; align-content: space-between;
    padding: .8rem; min-height: 5.5rem; text-align: left;
    background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color .15s, background .15s, transform .05s;
  }
  /* Pad + flanc de tri qualite (admin) : ✓ bon / ⚑ a refaire. */
  .pad-cell { display: flex; align-items: stretch; min-width: 0; }
  .pad-cell > .pad { flex: 1 1 auto; min-width: 0; }
  .pad-cell--tri > .pad { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .pad-cote { display: flex; flex-direction: column; flex: 0 0 2rem; border: 1px solid var(--line); border-left: 0;
              border-radius: 0 var(--radius) var(--radius) 0; overflow: hidden; background: var(--bg-raise); }
  .pad-tri { flex: 1 1 50%; border: 0; background: transparent; color: var(--text-mute); cursor: pointer; font-size: .95rem; padding: 0; }
  .pad-tri + .pad-tri { border-top: 1px solid var(--line-soft); }
  .pad-tri:hover { background: var(--surface); color: var(--text); }
  .pad-cell[data-statut="a_refaire"] .pad { border-color: var(--warn); }
  .pad-cell[data-statut="a_refaire"] .pad-tri--refaire { background: var(--warn-weak); color: var(--warn); }
  .pad-cell[data-statut="valide"] .pad-tri--bon { background: var(--accent-weak); color: var(--accent-text); }
  .pad-cell[data-statut="regenere"] .pad { border-style: dashed; }
  .pad:hover { background: var(--surface); border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); }
  .pad:active { transform: scale(.985); }
  .pad[data-playing="true"] { border-color: var(--accent); background: var(--accent-weak); }
  /* Les cles contiennent des `_` : on coupe a ces endroits (via <wbr>) plutot
     qu'au milieu d'un mot, qui donnait « roulement_tambou / r ». */
  .pad__key { font-weight: 600; font-size: var(--step-0); line-height: 1.25;
              overflow-wrap: break-word; hyphens: none; }
  .pad__meta { display: flex; gap: .3rem; align-items: center; color: var(--text-mute); font-size: var(--step--1); }
  .pad__bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--accent); width: 0; border-radius: 0 0 var(--radius) var(--radius); }

  .mono { font-family: var(--mono); font-size: var(--step--1); }
  .pre {
    font-family: var(--mono); font-size: var(--step--1); white-space: pre-wrap;
    background: var(--bg-sunken); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: .8rem; max-height: 26rem; overflow: auto;
  }

  .empty { color: var(--text-mute); text-align: center; padding: 2rem 1rem; }

  /* Alerte « des travaux GPU attendent » (administrateur) : sous la barre, a chaque menu. */
  .bandeau-gpu {
    margin: 0; padding: .55rem 1rem; font-size: .92rem;
    background: color-mix(in oklab, var(--accent) 14%, var(--bg-raise));
    border-bottom: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
    display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center;
  }
  .bandeau-gpu[hidden] { display: none; }
  .toast {
    position: fixed; inset-inline-end: 1rem; bottom: 1rem; z-index: 60;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: .8rem 1rem; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--bg-raise);
    box-shadow: var(--shadow); font-size: var(--step-0);
  }
  .toast--ok   { border-color: color-mix(in oklab, var(--accent) 50%, transparent); color: var(--accent-text); }
  .toast--warn { border-color: color-mix(in oklab, var(--warn) 50%, transparent);   color: var(--warn); }
  .toast--bad  { border-color: color-mix(in oklab, var(--bad) 50%, transparent);    color: var(--bad); }

  .spinner {
    width: .9rem; height: .9rem; border-radius: 50%;
    border: 2px solid color-mix(in oklab, currentColor 30%, transparent);
    border-top-color: currentColor; animation: spin .7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .timeline { display: grid; gap: .25rem; }
  .seg { display: grid; grid-template-columns: 4.5rem 7rem 1fr auto; gap: .6rem; align-items: center;
         padding: .35rem .5rem; border-radius: var(--radius-sm); font-size: var(--step--1); }
  .seg:nth-child(odd) { background: var(--surface); }
  .seg--pause { color: var(--text-mute); font-style: italic; }

  audio { width: 100%; height: 2.2rem; }
}

/* ──────────────────────────── utilities ──────────────────────────────── */
@layer utilities {
  .dim { color: var(--text-dim); }
  .mute { color: var(--text-mute); }
  /* Un texte long sans espace (chemin, JSON) ne doit jamais pousser la
     page : il se coupe. */
  .small { font-size: var(--step--1); overflow-wrap: anywhere; }
  .right { margin-left: auto; }
  .nowrap { white-space: nowrap; }
  .scroll-y { overflow-y: auto; }
  .max-18 { max-height: 18rem; }
  .max-26 { max-height: 26rem; }
  @media (max-width: 640px) {
    .hide-sm { display: none !important; }
    .seg { grid-template-columns: 3.5rem 1fr; }
  }
}

@layer utilities {
  /* Les rangees de formulaire a plusieurs champs debordaient sous 400 px :
     les champs passent en colonne pleine largeur plutot que de pousser la
     page. */
  @media (max-width: 640px) {
    .row > .field { flex: 1 1 100% !important; min-width: 0; }
    /* `1fr` ne suffit pas : une piste de grille grandit si son contenu a un
       minimum plus large (ici des chemins monospace). `minmax(0, 1fr)` et
       `min-width: 0` l'autorisent enfin a retrecir. */
    .grid--two, .grid--kpi, .grid--pads { grid-template-columns: minmax(0, 1fr); }
    .grid > * { min-width: 0; }
    .card, .card__head, .stack > * { min-width: 0; }
    /* Une pastille est en `nowrap` pour rester lisible ; sur un telephone une
       etiquette longue poussait la page. On l'autorise a se couper. */
    .chip { white-space: normal; overflow-wrap: anywhere; }
    .scroll-y { max-width: 100%; }
    .table { table-layout: fixed; width: 100%; }
    .table td, .table th { overflow-wrap: anywhere; }
  }
}

/* Bandeau « voir comme… » (apercu admin) et pastille du compte. */
@layer components {
  .apercu { background: var(--accent-weak); color: var(--accent-text); text-align: center;
    font-size: var(--step--1); padding: .35rem 1rem; border-top: 1px solid var(--line); }
  .apercu a { font-weight: 600; margin-left: .4rem; }
  .chip--compte { text-decoration: none; color: var(--text-dim); }
  .chip--compte:hover { color: var(--accent-text); border-color: var(--accent); }
}

@layer components { a.btn { text-decoration: none; } }

/* Comptes ordinaires : la banque et ses reglages sont PARTAGES, seuls les admins les modifient (les groupes de sons, eux,
   sont ceux de chacun). Les commandes correspondantes disparaissent. */
@layer utilities {
  .role-user [data-corbeille], .role-user [data-reglages],
  .role-user [data-enregistrer-fx],
  .role-user .admin-seul { display: none !important; }
}

/* ── Mode guide (novice) et conseils ─────────────────────────────────────
   `.avance` : reglage fin, masque en mode guide. `.aide` : conseil masquable,
   masque d'un coup quand le guidage est coupe dans Mon compte. */
@layer utilities {
  .profil-novice .avance { display: none !important; }
  .guidage-off .aide { display: none !important; }
  /* Capacite debrayable absente (static/capacites.js) : visible mais grise, la raison est dans l'infobulle. */
  .grise { opacity: .5; cursor: not-allowed; }
  .grise:not(button):not(input):not(select):not(option)::after { content: " 🔒 " attr(data-raison); font-size: .8em; color: var(--text-dim); }
}
@layer components {
  .aide { position: relative; border-left: 3px solid var(--accent);
    background: color-mix(in oklab, var(--accent) 6%, var(--bg-raise)); padding-right: 6.5rem; }
  .aide__masquer { position: absolute; top: .7rem; right: .8rem; font-size: var(--step--1);
    color: var(--text-mute); padding: .15rem .45rem; border-radius: var(--radius-sm); }
  .aide__masquer:hover { color: var(--text); background: var(--surface-2); }
  .parcours { border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
    background: radial-gradient(60% 120% at 100% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%), var(--bg-raise); }
  .parcours__etapes { list-style: none; padding: 0; display: grid; gap: .55rem; margin-top: .4rem; }
  .parcours__etape { display: grid; grid-template-columns: 2.1rem 1fr auto; gap: .8rem; align-items: center;
    padding: .65rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .parcours__etape b { display: block; }
  .parcours__etape.est-courante { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
  .parcours__etape.est-fait { opacity: .72; }
  .parcours__num { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; background: var(--surface-2); color: var(--text-dim); }
  .est-courante .parcours__num { background: var(--accent); color: #0a0a0f; }
  .est-fait .parcours__num { background: var(--accent-weak); color: var(--accent-text); }
  .parcours__bravo { padding: .8rem; text-align: center; font-weight: 600; }
  @media (max-width: 560px) {
    .parcours__etape { grid-template-columns: 2.1rem 1fr; }
    .parcours__etape .btn { grid-column: 2; justify-self: start; }
    .aide { padding-right: 1.15rem; padding-top: 2.2rem; }
  }
}

/* ── Onglet Voix : un metier par sous-onglet, tout l'utile sur un ecran ── */
@layer components {
  .sous-onglets { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .sous-onglets button { padding: .55rem .9rem; color: var(--text-dim); font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .sous-onglets button:hover { color: var(--text); background: var(--surface); }
  .sous-onglets button[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }
  .voix-ecran { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
  .voix-composer { grid-column: 1 / -1; }
  .pastilles { display: flex; flex-wrap: wrap; gap: .3rem; }
  .pastilles button { border: 1px solid var(--line); border-radius: 999px; padding: .22rem .65rem;
    font-size: var(--step--1); color: var(--text-dim); background: var(--surface); }
  .pastilles button:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
  .pastilles button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text); background: var(--accent-weak); }
  .voix-choix { display: grid; gap: .6rem; }
  .voix-liste { display: grid; gap: .25rem; overflow-y: auto; max-height: max(15rem, calc(100dvh - 21rem));
    padding-right: .2rem; }
  .voix-ligne { display: grid; grid-template-columns: 2rem 1fr auto; gap: .6rem; align-items: center; cursor: pointer;
    padding: .35rem .5rem; border: 1px solid transparent; border-radius: var(--radius-sm); }
  .voix-ligne:hover { background: var(--surface); }
  .voix-ligne.est-choisie { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); }
  .voix-nom { font-weight: 600; overflow-wrap: anywhere; }
  .voix-ecoute { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-raise);
    color: var(--accent-text); font-size: .8rem; display: grid; place-items: center; }
  .voix-ecoute:hover:not(:disabled) { border-color: var(--accent); }
  .voix-ecoute:disabled { opacity: .35; cursor: not-allowed; }
  .prise { display: grid; gap: .2rem; padding: .4rem .6rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
  .sous-bloc { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: .5rem .7rem; }
  .sous-bloc summary { cursor: pointer; color: var(--text-dim); }
  .travail { padding: .5rem .6rem; border-left: 3px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); }
  .travail--termine { border-left-color: var(--accent); }
  .travail--echec { border-left-color: var(--bad); }
  .travail--en_cours { border-left-color: var(--warn); }
  @media (max-width: 860px) {
    .voix-ecran { grid-template-columns: minmax(0, 1fr); }
    .voix-liste { max-height: 20rem; }
  }
}