/* Studio exégétique : « Composition du chapitre » (css_js/exegese-composition.js).
 * Palette et polices du studio ; classes .cmp-, limitées à #exe_studio.
 * Couleurs des fils, comme le dessin des citations : refrain ambre, cadre brun, symétrie violette
 * (pointillés : hypothèse), motif sarcelle, champ bleu, personnage brique. */

/* Le panneau s'élargit pour la partition. */
#exe_studio .exs-volet:has(.cmp-vue) { width: min(1120px, 96vw); }
#exe_studio .exs-lecture:has(> .cmp-vue) { max-width: none; }

/* ---------- carte dans Observer ---------- */
#exe_studio .cmp-apercu { display: flex; flex-direction: column; gap: 6px; }
#exe_studio .cmp-mini { display: block; width: 100%; padding: 6px 4px 2px; border: 1px solid var(--exs-line); border-radius: 8px; background: #fff; cursor: zoom-in; }
#exe_studio .cmp-mini:hover { border-color: #c9b79c; }
#exe_studio .cmp-c-mini { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: baseline; font: 400 13.5px/1.45 var(--exs-ui); }

/* ---------- partition ---------- */
#exe_studio .cmp-svg { display: block; width: 100%; height: auto; font-family: var(--exs-ui); }
#exe_studio .cmp-svg .cmp-ici { fill: var(--exs-gold-wash); }
#exe_studio .cmp-svg .cmp-unite rect.a { fill: #efe6d6; }
#exe_studio .cmp-svg .cmp-unite rect.b { fill: #e4d7c1; }
#exe_studio .cmp-svg .cmp-unite.on rect { fill: #f7dc9a; stroke: #c9951f; stroke-width: 1.2; }
#exe_studio .cmp-svg .cmp-unite-t { font: 700 11px var(--exs-ui); fill: #5a3416; text-anchor: middle; pointer-events: none; }
#exe_studio .cmp-svg.mini .cmp-unite-t { font-size: 13px; }
#exe_studio .cmp-svg .cmp-rupt { fill: #8a2616; fill-opacity: .7; }
#exe_studio .cmp-svg .cmp-sec { font: 700 9.5px var(--exs-ui); letter-spacing: .1em; fill: var(--exs-accent); }
#exe_studio .cmp-svg .cmp-sep { stroke: var(--exs-line); stroke-width: 1; }
#exe_studio .cmp-svg .cmp-lab { font: 600 12.5px var(--exs-ui); fill: var(--exs-ink-soft); }
#exe_studio .cmp-svg .cmp-lab.grk { font: 400 15px var(--exs-serif); fill: var(--exs-ink); }
#exe_studio .cmp-svg .cmp-lab.heb { font: 400 17px var(--exs-heb); fill: var(--exs-ink); }
#exe_studio .cmp-svg.mini .cmp-lab { font-size: 15px; }
#exe_studio .cmp-svg.mini .cmp-lab.grk { font-size: 18px; }
#exe_studio .cmp-svg.mini .cmp-lab.heb { font-size: 20px; }
#exe_studio .cmp-svg .cmp-axe { font: 600 10.5px var(--exs-ui); fill: #8a8078; text-anchor: middle; }
#exe_studio .cmp-svg.mini .cmp-axe { font-size: 13px; }
#exe_studio .cmp-svg .cmp-axe[data-act] { cursor: pointer; }
#exe_studio .cmp-svg .cmp-axe[data-act]:hover { fill: var(--exs-accent); text-decoration: underline; }
#exe_studio .cmp-svg .cmp-axe.ici { fill: #9a6a00; font-weight: 800; }
#exe_studio .cmp-svg .cmp-hit { fill: transparent; }
#exe_studio .cmp-svg .cmp-sel { cursor: pointer; }
#exe_studio .cmp-svg .cmp-fil:hover .cmp-hit { fill: rgba(122, 74, 33, .06); }
#exe_studio .cmp-svg .cmp-sel.on .cmp-hit { fill: rgba(255, 191, 64, .18); }
#exe_studio .cmp-svg .cmp-arc:hover path:first-child, #exe_studio .cmp-svg .cmp-arc.on path:first-child { stroke-width: 3.4; stroke-opacity: 1; }
/* Un choix fait pâlir le reste de la partition. */
#exe_studio .cmp-vue.choix .cmp-svg .cmp-sel:not(.on) { opacity: .32; transition: opacity .2s; }
#exe_studio .cmp-svg .cmp-sel:focus-visible { outline: 2px solid var(--exs-accent); }

#exe_studio .cmp-legende { margin: 6px 0 2px; }
#exe_studio .cmp-legende .cmp-leg-rupt { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #8a2616; border-radius: 0; background: none; }
#exe_studio .cmp-legende .cmp-leg-ici { background: var(--exs-gold-wash); border: 1px solid #e8c46a; }

/* ---------- vue complète ---------- */
#exe_studio .cmp-vue { display: flex; flex-direction: column; gap: 14px; font: 400 14px/1.45 var(--exs-ui); }
#exe_studio .cmp-l { font-weight: 600; }
#exe_studio .cmp-l.exs-heb { font-size: 1.15em; }
#exe_studio .cmp-constats { display: flex; flex-direction: column; gap: 6px; }
#exe_studio .cmp-c { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 11px; border: 1px solid var(--exs-line); border-radius: 9px; background: #fff; }
#exe_studio .cmp-c .exs-st { margin-top: 2px; }
#exe_studio .cmp-garder { border: 1px solid var(--exs-line); background: var(--exs-canvas); border-radius: 12px; padding: 1px 10px; font-size: 12px; color: var(--exs-ink-soft); white-space: nowrap; }
#exe_studio .cmp-garder:hover:not([disabled]) { border-color: var(--exs-accent); color: var(--exs-accent); }
#exe_studio .cmp-garder[disabled] { background: var(--exs-gold-wash); border-color: var(--exs-gold); color: var(--exs-accent-dark); cursor: default; }
#exe_studio .cmp-partition { padding: 10px 8px 4px; border: 1px solid var(--exs-line); border-radius: 10px; background: #fff; overflow-x: auto; }
#exe_studio .cmp-partition .cmp-svg { min-width: 640px; }

#exe_studio .cmp-detail { padding: 12px 14px; border: 1px solid var(--exs-line); border-left: 3px solid var(--exs-gold); border-radius: 0 10px 10px 0; background: var(--exs-soft); }
#exe_studio .cmp-invite { margin: 0; color: var(--exs-muted); font-style: italic; }
#exe_studio .cmp-det-t { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
#exe_studio .cmp-det-t b { font: 700 18px var(--exs-serif); }
#exe_studio .cmp-det-t b.exs-heb { font: 400 22px var(--exs-heb); }
#exe_studio .cmp-pastille { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
#exe_studio .cmp-det-s { font-size: 13px; color: var(--exs-muted); margin-top: 3px; }
#exe_studio .cmp-det-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 9px 0 6px; }
#exe_studio .cmp-kwic { display: flex; flex-direction: column; }
#exe_studio .cmp-kwic-l { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--exs-line-soft); }
#exe_studio .cmp-kwic-l.ici { background: #fff7e3; }
#exe_studio .cmp-verset.exs-grk { font: 400 16px/1.55 var(--exs-serif); }
#exe_studio .cmp-verset.exs-heb { font: 400 19px/1.7 var(--exs-heb); text-align: right; }
#exe_studio .cmp-cible { color: var(--exs-accent-dark); background: var(--exs-gold-wash); border-radius: 3px; padding: 0 2px; }

#exe_studio .cmp-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
#exe_studio .cmp-bloc { padding: 10px 12px; border: 1px solid var(--exs-line); border-radius: 10px; background: #fff; min-width: 0; }
#exe_studio .cmp-bloc-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
#exe_studio .cmp-u { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 8px; padding: 5px 0; border-top: 1px solid var(--exs-line-soft); }
#exe_studio .cmp-u.on { background: #fff7e3; }
#exe_studio .cmp-incipit.exs-grk { font: 400 14.5px var(--exs-serif); color: var(--exs-ink-soft); }
#exe_studio .cmp-incipit.exs-heb { font: 400 17px var(--exs-heb); text-align: right; color: var(--exs-ink-soft); }
#exe_studio .cmp-u-r { grid-column: 2; font-size: 11.5px; color: #8a2616; }
#exe_studio .cmp-ligne { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 5px 6px; border: 0; border-top: 1px solid var(--exs-line-soft); background: none; border-radius: 0; }
#exe_studio .cmp-ligne:hover, #exe_studio .cmp-ligne.on { background: var(--exs-gold-wash); }
#exe_studio .cmp-ligne .exs-grk { font: 400 15px var(--exs-serif); }
#exe_studio .cmp-ligne .exs-heb { font: 400 17px var(--exs-heb); }
#exe_studio .cmp-ligne small { font-size: 11.5px; color: var(--exs-muted); }
#exe_studio .cmp-ligne-s { padding: 4px 0; border-top: 1px solid var(--exs-line-soft); font-size: 13.5px; }
#exe_studio .cmp-garde { margin: 0; font: italic 400 13px/1.45 var(--exs-serif); color: var(--exs-muted); }
#exe_studio .cmp-detail .cmp-garde { margin: 6px 0; padding: 6px 9px; border-left: 2px solid #7a3e9d; background: #f6f0f8; font-style: normal; color: #4a2a5a; }

@media (prefers-reduced-motion: reduce) {
    #exe_studio .cmp-vue.choix .cmp-svg .cmp-sel:not(.on) { transition: none; }
}
@media (max-width: 640px) {
    #exe_studio .cmp-c { grid-template-columns: minmax(0, 1fr) auto; }
    #exe_studio .cmp-c .exs-st { grid-column: 1 / -1; justify-self: start; }
    #exe_studio .cmp-kwic-l { grid-template-columns: 1fr; gap: 0; }
    #exe_studio .cmp-sections { grid-template-columns: 1fr; }
}