/* Outil · 18% grey (Gris 18 %) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : gr- */

/* À gauche (en haut au téléphone) : un cadre qui réunit la forme d'onde, la scène test dessous aux mêmes positions, le nom
   des chartes et l'état ; dessous, l'exposition à essayer */
.gr .outil-fixe { align-items: center; }
.gr-cadre, .gr-expo { width: 100%; max-width: 520px; }
.gr-cadre { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet); }
.gr-onde { display: block; width: 100%; height: auto; overflow: visible; }
.gr-grille { stroke: var(--filet-doux); stroke-width: 1; }
.gr-grille.bord { stroke: var(--filet); stroke-dasharray: 3 3; }    /* 0 et 100 IRE : noir et blanc vidéo */
.gr-grille.limite { stroke: var(--filet); }                         /* 0 et 1023 : les bords du signal 10 bits */
.gr-axe { fill: var(--texte2); font: 500 9px var(--mono); text-anchor: end; }
.gr-axe.droite { text-anchor: start; }
.gr-trace { fill: var(--papier); opacity: .55; }
.gr-bande { fill: var(--orange); opacity: .14; }
.gr-cible { stroke: var(--orange); stroke-width: 1.5; }

/* La scène test et le nom des chartes : sous la zone tracée, aux mêmes positions (de 24 à 370 sur 400) */
.gr-scene, .gr-legende { margin: 0 calc(30 / 400 * 100%) 0 calc(24 / 400 * 100%); }
.gr-scene { display: flex; height: 24px; border-radius: 6px; overflow: hidden; }
.gr-scene i { flex: 1; }
.gr-legende { position: relative; height: 16px; }
.gr-legende span { position: absolute; translate: -50% 0; white-space: nowrap; font: var(--repere); letter-spacing: .06em; color: var(--texte2); }
.gr-etat { display: flex; flex-direction: column; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--filet-doux); }   /* toujours deux lignes : rien ne bouge */
.gr-etat span { white-space: nowrap; }
.gr-expo .groupe { padding-top: 0; }

/* À droite : la liste des courbes (lignes du kit ; la marque en petit sous le nom), puis comment lire */
.gr-courbes { display: flex; flex-direction: column; }
.gr-courbes .rangee { align-items: center; }
.gr-courbes .nom { display: block; }                           /* le point orange de la courbe choisie reste devant le nom */
.gr-courbes .nom i { display: block; font: var(--repere); letter-spacing: .06em; font-style: normal; color: var(--texte2); }
.gr-courbes .val { color: var(--papier); }
/* La courbe choisie : sa valeur IRE en orange, comme la ligne du schéma */
.gr-courbes .actuelle .val, .gr-etat b.gr-orange { color: var(--orange); }
/* Titres des colonnes, alignés sur les lignes du kit (.val à droite, .note de 52 px) */
.gr-entetes { display: flex; gap: 10px; padding-bottom: 2px; font: var(--repere); letter-spacing: .06em; color: var(--texte2); }
.gr-entetes span:first-child { flex: 1; }
.gr-entetes span:last-child { width: 52px; text-align: right; }
.gr-note { margin: var(--libelle) 0 0; font-size: 12px; line-height: 1.5; color: var(--texte2); }