/* ───────────────────────────────────────────────────────────────
   atelier.css : la nouvelle peau des outils, un outil à la fois.

   Elle s'applique aux pages qui portent la classe .atelier sur <body>,
   et à elles seules. Elle redéfinit les jetons de tools.css (fond,
   surfaces, textes, filets) et l'allure des contrôles : un outil y passe
   en chargeant cette feuille et en posant la classe, les autres ne
   bougent pas.

   Retenu sur les maquettes du 25 septembre 2026 (piste « le mélange ») :
   - trois niveaux, la page, la surface de travail, les champs. L'ancien
     mode clair les mettait tous dans le même gris, l'œil ne savait où
     se poser ;
   - les capitales condensées pour les titres de section seulement, la
     signature EL8 ; libellés et boutons en minuscules ;
   - la chasse fixe pour les chiffres (adresses, timecode, numéros),
     plus pour le texte ;
   - un seul bouton principal par écran, plein ;
   - le rouge pour l'alerte et ce qui est actif ;
   - en haut, une bande pour le projet, puis une barre d'outils qui
     reste sous la barre du site quand on descend.

   Les gris secondaires tiennent 4,5:1 sur leur fond : #6b6862 sur blanc,
   #909090 sur #141414. --fg-4 ne porte jamais de texte, seulement des
   poignées et des filets.
   ─────────────────────────────────────────────────────────────── */

body.atelier {
  --bg: #0a0a0a; --panel: #141414; --panel-2: #101010; --surface-2: #1a1a1a;
  --fg: #ededed; --fg-2: #bdbdbd; --mid: #909090; --faint: #909090; --fg-4: #5a5a5a;
  --dim: #343434; --line: #232323; --bar: #141414;
  --tag: #1f1f1f; --ombre-surface: none; --rayon: 6px; --large: 1080px;
  --pbg: #2a2a2a; --pfg: #f2f2f2; --pbord: #6a6a6a; --pbg-h: #353535;
  --pill: #2c2c2c; --pill-fg: #ededed; --pill-bord: #6f6f6f;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) body.atelier {
    --bg: #ecebe7; --panel: #ffffff; --panel-2: #ffffff; --surface-2: #f7f6f3;
    --fg: #161513; --fg-2: #45433e; --mid: #6b6862; --faint: #6b6862; --fg-4: #a8a49c;
    --dim: #cdc9c1; --line: #e6e3dd; --bar: #ffffff;
    --tag: #f4f3ef; --ombre-surface: 0 1px 2px rgba(20,18,15,.05), 0 8px 24px rgba(20,18,15,.05);
    --pbg: #161513; --pfg: #ffffff; --pbord: #161513; --pbg-h: #34312c;
    --pill: #e2dfd7; --pill-fg: #161513; --pill-bord: #161513;
    --red-txt: #a32b1e; --red-dim: rgba(192,57,43,.42);
  }
}
:root[data-theme="clair"] body.atelier {
  --bg: #ecebe7; --panel: #ffffff; --panel-2: #ffffff; --surface-2: #f7f6f3;
  --fg: #161513; --fg-2: #45433e; --mid: #6b6862; --faint: #6b6862; --fg-4: #a8a49c;
  --dim: #cdc9c1; --line: #e6e3dd; --bar: #ffffff;
  --tag: #f4f3ef; --ombre-surface: 0 1px 2px rgba(20,18,15,.05), 0 8px 24px rgba(20,18,15,.05);
  --pbg: #161513; --pfg: #ffffff; --pbord: #161513; --pbg-h: #34312c;
  --pill: #e2dfd7; --pill-fg: #161513; --pill-bord: #161513;
  --red-txt: #a32b1e; --red-dim: rgba(192,57,43,.42);
}

/* ── La barre du site ─────────────────────────────────────────── */
.atelier .bar { background: var(--bar); backdrop-filter: none; }
.atelier .signaler {
  font-family: var(--body); font-size: .85rem; letter-spacing: 0; text-transform: none; color: var(--mid);
}
.atelier .theme {
  font-family: var(--body); font-size: .82rem; letter-spacing: 0; text-transform: none;
  border-radius: var(--rayon); color: var(--fg-2); border-color: var(--dim);
}

/* Le projet en cours, quand sa bande est sortie de l'écran : posé par
   projets.js, une copie de la liste de la bande. */
.bar__projet { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 0 1 auto; }
.bar__projet[hidden] { display: none; }
.bar__sep { width: 1px; height: 1.4rem; background: var(--dim); flex: 0 0 auto; }
/* Précédé de .atelier : il passe devant l'allure commune des listes. */
.atelier .bar__projet select {
  width: auto; max-width: min(24rem, 48vw); min-height: 34px; height: 34px; padding: 0 1.9rem 0 .5rem;
  font-weight: 600; font-size: .95rem; background-color: transparent; border-color: transparent;
}
.atelier .bar__projet select:hover, .atelier .bar__projet select:focus { border-color: var(--dim); background-color: var(--panel-2); }
@media (max-width: 600px) {
  .bar:has(.bar__projet:not([hidden])) .bar__title { display: none; }
  .bar__projet .bar__sep { display: none; }
}

/* ── Les contrôles ────────────────────────────────────────────── */
.atelier .panel { background: var(--panel); border-color: var(--line); border-radius: 8px; box-shadow: var(--ombre-surface); }
.atelier .label {
  font-family: var(--body); font-size: .8rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--fg-2);
}
.atelier .hint { font-size: .84rem; color: var(--mid); }
.atelier .opt { color: var(--fg-2); }
.atelier input[type=text], .atelier input[type=search], .atelier input[type=number],
.atelier input[type=email], .atelier input[type=date], .atelier input[type=time],
.atelier select, .atelier textarea {
  font-family: var(--body); font-size: .95rem; border-radius: var(--rayon);
  background-color: var(--panel-2); border-color: var(--dim); min-height: 40px;
}
.atelier input.mono { font-family: var(--mono); }
/* Un nombre saisi est un chiffre : chasse fixe, comme ceux qu'on lit. */
.atelier input[type=number] { font-family: var(--mono); font-size: 1rem; }
.atelier textarea { line-height: 1.5; }
.atelier .btn {
  font-family: var(--body); font-size: .9rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; border-radius: var(--rayon); min-height: 40px; padding: .4rem .95rem;
  color: var(--fg); background: var(--panel-2); border-color: var(--dim);
}
.atelier .btn:hover { color: var(--fg); border-color: var(--mid); }
.atelier .btn--min { font-size: .85rem; letter-spacing: 0; color: var(--fg-2); min-height: 34px; padding: .25rem .7rem; }
.atelier .btn--principal { background: var(--pbg); color: var(--pfg); border-color: var(--pbord); font-weight: 600; }
.atelier .btn--principal:hover, .atelier .btn--principal:focus-visible {
  background: var(--pbg-h); color: var(--pfg); border-color: var(--pbord);
}
.atelier .btn--danger { color: var(--fg-2); }
.atelier .btn--danger:hover, .atelier .btn--danger:focus-visible { color: var(--red-txt); border-color: var(--red-dim); }
.atelier .btn--danger.rm { color: var(--mid); border-color: transparent; background: transparent; }
/* Un choix enfoncé est plein, comme une pastille active : le rouge reste
   à ce qui ne passe pas. */
.atelier .btn[aria-pressed="true"], .atelier .btn.is-on {
  background: var(--pill); color: var(--pill-fg); border-color: var(--pill-bord);
}

/* Les onglets : une seule pièce, l'onglet ouvert plein. */
.atelier .tabs {
  gap: 3px; padding: 3px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--ombre-surface);
}
.atelier .tabs .btn {
  min-height: 38px; font-size: .92rem; font-weight: 500; border-color: transparent;
  background: transparent; color: var(--fg-2);
}
.atelier .tabs .btn:hover { color: var(--fg); background: var(--surface-2); }
.atelier .tabs .btn[aria-pressed="true"] {
  background: var(--pill); color: var(--pill-fg); border-color: var(--pill-bord); font-weight: 600;
}

/* Les tableaux et les lignes de résultats : l'intitulé se lit, le
   chiffre reste en chasse fixe. */
.atelier table.t th {
  font-family: var(--body); font-size: .8rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--fg-2);
}
.atelier .row__k small { font-family: var(--body); font-size: .76rem; letter-spacing: 0; color: var(--mid); }
.atelier .out small { letter-spacing: .06em; }
/* Le résultat principal se détache par sa taille, pas par le rouge :
   le rouge reste à ce qui ne passe pas. */
.atelier .out--red { color: var(--fg); }
.atelier .sig__ap--vide { font-family: var(--body); font-size: .8rem; letter-spacing: 0; text-transform: none; }
.atelier .etat-mot { border-radius: 8px; }
.atelier .ac__l { border-color: var(--dim); border-radius: var(--rayon); }
/* Au doigt, les cibles gardent leur taille. */
@media (pointer: coarse) {
  .atelier .btn, .atelier input[type=text], .atelier input[type=search], .atelier select { min-height: 44px; }
}

/* ── Les bandes du haut ───────────────────────────────────────────
   Pleine largeur, sur la surface, sous la barre du site. Le contenu
   s'aligne sur la colonne de la page (.at-large) : --large, que la
   conduite élargit pour ses colonnes. */
.at-bande { background: var(--panel); border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.at-large { max-width: var(--large); margin: 0 auto; padding: 0 var(--gut); box-sizing: border-box; }
.atelier .wrap--wide { max-width: var(--large); }

/* Le projet en cours : le choix, les boutons, puis les champs de l'outil.
   La gestion des projets se traverse pour aller travailler. La bande se
   règle sur sa propre largeur, pas sur celle de l'écran : la conduite
   tient tout sur une ligne dans ses 1600 px (dès 1300), les outils à 1080 px passent
   les champs dessous, un téléphone empile. */
.at-projet > .at-large { container-type: inline-size; }
.at-projet .panel {
  background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: .65rem 0 .55rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem 1.2rem; align-items: end;
}
.at-projet .pjx { grid-column: 1; grid-row: 1; max-width: 40rem; }
.at-projet .pjx__b { grid-column: 2; grid-row: 1; margin: 0; flex-wrap: nowrap; align-self: end; }
.at-projet .pjx__b .btn--danger { margin-left: .4rem; }
.at-projet [id$="-champs"] { grid-column: 1 / -1; grid-row: 2; }
.at-projet [id$="-champs"]:empty { display: none; }
.at-projet [id$="-champs"] .cols { margin-top: 0 !important; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.at-projet .pjx__confid { grid-column: 1 / -1; margin: 0; font-size: .78rem; }
/* 1300 et non 1150 : avec « Importer », six boutons, les champs n'avaient
   plus la place et se mettaient sur deux rangs. */
@container (min-width: 1300px) {
  .at-projet .panel { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) auto; }
  .at-projet [id$="-champs"] { grid-column: 2; grid-row: 1; }
  .at-projet .pjx__b { grid-column: 3; }
}
@container (max-width: 760px) {
  .at-projet .panel { grid-template-columns: minmax(0, 1fr); }
  .at-projet .pjx, .at-projet [id$="-champs"], .at-projet .pjx__b { grid-column: 1; grid-row: auto; }
  .at-projet .pjx { max-width: none; }
  .at-projet .pjx__b .btn--danger { margin-left: 0; }
  .at-projet .pjx__b { flex-wrap: wrap; }
}

/* La barre d'outils : elle reste sous la barre du site. */
.at-outils { position: sticky; top: var(--haut, 54px); z-index: 20; }
.at-outils > .at-large {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding-top: .55rem; padding-bottom: .55rem;
}
/* Les réglages de la page, en une ligne sous les outils : ils défilent. */
.at-reglages > .at-large {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .55rem;
  padding-top: .5rem; padding-bottom: .55rem;
}
.at-l { font-size: .8rem; font-weight: 600; color: var(--fg-2); white-space: nowrap; }
.at-sep { width: 1px; height: 1.3rem; background: var(--dim); margin: 0 .35rem; flex: 0 0 auto; }

/* Une pastille : une colonne, une option. Pleine quand elle est active. */
.at-pilule {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 30px; padding: 0 .75rem; border-radius: 999px; cursor: pointer;
  font-family: var(--body); font-size: .85rem; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--dim); background: transparent; color: var(--fg-2);
}
.at-pilule:hover { border-color: var(--mid); color: var(--fg); }
.at-pilule[aria-pressed="true"] { background: var(--pill); color: var(--pill-fg); border-color: var(--pill-bord); }
/* En sombre, une pastille active n'est pas blanche pleine : sept à la
   suite éblouissaient comme le faisait l'ancien bouton principal. */
.at-pilule--plus { border-style: dashed; }

/* Une fenêtre posée contre ce qui l'ouvre : le nom et le rôle d'une
   colonne, une couleur de la légende. */
.at-pop {
  position: absolute; z-index: 60; width: min(19rem, calc(100vw - 2rem)); box-sizing: border-box;
  background: var(--panel); color: var(--fg); border: 1px solid var(--dim); border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0,0,0,.28); padding: .9rem;
}
.at-pop[hidden] { display: none; }
.at-pop .field { margin-bottom: .7rem; }
.at-pop .btns { gap: .35rem; }
.at-pop__t {
  font-family: var(--cond); font-size: .95rem; letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 .7rem;
}

/* La surface de travail. overflow: clip et non hidden : hidden en ferait
   un conteneur de défilement, et l'en-tête collant ne collerait plus. */
.at-surface { padding: 0; overflow: clip; }

/* ── Des onglets pour les objets d'un plan ────────────────────────
   Les univers de l'adressage, les groupes du patch son et des amplis,
   les surfaces de l'optique : la même bande, collée sous la barre quand
   on descend, et le même onglet. Un seul dessin, ici, plutôt que quatre
   copies qui divergent (passe de cohérence, 7 oct. 2026). L'onglet
   ouvert porte un filet rouge ; .ong--couleur garde sa couleur (--c),
   réservée aux surfaces de l'optique. */
.ong-tete { position: sticky; top: var(--haut, 54px); z-index: 15; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .3rem;
            padding: .5rem 0 0 .4rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.ong-tete.colle { box-shadow: 0 6px 10px -8px rgba(0,0,0,.5); }
.ong { --c: var(--red); display: grid; grid-template-columns: auto auto; gap: 0 .5rem; align-items: center; justify-content: start;
       text-align: left; min-height: 48px; padding: .3rem .9rem; background: var(--panel-2); color: var(--mid);
       border: 1px solid var(--line); border-bottom: 0; border-top: 3px solid var(--line); border-radius: 6px 6px 0 0;
       font: inherit; cursor: pointer; margin-bottom: -1px; }
.ong b { font-weight: 600; font-size: .92rem; }
.ong small { grid-column: 1 / -1; font-family: var(--mono); font-size: .72rem; color: var(--faint); }
.ong:hover { color: var(--fg); border-top-color: var(--mid); }
.ong[aria-selected="true"] { color: var(--fg); background: var(--panel); border-top-color: var(--c); position: relative; z-index: 1; }
.ong--couleur, .ong--couleur:hover { border-top-color: var(--c); color: var(--fg); }
.ong--plus { display: inline-flex; border: 1px dashed var(--dim); border-bottom: 0; background: none; font-size: .86rem; }
/* La fiche de l'objet ouvert s'accroche sous sa bande. */
.ong-tete + .ong-fiche { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
@media (max-width: 640px) { .ong-tete { padding-left: 0; } }