/* ═══════════════════════════════════════════════════════════════
   FretLayer — Grilles jazz (onglet 5)

   APPARENCE : celle du reste du site. Les réglages réutilisent
   volontairement les classes du métronome avancé (metro-adv.css) :
   .ma-card, .ma-transport, .ma-sel, .ma-range, .ma-tog, .ma-mrow,
   .ma-bt… — les deux onglets restent ainsi identiques. Ces classes lisent
   des variables --ma-* définies sur #libPanel4 : on les redéfinit sur
   #libPanel5 plus bas. metro-adv.css doit donc être chargé (il l'est
   dans les deux pages).

   Le reste est confiné sous #grApp et préfixé gr- : style.css définit
   déjà .legend, .tabs, .preview… qui s'appliqueraient à l'intérieur.
   Seule la police des accords (Barlow Condensed) et celle des degrés
   (Source Serif 4) viennent de l'appli d'origine, sur demande de Tomy.
   ═══════════════════════════════════════════════════════════════ */

/* ── MODE PLEIN ÉCRAN ────────────────────────────────────────────
   Même mécanisme que body.ma-mode (metro-adv.css) : spécificité 1,1,1
   contre 1,0,0 pour passer devant les !important de style.css. */
body.gr-mode #neckPanel      { display:none !important; }
body.gr-mode #metroPopup     { display:none !important; }
body.gr-mode #metroMobileBtn { display:none !important; }
body.gr-mode #neckFloatBtn   { display:none !important; }
body.gr-mode #rotateHint     { display:none !important; }
body.gr-mode #appContent{
  padding-bottom:20px !important;
  padding-left:20px  !important;
  padding-right:20px !important;
}
@media (max-width:1024px){
  body.gr-mode #appContent{ padding-left:14px !important; padding-right:14px !important; }
}
@media (max-width:540px){
  body.gr-mode #appContent{ padding-left:9px !important; padding-right:9px !important; }
}
/* Téléphone couché : style.css masque header et #appContent pour mettre
   le manche en plein écran. Ce mode masque le manche : sans ces règles
   l'écran serait vide. */
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
  body.gr-mode header{ display:flex !important; }
  body.gr-mode #appContent{
    display:block !important;
    padding:8px 12px 14px !important;
    overflow-y:auto !important;
  }
  body.gr-mode #headerLangWrap{ display:none !important; }
}

/* message du chargeur, avant l'arrivée de #grApp */
.gr-loading{
  padding:40px 20px; text-align:center;
  font-family:'DM Mono',monospace; font-size:12px; letter-spacing:.06em;
  color:var(--txm); background:var(--surf); border:1.5px solid var(--bdr); border-radius:10px;
}
.gr-loading button{
  margin-top:12px; font:inherit; padding:6px 12px; border-radius:6px;
  border:1.5px solid var(--bdr); background:var(--bg); color:var(--tx); cursor:pointer;
}

/* ── VARIABLES PARTAGÉES AVEC LE MÉTRONOME AVANCÉ ────────────────── */
#libPanel5{
  --ma-card:#ffffff;
  --ma-field:#e7e9ec;
  --ma-fedge:#c3c7ce;
  --ma-sub:#f7f4ec;
  --ma-track:#d2d6dd;
  --ma-edge:#cfc3a6;
  /* couleurs des états d'un temps */
  --gr-play:var(--tx);
  --gr-acc:#d4581c;
  --gr-rand:var(--gbd);
  --gr-mute:var(--rbd);
  --gr-chord:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --gr-num:"Source Serif 4",Georgia,"Times New Roman",serif;
  padding-bottom:4px;
}

#grApp{ font-family:'DM Mono',monospace; color:var(--tx); text-align:left; }
/* pas de color:inherit ici : #grApp button (1,0,1) écraserait la couleur
   des boutons du métronome (.ma-tap, .ma-step… en 0,1,0) — TAP devenait
   invisible, texte sombre sur la barre sombre */
#grApp button, #grApp input, #grApp select{ font-family:inherit; }
#grApp button{ cursor:pointer; }
#grApp p{ margin:0; }
#grApp svg{ overflow:visible; }
#grApp mark{ background:var(--gbg); color:var(--gold); }

/* ── BARRE D'OUTILS (recherche) ──────────────────────────────────── */
#grApp .gr-toolbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px;
  background:var(--surf); border:1.5px solid var(--bdr); border-radius:8px;
  padding:9px 11px; margin-bottom:14px; position:relative; z-index:30;
}
#grApp .gr-search{ position:relative; flex:1 1 280px; min-width:0; }
#grApp .gr-search input{
  width:100%; font-size:11px; padding:8px 11px 8px 32px;
  background:var(--bg); border:1.5px solid var(--bdr); border-radius:6px; color:var(--tx);
}
#grApp .gr-search input:focus{ outline:none; border-color:var(--gbd); background:var(--surf); }
#grApp .gr-search input::placeholder{ color:var(--txd); }
#grApp .gr-search > svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; stroke:var(--txd); }
#grApp .gr-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0; max-height:min(62vh,560px); overflow:auto;
  background:var(--surf); border:1.5px solid var(--bdr); border-radius:8px;
  box-shadow:0 12px 32px rgba(70,52,20,.2); padding:4px 0; z-index:40;
}
#grApp .gr-results[hidden]{ display:none; }
#grApp .gr-res-head{ position:sticky; top:0; background:var(--surf); padding:6px 14px 4px; font-family:'Playfair Display',serif; font-weight:700; font-size:16px; color:var(--gold); border-bottom:1.5px solid var(--bdr2); }
#grApp .gr-res-item{ display:grid; grid-template-columns:1fr auto; gap:1px 12px; padding:6px 14px; cursor:pointer; border-left:3px solid transparent; }
#grApp .gr-res-item .gr-rt{ font-size:12px; font-weight:600; color:var(--tx); }
#grApp .gr-res-item .gr-rc{ color:var(--txd); font-size:10px; grid-column:1; }
#grApp .gr-res-item .gr-rk{ grid-row:1/span 2; grid-column:2; align-self:center; font-family:var(--gr-chord); font-weight:600; color:var(--blue); font-size:16px; }
#grApp .gr-res-item.on, #grApp .gr-res-item:hover{ background:var(--gbg); border-left-color:var(--gbd); }
#grApp .gr-rcl{ color:var(--txd); }
#grApp .gr-res-empty{ padding:14px; color:var(--txm); font-size:11px; }
#grApp .gr-res-count{ padding:6px 14px; color:var(--txd); font-size:10px; }
#grApp .gr-grp{ display:flex; align-items:center; gap:7px; }
#grApp .gr-lbl{ font-size:8px; letter-spacing:.13em; text-transform:uppercase; color:var(--txd); font-weight:600; white-space:nowrap; }
#grApp .gr-coll{ width:auto; }
/* sélecteur segmenté, au format des pastilles de catégorie du site */
#grApp .gr-seg{ display:inline-flex; gap:3px; flex-shrink:0; }
#grApp .gr-seg button{
  font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:12px; border:1.5px solid var(--bdr);
  background:var(--bg); color:var(--txm); white-space:nowrap; transition:all .1s;
}
#grApp .gr-seg button[aria-pressed="true"]{ background:var(--tx); border-color:var(--tx); color:#f0e8cc; }

/* ── EN-TÊTE DU MORCEAU ──────────────────────────────────────────── */
#grApp .gr-songhead{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; margin:0 2px 14px; }
#grApp .gr-title{ font-family:'Playfair Display',serif; font-weight:700; font-size:30px; line-height:1.05; color:var(--tx); }
#grApp .gr-meta{ margin-top:6px; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:10px; color:var(--txm); letter-spacing:.03em; }
#grApp .gr-meta b{ color:var(--tx); font-weight:600; }
#grApp .gr-meta small{ color:var(--txd); }
#grApp .gr-tools{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px 12px; }
#grApp .gr-tools label{ display:flex; flex-direction:column; min-width:120px; }
#grApp .gr-tools .ma-sel{ min-width:120px; }

/* bouton d'action, au format des réglages du métronome */
#grApp .gr-btn{
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 11px; border-radius:6px; border:1.5px solid var(--ma-fedge);
  background:var(--ma-field); color:var(--tx); white-space:nowrap; transition:all .1s;
}
#grApp .gr-btn:hover{ border-color:var(--gbd); color:var(--gold); background:var(--gbg); }
#grApp .gr-btn.gr-warn{ color:var(--red); }
#grApp .gr-btn.gr-warn:hover{ border-color:var(--rbd); background:var(--rbg); color:var(--red); }

/* ── BARRE DE LECTURE (sombre, comme le métronome avancé) ────────── */
#grApp .gr-transport{ display:block; position:sticky; top:0; z-index:25; margin-bottom:14px; }
#grApp .gr-trow{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
/* v66 : le curseur de tempo partait de sa largeur naturelle (~415 px) et
   renvoyait « Lire la grille » à la ligne avant de rétrécir ; la barre
   collante doublait de hauteur. Base 150 px, il s'étire ensuite. */
@media (min-width:1024px){ #grApp .gr-transport .ma-t-mid{ flex:1 1 150px; } }
#grApp .gr-go{ display:inline-flex; align-items:center; gap:9px; }
#grApp .gr-go svg{ width:11px; height:11px; fill:currentColor; }
#grApp .gr-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:none; border:1.5px solid #6a5030; color:#b89060;
  border-radius:14px; padding:5px 11px 5px 8px; white-space:nowrap;
}
#grApp .gr-chip::before{ content:""; width:8px; height:8px; border-radius:50%; background:#4a3828; flex-shrink:0; }
#grApp .gr-chip[aria-pressed="true"]{ border-color:#c8a028; color:#f0d890; }
#grApp .gr-chip[aria-pressed="true"]::before{ background:#8ed08e; box-shadow:0 0 0 2px rgba(90,150,90,.3); }
#grApp .gr-pos{ display:inline-block; width:200px; overflow:hidden; text-overflow:ellipsis; font-size:9px; letter-spacing:.06em; color:#b89060; white-space:nowrap; font-variant-numeric:tabular-nums; }
#grApp .gr-transport .ma-countin{ display:none !important; }
#grApp .gr-follow{ border-color:#c8a028; color:#f0d890; }
#grApp .gr-follow::before{ display:none; }
#grApp .gr-follow[hidden]{ display:none; }
#grApp .gr-dots{ display:inline-flex; gap:4px; min-width:56px; }
#grApp .gr-dots i{ width:8px; height:8px; border-radius:50%; background:#4a3828; }
#grApp .gr-dots i.on{ background:#f0d890; }
#grApp .gr-dots i.on.off{ background:transparent; box-shadow:inset 0 0 0 1.5px #f0d890; }
#grApp .gr-dots i.on.pre{ background:#c8a028; }

/* ── CARTES ACCOMPAGNEMENT / MÉTRONOME — compactes (v51) ───────────
   Tout tient sur une ligne qui se replie : titre + interrupteur, puis
   des réglages « étiquette · contrôle » côte à côte. */
#grApp .gr-card{ margin-bottom:8px; padding:7px 10px; }
#grApp .gr-crow{ display:flex; align-items:center; flex-wrap:wrap; gap:7px 16px; }
#grApp .gr-card-h{ display:flex; align-items:center; gap:8px; min-width:178px; }
#grApp .gr-card-t{ font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tx); white-space:nowrap; }
#grApp .gr-card-h .ma-tog{ transform:scale(.82); transform-origin:left center; margin-right:-8px; }
#grApp .gr-ci{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
#grApp .gr-ci[hidden], #grApp .gr-ci[style*="none"]{ display:none !important; }
#grApp .gr-cl{ font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--txd); font-weight:600; }
#grApp .gr-cl-h{ color:var(--txm); font-weight:700; }
#grApp .gr-cl small{ text-transform:none; letter-spacing:.02em; font-weight:500; margin-left:4px; }
#grApp .gr-ci .ma-sel.sm{ width:auto; min-width:0; max-width:200px; padding-top:4px; padding-bottom:4px; }
#grApp .gr-cr{ width:70px; flex:0 0 70px; }
#grApp .gr-co{ font-size:9px; color:var(--txm); min-width:34px; font-variant-numeric:tabular-nums; }
#grApp .gr-cgrp{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px 12px; }
#grApp .gr-ci .ma-mini{ width:24px; height:24px; }
#grApp .gr-numin{ height:26px; width:50px; }

/* mesure de référence : sur la 2e ligne de la carte Métronome */
#grApp .gr-refrow{ flex:1 1 100%; display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; padding-top:7px; border-top:1.5px solid var(--bdr2); }
#grApp .gr-refsw{ gap:4px; }
/* section silence (v62) : modes, taux, réduction progressive, légende */
#grApp .gr-silrow{ flex:1 1 100%; display:flex; align-items:center; flex-wrap:wrap; gap:7px 16px; padding-top:7px; border-top:1.5px solid var(--bdr2); }
#grApp .gr-silseg{ margin-bottom:0; flex:0 1 auto; }
#grApp .gr-silseg .ma-segbtn{ flex:0 0 auto; padding:7px 10px; }
#grApp .gr-crw{ width:110px; flex-basis:110px; }
#grApp .gr-cow{ min-width:96px; }
#grApp .gr-silnote{ display:none; font-size:9px; color:var(--txd); }
#grApp.gr-silmeas .gr-silnote{ display:inline; }
#grApp .gr-leg{ flex:1 1 100%; margin:2px 0 0; }
#grApp.gr-silmeas #gr-refBlk{ display:none; }
#grApp.gr-silmeas .gr-bts{ display:none; }
#grApp.gr-metro-on.gr-silmeas .gr-meas{ padding-bottom:16px; min-height:46px; }
@media (max-width:540px){
  #grApp .gr-silrow .gr-ci{ flex:1 1 100%; flex-wrap:wrap; white-space:normal; }
  #grApp .gr-silrow .gr-crw{ flex:1 1 120px; }
  #grApp .gr-silseg{ flex:1 1 100%; }
  #grApp .gr-silseg .ma-segbtn{ flex:1 1 0; white-space:normal; }
}
#grApp .gr-reftpl{ max-width:220px; }
/* interrupteurs compacts : numéro à gauche, 4 positions en 2 × 2 */
#grApp .gr-refsw .ma-bt{ width:auto; flex-direction:row; align-items:center; gap:4px; padding:3px 4px; border-width:1.5px; border-radius:8px; }
#grApp .gr-refsw .ma-bt-head{ min-width:14px; }
#grApp .gr-refsw .ma-bt-num{ font-size:15px; }
#grApp .gr-refsw .ma-bt-acc{ display:none; }
/* 4 positions empilées, comme dans le métronome avancé (demande de Tomy) */
#grApp .gr-refsw .ma-bt-sw{ display:flex; flex-direction:column; gap:1px; padding:2px; border-radius:6px; min-width:66px; }
#grApp .gr-refsw .ma-bt-opt{ font-size:7px; padding:3px 5px; letter-spacing:.04em; justify-content:flex-start; }
#grApp .gr-refsw .ma-bt-opt .ma-bt-ico{ font-size:8px; }

/* 4e position « accent » ajoutée aux interrupteurs du métronome avancé */
#grApp .ma-bt.s3{ border-color:var(--gr-acc); background:#fff3ec; }
#grApp .ma-bt.s0{ opacity:.7; }
#grApp .ma-bt-opt.on[data-s="3"]{ background:var(--gr-acc); color:#fff; }
#grApp .ma-bt-acc{ color:var(--gr-acc); }
#grApp .ma-dot.gr-d1{ background:var(--gr-play); border-color:var(--gr-play); }
#grApp .ma-dot.gr-d3{ background:var(--gr-acc); border-color:var(--gr-acc); }
#grApp .ma-dot.gr-d2{ background:var(--gr-rand); border-color:var(--gr-rand); }
#grApp .ma-dot.gr-d0{ background:var(--gr-mute); border-color:var(--gr-mute); }

/* ── PASTILLES D'ÉTAT (pinceau + cases sous la grille) ───────────── */
#grApp .gr-sw{ display:inline-block; width:12px; height:9px; border-radius:2px; flex-shrink:0; }
#grApp .gr-s1{ background:var(--gr-play); }
#grApp .gr-s3{ background:var(--gr-acc); }
#grApp .gr-s2{ background:repeating-linear-gradient(135deg,var(--gr-rand) 0 2px,#fff4cc 2px 4px); box-shadow:inset 0 0 0 1px var(--gr-rand); }
#grApp .gr-s0{ background:#fff; box-shadow:inset 0 0 0 1.5px var(--gr-mute); }

/* ── GRILLE (compacte) ───────────────────────────────────────────── */
/* la grille tranche sur les cartes d'options blanches : fond papier plus
   soutenu, mesures en blanc cassé posées dessus comme des portées */
#grApp .gr-sheet{ padding:10px 14px 14px; background:#e6d9bd; border-color:#c9b48a; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 12px rgba(70,52,20,.12); }
#grApp .gr-sheet .gr-legend{ color:var(--txm); }
#grApp .gr-legend{ display:flex; flex-wrap:wrap; gap:5px 16px; align-items:center; font-size:9px; color:var(--txd); margin:0 0 10px; }
#grApp .gr-legend span{ display:inline-flex; align-items:center; gap:5px; }
#grApp .gr-lg-mod{ color:var(--blue); font-weight:600; }
#grApp .gr-lg-ton{ color:#3a6e98; font-weight:500; font-style:italic; }
#grApp .gr-lg-bor{ color:var(--red); font-weight:600; }
#grApp .gr-lg-hover{ margin-left:auto; color:var(--gold); font-weight:600; }
#grApp .gr-chartwrap{ min-width:0; }
#grApp .gr-chart{ position:relative; max-width:1180px; margin:0 auto; }
#grApp .gr-chart svg.gr-overlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
#grApp .gr-row{ display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); position:relative; margin-bottom:4px; }
#grApp .gr-row.gr-gap{ margin-top:12px; }
#grApp .gr-meas{ position:relative; background:#fffcf5; border-left:1.5px solid #c9bd9f; min-height:46px; padding:12px 3px 16px 5px; display:grid; align-items:start; transition:background .12s; }
#grApp.gr-metro-on .gr-meas{ padding-bottom:30px; min-height:62px; }
#grApp .gr-meas.gr-last{ border-right:1.5px solid #c9bd9f; }
#grApp .gr-meas.gr-open{ border-left:4px double var(--tx); }
#grApp .gr-meas.gr-rep-open::before, #grApp .gr-meas.gr-rep-close::after{ content:""; position:absolute; top:22px; width:4px; height:12px; background:radial-gradient(circle,var(--tx) 1.5px,transparent 2px) 0 0/4px 6px repeat-y; }
#grApp .gr-meas.gr-rep-open::before{ left:3px; }
#grApp .gr-meas.gr-rep-close::after{ right:3px; }
#grApp .gr-meas.gr-close{ border-right:4px double var(--tx); }
#grApp .gr-meas.gr-final{ border-right:5px solid var(--tx); box-shadow:inset -8px 0 0 -6.5px var(--tx); }
#grApp .gr-meas.gr-now{ background:#fdeec2; }
#grApp .gr-meas.gr-silent{ background:var(--bbg); }
#grApp .gr-sec{ position:absolute; top:-2px; left:-1px; font-size:9px; font-weight:700; line-height:1; background:var(--tx); color:#f0e8cc; padding:2px 4px; border-radius:3px; z-index:2; letter-spacing:.04em; }
#grApp .gr-ts{ position:absolute; left:4px; top:14px; font-family:var(--gr-chord); font-weight:700; font-size:10px; line-height:.9; text-align:center; color:var(--txd); }
#grApp .gr-meas.gr-has-ts{ padding-left:15px; }
#grApp .gr-end{ position:absolute; top:1px; left:0; right:8px; border-top:1.5px solid var(--txd); border-left:1.5px solid var(--txd); height:9px; font-size:8px; line-height:8px; padding-left:3px; color:var(--txm); font-weight:700; }
#grApp .gr-cmt{ position:absolute; top:0; right:3px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:11px; color:var(--txm); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
#grApp .gr-mk{ position:absolute; top:0; left:20px; font-size:12px; color:var(--tx); }
#grApp .gr-chord{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:flex-start; min-width:0; cursor:pointer; padding:1px 2px 2px; border-radius:4px; position:relative; }
#grApp .gr-chord:hover{ background:var(--gbg); }
#grApp .gr-chord:focus-visible{ outline:2px solid var(--gbd); outline-offset:0; }
#grApp .gr-chord.gr-selc{ box-shadow:inset 0 -2px 0 var(--gbd); }
#grApp .gr-chord.gr-playing .gr-sym{ color:var(--gr-acc); }
#grApp .gr-ktag{ font-size:8px; font-weight:600; color:var(--blue); height:10px; line-height:10px; white-space:nowrap; }
#grApp .gr-ktag.gr-ton{ color:#3a6e98; font-weight:500; font-style:italic; }
#grApp .gr-ktag.gr-home, #grApp .gr-ktag .gr-home{ color:var(--txd); font-weight:500; }
#grApp .gr-sym{ font-family:var(--gr-chord); font-weight:600; font-size:14px; line-height:1; white-space:nowrap; color:var(--tx); }
#grApp .gr-sym .gr-q{ font-size:.68em; font-weight:600; vertical-align:.46em; margin-left:1px; }
#grApp .gr-sym .gr-bs{ font-size:.78em; font-weight:500; color:var(--txd); }
#grApp .gr-chord.gr-small .gr-sym{ font-size:11.5px; }
#grApp .gr-chord.gr-rep .gr-sym{ color:var(--txd); font-weight:500; }
#grApp .gr-chord.gr-edited .gr-sym{ text-decoration:underline dotted var(--gbd); text-underline-offset:3px; }
#grApp .gr-deg{ font-family:var(--gr-num); font-weight:600; font-size:10px; line-height:1.1; margin-top:2px; color:var(--txm); white-space:nowrap; }
#grApp .gr-deg .gr-s{ font-size:.82em; font-weight:500; }
#grApp .gr-fn{ font-size:8px; line-height:1.25; color:var(--txd); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; margin-top:1px; letter-spacing:.02em; }
#grApp .gr-fn.gr-dom{ color:var(--gold); }
#grApp .gr-fn.gr-bor{ color:var(--red); }
#grApp .gr-fn.gr-ctx{ color:var(--blue); }
#grApp .gr-fn.gr-dim{ color:var(--tel); }

/* cases de temps sous chaque mesure — visibles métronome activé */
#grApp .gr-bts{ display:none; position:absolute; left:5px; right:4px; bottom:4px; height:14px; gap:2px; z-index:3; }
#grApp.gr-metro-on .gr-bts{ display:flex; }
#grApp .gr-meas.gr-has-ts .gr-bts{ left:15px; }
/* mesure personnalisée : trait doré sous ses cases */
#grApp .gr-bts.gr-custom::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; border-radius:1px; background:var(--gbd); }
#grApp .gr-bt{ flex:1 1 0; min-width:8px; height:14px; border-radius:3px; cursor:pointer; transition:transform .06s; position:relative; font-style:normal; }
#grApp .gr-bt::after{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:700 9px/1 'DM Mono',monospace; }
#grApp .gr-bt.gr-s3::after{ content:">"; color:#fff; }
#grApp .gr-bt.gr-s2::after{ content:"?"; color:#5a4000; }
#grApp .gr-bt.gr-s0::after{ content:"–"; color:var(--gr-mute); }
#grApp .gr-bt.gr-open-b{ outline:2px solid var(--gbd); outline-offset:1px; }
#grApp .gr-bt:hover{ outline:1.5px solid var(--gbd); outline-offset:1px; }
#grApp .gr-bt.gr-hit{ transform:scaleY(1.3); box-shadow:0 0 0 2px rgba(212,88,28,.35); }
#grApp .gr-bt.gr-miss{ transform:scaleY(1.15); box-shadow:0 0 0 2px rgba(138,124,98,.35); }

/* ── BOUTON FLOTTANT (tablette / téléphone) ─────────────────────── */
#grApp .gr-fab{ display:none; }

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width:1023px){
  /* collante, la barre de lecture occuperait un tiers de l'écran :
     elle défile avec la page, un bouton rond reste en bas à droite
     (la place du bouton métronome d'origine, masqué dans ce mode) */
  #grApp .gr-transport{ position:static; }
  #grApp .gr-fab{
    display:flex; align-items:center; justify-content:center;
    position:fixed; right:16px; bottom:max(16px, env(safe-area-inset-bottom)); z-index:700;
    width:54px; height:54px; border-radius:50%; border:0;
    background:#c8a028; color:#18130a; box-shadow:0 4px 14px rgba(24,19,10,.4);
  }
  #grApp .gr-fab.on{ background:#c05028; color:#fff; }
  #grApp .gr-fab svg{ width:17px; height:17px; fill:currentColor; }
}
@media (max-width:767px){
  #grApp .gr-title{ font-size:24px; }
  #grApp .gr-tools label{ min-width:0; flex:1 1 140px; }
  #grApp .gr-search{ flex-basis:100%; order:5; }
  #grApp .gr-lg-hover{ margin-left:0; }
  /* 16 colonnes d'accords sur 360 px seraient illisibles :
     la grille garde 560 px et défile latéralement */
  #grApp .gr-sheet{ padding:9px 8px 10px; }
  #grApp .gr-chartwrap{ overflow-x:auto; }
  #grApp .gr-chart{ min-width:560px; }
  #grApp .gr-ref-tools label{ min-width:0; flex:1 1 160px; }
}
@media (pointer:coarse){
  #grApp .gr-bts, #grApp .gr-bt{ height:18px; }
  #grApp.gr-metro-on .gr-meas{ padding-bottom:34px; min-height:66px; }
  #grApp .gr-seg button{ padding:8px 11px; }
  #grApp .gr-btn{ padding:10px 12px; }
}
@media (prefers-reduced-motion:reduce){
  #grApp *{ transition:none !important; animation:none !important; }
}
#grApp .gr-empty{ padding:24px 6px; font-size:11px; color:var(--txm); }

/* ── MENU DE RÉGLAGE D'UN TEMPS (clic sur une case) ─────────────── */
#grApp .gr-bpop{
  position:fixed; z-index:910; width:190px; padding:7px;
  background:var(--surf); border:1.5px solid var(--gbd); border-radius:9px;
  box-shadow:0 10px 26px rgba(70,52,20,.25);
}
#grApp .gr-bpop[hidden]{ display:none; }
#grApp .gr-pop-h{ font-size:8px; letter-spacing:.13em; text-transform:uppercase; color:var(--txd); font-weight:700; margin:0 2px 6px; }
#grApp .gr-pop-o{ display:grid; grid-template-columns:1fr 1fr; gap:3px; }
#grApp .gr-pop-o .ma-bt-opt{ padding:8px 4px; font-size:9px; }
#grApp .gr-pop-r{ width:100%; margin-top:6px; font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px; border-radius:6px; border:1.5px solid var(--ma-fedge); background:var(--ma-field); color:var(--txm); }
#grApp .gr-pop-r:hover{ border-color:var(--gbd); color:var(--gold); background:var(--gbg); }
@media (max-width:767px){
  #grApp .gr-card-h{ min-width:0; flex:1 1 100%; justify-content:space-between; }
  #grApp .gr-pos{ width:150px; }
}

/* ── MANCHE AU SURVOL D'UN ACCORD (v52) ─────────────────────────────
   Le manche est masqué en mode grilles ; body.gr-neck le fait réapparaître
   pendant le survol (1,2,1 l'emporte sur body.gr-mode #neckPanel 1,1,1 et
   sur les display:none !important de style.css). La marge du bas laisse
   faire défiler la grille au-dessus de lui. Le bouton métronome du manche
   est masqué : son popup l'est aussi dans ce mode. */
body.gr-mode.gr-neck #neckPanel{ display:flex !important; }
body.gr-mode.gr-neck #appContent{ padding-bottom:max(calc(38vh + 24px), 260px) !important; }
body.gr-mode #metroFloatBtn{ display:none !important; }
#neckBarTitle .gr-neck-sub{ font-weight:400; opacity:.55; font-size:.8em; }
/* le bouton rond de lecture (< 1024 px) remonte au-dessus du manche */
body.gr-neck #grApp .gr-fab{ bottom:calc(min(max(38vh, 230px), 400px) + 14px); }

/* ── SÉLECTION DE MESURES EN BOUCLE (v54) ───────────────────────── */
#grApp .gr-chart{ user-select:none; -webkit-user-select:none; }
#grApp .gr-meas.gr-dragsel{ background:#dcebf8; }
#grApp .gr-meas.gr-insel{ background:#e3effa; box-shadow:inset 0 3px 0 var(--bbd), inset 0 -3px 0 var(--bbd); }
#grApp .gr-meas.gr-insel.gr-now{ background:#fdeec2; }
#grApp .gr-loopchip{ border-color:var(--bbd); color:#cfe4f6; }
#grApp .gr-loopchip::before{ background:var(--bbd); box-shadow:none; }
#grApp .gr-loopchip b{ margin-left:4px; color:#f0d890; }
#grApp .gr-loopchip[hidden]{ display:none; }