/* ═══════════════════════════════════════════════════════════════
   FretLayer — Métronome avancé (onglet 5)   ·  v2
   Fichier autonome : ne redéfinit AUCUN sélecteur de style.css.
   Sélecteurs préfixés .ma- / #ma… , plus un mode plein écran
   porté par la classe body.ma-mode.
   ═══════════════════════════════════════════════════════════════ */

/* ── MODE PLEIN ÉCRAN ───────────────────────────────────────────
   style.css place des !important sur #neckPanel et #appContent
   dans plusieurs media queries. On passe donc par body.ma-mode
   pour obtenir une spécificité supérieure (1,1,1 contre 1,0,0). */
body.ma-mode #neckPanel      { display:none !important; }
body.ma-mode #metroPopup     { display:none !important; }
body.ma-mode #metroMobileBtn { display:none !important; }
body.ma-mode #neckFloatBtn   { display:none !important; }
/* style.css affiche #rotateHint en portrait sous 540px avec !important ;
   body.ma-mode #rotateHint a une spécificité supérieure (1,1,1 contre
   1,0,0) et l'emporte donc, sans toucher à style.css. Le manche étant
   masqué dans ce mode, inviter à tourner l'appareil n'a aucun sens. */
body.ma-mode #rotateHint     { display:none !important; }
body.ma-mode #appContent{
  padding-bottom:20px !important;
  padding-left:20px  !important;
  padding-right:20px !important;
}

/* ── PALETTE LOCALE ──────────────────────────────────────────────
   Fond de page (style.css) : #f5f0e6 — crème chaude.

   Les deux tentatives précédentes gardaient les champs dans cette
   même famille chaude (#faf7f1 puis #ebe2ce) : même à contraste
   suffisant, l'œil les rattachait au fond. On sort donc franchement
   de la famille — les champs passent sur un gris neutre légèrement
   froid, qui ne peut plus être confondu avec le crème.

     carte        #ffffff  + bordure chaude + ombre portée
     champ        #e7e9ec  gris neutre — rupture assumée avec le crème
     bord de champ #c3c7ce
     sous-bloc    #f7f4ec  reste chaud (ce sont des regroupements,
                           pas des zones de saisie)
     piste        #d2d6dd

   Variables locales : ne débordent pas de #libPanel4.               */
/* ── Séparateur dans la barre de sous-onglets ────────────────────
   Marque la rupture entre les quatre onglets de navigation sur le
   manche et le métronome, qui est un mode à part.
   La classe est ma-tabsep et NON lib-stab : switchLibTab() fait un
   querySelectorAll(".lib-stab") et indexe par position — un élément
   de plus dans cette liste décalerait tous les onglets.            */
.ma-tabsep{
  flex:0 0 auto; align-self:center;
  width:1.5px; height:15px;
  margin:0 9px;
  background:var(--bdr);
  border-radius:1px;
}
.lib-stab.ma-stab-metro{ letter-spacing:.11em; }

/* Sous 767px la barre passe en pastilles qui se replient. On garde
   un simple petit trait vertical, pas un filet pleine largeur, et on
   distingue la pastille du métronome par son contour.               */
@media (max-width:767px){
  .ma-tabsep{ height:14px; margin:0 5px; }
  /* :not(.active) est indispensable — sans lui cette règle, chargée
     après style.css et de même spécificité, écraserait l'état actif
     doré de l'onglet. */
  .lib-stab.ma-stab-metro:not(.active){
    border-color:var(--tx);
    color:var(--tx);
    background:var(--surf);
  }
}

#libPanel4{
  --ma-card:#ffffff;
  --ma-field:#e7e9ec;
  --ma-fedge:#c3c7ce;
  --ma-sub:#f7f4ec;
  --ma-track:#d2d6dd;
  --ma-edge:#cfc3a6;
  padding-bottom:4px;
}

/* ── Barre de transport (collante) ──────────────────────────────── */
/* barre de transport : posée DANS la carte, pas collée à ses bords.
   Plus de position:sticky — elle défile avec le reste. */
.ma-transport{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--tx); border-radius:9px;
  padding:10px 14px; margin:0 0 13px;
  box-shadow:0 3px 14px rgba(24,19,10,.28);
}
.ma-bpm-block{
  display:flex; align-items:center; gap:7px;
  padding-right:12px; margin-right:2px;
  border-right:1.5px solid #4a3828;
}
.ma-bpm{
  font-family:'Playfair Display',serif; font-size:32px; line-height:1;
  color:#f0e8cc; font-weight:700;
  min-width:52px; text-align:right;      /* évite que la barre saute de 80 à 100 */
}
.ma-bpm-unit{
  font-size:8px; letter-spacing:.18em; text-transform:uppercase; color:#b89060;
  align-self:flex-end; padding-bottom:4px;
}

/* cluster tempo : les paires -10/-1 et +1/+10 encadrent le curseur,
   qui garde une largeur raisonnable au lieu de s'étirer sur tout l'écran */
.ma-t-mid{
  display:flex; align-items:center; gap:6px;
  flex:1 1 auto; min-width:150px;
  background:rgba(255,255,255,.045);
  border-radius:8px; padding:5px 8px;
}
.ma-t-right{ display:flex; align-items:center; gap:6px; margin-left:auto; }

.ma-step{
  font-family:'DM Mono',monospace; font-size:10px; font-weight:700;
  background:#3a2c18; border:1.5px solid #5a4530; color:#f0d890;
  border-radius:6px; padding:5px 8px; cursor:pointer; line-height:1;
  transition:background .1s; white-space:nowrap;
}
.ma-step:hover{ background:#4a3822; }
.ma-step:active{ opacity:.75; }

.ma-tap{
  font-family:'DM Mono',monospace; font-size:9px; font-weight:700; letter-spacing:.12em;
  background:none; border:1.5px solid #6a5030; color:#c8a060;
  border-radius:6px; padding:6px 11px; cursor:pointer; white-space:nowrap;
}
.ma-tap:active{ background:#4a3020; color:#f0d890; }

.ma-start{
  font-family:'DM Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.12em;
  background:#c8a028; border:none; color:#18130a;
  border-radius:7px; padding:9px 20px; cursor:pointer; white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.ma-start.playing{ background:#c05028; color:#fff; }
.ma-start:active{ opacity:.82; }

.ma-panic{
  font-family:'DM Mono',monospace; font-size:9px; font-weight:700;
  background:none; border:1.5px solid #6a5030; color:#b89060;
  border-radius:6px; padding:6px 9px; cursor:pointer; white-space:nowrap;
}
.ma-panic:hover{ border-color:#c06050; color:#e08070; }

.ma-range-dark{
  -webkit-appearance:none; appearance:none;
  height:6px; border-radius:4px; background:#3c2d1c; outline:none; cursor:pointer;
  flex:1 1 auto; width:auto; min-width:90px; margin:0 4px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
.ma-range-dark::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:#f0d890; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.ma-range-dark::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; border:none; background:#f0d890; cursor:pointer;
}


/* ── Disposition ─────────────────────────────────────────────────
   1 Métronome      : pleine largeur (transport + réglages)
   2 Silence aléat. : pleine largeur
   3 + 4            : côte à côte                                  */
.ma-full{ width:100%; margin-bottom:20px; }

/* carte 1 : rembourrage standard, la barre sombre est un élément
   interne à part entière et non un bandeau d'en-tête */
.ma-card--metro{ margin-bottom:20px; }
.ma-mrow{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,310px));
  justify-content:space-between;
  gap:12px 24px; padding:2px 2px 0;
}
/* chaque champ a exactement la même structure verticale :
   étiquette · zone de contrôle de hauteur fixe · ligne de valeur
   → les quatre colonnes s'alignent au pixel */
.ma-mrow .ma-f{ margin-bottom:0; display:flex; flex-direction:column; min-width:0; }
.ma-mrow .ma-ctl{
  display:flex; align-items:center; gap:6px;
  height:30px;
}
.ma-mrow .ma-ctl > .ma-range{ flex:1; min-width:0; }
.ma-mrow .ma-ctl > .ma-sel{ height:30px; }
.ma-mrow .ma-ctl > .ma-sel.sm{ flex:1; }
.ma-mrow .ma-mini{ width:30px; height:30px; }
.ma-mrow .ma-count{ font-size:19px; min-width:26px; }
.ma-mrow .ma-val{ margin-top:6px; min-height:12px; }
.ma-mrow .ma-tog{ margin-right:2px; }
/* trait pleine largeur : grid-column 1/-1 force aussi le passage
   à la ligne, les réglages du repère commencent donc en dessous */
.ma-mrow .ma-sep{
  grid-column:1 / -1;
  height:0; margin:6px 0 4px;
  border-top:1.5px solid var(--ma-edge);
}

/* deux colonnes pour les curseurs de la section 2 */
.ma-duo2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px; margin-top:12px;
  padding-top:11px; border-top:1.5px solid var(--bdr2);
}
.ma-duo2 .ma-f{ margin-bottom:0; }

/* ── Cartes ─────────────────────────────────────────────────────── */
.ma-card{
  background:var(--ma-card); border:1.5px solid var(--ma-edge);
  border-radius:10px; padding:10px 12px 12px; min-width:0;
  box-shadow:0 2px 12px rgba(70,52,20,.09);
}
.ma-card.on{ border-color:var(--gbd); box-shadow:0 0 0 1px rgba(200,160,40,.18), 0 2px 12px rgba(70,52,20,.09); }

/* ── Champs ─────────────────────────────────────────────────────── */
.ma-f{ margin-bottom:8px; }
.ma-f:last-child{ margin-bottom:0; }
.ma-lbl{
  display:block; font-size:8px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--txd); font-weight:600; margin-bottom:4px;
}
.ma-val{ font-size:9px; color:var(--txm); margin-top:3px; letter-spacing:.03em; }
.ma-val.hi{ color:var(--gold); font-weight:700; }

.ma-sel{
  font-family:'DM Mono',monospace; font-size:10px; font-weight:600;
  padding:5px 22px 5px 8px; border-radius:6px;
  border:1.5px solid var(--ma-fedge); background:var(--ma-field); color:var(--tx);
  cursor:pointer; width:100%; min-width:0;
  appearance:none; -webkit-appearance:none;
  background-image:url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2210%22 height=%226%22><path d=%22M0 0l5 6 5-6z%22 fill=%22%238a7c62%22/></svg>');
  background-repeat:no-repeat; background-position:right 8px center;
}
.ma-sel:focus{ outline:none; border-color:var(--gbd); }
.ma-sel.sm{ font-size:9px; padding:4px 18px 4px 6px; }

.ma-range{
  -webkit-appearance:none; appearance:none; width:100%;
  height:5px; border-radius:3px; background:var(--ma-track); outline:none; cursor:pointer;
}
.ma-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--tx); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.ma-range::-moz-range-thumb{
  width:17px; height:17px; border-radius:50%; border:none;
  background:var(--tx); cursor:pointer;
}

.ma-mini{
  font-family:'DM Mono',monospace; font-size:10px; font-weight:700;
  width:26px; height:26px; flex-shrink:0;
  border-radius:6px; border:1.5px solid var(--ma-fedge);
  background:var(--ma-field); color:var(--txm); cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; transition:all .1s;
}
.ma-mini:hover{ border-color:var(--gbd); color:var(--gold); background:var(--gbg); }
.ma-mini:active{ opacity:.75; }

.ma-count{
  font-family:'Playfair Display',serif; font-size:20px; font-weight:700;
  color:var(--tx); min-width:30px; text-align:center; line-height:1;
}

/* interrupteur à glissière : le curseur se déplace et la piste
   passe au vert ; le mot ON/OFF est porté par la piste elle-même,
   donc aucun script n'a besoin d'écrire dans le bouton */
.ma-tog{
  position:relative; flex-shrink:0;
  width:58px; height:26px; padding:0;
  border-radius:20px; border:1.5px solid var(--ma-fedge);
  background:var(--ma-field); cursor:pointer; font-size:0;
  transition:background .15s, border-color .15s;
}
.ma-tog::before{
  content:""; position:absolute; top:2px; left:2px;
  width:19px; height:19px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .16s;
}
.ma-tog::after{
  content:"OFF"; position:absolute; top:0; right:8px;
  line-height:23px;
  font-family:'DM Mono',monospace; font-size:8px; font-weight:700;
  letter-spacing:.09em; color:var(--txd);
  transition:color .15s;
}
.ma-tog.active{ background:var(--grn); border-color:var(--grn); }
.ma-tog.active::before{ transform:translateX(32px); }
.ma-tog.active::after{ content:"ON"; right:auto; left:10px; color:#fff; }
.ma-tog:active::before{ width:23px; }

/* ══ SÉLECTEURS SEGMENTÉS ═══════════════════════════════════════ */
.ma-seg{ display:flex; gap:7px; margin-bottom:12px; }
.ma-segbtn{
  flex:1; min-width:0;
  font-family:'DM Mono',monospace; font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:12px 10px; border-radius:8px;
  border:1.5px solid var(--ma-fedge); background:var(--ma-field); color:var(--txd);
  cursor:pointer; transition:all .12s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.ma-segbtn:hover{ border-color:var(--gbd); color:var(--gold); }
.ma-segbtn.active{ background:var(--tx); border-color:var(--tx); color:#f0e8cc; }
.ma-seg.sm .ma-segbtn{ padding:8px 10px; font-size:9px; letter-spacing:.11em; }

.ma-segdot{ width:7px; height:7px; border-radius:50%; background:transparent; flex-shrink:0; }
.ma-segbtn.sounding .ma-segdot{ background:var(--grn); box-shadow:0 0 0 2px rgba(90,150,90,.25); }
.ma-segbtn.active.sounding .ma-segdot{ background:#8ed08e; box-shadow:none; }

.ma-pane{ display:none; }
.ma-pane.on{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(275px,1fr));
  gap:10px 20px; align-items:start;
}
.ma-pane.on > .ma-more{ grid-column:1 / -1; margin-top:2px; }

/* ══ INTERRUPTEURS 3 POSITIONS — un par temps de la mesure ═══════ */
.ma-switches{ display:flex; flex-wrap:wrap; gap:6px; }

.ma-bt{
  width:80px; flex-shrink:0;
  background:var(--ma-sub);
  border:2px solid var(--ma-edge); border-radius:10px;
  padding:5px 5px 6px;
  display:flex; flex-direction:column; gap:5px;
  transition:border-color .12s, box-shadow .07s, transform .07s;
}
.ma-bt.s1{ border-color:var(--tx); }
.ma-bt.s2{ border-color:var(--gbd); background:var(--gbg); }
.ma-bt.s0{ border-color:var(--ma-edge); background:var(--ma-card); opacity:.6; }
/* 4e position : accent (orange, comme le voyant d'accent du transport) */
.ma-bt.s3{ border-color:#d4581c; background:#fff3ec; }
.ma-bt.s3 .ma-bt-acc{ color:#d4581c; }
.ma-bt.flash{ transform:scale(1.07); box-shadow:0 0 0 3px rgba(232,96,32,.45); }

.ma-bt-head{ display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1; }
.ma-bt-num{ font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:var(--tx); }
.ma-bt.s0 .ma-bt-num{ color:var(--txd); }
.ma-bt-acc{
  font-size:6px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); font-weight:700; height:7px;
}

.ma-bt-sw{
  display:flex; flex-direction:column; gap:2px;
  background:var(--ma-track); border:1.5px solid var(--ma-edge);
  border-radius:7px; padding:2px;
}
.ma-bt.s2 .ma-bt-sw{ background:var(--ma-sub); }
.ma-bt-opt{
  font-family:'DM Mono',monospace; font-size:8px; font-weight:700; letter-spacing:.07em;
  padding:5px 2px; border-radius:5px; border:none;
  background:none; color:var(--txd); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:3px;
  transition:background .1s, color .1s; line-height:1;
}
.ma-bt-opt:hover{ background:var(--bdr2); color:var(--tx); }
.ma-bt-opt .ma-bt-ico{ font-size:9px; line-height:1; }
.ma-bt-opt.on[data-s="1"]{ background:var(--tx);  color:#f0e8cc; }
.ma-bt-opt.on[data-s="2"]{ background:var(--gbd); color:#2e2200; }
.ma-bt-opt.on[data-s="0"]{ background:var(--rbd); color:#fff; }
.ma-bt-opt.on[data-s="3"]{ background:#d4581c; color:#fff; }
.ma-bt-opt.on:hover{ opacity:.9; }

/* au-delà de 16 temps, on resserre pour que la mesure reste lisible */
.ma-switches.dense .ma-bt{ width:58px; padding:4px 3px 5px; gap:3px; border-radius:8px; }
.ma-switches.dense .ma-bt-num{ font-size:15px; }
.ma-switches.dense .ma-bt-acc{ font-size:5px; height:6px; }
.ma-switches.dense .ma-bt-opt{ font-size:7px; padding:4px 1px; letter-spacing:.03em; }
.ma-switches.dense .ma-bt-opt .ma-bt-ico{ display:none; }

.ma-legend{
  display:flex; flex-wrap:wrap; gap:10px; margin:9px 0 0; font-size:8px; color:var(--txd);
}
.ma-legend span{ display:inline-flex; align-items:center; gap:4px; }
.ma-dot{ width:10px; height:10px; border-radius:3px; flex-shrink:0; border:1.5px solid var(--ma-edge); background:var(--ma-sub); }
.ma-dot.d-on{ background:var(--tx); border-color:var(--tx); }
.ma-dot.d-rand{ background:var(--gbd); border-color:var(--gbd); }
.ma-dot.d-off{ background:var(--rbd); border-color:var(--rbd); }
.ma-dot.d-acc{ background:#d4581c; border-color:#d4581c; }

/* ── Petits encadrés internes ───────────────────────────────────── */
.ma-box{
  background:var(--ma-sub); border:1.5px solid var(--ma-edge);
  border-radius:7px; padding:7px 8px; margin-bottom:6px;
}
.ma-box.on{ border-color:var(--gbd2); background:var(--gbg2); }
.ma-box-top{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.ma-box-name{
  font-size:8px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--txd); font-weight:700; flex:1;
}
.ma-duo{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }

/* ── Bloc repliable ─────────────────────────────────────────────── */
.ma-more{ margin-top:7px; border-top:1.5px solid var(--bdr2); padding-top:7px; }
.ma-more-btn{
  width:100%; text-align:left;
  font-family:'DM Mono',monospace; font-size:8px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  background:none; border:none; color:var(--txd); cursor:pointer;
  padding:2px 0; display:flex; align-items:center; gap:5px;
}
.ma-more-btn:hover{ color:var(--gold); }
.ma-more-btn .ma-caret{ transition:transform .15s; font-size:8px; }
.ma-more.open .ma-caret{ transform:rotate(90deg); }
.ma-more-body{ display:none; padding-top:8px; }
.ma-more.open .ma-more-body{ display:block; }

/* ── Badge de décompte ──────────────────────────────────────────── */
.ma-countin{
  display:none;
  font-family:'DM Mono',monospace; font-size:9px; font-weight:700;
  letter-spacing:.11em; white-space:nowrap;
  background:#4a3822; border:1.5px solid #6a5030; color:#f0d890;
  border-radius:5px; padding:4px 8px;
}
.ma-countin.vis{ display:inline-block; }

/* pendant le décompte, la surbrillance est dorée et non orange,
   pour signaler que le motif réel n'a pas encore commencé */
.ma-bt.flash.pre{ box-shadow:0 0 0 3px rgba(200,160,40,.55); }

/* ── Badge de position dans le cycle ────────────────────────────── */
.ma-cycbadge{
  display:none;
  font-family:'DM Mono',monospace; font-size:9px; font-weight:700;
  letter-spacing:.11em; white-space:nowrap;
  background:none; border:1.5px solid #5a4530; color:#b89060;
  border-radius:5px; padding:4px 8px;
}
.ma-cycbadge.vis{ display:inline-block; }
.ma-cycbadge.top{ background:#c8a028; border-color:#c8a028; color:#18130a; }

/* le 1er temps portant le repère reste allumé plus longtemps */
.ma-bt.flash.cyc{ box-shadow:0 0 0 4px rgba(200,160,40,.85); }

/* champ numérique du cycle personnalisé
   (nommé ma-numin et non ma-num : ma-num est déjà la pastille
   numérotée des en-têtes de section, la collision écrasait celle-ci) */
.ma-numin{
  font-family:'DM Mono',monospace; font-size:10px; font-weight:600;
  width:54px; height:30px; flex-shrink:0;
  padding:0 6px; border-radius:6px;
  border:1.5px solid var(--ma-fedge); background:var(--ma-field); color:var(--tx);
}
.ma-numin:focus{ outline:none; border-color:var(--gbd); }
.ma-numin:disabled{ opacity:.45; }

/* ── Voyant de pulsation ────────────────────────────────────────── */
.ma-pulse{
  width:12px; height:12px; border-radius:50%;
  background:#4a3828; flex-shrink:0;
  transition:background .05s, transform .05s;
}
.ma-pulse.hit{ background:#f0d890; transform:scale(1.5); }
.ma-pulse.hit.accent{ background:#e86020; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE

   Points de rupture alignés sur ceux déjà employés par style.css
   (1024 / 767 / 540 / 400) plutôt que d'en inventer de nouveaux.

     > 1024   ordinateur : 4 colonnes de réglages, panneaux côte à côte
     ≤ 1024   tablette   : colonnes resserrées, cellules plus compactes
     ≤ 767    grande     : réglages sur 2 colonnes, transport réagencé
                mobile
     ≤ 540    mobile     : tout sur une colonne
     ≤ 400    petit      : cellules de temps réduites
   + pointer:coarse       : cibles tactiles agrandies, quelle que soit
                            la largeur
   ══════════════════════════════════════════════════════════════════ */

/* ── Tablette ───────────────────────────────────────────────────── */
@media (max-width:1024px){
  .ma-mrow{ grid-template-columns:repeat(auto-fit,minmax(190px,270px)); gap:12px 18px; }
  .ma-pane.on{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px 16px; }
  .ma-duo2{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
  .ma-bt{ width:74px; }
  .ma-card{ padding:10px 11px 11px; }
  body.ma-mode #appContent{ padding-left:14px !important; padding-right:14px !important; }
}

/* ── Grande mobile / petite tablette ────────────────────────────── */
@media (max-width:767px){
  /* les colonnes reprennent toute la largeur disponible : avec 2 ou 3
     colonnes, space-between laissait des vides irréguliers */
  .ma-mrow{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    justify-content:stretch;
    gap:12px 16px;
  }

  /* transport en trois rangées : identité · tempo · transport */
  .ma-transport{ padding:9px 11px; gap:8px; row-gap:9px; }
  .ma-bpm-block{ border-right:none; padding-right:0; margin-right:0; }
  .ma-bpm{ font-size:28px; min-width:46px; }
  .ma-t-mid{ order:3; flex:1 1 100%; }
  .ma-tap{ order:2; }
  .ma-countin, .ma-cycbadge{ order:4; }
  .ma-t-right{ order:5; flex:1 1 100%; margin-left:0; }
  .ma-t-right .ma-start{ flex:1; justify-content:center; text-align:center; }
  .ma-t-right .ma-panic{ flex:0 0 auto; }

  .ma-seg{ gap:6px; }
  .ma-segbtn{ padding:11px 8px; font-size:9px; letter-spacing:.09em; text-align:center; }
  .ma-seg.sm .ma-segbtn{ font-size:8px; letter-spacing:.07em; }
  .ma-bt{ width:70px; }
  .ma-legend{ gap:7px; }
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width:540px){
  .ma-mrow{ grid-template-columns:1fr; gap:11px; padding:2px 0 0; }
  .ma-mrow .ma-sep{ margin:7px 0 5px; }
  .ma-pane.on{ grid-template-columns:1fr; }
  .ma-duo2{ grid-template-columns:1fr; gap:12px; }

  .ma-card{ padding:9px 10px 10px; border-radius:9px; }
  .ma-full, .ma-card--metro{ margin-bottom:14px; }

  .ma-transport{ padding:8px 10px; }
  .ma-bpm{ font-size:26px; }
  .ma-bpm-unit{ padding-bottom:3px; }
  .ma-step{ padding:6px 7px; font-size:9px; }
  .ma-start{ padding:9px 14px; font-size:10px; }
  .ma-panic{ padding:8px 8px; font-size:8px; }

  .ma-bt{ width:66px; }
  .ma-switches{ gap:5px; }
  .ma-legend{ font-size:7.5px; gap:6px; }

  body.ma-mode #appContent{ padding-left:9px !important; padding-right:9px !important; }
}

/* ── Petit mobile ───────────────────────────────────────────────── */
@media (max-width:400px){
  .ma-bpm{ font-size:23px; min-width:40px; }
  .ma-step{ padding:5px 6px; }
  .ma-bt{ width:60px; }
  .ma-bt-num{ font-size:17px; }
  .ma-bt-opt{ font-size:7.5px; letter-spacing:.04em; }
  .ma-bt-opt .ma-bt-ico{ display:none; }
  .ma-switches.dense .ma-bt{ width:52px; }
  .ma-segbtn{ padding:10px 6px; font-size:8px; }
}

/* ── Écrans tactiles : cibles agrandies ─────────────────────────────
   Indépendant de la largeur : une tablette large reste tactile.       */
@media (pointer:coarse){
  .ma-sel{ padding-top:8px; padding-bottom:8px; font-size:11px; }
  .ma-sel.sm{ padding-top:7px; padding-bottom:7px; font-size:10px; }
  .ma-mrow .ma-ctl{ height:38px; }
  .ma-mrow .ma-ctl > .ma-sel{ height:38px; }
  .ma-mrow .ma-mini{ width:38px; height:38px; font-size:13px; }
  .ma-numin{ height:38px; width:60px; font-size:11px; }
  .ma-tog{ width:64px; height:32px; }
  .ma-tog::before{ width:24px; height:24px; }
  .ma-tog.active::before{ transform:translateX(32px); }
  .ma-tog::after{ line-height:29px; }

  /* un curseur se manipule mal au doigt en dessous de 20 px de poignée */
  .ma-range{ height:7px; }
  .ma-range::-webkit-slider-thumb{ width:24px; height:24px; }
  .ma-range::-moz-range-thumb{ width:24px; height:24px; }
  .ma-range-dark{ height:8px; }
  .ma-range-dark::-webkit-slider-thumb{ width:24px; height:24px; }
  .ma-range-dark::-moz-range-thumb{ width:24px; height:24px; }

  .ma-bt-opt{ padding:8px 2px; }
  .ma-step{ padding:8px 10px; }
  .ma-tap{ padding:9px 13px; }
  .ma-panic{ padding:9px 11px; }
  .ma-start{ padding:11px 18px; }
  .ma-more-btn{ padding:8px 0; }
}

/* ── Paysage très bas (téléphone couché) ──────────────────────────
   Dans cette orientation, style.css bascule le site en manche plein
   écran : header et #appContent passent en display:none !important,
   et #neckPanel occupe tout l'écran. Comme le mode métronome masque
   justement le manche, il ne restait plus rien à afficher — d'où le
   fond vide. On rétablit donc l'interface, avec une spécificité
   supérieure (1,1,1 contre 1,0,0).                                  */
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
  body.ma-mode header{ display:flex !important; }
  body.ma-mode #appContent{
    display:block !important;
    padding:8px 12px 14px !important;
    overflow-y:auto !important;
  }
  body.ma-mode #headerLangWrap{ display:none !important; }

  .ma-transport{ padding:6px 10px; gap:7px; }
  .ma-bpm{ font-size:22px; }
  .ma-card{ padding:8px 10px 9px; }
  .ma-full, .ma-card--metro{ margin-bottom:11px; }
  .ma-bt{ width:62px; }
  .ma-mrow{ gap:9px 14px; }
}