/* Pages écrites à la main : « Corriger » (atelier) et « Écouter et exporter » (lecteur).
 *
 * Chaque écran a sa barre, ses pages au milieu, et un panneau fixé en bas (le
 * « dock ») : dans « Corriger », un doute à la fois (ou les outils de la note
 * choisie) ; dans « Écouter », le transport. Le panneau reste en bas pour qu'on
 * garde la page sous les yeux en répondant : ce n'est pas une fenêtre. */

/* ---------------------------------------------------------------------- */
/* La page redessinée (aussi dans les vignettes de l'accueil)             */
/* ---------------------------------------------------------------------- */
svg .papier line { stroke: var(--trait-fort); stroke-width: 2; }
svg .encre polyline { fill: none; stroke: var(--encre); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
/* Le cadre d'un doute dans la loupe. Le trait garde son épaisseur quelle que soit la loupe. */
svg .surlignage rect { fill: var(--stylo-doux); fill-opacity: 0.4; stroke: var(--stylo); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
svg .surlignage rect.leve { fill: none; stroke: var(--ok); stroke-dasharray: 6 4; }

/* ---------------------------------------------------------------------- */
/* Pièces que les écrans Idée et Morceau partagent                        */
/* ---------------------------------------------------------------------- */
.titre-edit { font-family: var(--f-titre); font-size: clamp(1.4rem, 3vw, 1.9rem); border: 1px solid transparent; background: transparent; border-radius: var(--r-8); padding: 2px 6px; margin-left: -6px; min-width: 0; flex: 1 1 260px; }
.titre-edit:hover, .titre-edit:focus { border-color: var(--bord-champ); background: var(--feuille); }
.gravure { color: var(--encre); min-height: 120px; }
.gravure .abcjs-note.joue, .gravure .abcjs-note.joue * { fill: var(--stylo); color: var(--stylo); }
.etat { font-size: var(--t-14); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.val { font-family: var(--f-code); font-size: var(--t-14); color: var(--encre); min-width: 4ch; font-variant-numeric: tabular-nums; }
.bascule { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-14); min-height: 44px; }
.bascule input { accent-color: var(--stylo); width: 20px; height: 20px; }
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; background: var(--feuille); }

/* ---------------------------------------------------------------------- */
/* Un écran de partition : sa barre                                       */
/* ---------------------------------------------------------------------- */
/* Le panneau du bas est fixé : l'écran lui laisse sa hauteur (--dock-h, mesurée par l'appli). */
.vue-partition { gap: 14px; padding-bottom: calc(var(--dock-h, 0px) + 24px); }
/* La barre déborde sur les marges de <main> pour toucher le haut de l'écran. */
.barre-ecran { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-barre); margin: -20px -16px 0; padding: 6px 12px 8px 8px; background: var(--papier); border-bottom: 1px solid var(--trait); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.barre-titre { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
/* Le titre se touche pour le renommer : 44 px de haut, dont le bas sert de place à la ligne du dessous (qui laisse passer le toucher). */
.barre-titre .titre-edit, .barre-titre h2 { flex: none; width: 100%; margin: 0; padding: 4px 6px 14px; min-height: 44px; font-size: var(--t-20); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-titre h2 { border: 1px solid transparent; }
.barre-sous { position: relative; margin: -14px 0 0 7px; font-size: var(--t-13); line-height: 1.3; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.barre-sous:empty { display: none; }
/* Corriger ↔ Écouter : sur une seconde ligne au téléphone, dans la barre à l'ordinateur. */
.barre-ecran .onglets { flex: 1 0 calc(100% - 4px); margin: 4px 0 0 4px; display: flex; }
.regle-vues { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.regle-vues .seg { flex: 1 1 280px; max-width: 420px; display: flex; }
.pages-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------- */
/* Corriger : ta page, et ce que Portée a lu                              */
/* ---------------------------------------------------------------------- */
.zones { display: flex; flex-direction: column; gap: 14px; }
.zones[data-vue="page"] .zone-lue, .zones[data-vue="lue"] .zone-page { display: none; }
/* scroll-margin-top : la hauteur de la barre collée en haut, pour qu'une zone amenée à l'écran ne passe pas dessous. */
.zone { display: flex; flex-direction: column; gap: 8px; min-width: 0; scroll-margin-top: 140px; }
.zone-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.zone .surtitre { margin: 0; }
/* Les deux zones côte à côte commencent à la même hauteur, avec ou sans bouton dans leur titre. */
.zone-page > .surtitre { min-height: 34px; display: flex; align-items: center; }
/* Une page, ou une partition, posée comme une feuille. */
.page-cadre { position: relative; background: var(--feuille); border-radius: var(--r-12); box-shadow: 0 0 0 1px var(--trait); }
.gravure-cadre { padding: 10px 12px; }
.page-svg { width: 100%; height: auto; display: block; color: var(--encre); }
.guide { margin: 0; font-size: var(--t-14); color: var(--gris); }
/* Les raccourcis du clavier ne parlent qu'à ceux qui en ont un. */
.raccourcis { display: none; }
@media (pointer: fine) { .raccourcis { display: inline; } }
.gravure-edit svg { cursor: pointer; }
/* Le zoom de la partition lue (I14) : la gravure s'élargit dans son cadre, qui défile de côté.
   Le pincement y est à Portée, pas au navigateur (touch-action) : il agrandit la partition, pas la page. */
.zone-lue .gravure-cadre { overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.gravure-zoom { width: calc(var(--zoom, 1) * 100%); }
.zoom { display: inline-flex; align-items: center; gap: 0; margin-left: auto; }
.zoom .val { min-width: 5ch; text-align: center; font-size: var(--t-13); color: var(--gris); }
.gravure-edit .abcjs-note:hover, .gravure-edit .abcjs-rest:hover { fill: var(--stylo); }

/* Les repères de doute sur la page : un cadre, et un numéro. Le toucher les ouvre. */
.reperes { position: absolute; inset: 0; pointer-events: none; }
.repere { position: absolute; pointer-events: auto; transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; padding: 0; border: 2.5px solid var(--stylo); border-radius: var(--r-10); background: transparent; cursor: pointer; }
.repere.actif { background: color-mix(in srgb, var(--stylo) 14%, transparent); box-shadow: 0 0 0 3px var(--stylo-doux); }
.repere.fait { border-color: var(--ok); border-style: dashed; }
.repere .numero { position: absolute; top: -12px; right: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--stylo); color: var(--sur-stylo); font-size: var(--t-12); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.repere.fait .numero { background: var(--ok); color: var(--papier); }

.avance { border-top: 1px solid var(--trait); padding-top: 4px; display: flex; flex-direction: column; gap: 10px; }
.avance summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: var(--t-13); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--gris); }
.avance[open] > summary { margin-bottom: 4px; }
textarea.abc { font-family: var(--f-code); font-size: var(--t-14); line-height: 1.55; min-height: 180px; resize: vertical; border: 1px solid var(--bord-champ); background: var(--feuille); border-radius: var(--r-8); padding: 10px 12px; width: 100%; }

/* ---------------------------------------------------------------------- */
/* Le panneau du bas (dock)                                               */
/* ---------------------------------------------------------------------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock); display: flex; flex-direction: column; gap: 10px; max-height: 74dvh; overflow: auto; overscroll-behavior: contain; padding: 6px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--feuille); border-top: 1px solid var(--trait-fort); border-radius: var(--r-22) var(--r-22) 0 0; box-shadow: var(--ombre); }
.dock > * { width: 100%; max-width: 1208px; margin-inline: auto; }
.dock-tete { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.dock-gauche { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.dock-tete .pousse { margin-left: auto; }
.dock-tete #enregistre { font-size: var(--t-13); white-space: nowrap; }
/* Replié : seule la tête reste, et la page se voit en entier. */
.dock.replie .doutes, .dock.replie .dock-manuel { display: none; }
.note-choisie { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Les points des doutes ont leur rangée, sous le titre et ses boutons : chacun
   fait 44 px au doigt (24 de large avant, audit du 04/10, I1), et beaucoup de
   doutes passent à la ligne sans glisser sous « Annuler ». Le titre et les
   points sortent de leur boîte (display: contents) pour se ranger dans celle
   de la tête. */
/* flex: none : dans le panneau (sa hauteur est bornée), la tête ne s'écrase pas sur
   ses rangées de points, qui déborderaient sur le doute (dix-sept doutes : trois rangées). */
.dock-tete { flex: none; flex-wrap: wrap; row-gap: 0; }
.dock-tete #tete-doutes { display: contents; }
.dock-tete #pas-doutes { order: 1; flex: 1 1 100%; }
.dock-tete #pas-doutes:empty { display: none; }
/* La note choisie entre « précédente » et « suivante » (I14) : son nom se coupe plutôt que de pousser les boutons. */
.dock-tete #tete-note { gap: 2px; }
.dock-tete #tete-note .note-choisie { flex: 0 1 auto; padding: 0 4px; }
.pas { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.pas-doute { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.pas-doute::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--trait-fort); }
.pas-doute.fait::before { background: var(--ok); }
.pas-doute[aria-current="step"]::before { width: 22px; border-radius: var(--r-4); background: var(--stylo); }
.pas-doute[aria-current="step"].fait::before { background: var(--ok); }

/* Un doute : la loupe sur le passage, la question, les réponses. */
.doutes { display: flex; flex-direction: column; gap: 10px; }
.doute-carte { display: flex; flex-direction: column; gap: 10px; }
.loupe { height: 96px; border-radius: var(--r-12); overflow: hidden; background: var(--feuille); box-shadow: 0 0 0 1px var(--trait-fort); }
.loupe svg { width: 100%; height: 100%; display: block; color: var(--encre); }
.doute-texte { display: flex; flex-direction: column; gap: 2px; }
.doute-question { font-size: var(--t-20); }
.doute-detail { margin: 0; font-size: var(--t-15); color: var(--gris); }
.doute-etat { display: flex; align-items: center; gap: 8px; }
/* L'avis de Claude sur un doute : marqué comme le sien, à côté de la question, jamais à la place de ta réponse. */
.avis-claude { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--stylo); border-radius: 0 var(--r-10) var(--r-10) 0; background: var(--stylo-doux); display: flex; flex-direction: column; gap: 2px; }
.avis-claude .surtitre { color: var(--stylo); }
.avis-claude p { font-size: var(--t-15); color: var(--encre); }
/* Second avis (H1) : « Claude regarde… » et « Arrêter » sur une ligne ; la proposition, un bouton à toucher. */
.avis-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.avis-claude .avis-proposition { justify-content: flex-start; min-height: 48px; white-space: normal; text-align: left; border-color: var(--stylo); color: var(--stylo); background: var(--feuille); font-weight: 600; }
.avis-claude .avis-titre { font-weight: 600; }
.reponses { display: flex; flex-wrap: wrap; gap: 10px; }
.reponse { flex: 1 1 130px; min-height: 56px; padding: 6px 12px; border: 1.5px solid var(--trait-fort); border-radius: var(--r-12); background: var(--feuille); color: var(--encre); font-size: var(--t-16); font-weight: 600; line-height: 1.2; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.reponse:hover { border-color: var(--stylo); }
.reponse.btn { white-space: normal; }
.reponse .ico { width: 24px; height: 24px; }
.reponse.rouvrir { font-weight: 500; }
/* L'action qui mène plus loin garde le bleu du système (.btn-plein, que .reponse recouvrirait). */
.reponse.btn-plein { background: var(--stylo); border-color: var(--stylo); color: var(--sur-stylo); }
.reponse.btn-plein:hover { filter: brightness(1.08); border-color: var(--stylo); }
.dock-manuel { display: flex; gap: 10px; }
.dock-manuel .btn { flex: 1 1 0; }
.doute-aide { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; }
.doute-aide .btn { color: var(--gris); }
.doute-aide .btn:hover { color: var(--encre); }

/* « Tout est relu » */
.relu { display: flex; flex-direction: column; gap: 12px; }
.relu-tete { display: flex; align-items: center; gap: 14px; }
.relu .rond-ok { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--ok); color: var(--papier); display: grid; place-items: center; }
.relu h2 { font-size: var(--t-22); }
.relu p { margin: 0; font-size: var(--t-14); color: var(--gris); }
.relu .reponses { flex-wrap: nowrap; }
.relu .reponse.rouvrir { flex: 0 0 auto; padding: 6px 18px; }
.relu .reponse.btn-plein { flex: 1 1 auto; }

/* Les outils de la note choisie : deux rangées d'icônes au téléphone, une seule à l'ordinateur. */
.outils-note { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.outils-note .separe { display: none; }
.outil { min-width: 0; min-height: 48px; padding: 0; }
/* Le panneau serre ses marges et ses écarts sous 390 px. Sept outils de 44 px tiennent tant que
   le panneau a 332 px de large (sept fois 44, et six écarts) ; plus étroit (320 px, ou le panneau
   de droite d'un petit téléphone couché), ils passent à cinq par rangée. C'est la largeur du
   panneau qui compte, pas celle de l'écran. */
@media (max-width: 389px) {
  .dock { padding-left: 12px; padding-right: 12px; }
  .outils-note { gap: 4px; }
}
#dock-atelier { container: dock / inline-size; }
@container dock (max-width: 331px) { .outils-note { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } }

/* La feuille « ••• » */
.liste-actions { display: flex; flex-direction: column; gap: 8px; }
.liste-actions .btn { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; justify-items: start; min-height: 52px; padding: 8px 14px; white-space: normal; text-align: left; }
.liste-actions .btn .remarque { grid-column: 2; font-weight: 400; }

/* ---------------------------------------------------------------------- */
/* Écouter et exporter                                                    */
/* ---------------------------------------------------------------------- */
/* Une partition de dix lignes de large n'a rien de lisible : on la tient à la largeur d'une page. */
.vue-lecteur > .exports, .vue-lecteur > .gravure-cadre, .vue-lecteur > .aide-export { width: 100%; max-width: 980px; margin-inline: auto; }
.exports { display: flex; flex-wrap: wrap; gap: 8px; }
/* Le MIDI d'abord : c'est ce qu'on vient chercher ici. Le bleu plein reste à « Écouter ». */
.exports .btn:first-child { border-color: var(--stylo); color: var(--stylo); }
.dock-transport > * { width: auto; max-width: none; margin-inline: 0; }
.transport-haut { display: flex; align-items: center; gap: 12px; }
.dock-transport #ecouter { min-height: 52px; min-width: 128px; padding: 0 20px; font-size: var(--t-16); }
.tempo { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.tempo input[type="range"] { flex: 1 1 60px; min-width: 60px; accent-color: var(--stylo); }
.tempo .val { min-width: 6ch; text-align: right; }
.transport-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.transposer { display: inline-flex; align-items: center; gap: 6px; }
.transposer .val { min-width: 3ch; text-align: center; font-size: var(--t-16); }

/* Tablette et ordinateur : la barre tient sur une ligne, le doute se lit en deux colonnes, les outils sur une rangée. */
@media (min-width: 700px) {
  .barre-ecran { flex-wrap: nowrap; padding-left: 12px; }
  .barre-ecran .barre-titre { order: 1; }
  .barre-ecran .onglets { order: 2; flex: 0 0 auto; margin: 0 8px; }
  /* Dans la barre, chacun la largeur de son nom : partagée en deux, « Écouter et exporter » passait à la ligne. */
  .barre-ecran .onglets > button { flex: 1 1 auto; }
  .barre-ecran #statut-atelier, .barre-ecran #statut-lecteur { order: 3; }
  .barre-ecran #plus-atelier, .barre-ecran #plus-lecteur { order: 4; }
  .doute-carte { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); grid-template-areas: "loupe texte" "loupe reponses" "loupe aide"; column-gap: 28px; row-gap: 10px; align-items: start; grid-template-rows: auto auto 1fr; }
  .doute-carte .loupe { grid-area: loupe; height: 120px; }
  .doute-carte .doute-texte { grid-area: texte; }
  .doute-carte .reponses { grid-area: reponses; }
  .doute-carte .reponse { flex: 1 1 150px; max-width: 240px; }
  .doute-carte .doute-aide { grid-area: aide; justify-content: flex-start; }
  .outils-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .outils-note .separe { display: block; width: 1px; height: 30px; margin: 0 8px; background: var(--trait-fort); }
  .outil { flex: 0 0 52px; }
  .dock-transport { flex-direction: row; justify-content: center; align-items: center; gap: 12px 40px; }
  .tempo { flex: 0 1 340px; }
}
/* Assez large pour mettre ta page et la partition lue côte à côte. */
@media (min-width: 900px) {
  .zones[data-vue="deux"] { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; }
}

/* Couché (moins de 500 px de haut), le panneau des doutes passe à droite, sur toute la
   hauteur, comme le pupitre de l'éditeur : en bas, il prenait les trois quarts de
   l'écran, et ta page ne se voyait plus (audit du 04/10, I10). Le doute s'y lit sur
   une colonne. Le transport d'« Écouter », bas, reste en bas. */
@media (orientation: landscape) and (max-height: 500px) {
  .vue-atelier { padding-bottom: 24px; padding-right: calc(min(400px, 46vw) - 16px + env(safe-area-inset-right, 0px)); }
  /* La barre n'a que la place de la colonne de gauche : Corriger | Écouter repasse dessous, comme au téléphone. */
  .vue-atelier .barre-ecran { margin-right: 0; flex-wrap: wrap; }
  .vue-atelier .barre-ecran .onglets { order: 5; flex: 1 0 calc(100% - 4px); margin: 4px 0 0 4px; }
  .vue-atelier .barre-ecran .onglets > button { flex: 1 1 0; }
  #dock-atelier { top: 0; left: auto; width: calc(min(400px, 46vw) + env(safe-area-inset-right, 0px)); max-height: none; padding-top: calc(6px + env(safe-area-inset-top, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); border-radius: 0; border-top: 0; border-left: 1px solid var(--trait-fort); }
  #dock-atelier .doute-carte { display: flex; align-items: stretch; }
  #dock-atelier .doute-carte .loupe { height: 96px; }
  #dock-atelier .doute-carte .reponse { max-width: none; }
}

@media print {
  body { background: var(--blanc-imprime); }
  .barre-haut, .barre-ecran, .dock, dialog, .exports, #toast, #meta-lecteur, .aide-export, #vue-biblio, #vue-atelier, #vue-morceau, #vue-idee { display: none !important; }
  main { padding: 0; }
  #vue-lecteur { padding: 0; }
  /* Seule la partition sort, en noir sur blanc quel que soit le thème de l'écran. */
  #vue-lecteur .page-cadre { border: 0; box-shadow: none; padding: 0; background: none; }
  #vue-lecteur .gravure { color: var(--noir-imprime); }
}

/* Les messages passagers passent sous la barre de l'écran (titre et
   Corriger / Écouter), plus haute que celle de l'accueil. */
body[data-vue="atelier"] .toast, body[data-vue="lecteur"] .toast { top: calc(env(safe-area-inset-top, 0px) + 128px); }
@media (min-width: 700px) {
  body[data-vue="atelier"] .toast, body[data-vue="lecteur"] .toast { top: calc(env(safe-area-inset-top, 0px) + 84px); }
}