/* Outil · Bitrate, id bitrate : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : br-
   À gauche : le débit vidéo en grand, l'audio, le codec, les images clés, la taille, l'envoi (ou la marge d'un direct) ;
   la jauge (le débit sur ta connexion, repère à 75 %) ; l'info ; Copier. À droite : la destination, la résolution
   (celles que la destination n'a pas sont grisées), la cadence, HDR (YouTube) et la saveur ProRes (master), grisés
   ailleurs ; la durée (grisée pour un direct) et ton débit montant. */
.br .outil-fixe { align-items: stretch; }
.br-carte { display: flex; flex-direction: column; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 6px 18px 4px; }
.br-grand { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 76px; border-bottom: 1px solid var(--filet-doux); }
.br-grand span { font: var(--repere); letter-spacing: .1em; color: var(--texte2); white-space: nowrap; }
.br-grand b { font: 700 clamp(22px, 6.5vw, 32px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--peche); white-space: nowrap; }
.br-rangee { cursor: default; height: 44px; align-items: center; }
.br-rangee:last-child { border-bottom: 0; }
.br-rangee:hover .nom { color: var(--papier); }
.br-rangee .val { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.br-rangee .val[data-etat="ok"] { color: var(--papier); }
.br-rangee .val[data-etat="juste"], .br-rangee .val[data-etat="faible"] { color: var(--peche); }

.br-jauge { position: relative; height: 8px; border-radius: 4px; background: rgba(242, 240, 235, .1); transition: opacity .4s var(--courbe); }
.br-jauge i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--papier); transition: width .4s var(--courbe), background .4s var(--courbe); }
.br-jauge i[data-etat="juste"], .br-jauge i[data-etat="faible"] { background: var(--orange); }
.br-jauge b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--texte2); }
.br-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.br-actions { display: flex; justify-content: center; }
.br-actions .pastille { cursor: pointer; }
.br-actions .pastille:hover { translate: none; }

.br-dest { display: flex; flex-wrap: wrap; gap: 8px; }
.br .seg button:disabled { opacity: .25; cursor: default; }
.br-deux { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; align-items: end; }
.br-saveurs button { padding-inline: 4px; }
.br-gris { opacity: .3; pointer-events: none; transition: opacity .4s var(--courbe); }
@media (max-width: 959px) { .br-premier { order: -1; } }