/* L'ÉDITEUR D'IDÉE, LE CŒUR : la barre du haut, la grille ou la partition,
 * le pupitre (son cadre et le transport), les feuilles Tempo, ••• et Carnet.
 * Chaque mode du pupitre et la sélection ont leur feuille (idee-clavier.css,
 * idee-chant.css, idee-accords.css, idee-selection.css, idee-direct.css),
 * chargée après celle-ci.
 *
 * Un studio de poche : une seule barre en haut, la grille prend l'écran,
 * le pupitre reste sous le pouce. Trois rangées de commandes et des volets
 * posés sur la grille ne lui laissaient que 41 % de la hauteur. */

/* Écran Idée : toute la hauteur, la saisie sous le pouce */
body.plein { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.plein main { flex: 1 1 auto; min-height: 0; max-width: none; width: 100%; margin: 0; padding: 0; }
body.plein .vue-idee { height: 100%; }
.vue-idee {
  gap: 0; min-width: 0;
  /* La hauteur du contenu d'un mode du pupitre : la même pour les trois, la
     grille ne saute pas quand on passe de l'un à l'autre. */
  --pupitre-mode: clamp(176px, 25dvh, 236px);
}
.vue-idee > * { min-width: 0; max-width: 100%; }
/* Le pastillon « mode » de la bibliothèque (point rouge du mémo vocal) vivait
   ici : la bibliothèque s'en sert encore. */
.point-rouge { color: var(--danger); }

/* La barre du haut : retour, titre (et tempo dessous), affichage, partager, ••• */
.idee-barre-haut { flex: none; height: calc(var(--barre) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 4px 0 2px; display: flex; align-items: center; gap: 2px; background: var(--feuille); border-bottom: 1px solid var(--trait); }
.idee-barre-haut > .btn { flex: none; }
/* Grille | Partition : au téléphone, les deux icônes (la barre n'a pas la
   place des mots sans couper le titre) ; les mots aussi quand elle l'a. */
.idee-affichage { flex: none; margin: 0 2px 0 4px; }
.idee-affichage > button { padding: 0 11px; }
.idee-affichage > button > span { display: none; }
/* Au téléphone, un seul bouton de 44 px : celui de l'autre affichage (la grille
   montre « Partition », la partition « Grille »). Les deux côte à côte
   prenaient la place du titre, et faisaient 40 px. */
@media (max-width: 599px) {
  .idee-affichage { padding: 0; background: none; }
  .idee-affichage > button[aria-pressed="true"] { display: none; }
  .idee-affichage > button { color: var(--encre); }
}
@media (min-width: 600px) {
  .idee-affichage > button { padding: 0 12px; }
  .idee-affichage > button > span { display: inline; }
}
/* Le titre et, à côté, le tempo : deux cibles de 44 px côte à côte. Le résumé
   « 90 · 4/4 · Do majeur » était une ligne de 17 px sous le titre (26 px) : on
   ne pouvait viser ni l'un ni l'autre (audit du 04/10, I1). Au téléphone, le
   bouton ne montre que la noire et le tempo ; la mesure et la tonalité s'y
   ajoutent dès que la barre a la place. Son nom (aria-label, et la bulle de
   l'appui long) dit toujours les trois. */
.idee-titres { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; }
.idee-titre { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 44px; font-family: var(--f-titre); font-size: var(--t-18); line-height: 1.25; color: var(--encre); border: 1px solid transparent; background: transparent; border-radius: var(--r-8); padding: 1px 6px; margin: 0; text-overflow: ellipsis; }
.idee-titre:hover, .idee-titre:focus { border-color: var(--bord-champ); background: var(--creux); }
.idee-titre:focus { outline: none; }
.idee-resume { flex: none; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: var(--r-plein); background: none; padding: 0 8px 0 6px; color: var(--gris); font-size: var(--t-14); line-height: 1.2; cursor: pointer; white-space: nowrap; }
.idee-resume:hover { color: var(--encre); background: var(--creux); }
.idee-resume .resume-suite { display: none; }
@media (min-width: 700px) { .idee-resume .resume-suite { display: inline; } }
.idee-piste-puce { flex: none; padding: 0 12px; font-size: var(--t-13); margin-right: 2px; }

/* La grille ou la partition : tout l'espace entre la barre et le pupitre */
.idee-surface { flex: 1 1 auto; min-height: 140px; position: relative; overflow: hidden; background: var(--papier); }
#idee-grille { position: absolute; inset: 0; }

/* La partition : la gravure remplit la place de la grille */
.idee-partition { position: absolute; inset: 0; overflow: auto; padding: 8px 10px 28px; background: var(--papier); }
#idee-gravure { color: var(--encre); min-height: 100px; }
#idee-gravure svg { cursor: pointer; }
#idee-gravure .abcjs-note.choisie, #idee-gravure .abcjs-note.choisie * { fill: var(--stylo); color: var(--stylo); }
#idee-gravure .abcjs-note.joue, #idee-gravure .abcjs-note.joue * { fill: var(--surligneur); color: var(--surligneur); }
.caret { position: absolute; width: 2px; background: var(--stylo); border-radius: var(--r-trait); pointer-events: none; animation: clignote 1.1s steps(2, start) infinite; }
@keyframes clignote { to { visibility: hidden; } }

/* Le pupitre : le transport, les modes, le contenu du mode */
.idee-pupitre { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 2px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--feuille); border-top: 1px solid var(--trait); }
.idee-pupitre > * { width: 100%; max-width: 960px; margin-left: auto; margin-right: auto; }
.idee-transport { display: flex; align-items: center; gap: 8px; min-height: 60px; }
.idee-transport .pousse { flex: 1 1 auto; }
.idee-transport .btn.rond[disabled] { opacity: 0.3; }
.idee-modes { display: flex; }
.idee-modes > button { min-height: 44px; }
/* Le texte agrandi : les trois modes n'ont plus la place de leur nom (il débordait sur le voisin),
   ils se réduisent à leur icône ; leur nom reste celui de l'onglet, et sa bulle à l'appui long. La
   place se compte en em : elle suit la taille du texte (audit du 04/10, I10). */
.idee-modes { container: modes / inline-size; }
@container modes (max-width: 16em) { .idee-modes > button { font-size: 0; gap: 0; } }
/* Moins de 390 px : le pupitre serre ses marges pour que les huit durées gardent
   44 px de large (8 × 44 = 352 px). En dessous de 360, elles passent sur deux
   rangées (idee-clavier.css), et le pupitre grandit d'autant. */
@media (max-width: 389px) {
  .idee-pupitre { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 359px) {
  .vue-idee { --pupitre-mode: clamp(224px, calc(25dvh + 48px), 284px); }
  .idee-transport { gap: 4px; }
  .idee-modes > button { padding: 0 8px; gap: 4px; }
}
.idee-mode-dedans { height: var(--pupitre-mode); position: relative; }
.idee-pupitre.avec-selection .idee-mode-dedans { height: calc(var(--pupitre-mode) - 52px); }
.idee-mode-dedans > [role="tabpanel"] { height: 100%; }

/* La grille (grille.js) */
.grille-notes { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 34px minmax(0, 1fr); height: 100%; position: relative; user-select: none; -webkit-user-select: none; }
.g-coin { background: var(--feuille); border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.g-regle { overflow: hidden; position: relative; background: var(--feuille); border-bottom: 1px solid var(--trait); touch-action: none; cursor: pointer; }
.g-regle-dedans { position: relative; height: 100%; }
.g-mesure { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--trait-fort); }
.g-mesure.choisie { background: var(--stylo-doux); }
.g-numero { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-family: var(--f-code); font-size: var(--t-11); color: var(--gris); font-variant-numeric: tabular-nums; pointer-events: none; }
.g-accord { position: absolute; top: 50%; transform: translateY(-50%); min-height: 30px; min-width: 36px; padding: 0 4px; border: 0; background: none; font-family: var(--f-titre); font-size: var(--t-16); line-height: 1; color: var(--stylo); white-space: nowrap; cursor: pointer; }
.g-ajouter { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); min-height: 30px; padding: 0 4px; border: 0; background: none; display: none; align-items: center; gap: 3px; color: var(--stylo); font-size: var(--t-13); font-weight: 500; white-space: nowrap; cursor: pointer; }
.g-mesure.choisie .g-ajouter { display: inline-flex; }
@media (hover: hover) { .g-mesure:hover .g-ajouter { display: inline-flex; } }
.g-repere { position: absolute; bottom: 0; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 7px solid var(--stylo); transform: translateX(-6px); pointer-events: none; }
.g-boucle { position: absolute; top: 0; bottom: 0; background: var(--surligneur-doux); pointer-events: none; }
/* La bande des touches : un petit piano sombre, les noms des notes à droite. */
.g-touches { overflow: hidden; position: relative; border-right: 1px solid var(--trait); background: var(--feuille); }
.g-touches-dedans { position: relative; }
.g-touche { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-family: var(--f-code); font-size: var(--t-10); color: var(--gris); cursor: pointer; }
.g-touche.do { color: var(--encre); font-weight: 600; box-shadow: inset 0 -1px 0 var(--trait-fort); }
.g-touche.noire::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 56%; border-radius: 0 var(--r-4) var(--r-4) 0; background: var(--touche-noire); box-shadow: inset 0 0 0 1px var(--trait); }
.g-defil { overflow: auto; touch-action: pan-x pan-y; overscroll-behavior: contain; position: relative; }
.g-plan { position: relative; }
.g-fond { position: absolute; inset: 0; }
/* Les rangées des touches noires un peu plus marquées, les traits de mesure
   nets, ceux des temps lisibles, les pas à peine : la grille se lit d'un
   coup d'œil sans faire de bruit. */
.g-fond .g-rang-noir { fill: var(--encre); fill-opacity: 0.06; }
.g-fond line { stroke-width: 1; }
.g-fond .g-octave { stroke: var(--trait-fort); }
.g-fond .g-mi-fa { stroke: var(--trait); }
.g-fond .g-barre { stroke: var(--gris); stroke-opacity: 0.65; stroke-width: 1.5; }
.g-fond .g-temps { stroke: var(--trait-fort); }
.g-fond .g-pas { stroke: var(--trait); stroke-opacity: 0.8; }
.g-notes { position: absolute; inset: 0; }
.g-note { position: absolute; background: var(--stylo); border-radius: var(--r-4); color: var(--sur-stylo); font-size: var(--t-11); font-weight: 600; overflow: hidden; touch-action: none; cursor: grab; display: flex; align-items: center; padding-left: 5px; white-space: nowrap; letter-spacing: 0.01em; }
/* La note choisie : le surligneur, un anneau de la couleur du fond pour la
   détacher (un bord brun la salissait). */
.g-note.choisie { background: var(--surligneur); color: var(--sur-surligneur); box-shadow: 0 0 0 2px var(--papier), 0 0 0 3.5px var(--surligneur); z-index: var(--z-dessus); }
.g-note.autre { background: var(--trait-fort); opacity: 0.55; pointer-events: none; }
.g-note .g-bord { position: absolute; right: 0; top: 0; bottom: 0; width: 7px; cursor: ew-resize; border-right: 2px solid color-mix(in srgb, currentColor 40%, transparent); }
.g-curseur { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--stylo); pointer-events: none; transform: translateX(-1px); }
.g-lecture { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--surligneur); box-shadow: 0 0 0 0.5px var(--alerte), var(--lueur); pointer-events: none; z-index: var(--z-tete); }
.g-invite { position: absolute; left: 60px; right: 16px; top: 45%; text-align: center; color: var(--gris); pointer-events: none; margin: 0; }

/* Les feuilles de l'idée (Tempo, •••, Carnet, accords) */
.idee-feuille[open] { display: flex; flex-direction: column; gap: 14px; }
.idee-feuille .feuille-tete { margin-bottom: 0; }
.idee-feuille .feuille-tete .idee-etat { font-size: var(--t-13); white-space: nowrap; }

/* Tempo et mesure */
.tempo-grand { display: flex; align-items: center; justify-content: center; gap: 22px; }
.tempo-chiffre { display: flex; flex-direction: column; align-items: center; min-width: 128px; }
#idee-tempo-val { font-family: var(--f-titre); font-size: var(--t-56); line-height: 1; font-variant-numeric: tabular-nums; }
.tempo-curseur { width: 100%; accent-color: var(--stylo); margin: 0; }
.idee-taper { min-height: 56px; width: 100%; }
.reglage-bloc { display: flex; flex-direction: column; gap: 6px; }
.reglage-bloc select.champ { width: 100%; flex: none; }
.reglage-bloc .rangee select.champ { width: auto; flex: 1 1 120px; }
.reglage-bloc .seg { flex: 0 0 auto; }
.reglage-bloc .seg > button { min-width: 56px; }
.idee-raccourcis { display: none; }
@media (pointer: fine) { .idee-raccourcis { display: block; } }
.idee-raccourcis kbd { font-family: var(--f-code); font-size: var(--t-13); border: 1px solid var(--trait-fort); border-bottom-width: 2px; border-radius: var(--r-4); padding: 0 4px; color: var(--encre); }
.idee-zoom { gap: 10px 24px; }
.idee-zoom-axe { display: inline-flex; align-items: center; gap: 6px; }
.idee-zoom-axe > span { min-width: 4.4em; font-size: var(--t-15); color: var(--gris); }
.idee-zoom-aide { display: none; }
@media (pointer: coarse) { .idee-zoom-aide { display: block; } }
.idee-fini { width: 100%; min-height: 48px; }

/* ••• : une liste d'actions, une icône chacune */
.idee-actions { display: flex; flex-direction: column; gap: 6px; }
.idee-actions .btn { justify-content: flex-start; gap: 14px; min-height: 50px; padding: 0 16px; font-size: var(--t-16); background: var(--creux); border-color: transparent; }
.idee-actions .btn:hover { border-color: var(--trait-fort); }

/* Le carnet d'une idée */
.info-champ { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-14); color: var(--gris); }
.info-champ textarea { width: 100%; flex: none; resize: vertical; color: var(--encre); }
.info-champ .etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.info-champ .etiquettes:empty { display: none; }
#info-favori[aria-pressed="true"] { background: var(--surligneur-doux); border-color: var(--surligneur); color: var(--encre); }
#memo-enregistrer[aria-pressed="true"] { border-color: var(--rouge); color: var(--rouge); }

/* Au doigt, la règle se touche : 44 px de haut, comme tout ce qui se touche. */
@media (pointer: coarse) {
  .grille-notes { grid-template-rows: 44px minmax(0, 1fr); }
  .g-accord, .g-ajouter { min-height: 44px; }
  .g-accord { min-width: 44px; }
}
@media (min-width: 821px) {
  .idee-titre { font-size: var(--t-20); }
}

/* Couché (moins de 500 px de haut : un téléphone en paysage, une fenêtre basse) :
   la grille à gauche, le pupitre à droite, chacun sur toute la hauteur. L'un sous
   l'autre, ils demandaient 507 px pour les 390 d'un téléphone couché, et il ne
   restait que 80 px de grille (audit du 04/10, I10). Le pupitre garde la largeur
   des huit durées de 44 px ; son mode prend la hauteur qui reste, et il défile
   s'il en manque (un bandeau de suggestions au-dessus). L'encoche de l'écran,
   qui passe sur le côté, est laissée libre par le <body> (systeme.css). */
@media (orientation: landscape) and (max-height: 500px) {
  .vue-idee {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(392px, 46%, 480px); grid-template-rows: auto auto minmax(0, 1fr);
    --pupitre-mode: max(176px, calc(100dvh - var(--barre) - env(safe-area-inset-top, 0px) - 140px));
  }
  .vue-idee > .idee-barre-haut, .vue-idee > .bandeau-claude { grid-column: 1 / -1; }
  .vue-idee > .idee-surface { grid-column: 1; grid-row: 3; min-height: 0; }
  .vue-idee > .idee-pupitre { grid-column: 2; grid-row: 3; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 0; border-left: 1px solid var(--trait); }
}