@charset "UTF-8";
/* Composants des outils — les MÊMES noms de classes que ceux produits par le moteur
   (assets/js/analyse-*.js et champ-focale.js). Le moteur est partagé, donc ses crochets CSS
   le sont aussi ; seule la peau change d'un site à l'autre. Chargé par les pages outil.

   ⚠️ LE PARTI PRIS, POSÉ LE 28/08 : LA ZONE DE MESURE EST SOMBRE, L'ÉDITORIAL EST CLAIR.
   Le nom du site veut dire « éclairer » ; il fallait que ça se voie. Sur du beige, une mesure
   est un chiffre parmi d'autres ; sur de la nuit, elle brille — comme un vumètre dans une
   régie. Le texte qui explique, lui, reste sur fond clair : c'est ce qui se lit longtemps, et
   c'est ce que lisent les moteurs. Le contraste entre les deux EST la charte.
   ⛔ Aucune image, aucune ombre coûteuse : la lumière est un dégradé CSS.
--------------------------------------------------------------- */

/* Chapitres — chaque bloc est une façon d'arriver au résultat
--- */
.am-chap{position:relative;overflow:hidden;border-radius:16px;padding:30px 24px 34px;margin:16px 0 10px;background-color:var(--nuit);color:var(--nuit-txt)}
.am-chap::before{content:"";position:absolute;top:-40%;left:-10%;width:70%;height:160%;background:radial-gradient(closest-side,rgba(249,83,17,.20),transparent);pointer-events:none}
.am-chap>*{position:relative}
.am-fond-b{background:var(--nuit-2)}
.am-fond-b::before{left:auto;right:-10%}
.am-tete{display:flex;align-items:flex-start;gap:14px;text-align:left;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.12)}
.am-num{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--orange-plein);color:#fff;font-weight:800;font-size:17px;line-height:34px;text-align:center}
.am-tete h2{margin:2px 0 4px;padding:0;font-family:var(--titre);font-weight:400;font-size:25px;color:#fff}
.am-tete p{margin:0;font-size:14.5px;color:var(--nuit-gris);line-height:1.55}
.am-legende{font-size:13px;color:var(--nuit-gris);margin:0 0 12px;text-align:left}
.am-accord+.am-legende{max-width:520px;margin:14px auto 0;text-align:center}

/* Volets repliables — `<details open>`, l'accordéon natif : aucun JavaScript
--- */
.am-vol>summary{cursor:pointer;list-style:none;position:relative;padding-right:26px}
.am-vol>summary::-webkit-details-marker{display:none}
.am-vol>summary::after{content:"";position:absolute;right:4px;top:12px;width:9px;height:9px;border-right:2px solid var(--nuit-gris);border-bottom:2px solid var(--nuit-gris);transform:rotate(45deg);transition:transform .2s}
.am-vol[open]>summary::after{transform:rotate(-135deg);top:16px}
.am-vol>summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}

/* Zone de dépôt
--- */
.am-zone{border:2px dashed rgba(255,255,255,.22);border-radius:12px;background:rgba(255,255,255,.04);padding:24px 20px 22px;text-align:center;transition:border-color .15s,background .15s}
.am-zone.sur{border-color:var(--lueur);background:rgba(249,83,17,.10)}
.am-zone p{margin:0;font-size:15px;line-height:1.35;color:var(--nuit-txt)}
.am-zone .am-ou{font-size:12.5px;color:var(--nuit-gris);margin:2px 0 1px}
.am-chap .am-petit{font-size:12.5px;line-height:1.5;color:var(--nuit-gris);margin-top:8px}
.am-bouton{display:inline-block;margin:2px 0 0;padding:12px 23px;border-radius:6px;background:var(--orange-plein);color:#fff;font-weight:700;font-size:15px;cursor:pointer;border:0;font-family:inherit}
/* Le second chemin de capture n'est pas l'action principale : il se propose, il ne s'impose
   pas. Même forme, même taille de cible, teinte retenue. */
.am-bouton-2{background:none;color:var(--nuit-txt);border:1px solid rgba(255,255,255,.28)}
.am-bouton-2:hover{border-color:var(--lueur);color:#fff}
.am-bouton:hover{background:var(--orange-clair)}
.am-zone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

/* Lecteur et métronome
--- */
.am-lecteur{margin:18px auto 0;max-width:560px;background:rgba(255,255,255,.05);border-radius:12px;padding:14px 18px 16px}
.am-lecteur audio{display:none}
.am-play{display:flex;align-items:center;gap:13px}
.am-pp{flex:0 0 40px;width:40px;height:40px;border:0;border-radius:50%;background:var(--orange-plein);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.am-pp:hover{background:var(--orange-clair)}
.am-pp svg{width:22px;height:22px;fill:currentColor}
.am-barre{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.16);cursor:pointer;position:relative}
.am-barre:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.am-barre i{display:block;position:relative;height:100%;width:0;border-radius:3px;background:var(--lueur)}
.am-barre i::after{content:"";position:absolute;top:50%;left:100%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--lueur)}
.am-temps{font-size:13px;color:var(--nuit-gris);font-variant-numeric:tabular-nums;white-space:nowrap}
.am-metro{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:15px;cursor:pointer;color:var(--nuit-txt)}
.am-metro input{width:18px;height:18px;accent-color:var(--orange);cursor:pointer}
.am-emo{font-size:18px;line-height:1}
.am-affine{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--nuit-gris)}
.am-affine>b{min-width:62px;font-size:17px;color:#fff;font-variant-numeric:tabular-nums}
.am-affine button,.am-decal button{border:1px solid rgba(255,255,255,.22);background:transparent;border-radius:6px;font:inherit;font-size:13px;cursor:pointer;color:var(--nuit-txt)}
.am-affine button{padding:6px 10px}
.am-affine button:hover,.am-decal button:hover{border-color:var(--lueur);color:var(--lueur)}
.am-affine .am-raz i{font-style:normal;font-weight:700}
.am-decal{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;font-size:13px;color:var(--nuit-gris)}
.am-decal button{width:32px;height:32px;font-size:17px;line-height:1}
.am-decal button.am-raz{width:auto;height:32px;padding:0 11px;font-size:13px}
.am-decal b{min-width:66px;font-variant-numeric:tabular-nums;color:#fff}
.am-lecteur .am-petit{font-size:12.5px;color:var(--nuit-gris);margin:8px 0 0;line-height:1.55;text-align:left}

/* Réglages du socle — un niveau visible, une remise à zéro identique partout
   ⚠️ Ces trois classes sont produites par `ALU.curseur()`, pas par les pages : elles servent
   TOUS les outils. Changer leur allure ici la change partout, et c'est le but — Arthur ne
   doit pas réapprendre un réglage d'un outil à l'autre.
--- */
.alu-reg{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;margin-top:10px}
.alu-reg-lbl{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--nuit-gris)}
.alu-reg-val{font-size:13px;color:#fff;font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.alu-reg input[type=range]{width:100%;accent-color:var(--orange);height:18px;cursor:pointer}

/* ⚠️ DEUX TAILLES DE RÉGLAGE, ET C'EST L'USAGE QUI DÉCIDE, PAS L'IMPORTANCE. Arthur : *« j'aurais
   plutôt fait l'inverse : un petit curseur pour le volume et un grand curseur pour les
   fréquences. »* Il a raison, et la règle vaut au-delà de cet outil : **un réglage qu'on
   manipule EN CONTINU a besoin de course, un réglage qu'on pose UNE FOIS n'a besoin que d'être
   accessible.** On cherche une résonance en balayant la fréquence pendant des minutes ; le
   niveau, on le monte une fois et on n'y revient plus. Une course deux fois plus longue, c'est
   deux fois plus de précision au même geste. */
/* ⚠️ TROIS COLONNES NOMMÉES, PAS DEUX ET DE L'AUTO. La première version laissait la grille
   inventer une troisième colonne pour le bouton de remise à zéro, et le `1fr` se calculait sur
   ce que le reste avait laissé : le curseur n'occupait plus que 135 px. On pose les trois. */
.alu-grand .alu-reg{grid-template-columns:1fr auto auto;gap:7px 12px;margin-top:14px}
.alu-grand .alu-reg-lbl{grid-column:1;grid-row:1;font-size:12.5px;align-self:end}
.alu-grand .alu-reg-val{grid-column:2;grid-row:1;font-size:23px;font-weight:700;color:var(--vert);min-width:0;text-align:right}
.alu-grand .alu-raz{grid-column:3;grid-row:1;align-self:center}
.alu-grand .alu-reg input[type=range]{grid-column:1/-1;grid-row:2;height:30px}
/* Le petit : la même ligne, en plus discret — il ne doit pas disputer la vedette au grand. */
.alu-petit .alu-reg{gap:9px;margin-top:9px}
.alu-petit .alu-reg-lbl{font-size:11px;color:var(--nuit-gris)}
.alu-petit .alu-reg-val{font-size:12px}
.alu-petit .alu-reg input[type=range]{height:13px;max-width:190px}
.alu-raz{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:6px;background:transparent;color:var(--nuit-gris);cursor:pointer}
.alu-raz:hover{border-color:var(--lueur);color:var(--lueur)}
.alu-raz svg{width:15px;height:15px}
/* Le même bouton, quand il porte AUSSI une valeur (« revenir à 120,00 ») : l'icône reste
   la même, elle ne fait que s'accompagner d'un chiffre. */
.alu-raz-txt{width:auto;gap:6px;padding:0 10px;font:inherit;font-size:13px;font-variant-numeric:tabular-nums}
.alu-raz-txt i{font-style:normal}
.am-reglages{margin-top:14px}


/* Message d'étape
--- */
.am-etat{margin:14px 0 0;font-size:14px;min-height:20px;color:var(--nuit-gris)}
.am-etat.travail{color:var(--lueur);font-weight:700}
.am-etat.ok{color:var(--vert)}
.am-etat.ko{color:var(--rouge);font-weight:700}

/* Résultats — les cartes de mesure
--- */
.am-fiche{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:22px 0 14px;font-size:13px;color:var(--nuit-gris)}
.am-fiche .am-nom{font-weight:700;color:#fff;word-break:break-all}
.am-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
/* ⚠️ Sans cette ligne l'aperçu d'exemple ne disparaît jamais : `display:grid` posé par une
   classe l'emporte sur l'attribut `hidden`, qui a la même force. */
.am-duo[hidden]{display:none}
.am-carte{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:22px 18px;text-align:center}
.am-carte .am-eti{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--nuit-gris);font-weight:700}
.am-carte .am-gros{display:block;font-size:58px;line-height:1.05;font-weight:800;color:#fff;margin:6px 0 0;font-variant-numeric:tabular-nums;text-shadow:0 0 26px rgba(255,179,71,.35)}
.am-carte .am-note{font-size:48px;font-family:var(--titre);font-weight:400}
/* Le tempo se corrige LÀ OÙ ON LE LIT : double-clic (ou Entrée au clavier). Le pointeur et
   le trait pointillé sont le seul indice visuel — discret, mais il suffit une fois qu'on a
   vu les décimales. */
.am-gros-bpm{cursor:text;border-bottom:2px dashed rgba(255,255,255,.22);display:inline-block!important;padding-bottom:2px}
.am-gros-bpm:hover,.am-gros-bpm:focus-visible{border-bottom-color:var(--lueur);outline:none}
.am-gros-edit{width:100%;max-width:220px;border:0;border-bottom:2px solid var(--lueur);background:transparent;color:#fff;font:inherit;font-size:inherit;font-weight:inherit;text-align:center;padding:0;font-variant-numeric:tabular-nums}
.am-gros-edit:focus{outline:none}
.am-carte .am-unite{display:block;font-size:16px;color:var(--nuit-txt);margin-bottom:8px}
.am-carte .am-unite i{font-style:normal;color:var(--nuit-gris)}
.am-carte .am-fin{display:block;font-size:13px;color:var(--nuit-gris);line-height:1.5}
.am-conf{display:inline-block;margin-top:10px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.am-conf.ok{background:rgba(110,207,122,.15);color:var(--vert)}
.am-conf.moy{background:rgba(240,180,90,.15);color:var(--ambre)}
.am-conf.bof{background:rgba(240,110,110,.15);color:var(--rouge)}
.am-alt{display:block;margin-top:12px;font-size:13px;color:var(--nuit-gris)}
.am-alt button{border:1px solid var(--lueur);background:transparent;color:var(--lueur);border-radius:6px;padding:5px 11px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;margin-left:4px}
.am-alt button:hover{background:var(--lueur);color:var(--nuit)}
.am-corr{margin-top:14px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.am-corr button{border:1px solid rgba(255,255,255,.22);background:transparent;border-radius:6px;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--nuit-txt)}
.am-corr button:hover{border-color:var(--lueur);color:var(--lueur)}
.am-corr.am-plat{display:block;font-size:13px;color:var(--nuit-gris)}
/* ⚠️ LA MISE EN GARDE S'ADAPTE À SON MONDE, et il a fallu la MESURER pour le voir. Elle
   déclarait `color:var(--nuit-txt)` — une encre claire, faite pour un panneau sombre — mais
   `.al-sec > p` (global.css) est plus spécifique et la repeignait en gris foncé. Sur la page
   claire ça tombait juste par accident ; dans un module du rack, fond sombre, le résultat
   mesuré était **1,11:1** — le seul texte du site qu'il ne faut jamais rater, invisible.
   → un sélecteur assez spécifique pour décider, et DEUX mondes déclarés au lieu d'un. */
p.am-avert{background:rgba(240,180,90,.10);border-left:3px solid var(--ambre);padding:12px 16px;margin:16px 0 0;font-size:14px;line-height:1.6;text-align:left;color:var(--encre)}
.cs-mod-corps p.am-avert{color:var(--nuit-txt);background:rgba(240,180,90,.14)}

/* Accordeur au micro, et les aperçus d'exemple (inertes, en retrait, étiquetés)
--- */
.am-accord-lance{margin-top:18px;text-align:center}
.am-microinfo{display:block;font-size:13px;color:var(--nuit-gris);margin-top:8px;min-height:18px}
.am-accord{max-width:520px;margin:0 auto;background:rgba(255,255,255,.05);border-radius:12px;padding:24px 20px;transition:opacity .2s}
.am-exemple{position:relative;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.16)}
.am-res-ex{position:relative;background:none;border:0;padding:26px 0 0;pointer-events:none}
.am-res-ex .am-carte{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.10)}
.am-res-ex .am-gros,.am-res-ex .am-unite{color:var(--nuit-gris);text-shadow:none}
.am-res-ex .am-alt button,.am-res-ex .am-corr button{border-color:rgba(255,255,255,.16);color:var(--nuit-gris);background:none}
.am-res-ex .am-conf.ok{background:rgba(255,255,255,.06);color:var(--nuit-gris)}
.am-res-ex .am-etiq{top:0;left:0}
.am-exemple .am-grossenote,.am-exemple .am-jauge-lbl{color:var(--nuit-gris)}
.am-exemple .am-grossenote small{color:var(--nuit-gris)}
.am-exemple .am-fin{color:var(--nuit-gris);font-style:italic}
.am-etiq{position:absolute;top:12px;left:14px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--nuit-gris);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:3px 10px;background:var(--nuit)}
.am-grossenote{font-size:66px;line-height:1;font-family:var(--titre);font-weight:400;color:#fff;text-shadow:0 0 30px rgba(255,179,71,.30)}
.am-grossenote small{display:block;font-size:15px;font-family:var(--sans);color:var(--nuit-gris);margin-top:6px;letter-spacing:.08em}
.am-jauge{position:relative;height:16px;margin:22px 0 6px;background:rgba(255,255,255,.10);border-radius:8px}
.am-jauge .am-juste{position:absolute;left:44%;width:12%;top:0;bottom:0;background:rgba(110,207,122,.28);border-radius:8px}
.am-aiguille{position:absolute;top:-7px;left:50%;width:4px;height:30px;margin-left:-2px;border-radius:2px;background:#fff;transition:left .08s linear}
.am-aiguille.juste{background:var(--vert);box-shadow:0 0 14px rgba(110,207,122,.7)}
.am-jauge-lbl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--nuit-gris);letter-spacing:.04em}
.am-accord .am-fin{margin:14px 0 0;text-align:center;color:var(--nuit-gris)}
.am-transpo{margin:14px 0 0;padding:12px 14px;background:rgba(249,83,17,.12);border-left:3px solid var(--orange);border-radius:0 6px 6px 0;font-size:14px;line-height:1.6;text-align:left;color:var(--nuit-txt)}

/* Champ tempo, frappe manuelle et tableau des delays
--- */
.am-tempo{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;color:var(--nuit-txt)}
.am-tempo label{font-size:15px}
.am-tempo input{width:110px;padding:11px 12px;border:1px solid rgba(255,255,255,.22);border-radius:6px;background:rgba(255,255,255,.06);font:inherit;font-size:20px;font-weight:700;text-align:center;color:#fff;font-variant-numeric:tabular-nums}
.am-tempo input:focus{outline:2px solid var(--lueur);outline-offset:1px;border-color:var(--lueur)}
.am-tap{border:1px solid var(--orange-plein);background:var(--orange-plein);color:#fff;border-radius:6px;padding:11px 18px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;user-select:none;touch-action:manipulation}
.am-tap:hover{background:var(--orange-clair);border-color:var(--orange-clair)}
.am-tap:active{transform:scale(.97)}
.am-raz{border:1px solid rgba(255,255,255,.22);background:none;color:var(--nuit-gris);border-radius:6px;padding:9px 13px;font:inherit;font-size:13px;cursor:pointer}
.am-raz:hover{border-color:#fff;color:#fff}
.am-unite-bpm{font-size:15px;color:var(--nuit-gris)}
.am-tapinfo{font-size:13px;color:var(--nuit-gris);text-align:left}
.am-tabwrap{overflow-x:auto}
.am-tab{width:100%;border-collapse:collapse;font-size:15px;min-width:420px;font-variant-numeric:tabular-nums;color:var(--nuit-txt)}
.am-tab th,.am-tab td{padding:5px 9px;line-height:1.25;border-bottom:1px solid rgba(255,255,255,.10);text-align:right}
.am-tab thead th{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--nuit-gris);padding-bottom:7px}
.am-tab tbody th{text-align:left;font-weight:400;white-space:nowrap}
.am-tab tbody th span{color:var(--nuit-gris);font-size:12.5px;margin-left:3px}
.am-tab thead th:first-child,.am-tab tbody th:first-child{text-align:left}
.am-tab td.hz{color:var(--nuit-gris);font-size:13.5px}
.am-tab tr.ref{background:rgba(249,83,17,.14)}
.am-tab tr.ref th,.am-tab tr.ref td{font-weight:700;color:#fff}
.am-tab tr.ref td.hz{font-weight:400}

.am-reverb{margin-top:20px}
.am-reverb>b{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--nuit-gris);margin-bottom:10px;text-align:left}
.am-reverb>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.am-reverb span{display:block;background:rgba(255,255,255,.05);border-radius:10px;padding:13px 15px;text-align:left;font-size:12.5px;color:var(--nuit-gris);line-height:1.5}
.am-reverb i{display:block;font-style:normal;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--nuit-gris)}
.am-reverb em{display:block;font-style:normal;font-size:20px;font-weight:700;color:#fff;margin:2px 0 4px;font-variant-numeric:tabular-nums}

/* Verdicts de l'analyseur de mix
--- */
.mx-liste{display:grid;gap:10px;margin-top:22px}
.mx-item{background:rgba(255,255,255,.05);border-left:3px solid rgba(255,255,255,.25);border-radius:0 10px 10px 0;padding:13px 16px;text-align:left}
.mx-item.ok{border-left-color:var(--vert)}
.mx-item.moy{border-left-color:var(--ambre)}
.mx-item.ko{border-left-color:var(--rouge)}
.mx-haut{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px}
.mx-haut b{font-size:15px;color:#fff}
.mx-haut span{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.mx-item.ok .mx-haut span{color:var(--vert)}
.mx-item.moy .mx-haut span{color:var(--ambre)}
.mx-item.ko .mx-haut span{color:var(--rouge)}
.mx-item p{margin:0;font-size:13.5px;line-height:1.6;color:var(--nuit-gris)}

/* Plateformes et spectre
--- */
.mx-sst{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--nuit-gris);margin:26px 0 10px;padding:0;text-align:left;font-weight:700;font-family:var(--sans)}
.mx-plats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.mx-plats span{display:block;background:rgba(255,255,255,.05);border-radius:10px;padding:11px 13px;text-align:left;font-size:12.5px;color:var(--nuit-gris)}
.mx-plats b{display:block;font-size:14px;color:#fff;margin-bottom:2px}
.mx-plats .baisse{color:var(--rouge)}
.mx-plats .sous{color:var(--ambre)}
.mx-spectre{display:flex;align-items:flex-end;gap:8px;height:150px;background:rgba(255,255,255,.05);border-radius:10px;padding:14px 14px 0}
.mx-spectre div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-align:center}
.mx-spectre i{display:block;background:linear-gradient(to top,var(--orange),var(--lueur));border-radius:4px 4px 0 0;min-height:3px}
.mx-spectre b{font-size:12px;font-weight:700;margin-top:5px;color:#fff;font-variant-numeric:tabular-nums}
.mx-spectre span{font-size:10.5px;color:var(--nuit-gris);line-height:1.25;padding-bottom:10px}
.mx-note{margin-top:12px}
.mx-ex{padding:26px 18px 18px}

/* Comparateur de références — quatre colonnes : vous, eux, l'écart, et la phrase
   ⚠️ La ligne de cohérence passe AVANT le tableau, pas après : si la moyenne ne décrit rien,
   il faut le lire avant de lire la comparaison, pas en note de bas de page.
--- */
.cp-mien{margin:14px 0 0;font-size:14px;color:#fff;text-align:center;word-break:break-all}
.cp-mien::before{content:"♪";color:var(--lueur);margin-right:8px}
.cp-refs{margin-top:16px}
.cp-compte{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--nuit-gris);margin-bottom:8px}
.cp-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cp-liste li{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border-radius:8px;padding:8px 10px 8px 13px;font-size:13.5px}
.cp-liste li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nuit-txt)}
.cp-liste button{flex:0 0 26px;width:26px;height:26px;border:1px solid rgba(255,255,255,.22);border-radius:6px;background:none;color:var(--nuit-gris);font:inherit;font-size:16px;line-height:1;cursor:pointer}
.cp-liste button:hover{border-color:var(--rouge);color:var(--rouge)}
.cp-lance{margin:18px 0 0;text-align:center}
.cp-lance button[disabled]{opacity:.35;cursor:not-allowed}
.cp-coh{margin:0 0 18px;padding:13px 16px;border-radius:0 10px 10px 0;font-size:13.5px;line-height:1.6;text-align:left;border-left:3px solid}
.cp-coh.ok{background:rgba(110,207,122,.10);border-left-color:var(--vert);color:var(--nuit-txt)}
.cp-coh.moy{background:rgba(240,180,90,.10);border-left-color:var(--ambre);color:var(--nuit-txt)}
.cp-coh.ko{background:rgba(240,110,110,.12);border-left-color:var(--rouge);color:var(--nuit-txt)}
.cp-tete{display:grid;grid-template-columns:1fr 92px 92px 78px;gap:10px;padding:0 16px 6px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--nuit-gris)}
.cp-tete span{text-align:right}
.cp-l{background:rgba(255,255,255,.05);border-left:3px solid rgba(255,255,255,.25);border-radius:0 10px 10px 0;padding:12px 16px;margin-bottom:8px;text-align:left}
.cp-l.ok{border-left-color:var(--vert)}
.cp-l.moy{border-left-color:var(--ambre)}
.cp-l.ko{border-left-color:var(--rouge)}
.cp-l-haut{display:grid;grid-template-columns:1fr 92px 92px 78px;gap:10px;align-items:baseline}
.cp-l-haut b{font-size:14.5px;color:#fff}
.cp-l-haut span{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cp-l-haut .cp-v{font-size:16px;font-weight:800;color:#fff}
.cp-l-haut .cp-r{font-size:14px;color:var(--nuit-gris)}
.cp-l-haut .cp-e{font-size:15px;font-weight:800}
.cp-l.ok .cp-e{color:var(--vert)}
.cp-l.moy .cp-e{color:var(--ambre)}
.cp-l.ko .cp-e{color:var(--rouge)}
.cp-l p{margin:5px 0 0;font-size:13.5px;line-height:1.6;color:var(--nuit-gris)}
/* Le spectre comparé : une barre par bande, à gauche ou à droite de zéro. On lit d'un coup
   où l'on met de l'énergie que les références n'y mettent pas. */
.cp-spectre{background:rgba(255,255,255,.05);border-radius:10px;padding:14px 16px}
.cp-b{display:grid;grid-template-columns:104px 1fr 52px;align-items:center;gap:10px;margin-bottom:7px}
.cp-b-nom{font-size:12px;color:var(--nuit-gris)}
.cp-b-jauge{position:relative;height:12px;background:rgba(255,255,255,.08);border-radius:6px}
.cp-b-jauge::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:rgba(255,255,255,.28)}
.cp-b-jauge i{position:absolute;top:0;bottom:0;border-radius:6px}
.cp-b-jauge i.plus{left:50%;background:linear-gradient(to right,var(--orange),var(--lueur))}
.cp-b-jauge i.moins{right:50%;background:linear-gradient(to left,var(--orange),var(--lueur))}
.cp-b b{font-size:13px;text-align:right;font-variant-numeric:tabular-nums;color:#fff}

/* Écoute en direct d'une entrée
--- */
.mx-lance{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;color:var(--nuit-txt)}
.mx-lance label{font-size:15px}
.mx-lance select{max-width:280px;padding:11px 12px;border:1px solid rgba(255,255,255,.22);border-radius:6px;background:rgba(255,255,255,.06);font:inherit;font-size:14px;color:#fff}
.mx-lance .am-microinfo{flex-basis:100%}
.mx-direct{max-width:560px;margin:20px auto 0;background:rgba(255,255,255,.05);border-radius:12px;padding:18px 20px;transition:opacity .2s}
.mx-direct.dormant{opacity:.4}
.mx-jauge{display:grid;grid-template-columns:110px 1fr 96px;align-items:center;gap:11px;margin-bottom:11px}
.mx-jauge>span{font-size:12.5px;color:var(--nuit-gris);text-align:left}
.mx-jauge>i{display:block;height:12px;border-radius:6px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.mx-jauge>i::before{content:"";position:absolute;inset:0;width:var(--w,0);background:var(--vert);border-radius:6px}
.mx-jauge>b{font-size:14px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:#fff}
.mx-jauge.moy>i::before{background:var(--ambre)}
.mx-jauge.ko>i::before{background:var(--rouge)}
.mx-maxi{margin:14px 0 0;font-size:12.5px;color:var(--nuit-gris);text-align:center}
.mx-maxi b{color:#fff;font-variant-numeric:tabular-nums}

/* Calculateurs — même atelier sombre, même règle : le résultat brille
--- */
.calc{position:relative;overflow:hidden;background:var(--nuit);color:var(--nuit-txt);border-radius:16px;padding:24px;margin:26px 0}
.calc::before{content:"";position:absolute;top:-40%;left:-10%;width:70%;height:160%;background:radial-gradient(closest-side,rgba(249,83,17,.20),transparent);pointer-events:none}
.calc>*{position:relative}
.calc-modes{border:0;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.calc-modes legend{float:left;width:100%;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--nuit-gris);margin-bottom:8px;padding:0}
.calc-modes label{display:inline-flex;align-items:center;gap:7px;font-size:15px;cursor:pointer}
.calc-modes input{accent-color:var(--orange)}
.calc-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:14px}
.calc-champ{display:flex;flex-direction:column;gap:5px;min-width:0;--si-aff:flex}
.calc-champ>span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--nuit-gris);font-weight:700}
.calc-champ>span i{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0}
.calc-champ input,.calc-champ select{font:inherit;font-size:17px;padding:9px 11px;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:rgba(255,255,255,.06);color:#fff;width:100%;font-variant-numeric:tabular-nums}
.calc-champ input:focus,.calc-champ select:focus{outline:2px solid var(--lueur);outline-offset:1px}
.calc-champ option{background:#171614;color:#fff}
.calc[data-mode="largeur"] .calc-champ[data-pour="focale recul"],
.calc[data-mode="focale"] .calc-champ[data-pour="largeur focale recul"],
.calc[data-mode="recul"] .calc-champ[data-pour="largeur focale"]{display:none}
/* ⚠️ `data-pour` ci-dessus n'est PAS une liste des modes où le champ apparaît : c'est un
   simple jeton, et ce sont les trois règles nommées qui décident. Piège vérifié — le lire
   comme une liste inverse l'affichage du calculateur de champ.
   Les outils écrits depuis emploient donc `data-si`, qui, LUI, nomme les modes où le champ
   se montre — plusieurs si besoin, séparés par une espace, d'où le `~=` (le sélecteur de
   liste de mots). Un seul sens de lecture, plus d'ambiguïté. Un nouveau mode = une ligne
   de plus dans la liste ci-dessous, et rien d'autre : pas de JavaScript pour ça, donc
   aucun clignotement au chargement. */
/* ⚠️ LA RÈGLE VISE TOUT CE QUI PORTE `data-si`, plus seulement les champs. Elle ne parlait que
   de `.calc-champ` — un curseur de fréquence, qui est une LIGNE DE RÉGLAGE et pas un champ de
   saisie, échappait donc au mécanisme et restait affiché pour du bruit. Élargir la règle vaut
   mieux qu'ajouter une exception : le jeton dit « montre-moi dans ces modes », quel que soit
   l'élément qui le porte.
   ⚠️ MAIS ELLE NE PEUT PLUS IMPOSER `flex` EN REVENANT. Écrite pour des champs — qui SONT des
   colonnes flex — elle rendait `display:flex` à tout ce qu'elle remontrait : mon curseur, un
   simple bloc, se retrouvait en flex et rétrécissait à la largeur de son contenu (135 px au
   lieu de 812). Chaque élément déclare donc sous quelle forme il revient, avec `--si-aff` ;
   la liste des modes, elle, reste unique. */
.calc [data-si]{display:none}
.calc[data-mode="nd"] [data-si~="nd"],
.calc[data-mode="vitesse"] [data-si~="vitesse"],
.calc[data-mode="tc"] [data-si~="tc"],
.calc[data-mode="duree"] [data-si~="duree"],
.calc[data-mode="images"] [data-si~="images"],
.calc[data-mode="ton"] [data-si~="ton"],
.calc[data-mode="note"] [data-si~="note"],
.calc[data-mode="freq"] [data-si~="freq"],
.calc[data-mode="ratio"] [data-si~="ratio"],
.calc[data-mode="taille"] [data-si~="taille"],
.calc[data-mode="recadrer"] [data-si~="recadrer"],
.calc[data-mode="duree"] [data-si~="duree"],
.calc[data-mode="mesure"] [data-si~="mesure"],
.calc[data-mode="poids"] [data-si~="poids"],
.calc[data-mode="carte"] [data-si~="carte"]{display:var(--si-aff,block)}
/* Second axe de visibilité, indépendant du mode : certains champs dépendent du CODEC choisi
   et non de la question posée. Même lecture que `data-si` — le nom de l'état où l'on se montre. */
.calc .calc-champ[data-sicodec]{display:none}
.calc[data-codec="prores"] .calc-champ[data-sicodec~="prores"],
.calc[data-codec="manuel"] .calc-champ[data-sicodec~="manuel"]{display:flex}

/* Une zone de dépôt n'est pas un champ : elle se montre en bloc, pas en colonne flex. */
.calc .am-zone[data-si]{display:none}
.calc[data-mode="mesure"] .am-zone[data-si~="mesure"]{display:block;margin-top:18px}
.calc-resultat{display:block;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.calc-chiffre{font-size:38px;font-weight:800;line-height:1.1;margin:0 0 8px;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 26px rgba(255,179,71,.35)}
.calc-detail{margin:0 0 6px;font-size:15px;line-height:1.55;color:var(--nuit-txt)}
.calc-repere{margin:0;font-size:14px;color:var(--nuit-gris)}
.calc-vide{margin:0;color:var(--nuit-gris);font-size:15px}
/* Celle-ci vit dans l'éditorial, pas dans l'atelier : elle reste claire. */
.calc-formule{text-align:center;font-size:17px;font-weight:600;background:#efece6;border:1px solid var(--bord);border-radius:12px;padding:14px 16px;margin:16px 0;font-variant-numeric:tabular-nums}

@media(max-width:560px){
.am-chap{padding:24px 16px 28px;border-radius:14px}
/* Sur téléphone, quatre colonnes ne tiennent pas : le titre passe au-dessus, les trois
   chiffres restent alignés en dessous — on garde la comparaison, on perd juste la ligne. */
.cp-tete{display:none}
.cp-l-haut{grid-template-columns:1fr 1fr 1fr}
.cp-l-haut b{grid-column:1/-1;margin-bottom:2px}
.cp-l-haut .cp-v,.cp-l-haut .cp-r,.cp-l-haut .cp-e{text-align:left}
.cp-b{grid-template-columns:78px 1fr 46px;gap:8px}
.am-tete{gap:11px}
.am-num{flex-basis:28px;width:28px;height:28px;line-height:28px;font-size:15px}
.am-tete h2{font-size:22px}
.am-grossenote{font-size:52px}
.am-carte .am-gros{font-size:46px}
.am-carte .am-note{font-size:38px}
.am-tab{font-size:14px}
.mx-jauge{grid-template-columns:88px 1fr 84px;gap:8px}
.mx-spectre span{font-size:9.5px}
.calc{padding:20px 16px}
.calc-chiffre{font-size:32px}
}

/* LA CONSOLE — un rack d'appareils MODERNES. Le virage du 30/08, et il faut dire pourquoi.
   ------------------------------------------------------------------------------------
   ⚠️ CE QU'ON A ARRÊTÉ, ET CE QU'ON GARDE. On avait reconstitué un rack analogique : montants
   perforés, vis cruciformes, métal brossé, poignées. Arthur : *« ça ressemble vraiment à
   quelque chose de trop vétuste […] sur les bords on a mis des trous, mais ça ressemble
   énormément à une pellicule vidéo et non pas à un rack audio. »* Il a raison, et le défaut
   n'est pas la taille des trous : **une imitation de matière ne devient pas crédible en
   grandissant, elle devient plus visiblement fausse.** Toute la quincaillerie est retirée.
   Ce qui RESTE est l'idée, qui elle marchait : des appareils empilés, chacun avec son
   identité, son écran, sa couleur.
   ⚠️ LA RÉFÉRENCE EST DEVENUE LE PLUGIN MODERNE (Yamaha, Steinberg) : châssis noir bleuté
   quasiment plat, filets d'un pixel, AUCUNE matière ; l'identité tient dans une arête de
   couleur et une LED, pas dans des vis ; l'écran est la pièce maîtresse ; typographie petite,
   capitales espacées. Ce qui coûte le moins à afficher est aussi ce qui a l'air le plus récent
   — la contrainte de légèreté et le parti pris esthétique disent ici la même chose.
--- */
/* ⚠️ LE CHÂSSIS EST CLAIR, LES APPAREILS SONT SOMBRES — et ce n'est pas un revirement de plus.
   Arthur, captures à l'appui : *« comme les plugins sont couleur sombre, le background est
   également couleur sombre, les boutons sont couleur sombre sur fond sombre […] on ne voit plus
   la délimitation entre les choses […] le fond devrait être plus clair, peut-être couleur crème
   ou blanc. »* Il a raison, et c'est déjà la doctrine du site, posée le 28/08 en tête de ce
   fichier : **la zone de mesure est sombre, ce qui l'entoure est clair.** Le rack l'avait
   oubliée en devenant sombre de bout en bout ; il la retrouve, et chaque appareil se découpe. */
/* ⚠️ Le rack prend la largeur qu'on lui donne : en tuiles repliées, deux colonnes valent
   mieux qu'une liste de vingt-trois lignes. */
.cs{background:var(--fond);color:var(--encre);border:1px solid var(--bord);border-radius:12px;margin:22px 0;overflow:hidden}
.cs-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px}
.cs-marque{flex:0 0 auto;font-family:var(--titre);font-size:16px;color:var(--encre);display:flex;align-items:center;gap:9px}
/* Le plein écran, à droite de la marque. Discret : un technicien le cherche une fois et ne le
   revoit plus. Deux dessins dans le bouton, l'un ou l'autre selon l'état — pas de JS pour
   redessiner une icône. */
.cs-plein{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--bord);border-radius:7px;background:none;color:#6f6a62;cursor:pointer}
.cs-plein:hover{border-color:var(--orange-fonce);color:var(--orange-fonce)}
.cs-plein svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cs-plein .cs-plein-x{display:none}
.cs-plein[aria-pressed=true] .cs-plein-o{display:none}
.cs-plein[aria-pressed=true] .cs-plein-x{display:block}
/* Le navigateur a refusé d'ouvrir la fenêtre : le bouton le DIT, là où l'on vient d'appuyer. */
.cs-plein.bloque{border-color:var(--orange-plein);color:var(--orange-fonce)}
/* La mention bêta est un BANDEAU CENTRÉ, comme sur l'accueil. Collée à droite de la marque, la
   même phrase se lisait comme une note de bas de page au lieu d'un contexte. */
.cs-beta{margin:0;padding:9px 13px;text-align:center;font-size:11.5px;line-height:1.45;color:#6f6a62;background:#f7f4ef;border-bottom:1px solid var(--bord)}
.cs-beta b{color:var(--orange-fonce);letter-spacing:.06em;text-transform:uppercase}
.cs-marque .al-marque{color:var(--orange-fonce);filter:none}

/* ⚠️ DEUX CASES, PAS DEUX ONGLETS — et rien de coché à l'arrivée. Arthur : *« l'internaute
   voit que AUDIO ou VIDEO est décoché, donc il voit qu'il doit cocher l'un des deux […] peut-être
   espacer les deux boutons pour écrire "or" entre les deux. »* Un onglet dit « te voilà ici » ;
   une case dit « choisis ». La console pose une question, elle ne présume pas la réponse — d'où
   le carré dessiné dans le bouton, et le mot qui sépare au lieu d'un simple écart. */
.cs-onglets{display:flex;align-items:center;gap:18px;justify-content:center;padding:2px 13px 12px;border-bottom:1px solid var(--bord)}
/* ⚠️ UN GALET, DEUX BOUTONS. Le nom choisit la famille, la flèche plie sa liste — Arthur
   désignait la flèche (*« quand je rappuie sur la petite flèche, il ne remonte pas »*), et
   c'est la sortie de son impasse : on ne demande plus deux choses au même geste. Le filet
   entre les deux moitiés EST l'information qu'il y a deux cibles. */
.cs-galet{flex:0 1 200px;display:flex;align-items:stretch;border:1px solid var(--bord);border-radius:6px;background:#fff;overflow:hidden}
.cs-galet:hover{border-color:var(--orange-fonce)}
.cs-galet.actif{background:var(--nuit);border-color:var(--nuit)}
.cs-onglet{flex:1;min-width:0;font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:9px 4px 9px 12px;border:0;background:none;color:#5d5d5d;cursor:pointer}
.cs-galet.actif .cs-onglet{color:#fff}
.cs-plier-fam{flex:0 0 30px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-left:1px solid var(--bord);background:none;color:#5d5d5d;cursor:pointer}
.cs-galet.actif .cs-plier-fam{border-left-color:rgba(255,255,255,.22);color:#fff}
.cs-onglet:hover,.cs-plier-fam:hover{color:var(--encre)}
.cs-galet.actif .cs-onglet:hover,.cs-galet.actif .cs-plier-fam:hover{color:#fff;background:rgba(255,255,255,.09)}
.cs-ou{flex:0 0 auto;font-size:11px;font-style:italic;color:#8b8b8b}

/* ⚠️ L'INVITATION DU PREMIER PASSAGE, et sa discrétion est la moitié du travail. Elle paraît,
   respire cinq secondes avec les deux galets, puis s'en va.
   ⚠️ Un `display:grid` mis là pour « réserver la place » a coupé la phrase en quatre lignes —
   chaque mot en gras devenait sa propre rangée. Vu à l'écran, pas dans le code. Elle reste un
   paragraphe ; ce qu'elle décale en partant, c'est un rack encore vide. */
.cs-invite{margin:0;padding:0 13px 11px;font-size:12px;text-align:center;color:#6f6a62;
  animation:cs-parait .5s ease-out both}
.cs-invite b{color:var(--encre);font-weight:700}
.cs-invite.part{animation:cs-sen-va .55s ease-in forwards}
@keyframes cs-parait{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes cs-sen-va{to{opacity:0;transform:translateY(-4px)}}
/* Le galet respire pendant l'invitation : c'est LUI qu'on doit cliquer, la phrase ne fait que
   le nommer. Trois respirations, puis plus rien — une animation qui ne s'arrête jamais devient
   un clignotant qu'on cesse de voir. */
.cs-galet.appel{animation:cs-respire 1.7s ease-in-out 3}
@keyframes cs-respire{50%{border-color:var(--orange-fonce);box-shadow:0 0 0 3px rgba(249,83,17,.10)}}
@media (prefers-reduced-motion:reduce){.cs-invite,.cs-invite.part,.cs-galet.appel{animation:none}}
/* ⚠️ PLUS DE CASE DESSINÉE : *« il faudrait qu'il n'y ait pas de case à cocher dans audio,
   c'est juste que la case en question elle est noircie ou pas »*. Le bouton EST la case — il
   noircit, point. Le chevron ne dit pas un état, il dit qu'il y a quelque chose dessous ; il
   se retourne pendant que la liste est ouverte. */
.cs-chevron{width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg);margin-top:-4px;opacity:.6;transition:transform .16s,margin .16s}
.cs-plier-fam[aria-expanded="true"] .cs-chevron{transform:rotate(-135deg);margin:3px 0 0}

/* LA LISTE DE LA FAMILLE, dépliée sous son bouton — et refermée toute seule après la coche.
   ⚠️ Elle GLISSE en s'ouvrant : une liste qui disparaît d'un coup passe pour un raté, la même
   qui se replie passe pour une conséquence. C'est tout ce qui sépare « c'est fait » de « c'est
   cassé », et ça ne coûte qu'une animation de la hauteur. */
.cs-tableau{padding:11px 13px 13px;border-bottom:1px solid var(--bord);background:#fbfaf8;animation:cs-deplie .17s ease-out}
@keyframes cs-deplie{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cs-tableau{animation:none}.cs-chevron{transition:none}}
.cs-tableau-tete{margin:0 0 7px;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#5d5d5d}
.cs-tableau-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:2px 12px}
.cs-case{display:flex;align-items:center;gap:9px;padding:3px 6px;border-radius:5px;font-size:12.5px;cursor:pointer}
.cs-case:hover{background:rgba(0,0,0,.045)}
.cs-case input{width:15px;height:15px;flex:0 0 15px;accent-color:var(--teinte-encre,var(--teinte));cursor:pointer}
/* ⚠️ L'ICÔNE A REMPLACÉ LE CARRÉ DE COULEUR — et elle est ÉPAISSIE pour ça. Un dessin de 17 px
   au trait de 5 unités se lit comme un gribouillis à cette taille : à 21 px et 7 unités, il
   redevient un pictogramme. Arthur : *« plus gras, plus imposants, plus visibles. »* */
.cs-case .ot-ico{flex:0 0 21px;width:21px;height:21px;color:var(--teinte-encre,var(--teinte));stroke-width:7}
.cs-case.soon{cursor:default;color:#6f6f6f}
.cs-case.soon:hover{background:none}
/* L'icône ferme la ligne : la liste montre le même dessin que le rack, on reconnaît l'appareil
   avant de le poser. `margin-left:auto` la pousse au bout — sauf quand « soon » l'y a précédée. */
.cs-bientot{margin-left:auto}
.cs-case.soon .ot-ico{opacity:.65}
/* ⚠️ UN BOUTON DÉGUISÉ EN MOT, PAS UN LIEN : la console n'a le droit de faire naviguer nulle
   part, et Arthur veut lire « write to us ». Le pointillé dit qu'on peut appuyer ; une fois
   l'adresse révélée, il s'efface — il n'y a plus rien à découvrir. */
.cs-courriel{white-space:nowrap;padding:0;border:0;background:none;font:inherit;color:var(--orange-fonce);border-bottom:1px dotted currentColor;cursor:pointer}
.cs-courriel[data-vu]{border-bottom:0;color:#6f6a62;cursor:default}

/* LE MENU. Une puce plate, un filet, une LED de la couleur de l'appareil. Posée dans le rack,
   la LED s'allume et le filet prend la couleur — le reste ne bouge pas. */
/* PIANO — chercher la note qu'on chante
--------------------------------------------------------------------------------------
⚠️ LE CLAVIER EST EN POURCENTAGES, jamais en pixels : c'est ce qui lui permet de tenir dans un
module de la console comme dans une page pleine largeur, sans deux jeux de règles. Les noires
sont posées en absolu PAR-DESSUS les blanches, mais elles restent dans l'ordre du document. */
.pn-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pn-lecture{display:flex;align-items:baseline;gap:10px;min-height:34px;flex-wrap:wrap}
.pn-note{font-size:30px;font-weight:700;color:var(--nuit-txt);line-height:1}
.pn-hz{font-size:15px;color:var(--vert)}
.pn-midi{font-size:12px;color:var(--nuit-gris)}
.pn-vide{font-size:13.5px;color:var(--nuit-gris)}
.pn-cmd{display:flex;align-items:center;gap:8px}
.pn-cmd .am-bouton-2{padding:6px 13px;font-size:16px;line-height:1}
.pn-oct{font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--nuit-gris);min-width:30px;text-align:center}
.pn-tenir{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--nuit-txt);cursor:pointer;margin-left:6px}
.pn-tenir input{width:16px;height:16px;accent-color:var(--orange-plein);cursor:pointer}

.pn-clavier{position:relative;height:168px;user-select:none;touch-action:none}
.pn-sansjs{margin:0;padding:22px 16px;text-align:center;font-size:13.5px;color:var(--nuit-gris)}
.pn-t{position:absolute;top:0;padding:0;border:0;font:inherit;cursor:pointer}
.pn-blanche{height:100%;background:#f2efe9;border-radius:0 0 5px 5px;box-shadow:inset -1px 0 0 rgba(0,0,0,.22);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:9px;font-size:10.5px;color:#8a8378}
.pn-noire{height:62%;background:#241f1b;border-radius:0 0 4px 4px;z-index:2;box-shadow:0 2px 4px rgba(0,0,0,.45)}
.pn-blanche:hover{background:#e6e1d7}
.pn-noire:hover{background:#332c26}
/* ⚠️ La touche qui sonne prend la couleur d'ACTION du site, pas un gris : sur un clavier de
   vingt-quatre touches, l'appui doit se voir du coin de l'œil pendant qu'on chante. */
.pn-blanche.sonne{background:var(--orange-clair);color:#fff}
.pn-noire.sonne{background:var(--orange-fonce)}
.pn-t:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;z-index:3}
.pn-reglages{margin-top:16px}
@media (max-width:560px){.pn-clavier{height:132px}.pn-blanche{font-size:9px;padding-bottom:6px}}

/* GÉNÉRATEUR DE FRÉQUENCES — l'avertissement d'abord, les réglages ensuite
--------------------------------------------------------------------------------------
⚠️ L'AVERTISSEMENT EST AU-DESSUS DES COMMANDES, et il est visible sans rien déplier. Un outil
qui peut abîmer une oreille ne met pas sa mise en garde en note de bas de page. */
.gn-reglages{margin:16px 0 4px}
.gn-cmd{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.gn-etat{font-size:13.5px;color:var(--nuit-txt)}
.gn-etat b{color:var(--vert)}
.gn-balayage{margin-top:18px}
.gn-log{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--nuit-txt);margin:10px 0 12px;cursor:pointer}
.gn-log input{width:16px;height:16px;accent-color:var(--orange-plein);cursor:pointer}

/* LE RACK — des tuiles qu'on déplie, et rien d'autre.
   ⚠️ IL N'Y A PLUS DE MENU. Il y avait des pastilles en haut ET des appareils en dessous :
   deux fois la même liste. Arthur : *« et si jamais il n'y avait plus de bouton là-haut, mais
   qu'on avait uniquement les titres de chaque élément qui sont des accordéons fermés […] tous
   les plugins sont affichés, sauf que d'origine ils sont tous repliés. »* **Une tuile fermée
   EST le bouton.**
   ⚠️ DES COLONNES, PAS UNE GRILLE QUI S'ENROULE. En `flex-wrap`, la hauteur d'une rangée est
   celle du plus grand : dès qu'une tuile est dépliée, la rangée suivante commence tout en bas
   et laisse un trou béant. En colonnes, chaque tuile se pose sous la précédente dans sa
   colonne — et les colonnes s'équilibrent toutes seules. */
.cs-rack{padding:10px;columns:330px;column-gap:10px}
/* ⚠️ CHAQUE FAMILLE PARCOURT LA ROUE ENTIÈRE — et c'est la correction d'un défaut que seul le
   RACK montrait. Le nuancier balayait une moitié de roue par famille (audio dans les chaudes,
   vidéo dans les froides). Sur le papier, vingt-trois teintes bien réparties ; à l'écran,
   Arthur : *« sur cinq plugins il n'y a que deux couleurs, le marron et le vert. »*
   📌 **La cause : le rack ne montre que les outils EN SERVICE**, et les cinq outils audio prêts
   sont les indices 0, 1, 2, 9 et 10 — les deux EXTRÉMITÉS de l'arc. Tout le milieu (les jaunes,
   54° à 128°) appartient à des outils qui n'existent pas encore. Un balayage régulier sur le
   catalogue ne donne donc PAS un balayage régulier sur ce qu'on voit.
   → chaque famille prend la roue entière (audio 0°→285°, vidéo 20°→330°) : les cinq appareils
   audio en service tombent maintenant sur rose, orange, kaki, violet et mauve.
   ⚠️ ET LA TONALITÉ CYCLE SUR TROIS TONS, PAS DEUX (pâle / vif / moyen). À deux tons, deux
   outils distants de deux rangs retombent sur la MÊME tonalité, et à la faible luminosité d'un
   corps de tuile, 56° de teinte ne suffisent pas à les séparer : deux appareils vidéo se
   ressemblaient à ΔE 12,5. À trois tons, une tonalité ne se répète que tous les trois rangs.
   Mesuré sur les appareils RÉELLEMENT posés dans le rack : la paire la plus proche passe de
   12,5 à 20,8 en vidéo, et tient 34 en audio. */
/* ⚠️ LES PANNEAUX DE L'OUTIL PRENNENT LA TEINTE DE LEUR APPAREIL. C'était la vraie cause du
   « tout le reste du contenu du plugin n'est pas du tout sur un fond vert » : `.am-chap` et
   `.calc` peignent `--nuit` en OPAQUE et recouvrent toute la tuile. Teinter le corps ne servait
   à rien tant qu'ils restaient neutres — la couleur était là, cachée dessous. */
.cs-mod-corps .am-chap,.cs-mod-corps .calc{background-color:var(--teinte-p1)}
.cs-mod-corps .am-fond-b{background-color:var(--teinte-p2)}
/* ⚠️ ET LE GRIS DES PETITS LIBELLÉS SE RELÈVE AVEC EUX. Teinter les panneaux les a éclaircis ;
   `--nuit-gris`, réglé pour un fond quasi noir, tombait à 3,2:1 sur les plus clairs — vingt
   libellés de 11 px sous le seuil AA, trouvés par l'audit du rack et par rien d'autre. On
   redéfinit la VARIABLE, on n'empile pas une règle de couleur par élément. */
.cs-mod-corps{--nuit-gris:#cec8be}

/* ⚠️ `position:relative` REVIENT, et cette fois pour une raison : la case qui retire
   l'appareil se pose en absolu au-dessus de la façade. Elle avait été retirée avec l'arête de
   couleur, qui, elle, n'avait plus de rôle. */
.cs-mod{break-inside:avoid;margin:0 0 10px;position:relative;border-radius:10px;overflow:hidden;
  background-color:var(--teinte-fond,#0f141b);border:1px solid rgba(255,255,255,.09);
  background-image:radial-gradient(130% 95% at 10% 0,rgba(255,255,255,.13),transparent 66%)}
/* ⚠️ L'ARÊTE DE COULEUR EST SUPPRIMÉE, et c'est une réparation par SOUSTRACTION. Elle portait
   l'identité à elle seule tant que les 23 fonds étaient quasi noirs ; depuis que la façade
   porte la couleur, c'est un trait de la même teinte posé sur la même teinte — il ne se
   détachait plus (mesuré : 1,3:1 sur sept appareils) et n'ajoutait rien. Forcer son contraste
   aurait été ajouter une règle pour sauver un élément devenu inutile. */
/* LA FAÇADE fait les deux gestes : appui bref pour déplier, appui suivi d'un mouvement pour
   déplacer. D'où le curseur, qui annonce la saisie. */
/* ⚠️ LA FAÇADE PORTE LA COULEUR DE SON APPAREIL. Arthur : *« le background est le même pour
   tous […] il faudrait qu'il soit aux couleurs choisies pour chaque outil. »* Le nuancier
   existait, mais il ne se voyait que sur un liseré de 3 px. Le titre et l'icône passent en
   clair par-dessus : la façade porte l'identité, ils n'ont plus à la porter. */
.cs-mod-tete{position:relative;display:flex;align-items:center;gap:9px;padding:9px 11px 9px 38px;cursor:grab;user-select:none;touch-action:none;
  background-color:var(--teinte-facade,transparent);
  background-image:linear-gradient(180deg,rgba(255,255,255,.10),transparent 62%)}
.cs-mod.ouvert>.cs-mod-tete{border-bottom:1px solid rgba(255,255,255,.08)}
/* ⚠️ LA LED A DISPARU, L'ICÔNE PREND SA PLACE : *« il devrait remplacer le petit point qui est
   à gauche et être lui-même imposant, coloré et très visible. »* Un point de 6 px disait la
   couleur ; le dessin dit la couleur ET l'appareil, au même endroit. */
/* ⚠️ L'ICÔNE PREND LA COULEUR DE SA FAMILLE et grandit : elle était grise sur du noir, donc
   invisible. Arthur : « j'aime beaucoup ces icônes et j'aimerais qu'elles soient plus voyantes ». */
/* LA CASE QUI RETIRE L'APPAREIL. Mêmes marges que la façade, donc alignée sur son contenu
   sans qu'on ait à connaître sa hauteur — et au-dessus d'elle, donc le pointeur l'atteint avant
   le pli et avant le déplacement. */
.cs-garder{position:absolute;left:0;top:0;z-index:3;padding:9px 0 9px 13px;display:flex;align-items:center;cursor:pointer}
.cs-garder input{width:15px;height:15px;margin:0;accent-color:var(--teinte-clair,#fff);cursor:pointer}
.cs-garder input:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ⚠️ L'ICÔNE GRANDIT SANS FAIRE GRANDIR LA FAÇADE. Arthur : *« c'est juste le logo que je
   voudrais voir un tout petit peu plus imposant, peut-être d'environ vingt à vingt-cinq pour
   cent — sans pour autant que ça agrandisse la surface qui contient le titre. »* 19 → 23,5 px
   (+23 %), et les 4,5 px gagnés sont rendus en marges NÉGATIVES : la hauteur de la façade est
   dictée par le titre, l'icône déborde sur les paddings sans rien pousser. */
.cs-mod-tete .ot-ico{width:23.5px;height:23.5px;flex:0 0 23.5px;margin:-3px 0;color:var(--teinte-clair,#fff);stroke-width:7}
.cs-mod-tete b{flex:1;min-width:0;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--teinte-clair,#dfe7ef);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-mod-tete:hover{background:rgba(255,255,255,.04)}
.cs-mod-tete:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
/* Le chevron dit dans quel sens ça va. */
.cs-fleche{flex:0 0 8px;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;opacity:.75;transform:rotate(45deg);margin-bottom:3px;transition:transform .15s}
.cs-mod.ouvert .cs-fleche{transform:rotate(-135deg);margin:3px 0 0}
/* ⚠️ « SOON » A CHANGÉ DE PLACE **ET DE FORME**. Il ne reste plus de tuile éteinte dans le rack
   — depuis que tout part décoché, une case verrouillée sur « non » n'afficherait jamais rien —
   donc l'annonce vit sur la LIGNE de la liste. **La diagonale, elle, n'a pas suivi** : sur un
   coin de tuile elle était un ruban ; sur une ligne de 23 px de haut, rendue et regardée, elle
   devenait un triangle sombre qui débordait sur la colonne voisine. Arthur la voulait discrète
   — ici, discret veut dire plat. */
.cs-bientot{flex:0 0 auto;font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#8a857c;border:1px solid #d8d2c7;border-radius:3px;padding:1px 4px;margin-left:auto;flex:0 0 auto}

/* ⚠️ PENDANT LE DÉPLACEMENT, TOUT LE RACK SE REPLIE. Un appareil déplié fait souvent plus d'un
   écran de haut : il fallait le parcourir en entier avant le premier échange, et « pendant le
   trajet il ne se passait absolument rien ». Replié, chaque échange est immédiat. */
.cs-en-deplacement .cs-mod-corps,.cs-en-deplacement .cs-aff{display:none}
.cs-en-deplacement .cs-mod-tete{border-bottom:0}
.cs-mod.cs-deplace{z-index:6;opacity:.95;box-shadow:0 12px 30px rgba(0,0,0,.6);border-color:var(--teinte)}
.cs-mod.cs-deplace .cs-mod-tete{cursor:grabbing}

/* L'ÉCRAN — une fenêtre qui s'ouvre sur appel, jamais allumée pour rien. Même matière que sur
   les deux plugins de référence : noir, un filet, une lueur de la couleur de l'appareil, une
   écriture de machine.
   ⚠️ TAILLE FIXE : une fenêtre qui s'étire avec son texte redevient un paragraphe de site web.
   Trois lignes, puis on coupe. */
.cs-aff{position:absolute;z-index:5;width:min(300px,calc(100% - 16px));padding:9px 26px 9px 12px;height:70px;border-radius:6px;overflow:hidden;
  background:#05080c;border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 0 24px -6px var(--teinte),0 8px 22px rgba(0,0,0,.6)}
.cs-aff-x{position:absolute;top:3px;right:4px;width:19px;height:19px;padding:0;border:0;border-radius:4px;
  background:none;color:#7d8a99;font:inherit;font-size:14px;line-height:1;cursor:pointer}
.cs-aff-x:hover{color:#fff}
.cs-aff-txt{margin:0;color:#cfe3f6;text-shadow:0 0 8px rgba(120,190,255,.35);letter-spacing:.03em;
  font:12px/1.5 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Le corps de l'appareil : sa teinte, très assombrie.
   ⚠️ La teinte assombrie est une COULEUR OPAQUE, calculée en PHP (`outil_fond`), pas un voile
   noir posé par-dessus : un voile est une couche d'image que `getComputedStyle` ne voit pas, et
   un audit de contraste lit alors la teinte crue et accuse à tort — 117 faux positifs le 30/08.
   Vérifié : chacune des quinze couleurs est plus sombre que le fond nuit du site. */
.cs-mod-corps{padding:0 11px 9px;background-color:var(--teinte-fond,var(--nuit))}
/* ⚠️ DEUX OUTILS NE SONT PAS DU MONDE NUIT — la checklist et le glossaire s'écrivent en sombre
   sur clair, parce qu'on les LIT. Posés tels quels dans un châssis sombre, 82 textes tombaient
   à 2,2:1. J'ai d'abord voulu forcer leurs couleurs de texte : pire encore (172 textes, jusqu'à
   1,25:1), parce qu'ils apportent aussi leurs SURFACES claires — du blanc sur du blanc. La
   règle est donc structurelle : un outil qui n'apporte aucun bloc de mesure garde SON monde. */
.cs-mod.cs-clair .cs-mod-corps{background-color:var(--fond);color:var(--encre)}
.cs-mod-corps .al-sec{padding:12px 0 4px}
/* ⚠️ UNE FAMILLE CONTIENT PLUSIEURS OUTILS — c'est Arthur qui l'a nommé : *« ce ne sont pas des
   outils mais des catégories d'outils, un dépliant révèle souvent plusieurs manières de calculer
   le BPM ; toutes ces manières sont des outils. »* Chaque chapitre est donc un outil, et il lui
   faut une séparation visible : un filet et de l'air, pas seulement un numéro. */
.cs-mod-corps .am-chap,.cs-mod-corps .calc{margin:0;border-radius:8px;padding:14px;background-image:none}
.cs-mod-corps .al-sec+.al-sec{margin-top:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.cs-mod-corps h2{font-size:18px}
.cs-mod-corps h3{font-size:15px}
.cs-mod-corps hr{display:none}
/* Le contenu large défile chez lui : rien ne sort de l'appareil. */
.cs-defile{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cs-defile table{min-width:100%}
.cs-mod-corps table{font-size:12px}
.cs-mod-corps img,.cs-mod-corps pre{max-width:100%}
/* ⚠️ DANS UN MODULE, TOUJOURS LA DISPOSITION ÉTROITE — et c'est la CAUSE des chiffres coupés
   qu'Arthur a vus. Les outils se réarrangent sous 560 px de PAGE ; dans le rack, la contrainte
   n'est pas la page mais le MODULE, qui fait 340 px sur un écran de 1 600. Les règles étroites
   ne se déclenchaient donc jamais, et une grille de quatre colonnes fixes débordait par la
   droite en emportant la dernière valeur. On les rejoue ici, sans condition de largeur d'écran. */
.cs-mod-corps .cp-tete{display:none}
.cs-mod-corps .cp-l-haut{grid-template-columns:1fr 1fr 1fr}
.cs-mod-corps .cp-l-haut b{grid-column:1/-1;margin-bottom:2px}
.cs-mod-corps .cp-l-haut .cp-v,.cs-mod-corps .cp-l-haut .cp-r,.cs-mod-corps .cp-l-haut .cp-e{text-align:left}
.cs-mod-corps .cp-b{grid-template-columns:78px 1fr 46px;gap:8px}
.cs-mod-corps .mx-jauge{grid-template-columns:88px 1fr 84px;gap:8px}
.cs-mod-corps .am-grossenote{font-size:52px}
.cs-mod-corps .am-carte .am-gros{font-size:46px}
.cs-mod-corps .am-carte .am-note{font-size:38px}
.cs-mod-corps .am-tab{font-size:14px}
.cs-mod-corps .calc-chiffre{font-size:32px}
.cs-mod-corps .am-spectre span,.cs-mod-corps .mx-spectre span{font-size:9.5px}
/* Et un dernier garde-fou : rien, dans un appareil, ne peut dépasser sa largeur. */
.cs-mod-corps *{max-width:100%}
/* ⚠️ LA ZONE DE DÉPÔT TIENT EN UNE LIGNE. Sur la PAGE elle est l'invitation principale et garde
   sa taille ; dans un rack, on vient lire des chiffres — elle redevient une commande. */
.cs-mod-corps .am-zone{display:flex;align-items:center;justify-content:center;gap:10px;padding:7px 10px;border-width:1px;border-radius:6px}
.cs-mod-corps .am-zone p{font-size:12.5px;margin:0}
.cs-mod-corps .am-zone .am-ou,.cs-mod-corps .am-zone .am-petit{display:none}
.cs-mod-corps .am-bouton{margin:0;padding:6px 13px;font-size:12.5px}
/* Le commentaire d'une mesure passe derrière son « i » — et s'écrit dans l'écran de l'appareil.
   ⚠️ pointer-events:auto : ce bouton vit dans un `<summary>` que le rack a rendu inerte pour
   supprimer l'accordéon ; sans ça, il serait affiché mais mort au clic. */
.cs-i{pointer-events:auto;margin-left:6px;padding:0;width:15px;height:15px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:none;
  color:#8b98a6;font:700 10px/13px var(--sans);cursor:pointer;vertical-align:1px}
.cs-i:hover{border-color:var(--teinte);color:#fff}
/* Un plugin ne replie pas sa propre façade : les chapitres restent ouverts, leur poignée part.
   Sur la PAGE de l'outil, eux, se replient toujours — c'est là qu'on lit. */
.cs-mod-corps .am-vol>summary{pointer-events:none}
.cs-mod-corps .am-vol>summary::after{display:none}
/* Un lien arrivé avec un outil : il ne navigue plus, il pose l'outil visé dans le rack. */
.cs-vers{color:var(--lueur);cursor:pointer;text-decoration:underline}
/* Le mode d'emploi d'un chapitre, replié comme l'aide d'un plugin. */
.cs-aide{background:rgba(255,255,255,.05);border-radius:6px;padding:0 10px;margin:10px 0}
.cs-aide>summary{padding:7px 0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8fb4d8;cursor:pointer;list-style:none}
.cs-aide>summary::-webkit-details-marker{display:none}
.cs-aide>summary::before{content:"+";display:inline-block;width:14px}
.cs-aide[open]>summary::before{content:"−"}
.cs-aide p{font-size:12.5px;line-height:1.5}
.cs-charge{margin:0;padding:14px;font-size:13px;color:#7d8a99}
.cs-pied{margin:0;padding:9px 13px;font-size:11.5px;color:#5d5d5d;line-height:1.45;border-top:1px solid var(--bord)}
.cs-pied b{color:var(--orange-fonce);letter-spacing:.06em;text-transform:uppercase}
.cs-pied+.cs-pied{border-top:0;padding-top:0}

/* Dans la fenêtre flottante il n'y a que la console : elle prend toute la place, sans marge,
   et c'est le RACK qui défile — le menu et la barre restent sous la main. */
body.cs-flottant{margin:0;background:var(--fond)}
body.cs-flottant .cs{margin:0;max-width:none;border:0;border-radius:0;height:100vh;display:flex;flex-direction:column}
/* ⚠️ C'EST LE PANNEAU QUI DÉFILE, PLUS LE RACK. Un conteneur en colonnes à hauteur bornée
   remplit sa hauteur puis crée une colonne DE PLUS sur le côté : il déborderait à l'horizontale
   au lieu de défiler. En laissant la hauteur du rack libre, les colonnes s'équilibrent et c'est
   le panneau qui défile — verticalement, comme attendu. */
body.cs-flottant .cs-panneau{flex:1;overflow:auto;min-height:0}
body.cs-flottant .cs-panneau[hidden]{display:none}

/* EN PLEIN ÉCRAN, même châssis que dans la fenêtre : le rack prend l'écran, et c'est le panneau
   qui défile. Arthur : *« des ingénieurs son vont vouloir sacrifier un de leurs trois écrans. »*
   ⚠️ Règle à part et non fondue avec celle du dessus : un navigateur qui ne connaît pas
   `:fullscreen` jetterait le sélecteur ENTIER, donc aussi la fenêtre flottante, qui marche. */
.cs:fullscreen{margin:0;max-width:none;border:0;border-radius:0;height:100vh;display:flex;flex-direction:column;background:var(--fond)}
.cs:fullscreen .cs-panneau{flex:1;overflow:auto;min-height:0}
.cs:fullscreen .cs-panneau[hidden]{display:none}

/* Le bouton qui l'emporte dehors, à la place de l'ancien lien « Tools ». */
.al-desancrer{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid var(--bord);border-radius:20px;font-size:14px;color:var(--encre);text-decoration:none}
.al-desancrer svg{fill:none;stroke:currentColor;stroke-width:1.7}
.al-desancrer:hover{border-color:var(--orange-fonce);color:var(--orange-fonce)}
.al-desancrer.dehors{border-color:var(--orange-plein);color:var(--orange-fonce)}
/* Pendant qu'on va chercher le panneau, le bouton dit qu'il travaille : une seconde sans
   retour et on reclique, ce qui ouvre deux fenêtres. */
.al-desancrer.occupe{opacity:.55;pointer-events:none}