/* ==========================================================================
   Mon SERVER > Mes modèles (odesa-modeles.js, editeur-modele.js ; PLAN_DOCUMENTS.md).
   La page ne défile pas : l'arbre, la liste des variables et la page A4 défilent en eux-mêmes.
   ========================================================================== */

.mo { --mo-mauve: #7c3aed; --mo-gris: #f1f3f8; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0;
      height: clamp(460px, calc(100vh - 400px), 1200px); min-height: 0; border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; background: var(--carte); }
@media (min-width: 1000px) and (min-height: 620px) {
  .mp.cadre .mp-ix > .mo { flex: 1 1 0; height: auto; }
}
.mo .ms { flex: none; }
.mo-ico { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--doux); cursor: pointer; }
.mo-ico:hover { background: var(--neutre); color: var(--texte); }
.mo-ico--cadre { width: 38px; height: 38px; border: 1px solid var(--bord); background: var(--carte); border-radius: 10px; }

/* ---------------------------------------------------------------- à gauche */
.mo-cote { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--bord); background: var(--carte); }
.mo-onglets { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 12px; padding: 4px; border-radius: 12px; background: var(--neutre); }
.mo-onglets button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--doux); font-size: 0.8125rem; font-weight: 600; }
.mo-onglets button.is-actif { background: var(--carte); border-color: var(--texte); color: var(--texte); }
.mo-onglets i { font-style: normal; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--pastille); color: var(--pastille-texte); font-size: 0.6875rem; }
.mo-cote-corps { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 0 12px 12px; overflow: hidden; }
.mo-cote-corps > * { flex: none; }
.mo-cote-actes { display: flex; gap: 6px; margin-bottom: 10px; }
.mo-cote-actes:has(.mo-nouveau + .mo-nouveau) { flex-direction: column; }
.mo-nouveau { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 10px; border: 1px dashed var(--champ-bord); border-radius: 10px; background: transparent; color: var(--doux); font-size: 0.875rem; font-weight: 600; }
.mo-nouveau:hover { border-color: var(--vert); color: var(--vert-fonce); background: var(--neutre); }
.mo-nouveau--magie { border-style: solid; border-color: color-mix(in srgb, var(--mo-mauve) 45%, transparent); color: var(--mo-mauve); }
.mo-nouveau--magie:hover { border-color: var(--mo-mauve); color: var(--mo-mauve); background: color-mix(in srgb, var(--mo-mauve) 8%, transparent); }
.mo-cote-note { margin: 8px 4px; color: var(--doux); font-size: 0.8125rem; line-height: 1.5; }
.mo-cote-vide { padding: 18px 6px; display: grid; gap: 10px; justify-items: start; }

.mo-arbre { flex: 1 1 0 !important; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 2px; }
.mo-noeud { position: relative; display: flex; align-items: center; border-radius: 9px; border-left: 3px solid transparent; }
.mo-noeud:hover { background: var(--neutre); }
.mo-noeud.is-sel { background: color-mix(in srgb, var(--mo-mauve) 9%, var(--carte)); border-left-color: var(--mo-mauve); }
.mo-noeud.is-sel .mo-noeud-lib { color: var(--mo-mauve); }
.mo-noeud.is-tire { opacity: 0.45; }
.mo-noeud.is-cible { box-shadow: inset 0 2px 0 var(--mo-mauve); }
.mo-noeud.is-dedans { outline: 2px dashed var(--mo-mauve); outline-offset: -2px; }
.mo-noeud-lib { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 8px 6px 8px calc(8px + var(--prof, 0) * 16px); border: 0; background: transparent; color: var(--texte); font-size: 0.875rem; font-weight: 600; text-align: left; text-transform: none; }
.mo-noeud-lib > span:not(.ms) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-noeud--dossier .mo-noeud-lib { font-weight: 700; }
.mo-noeud-var { font-style: normal; color: var(--mo-mauve); display: inline-flex; }
.mo-noeud-actes { display: flex; opacity: 0; transition: opacity .12s; padding-right: 2px; }
.mo-noeud:hover .mo-noeud-actes, .mo-noeud.is-sel .mo-noeud-actes, .mo-noeud:focus-within .mo-noeud-actes { opacity: 1; }
.mo-noeud-vide { margin: 2px 0 6px; padding-left: calc(40px + var(--prof, 0) * 16px); color: var(--doux); font-size: 0.8125rem; font-style: italic; }
.mo-menu { position: absolute; z-index: 20; top: calc(100% - 2px); right: 4px; min-width: 200px; padding: 6px; display: grid; gap: 2px; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); box-shadow: 0 14px 34px rgba(20, 33, 15, 0.16); }
.mo-menu[hidden] { display: none; }
.mo-menu button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--texte); font-size: 0.875rem; text-align: left; }
.mo-menu button:hover { background: var(--neutre); }
.mo-menu .is-danger { color: var(--rouge); }
.mo-menu--danger { width: 260px; padding: 12px; gap: 10px; }
.mo-menu--danger p { margin: 0; font-size: 0.8125rem; line-height: 1.45; }
.mo-menu--danger div { display: flex; justify-content: flex-end; gap: 6px; }
.mo-menu--danger .btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; min-height: 0; font-size: 0.8125rem; }

/* Les variables : une puce colorée par source (donnée, saisie, ODESA), son type. */
.mo-source { display: flex; align-items: center; gap: 6px; margin: 0 2px 10px; color: var(--doux); font-size: 0.8125rem; }
.mo-vars { flex: 0 1 auto !important; min-height: 0; overflow-y: auto; scrollbar-width: thin; border-top: 1px solid var(--bord); }
.mo-vars-tete, .mo-var { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--bord); }
.mo-vars-tete { position: sticky; top: 0; z-index: 1; background: var(--carte); color: var(--doux); font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mo-var { cursor: grab; }
.mo-var:hover { background: var(--neutre); }
.mo-var > .mo-puce { justify-self: start; max-width: 100%; cursor: pointer; }
.mo-var-type { color: var(--doux); font-size: 0.8125rem; white-space: nowrap; }
.mo-var-actes { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--carte); box-shadow: 0 2px 8px rgba(20, 33, 15, 0.12); opacity: 0; pointer-events: none; }
.mo-var:hover .mo-var-actes, .mo-var:focus-within .mo-var-actes { opacity: 1; pointer-events: auto; }

.mo-puce { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 8px; border: 0; border-radius: 7px; font: inherit; font-size: 0.92em; line-height: 1.6; vertical-align: baseline; white-space: nowrap;
           background: var(--mo-pf); color: var(--mo-pc); }
.mo-puce > span:not(.ms) { overflow: hidden; text-overflow: ellipsis; }
.mo-puce .ms { font-size: 1em; }
.mo-puce--vert { --mo-pf: #dcf5e7; --mo-pc: #1b8a52; }
.mo-puce--mauve { --mo-pf: #efe5fd; --mo-pc: #7c3aed; }
.mo-puce--bleu { --mo-pf: #e0ecfe; --mo-pc: #1d4ed8; }
.mo-puce--orange { --mo-pf: #ffedd5; --mo-pc: #c2410c; }
.mo-puce--ambre { --mo-pf: #fef3c7; --mo-pc: #a16207; }
.mo-puce--rouge { --mo-pf: #fee2e2; --mo-pc: #b91c1c; }

/* ----------------------------------------------------------------- au centre */
.mo-centre { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--mo-gris); }
.mo-centre > * { flex: none; }
.mo-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--carte); border-bottom: 1px solid var(--bord); }
.mo-fil { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 4px; color: var(--doux); font-size: 0.9375rem; overflow: hidden; white-space: nowrap; }
.mo-fil b { color: var(--texte); overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .02em; }
.mo-enreg { display: inline-flex; align-items: center; gap: 4px; color: var(--doux); font-size: 0.75rem; white-space: nowrap; }
.mo-enreg[data-etat="ok"] { color: var(--vert-fonce); }
.mo-enreg[data-etat="ko"] { color: var(--rouge); }
.mo-enreg[data-etat="attente"] .ms { animation: mo-tourne 1s linear infinite; }
@keyframes mo-tourne { to { transform: rotate(360deg); } }
.mo-tete-actes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mo-generer { display: inline-flex; align-items: center; gap: 6px; }
.mo-bascule { display: inline-flex; padding: 3px; border: 1px solid var(--bord); border-radius: 11px; background: var(--neutre); }
.mo-bascule button { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--doux); font-size: 0.8125rem; font-weight: 600; }
.mo-bascule button.is-actif { background: var(--carte); color: var(--texte); box-shadow: 0 1px 3px rgba(20, 33, 15, 0.12); }
.mo-avis { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px; background: #eef2ff; color: #3730a3; font-size: 0.8125rem; }
.mo-avis--ko { background: #fdecea; color: #b42318; }
.mo-avis--demo { background: #fff7ed; color: #9a3412; }
.mo-avis .btn { padding: 4px 10px; min-height: 0; font-size: 0.8125rem; }
.mo-vide { flex: 1 1 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--doux); }
.mo-vide h2 { margin: 0; color: var(--texte); font-size: 1.125rem; }
.mo-vide p { max-width: 460px; margin: 0; }
.mo-vide .btn { display: inline-flex; align-items: center; gap: 6px; }

/* L'éditeur : la barre d'outils, puis la page A4 qui défile. */
.mo-ed-place, .mo-ed-hote { flex: 1 1 0 !important; min-height: 0; display: flex; flex-direction: column; }
.mo-ed { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.mo-ed-barre { flex: none; background: var(--carte); border-bottom: 1px solid var(--bord); }
.mo-barre { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; padding: 5px 10px; }
.mo-barre-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--bord); }
.mo-bt { height: 32px; min-width: 31px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: #334155; }
.mo-bt:hover { background: var(--neutre); }
.mo-bt.is-actif { background: #e0e7ff; color: #3730a3; }
.mo-bt:disabled { opacity: .4; cursor: default; }
.mo-bt--style { min-width: 100px; justify-content: space-between; padding: 0 8px; font-size: 0.875rem; }
.mo-bt--var { color: var(--mo-mauve); }
.mo-dd { position: relative; }
.mo-dd .mo-menu { left: 0; right: auto; top: calc(100% + 4px); }
.mo-menu-l { font-size: 0.875rem; }
.mo-menu-l--t1 { font-size: 1.25rem !important; font-weight: 800; }
.mo-menu-l--t2 { font-size: 1.0625rem !important; font-weight: 700; }
.mo-menu-l--t3 { font-weight: 700; }
.mo-menu-l--citation { font-style: italic; }
.mo-pastille { width: 20px; height: 20px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.15); }
.mo-menu--couleurs { grid-template-columns: repeat(6, 26px); gap: 6px; min-width: 0; padding: 10px; }
.mo-teinte { width: 26px; height: 26px; padding: 0 !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 7px !important; }
.mo-teinte-aucune { grid-column: 1 / -1; justify-content: center; font-size: 0.8125rem !important; }
.mo-barre-tab { display: none; align-items: center; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--bord); }
.mo-barre-tab.is-visible { display: inline-flex; }

.mo-ed-defile { flex: 1 1 0; min-height: 0; overflow: auto; padding: 28px 16px 48px; }
.mo-ed-page { width: 794px; max-width: none; margin: 0 auto; }
.mo-ed-page .ProseMirror { outline: none; background: #fff; color: #111827; font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 15px; line-height: 1.6;
                           box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12); }
.mo-ed-page.is-cible .ProseMirror { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mo-mauve) 45%, transparent), 0 2px 10px rgba(15, 23, 42, 0.12); }
.mo-ed-page .ProseMirror p { margin: 0 0 0.7em; }
.mo-ed-page .ProseMirror h1 { margin: 0.6em 0 0.4em; font-size: 2em; line-height: 1.2; font-weight: 800; }
.mo-ed-page .ProseMirror h2 { margin: 0.8em 0 0.4em; font-size: 1.45em; line-height: 1.25; font-weight: 700; }
.mo-ed-page .ProseMirror h3 { margin: 0.8em 0 0.3em; font-size: 1.15em; font-weight: 700; }
.mo-ed-page .ProseMirror blockquote { margin: 0.8em 0; padding-left: 14px; border-left: 3px solid #cbd5e1; color: #475569; }
.mo-ed-page .ProseMirror code { padding: 1px 4px; border-radius: 4px; background: #f1f5f9; font-size: 0.9em; }
.mo-ed-page .ProseMirror a { color: #2563eb; }
.mo-ed-page .ProseMirror hr { border: 0; border-top: 1px solid #cbd5e1; margin: 1.2em 0; }
.mo-ed-page .ProseMirror ul, .mo-ed-page .ProseMirror ol { padding-left: 1.5em; margin: 0 0 0.7em; }
.mo-ed-page .ProseMirror ul[data-type="taskList"] { list-style: none; padding-left: 0.2em; }
.mo-ed-page .ProseMirror ul[data-type="taskList"] li { display: flex; gap: 8px; align-items: flex-start; }
.mo-ed-page .ProseMirror ul[data-type="taskList"] li > label { margin-top: 3px; }
.mo-ed-page .ProseMirror table { width: 100%; border-collapse: collapse; margin: 0.6em 0 1em; table-layout: fixed; }
.mo-ed-page .ProseMirror th, .mo-ed-page .ProseMirror td { position: relative; border: 1px solid #cbd5e1; padding: 6px 8px; vertical-align: top; }
.mo-ed-page .ProseMirror th { background: #f8fafc; font-weight: 700; text-align: left; }
.mo-ed-page .ProseMirror .selectedCell::after { content: ""; position: absolute; inset: 0; background: rgba(124, 58, 237, 0.12); pointer-events: none; }
.mo-ed-page .ProseMirror .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: 0; width: 4px; background: var(--mo-mauve); pointer-events: none; }
.mo-ed-page .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: #94a3b8; pointer-events: none; }
.mo-ed-page .ProseMirror .ProseMirror-selectednode.mo-puce { outline: 2px solid var(--mo-pc); outline-offset: 1px; }
.mo-ed-page .ProseMirror mark { border-radius: 2px; padding: 0 1px; }
/* Pagination (tiptap-pagination-plus) : le gris entre deux pages, le pied « Page n ». */
.mo-ed-page .rm-page-break .breaker { background: var(--mo-gris) !important; }
.mo-ed-page .rm-page-footer, .mo-ed-page .rm-page-header { color: #94a3b8; font-size: 12px; }

.mo-liste { margin: 0.6em 0 1em; border: 1px dashed #fdba74; border-radius: 10px; padding: 8px; background: #fff7ed; }
.mo-liste-tete { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: #c2410c; font-size: 13px; font-weight: 600; }
.mo-liste-tete .ms { font-size: 16px; }
.mo-liste table { margin: 0 !important; background: #fff; }
.mo-liste td { color: #94a3b8; }
.mo-liste.ProseMirror-selectednode { outline: 2px solid #c2410c; }
.mo-saut { position: relative; margin: 1em 0; height: 14px; border-top: 2px dashed #cbd5e1; text-align: center; }
.mo-saut span { position: relative; top: -11px; padding: 0 8px; background: #fff; color: #94a3b8; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.mo-saut.ProseMirror-selectednode { border-top-color: var(--mo-mauve); }

.mo-img { position: relative; margin: 0.8em 0; display: flex; justify-content: center; }
.mo-img[data-align="gauche"] { justify-content: flex-start; }
.mo-img[data-align="droite"] { justify-content: flex-end; }
.mo-img-cadre { position: relative; max-width: 100%; }
.mo-img img { display: block; max-width: 100%; height: auto; }
.mo-img-poignee { position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px; border-radius: 3px; background: var(--mo-mauve); cursor: nwse-resize; opacity: 0; }
.mo-img-barre { position: absolute; z-index: 2; top: -40px; left: 50%; transform: translateX(-50%); display: none; gap: 2px; padding: 4px; border-radius: 10px; background: #1e293b; }
.mo-img-barre button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: #fff; }
.mo-img-barre button:hover { background: rgba(255, 255, 255, 0.16); }
.mo-img.ProseMirror-selectednode .mo-img-barre { display: flex; }
.mo-img.ProseMirror-selectednode .mo-img-poignee { opacity: 1; }
.mo-img.ProseMirror-selectednode .mo-img-cadre { outline: 2px solid var(--mo-mauve); }

.mo-ed-msg { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; padding: 9px 14px; border-radius: 10px; background: #1e293b; color: #fff; font-size: 0.8125rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.mo-ed-msg.is-attente::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: mo-tourne .8s linear infinite; vertical-align: -1px; }

/* L'aperçu PDF rendu par ODESA. */
.mo-pdf { flex: 1 1 0 !important; min-height: 0; display: flex; flex-direction: column; }
.mo-pdf > * { flex: none; }
.mo-pdf-barre { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 16px; background: var(--carte); border-bottom: 1px solid var(--bord); font-size: 0.8125rem; }
.mo-pdf-ligne select { height: 32px; margin-left: 4px; padding: 0 8px; border: 1px solid var(--champ-bord); border-radius: 8px; background: var(--champ); }
.mo-pdf-note { display: inline-flex; align-items: center; gap: 4px; color: var(--vert-fonce); }
.mo-pdf-cadre { flex: 1 1 0 !important; min-height: 0; width: 100%; border: 0; background: #525659; }
.mo-pdf > .attente, .mo-pdf > .mo-vide { flex: 1 1 0; }

/* ------------------------------------------------------------- les fenêtres */
.mo-fond { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(16, 24, 40, 0.48); }
.mo-fen { width: min(560px, 100%); max-height: min(86vh, 860px); display: flex; flex-direction: column; border-radius: 18px; background: var(--carte); box-shadow: 0 30px 80px rgba(15, 23, 42, 0.3); overflow: hidden; }
.mo-fen--large { width: min(860px, 100%); }
.mo-fen-tete { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--bord); }
.mo-fen-tete > .ms { color: var(--mo-mauve); }
.mo-fen-tete strong { flex: 1; min-width: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-fen-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.mo-fen-corps > * { flex: none; }
.mo-fen-pied { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--bord); }
.mo-fen-pied .btn, .mo-fen-corps .btn { display: inline-flex; align-items: center; gap: 6px; }
.mo-msg { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 0.875rem; }
.mo-msg--ko { background: #fdecea; color: #b42318; }
.mo-msg--ok { background: #e7f6ec; color: #166534; }
.mo-msg--avis { background: #fff7ed; color: #9a3412; }
.mo-note { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--doux); font-size: 0.8125rem; line-height: 1.45; }
.mo-etape { margin: 4px 0 0; color: var(--doux); font-size: 0.75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.mo-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mo-champ { display: flex; flex-direction: column; gap: 5px; font-size: 0.8125rem; font-weight: 600; color: var(--doux); }
.mo-champ--large { grid-column: 1 / -1; }
.mo-champ input, .mo-champ select { height: 40px; padding: 0 10px; border: 1px solid var(--champ-bord); border-radius: 10px; background: var(--champ); color: var(--texte); font-weight: 400; font-size: 0.9375rem; }
.mo-champ small { font-weight: 400; }
.mo-cherche { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--champ-bord); border-radius: 10px; background: var(--champ); color: var(--doux); }
.mo-cherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--texte); }
.mo-choix { display: flex; flex-direction: column; gap: 6px; }
.mo-choix-l { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); text-align: left; }
.mo-choix-l:hover { border-color: var(--mo-mauve); }
.mo-choix-l small { color: var(--doux); font-size: 0.75rem; text-align: right; }
.mo-tables { display: flex; flex-direction: column; gap: 8px; }
.mo-table { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); text-align: left; color: #4f6bd5; }
.mo-table:hover { border-color: #4f6bd5; background: #f8faff; }
.mo-table > span { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--texte); }
.mo-table small { color: var(--doux); font-size: 0.75rem; }
.mo-etape-barre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mo-etape-barre b { flex: 1; min-width: 160px; }
.mo-gen-liste { display: flex; flex-direction: column; border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; }
.mo-gen-l { display: grid; grid-template-columns: 20px minmax(0, 1fr) 110px 120px; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--bord); }
.mo-gen-l.is-coche { background: color-mix(in srgb, var(--mo-mauve) 6%, var(--carte)); }
.mo-gen-l input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--mo-mauve); }
.mo-gen-nom { height: 32px; padding: 0 8px; border: 1px solid var(--champ-bord); border-radius: 8px; background: var(--champ); }
.mo-gen-l code { color: var(--doux); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; }
.mo-gen-deja { display: inline-flex; align-items: center; gap: 3px; color: var(--vert-fonce); font-size: 0.75rem; white-space: nowrap; }
.mo-gen-lien { border-bottom: 1px solid var(--bord); }
.mo-gen-deplier { display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 12px; border: 0; background: var(--neutre); text-align: left; }
.mo-gen-deplier small { color: var(--doux); }
.mo-gen-sous { padding-left: 22px; }
.mo-coches, .mo-go-lignes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mo-go-lignes { max-height: 260px; overflow-y: auto; padding: 2px; }
.mo-coche, .mo-radio { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--bord); border-radius: 10px; font-size: 0.875rem; font-weight: 500; color: var(--texte); cursor: pointer; }
.mo-coche input, .mo-radio input { accent-color: var(--mo-mauve); width: 16px; height: 16px; flex: none; }
.mo-coche small { margin-left: 6px; color: var(--doux); font-size: 0.75rem; }
.mo-radios { display: flex; gap: 8px; flex-wrap: wrap; }
.mo-go-n { margin: 0; color: var(--doux); font-size: 0.8125rem; }
.mo-genere { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 12px; }
.mo-genere > .ms { color: var(--mo-mauve); }
.mo-genere > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mo-genere small { color: var(--doux); font-size: 0.75rem; }

@media (max-width: 999px) {
  .mo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: auto; min-height: 640px; }
  .mo-cote { border-right: 0; border-bottom: 1px solid var(--bord); max-height: 320px; }
  .mo-centre { min-height: 560px; }
  .mo-ed-page { transform-origin: top left; }
  .mo-grille, .mo-coches, .mo-go-lignes { grid-template-columns: minmax(0, 1fr); }
  .mo-gen-l { grid-template-columns: 20px minmax(0, 1fr) 70px; }
  .mo-gen-l code { display: none; }
}
:root[data-theme="sombre"] .mo { --mo-gris: #0b1810; }