@charset "UTF-8";
/* Outil BPM & tonalité — chargé uniquement par sa page
--------------------------------------------------------------- */

/* Chapitres numérotés — chaque bloc est une façon d'arriver au résultat
--- */
.am-chap{padding-top:30px}
.am-tete{display:flex;align-items:flex-start;gap:14px;text-align:left;margin-bottom:22px;padding-bottom:16px;border-bottom:2px solid #f0f0f0}
.am-num{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#f95311;color:#fff;font-weight:800;font-size:17px;line-height:34px;text-align:center}
/* ⚠️ Le `padding:0 5px 0 10px` que global.css pose sur tous les h2 décalait le titre de
   10 px vers la droite par rapport à sa propre phrase, d'où l'impression de désalignement
   (repéré par Arthur). Il faut le remettre à zéro ici. */
.am-tete h2,.am-tete .am-h2{display:block;margin:2px 0 4px;padding:0;font-size:21px;font-weight:600}
.am-tete p,.am-tete .am-p{display:block;margin:0;font-size:14.5px;color:#666;line-height:1.55}.am-tete .am-bloc{display:block}
.am-legende{font-size:13px;color:#777;margin:0 0 12px;text-align:left}
.am-accord+.am-legende{max-width:520px;margin:14px auto 0;text-align:center}

/* Chapitres repliables — `<details open>`, l'accordéon natif du HTML : aucun JavaScript,
   et l'état se garde tant qu'on reste sur la page. Le chevron remplace le marqueur du
   navigateur, qui n'est pas stylable de la même façon partout. */
.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 #8f8f8f;border-bottom:2px solid #8f8f8f;transform:rotate(45deg);transition:transform .2s}
.am-vol[open]>summary::after{transform:rotate(-135deg);top:16px}
.am-vol>summary:focus-visible{outline:2px solid #f95311;outline-offset:3px;border-radius:6px}
/* Fonds alternés. ⚠️ Le chapitre 2 avait été mis en sombre : lisible, mais un bloc sombre
   écrase toujours ses voisins et donnait au 2 plus d'importance qu'au 1, qui est pourtant
   la fonction principale (constaté par Arthur). Les trois chapitres restent donc clairs ;
   c'est le BEIGE, plus chaud et plus dense, qui tient les chapitres 1 et 3, et un gris
   neutre plus léger qui creuse le 2. L'alternance se lit, la hiérarchie est juste. */
.am-chap{border-radius:14px;border-bottom:0;padding:30px 24px 34px;margin:14px 0 10px}
.am-fond-a{background:#e6e0d5}
.am-fond-b{background:#eeecea}
.am-fond-a .am-tete{border-bottom-color:#cfc7b8}
.am-fond-b .am-tete{border-bottom-color:#dcd8d4}
.am-chap .am-zone{background:#fff;border-color:#cfc7b8}
.am-chap .am-lecteur,.am-chap .am-accord{background:#fff}
.am-fond-b .am-tempo input,.am-fond-b .am-reverb span,.am-fond-b .am-tab tr.ref{background:#fff}
.am-fond-b .am-tab th,.am-fond-b .am-tab td{border-bottom-color:#ddd9d4}

/* Zone de dépôt
--- */
/* Hauteur resserrée d'environ 20 % (demande d'Arthur 14/08) : tout le contenu est gardé,
   ce sont les respirations qui fondent — remplissage, interlignes, et le « ou » réduit au
   rôle de charnière qu'il joue vraiment. */
.am-zone{border:2px dashed #c6c6c6;border-radius:10px;background:#fafafa;padding:24px 20px 22px;text-align:center;transition:border-color .15s,background .15s}
.am-zone.sur{border-color:#f95311;background:#fff5f0}
.am-zone p{margin:0;font-size:15px;line-height:1.35;color:#444}
.am-zone .am-ou{font-size:12.5px;color:#999;margin:2px 0 1px}
.am-zone .am-petit{font-size:12.5px;line-height:1.4;color:#777;margin-top:8px}
.am-bouton{display:inline-block;margin:2px 0 0;padding:12px 23px;border-radius:6px;background:#f95311;color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.am-bouton:hover{background:#d8440c}
.am-zone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

/* Lecteur + métronome
--- */
.am-lecteur{margin:18px auto 0;max-width:560px;background:#f6f6f6;border-radius:10px;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:#f95311;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.am-pp:hover{background:#d8440c}
.am-pp svg{width:22px;height:22px;fill:currentColor}
.am-barre{flex:1;height:6px;border-radius:3px;background:#dcd8d1;cursor:pointer;position:relative}
.am-barre:focus-visible{outline:2px solid #f95311;outline-offset:3px}
.am-barre i{display:block;position:relative;height:100%;width:0;border-radius:3px;background:#f95311}
.am-barre i::after{content:"";position:absolute;top:50%;left:100%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#f95311}
.am-temps{font-size:13px;color:#777;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}
.am-metro input{width:18px;height:18px;accent-color:#f95311;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:#666}
.am-affine>b{min-width:62px;font-size:17px;color:#2b2b2b;font-variant-numeric:tabular-nums}
.am-affine button{border:1px solid #c9c9c9;background:#fff;border-radius:6px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer;color:#2b2b2b}
.am-affine button:hover{border-color:#f95311;color:#f95311}
.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:#666}
.am-decal button{border:1px solid #c9c9c9;background:#fff;border-radius:6px;width:32px;height:32px;font:inherit;font-size:17px;line-height:1;cursor:pointer;color:#2b2b2b}
.am-decal button:hover{border-color:#f95311;color:#f95311}
.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}
.am-lecteur .am-petit{font-size:12.5px;color:#777;margin:8px 0 0;line-height:1.55;text-align:left}

/* Message d'étape
--- */
.am-etat{margin:14px 0 0;font-size:14px;min-height:20px;color:#555}
.am-etat.travail{color:#f95311;font-weight:700}
.am-etat.ok{color:#2e7d32}
.am-etat.ko{color:#c62828;font-weight:700}

/* Résultats
--- */
.am-fiche{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:22px 0 14px;font-size:13px;color:#666}
.am-fiche .am-nom{font-weight:700;color:#2b2b2b;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 disparaissait jamais : `display:grid` posé par
   une classe l'emporte sur l'attribut `hidden` du navigateur, qui a la même force. Tout
   élément qu'on masque en JS et qui porte un `display` explicite a besoin de ce garde-fou. */
.am-duo[hidden]{display:none}
.am-carte{background:#fff;border:1px solid rgba(249,83,17,.38);border-radius:10px;padding:22px 18px;text-align:center}
.am-carte .am-eti{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#8f8f8f;font-weight:700}
.am-carte .am-gros{display:block;font-size:58px;line-height:1.05;font-weight:800;color:#2b2b2b;margin:6px 0 0}
.am-carte .am-note{font-size:48px}
.am-carte .am-unite{display:block;font-size:16px;color:#2b2b2b;margin-bottom:8px}
.am-carte .am-unite i{font-style:normal;color:#8f8f8f}
.am-carte .am-fin{display:block;font-size:13px;color:#666;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:#e3f2e5;color:#2e7d32}
.am-conf.moy{background:#fdf1e0;color:#9a6212}
.am-conf.bof{background:#fbe3e3;color:#c62828}
.am-alt{display:block;margin-top:12px;font-size:13px;color:#666}
.am-alt button{border:1px solid #f95311;background:#fff5f0;color:#f95311;border-radius:6px;padding:5px 11px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;margin-left:4px}
.am-alt button:hover{background:#f95311;color:#fff}
.am-corr{margin-top:14px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.am-corr button{border:1px solid #c9c9c9;background:#fff;border-radius:6px;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer;color:#2b2b2b}
.am-corr button:hover{border-color:#f95311;color:#f95311}
.am-corr.am-plat{display:block;font-size:13px;color:#666}
.am-avert{background:#fdf6ec;border-left:3px solid #e0a33c;padding:12px 16px;margin:16px 0 0;font-size:14px;line-height:1.6;text-align:left}

/* Accordeur au micro
--- */
.am-accord-lance{margin-top:18px;text-align:center}
.am-microinfo{display:block;font-size:13px;color:#777;margin-top:8px;min-height:18px}
.am-accord{max-width:520px;margin:0 auto;background:#f6f6f6;border-radius:10px;padding:24px 20px;transition:opacity .2s}
.am-chap .am-exemple{position:relative;background:#f1eee9;border:1px dashed #cfc7b8}
.am-res-ex{position:relative;background:none;border:0;padding:26px 0 0;pointer-events:none}
.am-res-ex .am-carte{background:#f4f1ec;border-color:#d8d2c8}
.am-res-ex .am-gros,.am-res-ex .am-unite{color:#9a9a9a}
.am-res-ex .am-alt button,.am-res-ex .am-corr button{border-color:#d0cabf;color:#9a9a9a;background:none}
.am-res-ex .am-conf.ok{background:#eceae5;color:#9a9a9a}
.am-res-ex .am-etiq{top:0;left:0}
.am-exemple .am-grossenote,.am-exemple .am-jauge-lbl{color:#9a9a9a}
.am-exemple .am-grossenote small{color:#a8a8a8}
.am-exemple .am-fin{color:#8a8a8a;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:#8f8f8f;border:1px solid #cfcfcf;border-radius:20px;padding:3px 10px;background:#fff}
.am-grossenote{font-size:66px;line-height:1;font-weight:800;color:#2b2b2b}
.am-grossenote small{display:block;font-size:15px;font-weight:400;color:#8f8f8f;margin-top:6px;letter-spacing:.08em}
.am-jauge{position:relative;height:16px;margin:22px 0 6px;background:#e2e2e2;border-radius:8px}
.am-jauge .am-juste{position:absolute;left:44%;width:12%;top:0;bottom:0;background:#cfe6d1;border-radius:8px}
.am-aiguille{position:absolute;top:-7px;left:50%;width:4px;height:30px;margin-left:-2px;border-radius:2px;background:#2b2b2b;transition:left .08s linear}
.am-aiguille.juste{background:#2e7d32}
.am-jauge-lbl{display:flex;justify-content:space-between;font-size:11.5px;color:#8f8f8f;letter-spacing:.04em}
.am-accord .am-fin{margin:14px 0 0;text-align:center}
.am-transpo{margin:14px 0 0;padding:12px 14px;background:#fff5f0;border-left:3px solid #f95311;border-radius:0 6px 6px 0;font-size:14px;line-height:1.6;text-align:left}

/* 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}
.am-tempo label{font-size:15px}
.am-tempo input{width:110px;padding:11px 12px;border:1px solid #c9c9c9;border-radius:6px;font:inherit;font-size:20px;font-weight:700;text-align:center;color:#2b2b2b}
.am-tempo input:focus{outline:2px solid #f95311;outline-offset:1px;border-color:#f95311}
.am-tap{border:1px solid #f95311;background:#f95311;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:#d8440c;border-color:#d8440c;color:#fff}
.am-tap:active{transform:scale(.97)}
.am-raz{border:1px solid #d3cdc5;background:none;color:#8a8279;border-radius:6px;padding:9px 13px;font:inherit;font-size:13px;cursor:pointer}
.am-raz:hover{border-color:#2b2b2b;color:#2b2b2b}
.am-unite-bpm{font-size:15px;color:#666}
.am-tapinfo{font-size:13px;color:#777;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}
.am-tab th,.am-tab td{padding:4px 9px;line-height:1.25;border-bottom:1px solid #ece7e0;text-align:right}
.am-tab thead th{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#8f8f8f;padding-bottom:7px}
.am-tab tbody th{text-align:left;font-weight:400;white-space:nowrap}
.am-tab tbody th span{color:#a8a8a8;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:#999;font-size:13.5px}
.am-tab tr.ref{background:#fff5f0}
.am-tab tr.ref th,.am-tab tr.ref td{font-weight:700}
.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:#8f8f8f;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:#f6f6f6;border-radius:8px;padding:13px 15px;text-align:left;font-size:12.5px;color:#777;line-height:1.5}
.am-reverb i{display:block;font-style:normal;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#8f8f8f}
.am-reverb em{display:block;font-style:normal;font-size:20px;font-weight:700;color:#2b2b2b;margin:2px 0 4px}

@media(max-width:560px){.am-tete{gap:11px}.am-num{flex-basis:28px;width:28px;height:28px;line-height:28px;font-size:15px}.am-tete h2{font-size:19px}.am-grossenote{font-size:52px}.am-carte .am-gros{font-size:46px}.am-carte .am-note{font-size:38px}.am-tab{font-size:14px}}

/* Réglages venus du socle d'alumire — habillés à la peau de ce site
   ⚠️ Ces classes sont produites par `ALU.curseur()` (alumire.com/assets/js/alumire-outils.js),
   pas par nos gabarits : elles servent tous les outils du parc. Ce qui change ici, c'est
   seulement la couleur — la forme, elle, doit rester la même partout, sinon Arthur réapprend
   un réglage d'un outil à l'autre.
--- */
.am-reglages{margin-top:14px}
.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:#8f8f8f}
.alu-reg-val{font-size:13px;color:#2b2b2b;font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.alu-reg input[type=range]{width:100%;accent-color:#f95311;height:18px;cursor:pointer}
.alu-raz{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid #d3cdc5;border-radius:6px;background:#fff;color:#8a8279;cursor:pointer}
.alu-raz:hover{border-color:#f95311;color:#f95311}
.alu-raz svg{width:15px;height:15px}
.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-gros-bpm{cursor:text;border-bottom:2px dashed #d3cdc5;display:inline-block!important;padding-bottom:2px}
.am-gros-bpm:hover,.am-gros-bpm:focus-visible{border-bottom-color:#f95311;outline:none}
.am-gros-edit{width:100%;max-width:220px;border:0;border-bottom:2px solid #f95311;background:transparent;color:#2b2b2b;font:inherit;font-size:inherit;font-weight:inherit;text-align:center;padding:0;font-variant-numeric:tabular-nums}
.am-gros-edit:focus{outline:none}