/* DER personnalisable (classeur cabinet, onglet DER) : feuilles A4 à l'échelle du PDF (96 dpi : 794 x 1123 px, marges du générateur
   15 / 20 / 15 / 25 mm), mêmes polices que mPDF (servies par /cabinet/der/police). Rendu par der-editor.js. */
@font-face { font-family: 'DerSans'; src: url('../../cabinet/der/police/sans') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'DerSans'; src: url('../../cabinet/der/police/sans-b') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'DerSans'; src: url('../../cabinet/der/police/sans-i') format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'DerSans'; src: url('../../cabinet/der/police/sans-bi') format('truetype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'DerCond'; src: url('../../cabinet/der/police/cond') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'DerCond'; src: url('../../cabinet/der/police/cond-b') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'DerCond'; src: url('../../cabinet/der/police/cond-i') format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'DerCond'; src: url('../../cabinet/der/police/cond-bi') format('truetype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'DerSerif'; src: url('../../cabinet/der/police/serif') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'DerSerif'; src: url('../../cabinet/der/police/serif-b') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'DerSerif'; src: url('../../cabinet/der/police/serif-i') format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'DerSerif'; src: url('../../cabinet/der/police/serif-bi') format('truetype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'DerInter'; src: url('../../cabinet/der/police/inter') format('truetype'); font-weight: 400; }
@font-face { font-family: 'DerInter'; src: url('../../cabinet/der/police/inter-b') format('truetype'); font-weight: 700; }
@font-face { font-family: 'DerPjs'; src: url('../../cabinet/der/police/pjs') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'DerPjs'; src: url('../../cabinet/der/police/pjs-b') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'DerPjs'; src: url('../../cabinet/der/police/pjs-i') format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'DerPjs'; src: url('../../cabinet/der/police/pjs-bi') format('truetype'); font-weight: 700; font-style: italic; }

.der-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.der-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.der-font { display: inline-flex; align-items: center; gap: 6px; } .der-font select { min-width: 210px; }
.der-help { margin: 10px 0 0; }
.der-stage { margin-top: 8px; padding: 18px 20px 8px; background: var(--surface-2, #f1f1ee); border-radius: var(--r-lg); display: grid; justify-items: center; gap: 22px; overflow-x: auto; }
.der-pagewrap { position: relative; }

/* La feuille : dimensions et typographie du PDF */
.der-sheet { --der-font: 'DerSans'; position: relative; width: 794px; height: 1123px; background: #fff; color: #000; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .08); transform-origin: top left; font-family: var(--der-font), sans-serif; font-size: 12px; line-height: 1.2; }
.der-area { position: absolute; top: 75.6px; left: 56.7px; right: 56.7px; height: 952.4px; overflow: visible; }
.der-area.is-over { box-shadow: inset 0 -3px 0 var(--danger); }
.der-foot { position: absolute; left: 56.7px; right: 56.7px; bottom: 30px; font-size: 7px; text-align: center; color: #000; line-height: 1.25; }
.der-sheet h2 { font-family: inherit; font-size: 18px; font-weight: 400; color: #565555; text-align: center; text-transform: uppercase; margin: 8px 0 4px; letter-spacing: 0; }
.der-sheet .der-sub { color: #565555; text-align: center; text-transform: uppercase; margin: 0 0 6px; }
.der-sheet h3 { font-family: inherit; font-size: 14px; font-weight: 400; text-transform: uppercase; text-decoration: underline; padding-top: 10px; margin: 14px 0 7px; letter-spacing: 0; color: #000; }
.der-sheet h5 { font-family: inherit; font-size: 10px; font-weight: 700; text-transform: uppercase; margin: 8px 0; }
.der-logo { text-align: center; } .der-logo img { width: 30%; } .der-logo .der-ph { display: inline-block; width: 30%; padding: 16px 0; border: 1px dashed #bbb; color: #999; font-size: 11px; }
.der-text { text-align: justify; margin: 0 0 1.12em; outline: none; border-radius: 2px; white-space: normal; }
.der-sec { position: relative; }
.der-sec.is-custom h3::before { content: ''; position: absolute; left: -16px; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #2563eb); }
.der-logos { line-height: 0; padding: 6px 0 2px; } .der-logos img { width: 20%; vertical-align: middle; margin: 0 0 12px; }
.der-logos-empty { font-size: 9px; color: #999; padding: 10px 0; }
.der-mention { font-style: italic; font-size: 8px; }
.der-fixed { color: #888; font-size: 9px; border: 1px dashed #ccc; border-radius: 3px; padding: 8px; text-align: center; }
.der-sign { display: flex; justify-content: space-between; padding: 0 5%; } .der-sign > div { width: 44%; } .der-sign .box { height: 100px; border: 1px solid #000; margin-top: 4px; }


/* Choix des logos du DER */
.der-logopick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.der-logopick label { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; font-size: 12px; }
.der-logopick label.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft, rgba(37, 99, 235, .15)); }
.der-logopick label.is-off { opacity: .45; cursor: not-allowed; } .der-logopick input { position: absolute; opacity: 0; pointer-events: none; }
.der-logopick .pt-logo { aspect-ratio: 5 / 3; }
.der-logo-btn { position: absolute; right: 0; top: 10px; font: 12px var(--font-body, system-ui, sans-serif); }

/* Pages : rubriques cliquables (la fenêtre d'édition s'ouvre), badge au survol, mentions manquantes signalées */
.der-card[data-manage="1"] .der-sec.is-edit, .der-card[data-manage="1"] .der-sec.is-logos { cursor: pointer; border-radius: 3px; outline: 1px solid transparent; outline-offset: 3px; transition: outline-color .12s, background .12s; }
.der-card[data-manage="1"] .der-sec.is-edit:hover, .der-card[data-manage="1"] .der-sec.is-logos:hover, .der-sec[tabindex]:focus-visible { outline: 2px solid var(--accent, #2563eb); background: rgba(37, 99, 235, .035); }
.der-sec.has-miss { outline: 2px dashed var(--danger) !important; }
.der-badge { position: absolute; right: 0; top: 8px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: var(--accent, #2563eb); color: #fff; font: 600 11px var(--font-body, system-ui, sans-serif); opacity: 0; transition: opacity .12s; pointer-events: none; }
.der-sec:hover .der-badge, .der-sec:focus-visible .der-badge, .der-sec.has-miss .der-badge { opacity: 1; } .der-sec.has-miss .der-badge { background: var(--danger); }
.der-hole { background: rgba(194, 124, 14, .18); color: #8a5a00; border-radius: 2px; padding: 0 2px; }
.der-zoom { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 12px; } .der-zoom .mono { min-width: 46px; text-align: center; }

/* Ce qu'il manque pour atteindre 100 % */
.der-todo { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--warn, #c27c0e); border-radius: var(--r-lg); background: var(--surface); }
.der-todo.is-done { border-left-color: var(--ok, #2f855a); }
.der-todo-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .der-todo-head .bar { width: 160px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.der-todo-head .bar i { display: block; height: 100%; background: var(--warn, #c27c0e); } .der-todo.is-done .der-todo-head .bar i { background: var(--ok, #2f855a); }
.der-todo ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.der-todo li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.der-todo li::before { content: '○'; color: var(--warn, #c27c0e); margin-right: -2px; } .der-todo li > span { flex: 1; }

/* Fenêtre d'édition d'une rubrique */
.der-modal { width: min(1120px, calc(100vw - 24px)); }
.der-ed { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; min-height: 0; }
.der-ed-main { padding: 14px 20px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.der-ed-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2, #f6f6f4); }
.der-ed-tools > * { flex: none; } .der-ed-tools .grow { flex: 1; }
.der-ed-tools button { height: 30px; min-width: 30px; padding: 0 9px; border: 0; border-radius: 7px; background: none; color: var(--fg); font: inherit; cursor: pointer; } .der-ed-tools button:hover { background: var(--surface); }
.der-ed-tools label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-2); padding: 0 6px; } .der-ed-tools select { width: auto; height: 30px; padding: 0 6px; }
.der-ed-tools .sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.der-ed-area { min-height: 300px; max-height: min(52vh, 52dvh); overflow: auto; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #111; font: 15px/1.65 var(--font-body, system-ui, sans-serif); outline: none; }
.der-ed-area:focus { border-color: var(--accent, #2563eb); box-shadow: 0 0 0 3px var(--accent-soft, rgba(37, 99, 235, .15)); }
.der-ed-hint { margin: 0; }
.der-chip { display: inline; padding: 1px 6px; margin: 0 1px; border-radius: 5px; white-space: normal; font-size: .92em; cursor: default; }
.der-chip.is-var { background: rgba(37, 99, 235, .12); color: #1e40af; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .25); }
.der-chip.is-var.is-empty { background: rgba(194, 124, 14, .15); color: #8a5a00; box-shadow: inset 0 0 0 1px rgba(194, 124, 14, .35); }
.der-chip.is-mention { background: rgba(47, 133, 90, .12); color: #1f6b46; box-shadow: inset 0 0 0 1px rgba(47, 133, 90, .3); }
.der-ed-side { padding: 14px 16px; border-left: 1px solid var(--line); background: var(--surface-2, #f6f6f4); max-height: min(68vh, 68dvh); overflow: auto; }
.der-ed-side h4 { margin: 2px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); } .der-ed-side h4 + ul + h4 { margin-top: 16px; }
.der-ed-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.der-ins { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--fg); font: inherit; cursor: grab; }
.der-ins:hover { border-color: var(--accent, #2563eb); } .der-ins:active { cursor: grabbing; }
.der-ins .st { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface-2, #eee); color: var(--fg-3); }
.der-ins.is-ok .st { background: var(--ok, #2f855a); color: #fff; } .der-ins.is-miss { border-color: var(--danger); } .der-ins.is-miss .st { background: var(--danger); color: #fff; }
.der-ins .lb { display: grid; gap: 1px; min-width: 0; font-size: 13px; } .der-ins small { color: var(--fg-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.der-ins.is-mention .lb > span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2f855a; margin-right: 6px; vertical-align: 1px; }
.der-ins.is-var .lb > span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2563eb; margin-right: 6px; vertical-align: 1px; }
.der-ed-status { font-size: 13px; } .der-modal .modal-actions .grow { flex: 1; }
@media (max-width: 820px) { .der-ed { grid-template-columns: 1fr; } .der-ed-side { border-left: 0; border-top: 1px solid var(--line); max-height: 38vh; } }