/* ==========================================================================
   Atelier PCi — couche 3 : écrans
   Concept : un poste de travail en trois zones fixes (plan · éditeur · panneau),
   sur papier bleuté ; l'éditeur est une feuille blanche, le reste s'efface.
   ========================================================================== */
body { padding-left: max(0px, env(safe-area-inset-left, 0px)); padding-right: max(0px, env(safe-area-inset-right, 0px)); min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--surface); }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.offline { margin: 12px auto 0; max-width: 1200px; padding: 10px 14px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font-size: 13px; }

/* ---------------- accueil ---------------- */
.home { max-width: 1200px; margin: 0 auto; padding-block: var(--s-7) var(--s-8); display: flex; flex-direction: column; gap: var(--s-6); }
.home-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: end; padding: var(--s-6); border-radius: var(--r-lg); background: radial-gradient(120% 140% at 100% 0%, var(--glow), transparent 60%), var(--surface); border: 1px solid var(--line-soft); overflow: hidden; }
.home-hero .eyebrow { margin-bottom: var(--s-3); }
.home-hero p.lead { margin-top: var(--s-3); max-width: 56ch; color: var(--ink-2); font-size: var(--fs-16); line-height: var(--lh-body); }
.hero-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .home-hero { grid-template-columns: 1fr; padding: var(--s-5); } .hero-actions { justify-content: flex-start; } .home-hero .t-display { font-size: var(--fs-40); } }
.home-tools { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.home-tools .search { position: relative; flex: 1 1 280px; min-width: 0; }
.home-tools .search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.home-tools .search .input { padding-left: 38px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip small { color: inherit; opacity: .65; margin-left: 4px; }
.doclist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--s-4); }
.dcard { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--t-fast), box-shadow var(--t-fast); min-width: 0; }
.dcard:hover { border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.dcard .k { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.dcard h3 { font-size: var(--fs-20); line-height: 1.25; font-weight: var(--w-regular); letter-spacing: -.01em; overflow-wrap: anywhere; text-wrap: balance; }
.dcard .meta { display: flex; gap: var(--s-3); flex-wrap: wrap; color: var(--ink-3); font-size: 13px; }
.dcard .open { position: absolute; inset: 0; border-radius: var(--r-lg); z-index: 1; }
.dcard .more { position: relative; z-index: 2; margin: -6px -8px -6px 0; }
.progress { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--sunk); }
.progress i { display: block; height: 100%; } .progress .v { background: var(--ok); } .progress .r { background: var(--warn); }
.empty { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; padding: var(--s-7) var(--s-6); border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--surface); }
.empty p { color: var(--ink-2); max-width: 56ch; }
.sk { height: 160px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--sunk), var(--surface-2), var(--sunk)); background-size: 200% 100%; animation: sk 1.4s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* création */
.kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-2); }
.kind { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); text-align: left; background: var(--surface); }
.kind b { font-weight: var(--w-semi); font-size: var(--fs-14); }
.kind small { color: var(--ink-3); font-size: 12.5px; line-height: 1.35; }
.kind[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }

/* ---------------- poste de travail du document ---------------- */
.ws { display: grid; grid-template-columns: var(--plan-w) minmax(0, 1fr) var(--side-w); grid-template-rows: var(--bar-h) minmax(0, 1fr); height: 100dvh; }
.ws[data-side="off"] { grid-template-columns: var(--plan-w) minmax(0, 1fr) 0; }
.ws[data-plan="off"] { grid-template-columns: 0 minmax(0, 1fr) var(--side-w); }
.ws[data-plan="off"][data-side="off"] { grid-template-columns: 0 minmax(0, 1fr) 0; }
.bar { grid-column: 1 / -1; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3); background: var(--surface); border-bottom: 1px solid var(--line); min-width: 0; }
.bar .title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bar .title small { font-size: 11px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; font-weight: var(--w-semi); }
.bar .title input { border: 0; background: transparent; font-size: 17px; font-weight: var(--w-medium); padding: 2px 6px; margin-left: -6px; border-radius: var(--r-xs); min-width: 0; text-overflow: ellipsis; }
.bar .title input:hover { background: var(--surface-2); }
.bar .title input:focus { outline: none; box-shadow: var(--focus); }
#saveState { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
#saveState[data-s="busy"] { color: var(--accent); }
.statusSel { height: 30px; border: 0; border-radius: var(--r-pill); padding: 0 26px 0 10px; font-size: 12px; font-weight: var(--w-medium); appearance: none; background: var(--sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%2366748A' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 6px center / 14px; color: var(--ink-2); }
.statusSel[data-s="relecture"] { background-color: var(--warn-soft); color: var(--warn); }
.statusSel[data-s="valide"] { background-color: var(--ok-soft); color: var(--ok); }
@media (max-width: 700px) { #saveState, .bar .hide-s, .statusSel { display: none; } .bar { gap: 2px; padding: 0 8px; } .bar .title { min-width: 90px; } .bar .btn.primary { padding: 0 9px; } }

/* plan */
.plan { grid-row: 2; overflow: auto; border-right: 1px solid var(--line); background: var(--paper); padding: var(--s-4) var(--s-3) var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.ws[data-plan="off"] .plan { display: none; }
.plan-sec { display: flex; flex-direction: column; gap: 2px; }
.plan-sec > .t-label { padding: 0 8px 6px; display: flex; justify-content: space-between; align-items: center; }
.pl { display: grid; grid-template-columns: minmax(22px, auto) minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 34px; padding: 4px 8px; border-radius: var(--r-sm); text-align: left; color: var(--ink-2); font-size: 13.5px; }
.pl:hover { background: var(--sunk); color: var(--ink); }
.pl[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.pl .n { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pl .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl.lv2 { padding-left: 20px; } .pl.lv3 { padding-left: 32px; font-size: 13px; }
.pl .dots { display: inline-flex; gap: 3px; }
.pl .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); } .pl .dots i.v { background: var(--ok); } .pl .dots i.r { background: var(--warn); }
.pl .cnt { font-size: 11px; color: var(--warn); font-weight: var(--w-semi); }
.plan-add { display: flex; gap: 6px; padding: 4px 4px 0; }
.plan-add .input { height: 32px; font-size: 13px; }
.mod { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 13.5px; text-align: left; }
.mod:hover { background: var(--sunk); color: var(--ink); }
.mod[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.mod .ic { color: var(--ink-3); } .mod small { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.mod .soon { margin-left: auto; font-size: 11px; color: var(--ink-3); }

/* zone centrale */
.stage { grid-row: 2; overflow: auto; scroll-behavior: smooth; scroll-padding-top: 24px; background: var(--paper); min-width: 0; }
.sheetpaper { max-width: 820px; margin: var(--s-5) auto var(--s-8); padding: var(--s-7) var(--s-7) var(--s-8); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
@media (max-width: 760px) { .sheetpaper { margin: 0 0 var(--s-8); border-radius: 0; border-inline: 0; padding: var(--s-5) 16px var(--s-7); } }
.doc-head { display: flex; flex-direction: column; gap: var(--s-3); padding-bottom: var(--s-5); margin-bottom: var(--s-4); border-bottom: 1px solid var(--line-soft); }
.doc-head .t-display { font-size: var(--fs-40); }
.doc-head .meta { display: flex; gap: var(--s-4); flex-wrap: wrap; color: var(--ink-3); font-size: 13px; }
.notice { display: flex; gap: var(--s-3); align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--ink-2); font-size: 13.5px; }
.notice .ic { color: var(--accent); margin-top: 1px; }

.chap { padding-top: var(--s-6); scroll-margin-top: 24px; }
.chap-h { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.chap-h .n { font-family: var(--font-accent); font-style: italic; color: var(--emph); font-size: var(--fs-28); min-width: 1.4em; }
.chap-h textarea { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; overflow: hidden; font-size: var(--fs-28); line-height: 1.2; letter-spacing: -.01em; padding: 0 4px; margin-left: -4px; border-radius: var(--r-xs); text-wrap: balance; }
.chap-h textarea:focus { outline: none; box-shadow: var(--focus); }
.chap.lv2 .chap-h .n, .chap.lv2 .chap-h textarea { font-size: var(--fs-20); }
.chap.lv3 .chap-h .n, .chap.lv3 .chap-h textarea { font-size: 17px; font-weight: var(--w-semi); }
@media (max-width: 760px) { .chap-h .n, .chap-h textarea { font-size: 23px; } }
.chap-empty { color: var(--ink-3); font-size: 14px; padding: 6px 0 4px; }

/* blocs : pas de carte par bloc ; la marge gauche porte les outils */
.blk { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px; margin-left: -36px; padding: 4px 0; border-radius: var(--r-sm); }
@media (max-width: 760px) { .blk { margin-left: -8px; grid-template-columns: 22px minmax(0, 1fr); } }
.blk-g { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 6px; opacity: 0; transition: opacity var(--t-fast); }
.blk:hover .blk-g, .blk:focus-within .blk-g, .blk.active .blk-g { opacity: 1; }
@media (pointer: coarse) { .blk-g { opacity: 1; } }
.blk-g .icon-btn { width: 26px; height: 26px; }
.sdot { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-sm); }
.sdot i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-3); display: block; }
.sdot[data-s="revoir"] i { background: var(--warn); border-color: var(--warn); }
.sdot[data-s="valide"] i { background: var(--ok); border-color: var(--ok); border-radius: 2px; }
.sdot:hover { background: var(--sunk); }
.blk[data-s="revoir"] .blk-g, .blk[data-s="valide"] .blk-g { opacity: 1; }
.blk-b { min-width: 0; }
.blk.ai .blk-b { box-shadow: inset 3px 0 0 var(--ai); padding-left: 12px; }
.blk.instr .blk-b { box-shadow: inset 3px 0 0 var(--warn); padding-left: 12px; }
.blk-flags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.blk.flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 30% { background: var(--accent-soft); } 100% { background: transparent; } }
.ed { display: block; width: 100%; border: 0; background: transparent; resize: none; overflow: hidden; padding: 4px 0; font-size: 17px; line-height: 1.65; color: var(--ink); border-radius: var(--r-xs); }
.ed:focus { outline: none; }
.ed::placeholder { color: var(--ink-3); }
.ed.view { cursor: text; min-height: 1.65em; }
.ed.view p { margin: 0 0 .7em; } .ed.view p:last-child { margin-bottom: 0; }
.ed.view .ph { color: var(--ink-3); }
.lview ul, .lview ol { margin: 0; padding-left: 24px; } .lview li { margin: 2px 0; } .lview li::marker { color: var(--accent); font-weight: var(--w-semi); }
.ed.view:hover { background: color-mix(in srgb, var(--sunk) 50%, transparent); }
.ed.titre { font-size: var(--fs-20); font-weight: var(--w-semi); line-height: 1.35; }
.ed.list { padding-left: 4px; }
.lst { position: relative; }
.lst .ed { padding-left: 26px; background-image: radial-gradient(circle at 8px 15px, var(--accent) 3px, transparent 3.5px); background-size: 100% 28px; background-repeat: repeat-y; line-height: 28px; }
.lst.steps .ed { background-image: none; counter-reset: s; }
.lst.steps .nums { position: absolute; left: 0; top: 4px; display: flex; flex-direction: column; pointer-events: none; }
.lst.steps .nums span { height: 28px; width: 20px; display: grid; place-items: center; font-size: 12px; font-weight: var(--w-semi); color: var(--accent); font-variant-numeric: tabular-nums; }
.callout { padding: 12px 16px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.callout[data-v="attention"] { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.callout[data-v="danger"] { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.callout[data-v="retenir"] { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.callout .ttl { width: 100%; border: 0; background: transparent; font-size: 12px; font-weight: var(--w-semi); letter-spacing: .08em; text-transform: uppercase; padding: 2px 0; }
.callout .ttl:focus { outline: none; }
.callout .ed { font-size: 15.5px; }
.callout .vars { display: flex; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
.callout .vars button { height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12px; color: var(--ink-2); }
.callout .vars button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.notew { padding: 10px 14px; border-radius: var(--r-md); border: 1px dashed var(--ink-3); background: var(--surface-2); }
.notew .ed { font-size: 15px; }
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.tbl table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 14px; }
.tbl td { border: 1px solid var(--line-soft); padding: 0; vertical-align: top; }
.tbl tr:first-child td.hd { background: var(--surface-2); font-weight: var(--w-semi); }
.tbl textarea { display: block; width: 100%; min-width: 90px; border: 0; background: transparent; resize: none; overflow: hidden; padding: 7px 9px; font-size: 14px; line-height: 1.4; }
.tbl textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.tbl-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cap { width: 100%; border: 0; background: transparent; font-size: 13px; color: var(--ink-2); padding: 6px 0; text-align: center; }
.cap:focus { outline: none; box-shadow: 0 1px 0 var(--accent); }
.fig img { display: block; max-width: 100%; margin: 0 auto; border-radius: var(--r-sm); background: #fff; }
.fig.demi img { max-width: 55%; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; border: 1.5px dashed var(--line); border-radius: var(--r-md); color: var(--ink-3); text-align: center; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dgm-prev { display: block; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow-x: auto; padding: 12px; cursor: pointer; text-align: center; width: 100%; }
.dgm-prev:hover { border-color: var(--accent); }
.dgm-prev svg { max-width: 100%; height: auto; }
.remk { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.remk button { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12px; background: var(--warn-soft); color: var(--warn); }
.remk button.bad { background: var(--bad-soft); color: var(--bad); }

.adder { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: var(--s-2) 0 0; opacity: .7; }
.adder:hover, .adder:focus-within { opacity: 1; }
.adder .btn { height: 28px; font-size: 12.5px; padding: 0 9px; color: var(--ink-2); }
.adder .btn .ic { width: 15px; height: 15px; color: var(--ink-3); }

/* lecture */
.reader { font-size: 17px; line-height: 1.7; }
.reader h2 { font-size: var(--fs-28); font-weight: var(--w-regular); letter-spacing: -.01em; margin: var(--s-6) 0 var(--s-3); }
.reader h2 .n, .reader h3 .n { font-family: var(--font-accent); font-style: italic; color: var(--emph); margin-right: 10px; }
.reader h3 { font-size: var(--fs-20); font-weight: var(--w-semi); margin: var(--s-5) 0 var(--s-2); }
.reader h4 { font-size: 17px; font-weight: var(--w-semi); margin: var(--s-4) 0 var(--s-1); }
.reader p { margin: 10px 0; } .reader ul, .reader ol { padding-left: 24px; margin: 10px 0; }
.reader .callout { margin: 16px 0; font-size: 15.5px; } .reader .callout b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.reader table { border-collapse: collapse; width: 100%; font-size: 14px; } .reader th, .reader td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top; } .reader th { background: var(--surface-2); }
.reader figure { margin: 20px 0; text-align: center; } .reader figcaption { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.reader figure img { max-width: 100%; }

/* ---------------- panneau de droite ---------------- */
.side { grid-row: 2; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--surface); }
.ws[data-side="off"] .side { display: none; }
.side-h { display: flex; align-items: center; gap: var(--s-2); padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.side-b { flex: 1; min-height: 0; overflow: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.side-f { border-top: 1px solid var(--line-soft); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.rm { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.rm.done { opacity: .6; }
.rm .top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.rm .where { display: block; width: 100%; text-align: left; font-size: 12px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm p { font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rm .rep { border-left: 2px solid var(--line); padding-left: 10px; font-size: 13.5px; color: var(--ink-2); }
.rm .acts { display: flex; gap: 4px; flex-wrap: wrap; }
.ai-group { display: flex; flex-direction: column; gap: 6px; }
.ai-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ai-acts .btn { justify-content: flex-start; height: auto; min-height: 36px; padding: 8px 10px; white-space: normal; text-align: left; line-height: 1.25; }
.msg { font-size: 14px; line-height: 1.55; }
.msg.u { align-self: flex-end; max-width: 90%; padding: 8px 12px; border-radius: 12px 12px 2px 12px; background: var(--accent-soft); white-space: pre-wrap; }
.msg.a p { margin: 6px 0; } .msg.a ul { padding-left: 20px; margin: 6px 0; }
.msg .note { font-size: 12px; color: var(--ink-3); }
.busy { display: inline-flex; gap: 4px; align-items: center; color: var(--ink-3); font-size: 13px; }
.busy i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: dot 1.1s infinite; } .busy i:nth-child(2) { animation-delay: .15s; } .busy i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.src { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.src b { font-weight: var(--w-semi); } .src small { color: var(--ink-3); }

/* petit écran : plan et panneau deviennent des tiroirs */
@media (max-width: 1100px) {
  .ws, .ws[data-side="off"], .ws[data-plan="off"], .ws[data-plan="off"][data-side="off"] { grid-template-columns: minmax(0, 1fr); }
  .plan, .side { position: fixed; z-index: 70; top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); bottom: 0; width: min(var(--side-w), 92vw); box-shadow: var(--shadow-3); }
  .plan { left: 0; } .side { right: 0; }
  .ws:not([data-plan="open"]) .plan { display: none; } .ws:not([data-side="open"]) .side { display: none; }
  .stage { grid-column: 1; }
}

/* ---------------- éditeur de diagrammes ---------------- */
.dg { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; background: var(--paper); }
.dg-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.dg-bar .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.dg-bar .ttl { flex: 1 1 200px; min-width: 120px; border: 0; background: transparent; font-size: 16px; font-weight: var(--w-medium); padding: 4px 6px; border-radius: var(--r-xs); }
.dg-bar .ttl:focus { outline: none; box-shadow: var(--focus); }
.shape-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--ink-2); }
.shape-btn:hover { border-color: var(--accent); color: var(--ink); }
.dg-wrap { position: relative; overflow: hidden; min-height: 0; touch-action: none; background-color: var(--paper); background-image: radial-gradient(var(--line) 1px, transparent 1.2px); background-size: 20px 20px; }
.dg-wrap svg.canvas { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.dg-wrap.panning { cursor: grabbing; }
.dg-zoom { position: absolute; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.dg-zoom span { min-width: 46px; display: grid; place-items: center; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dg-hint { position: absolute; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: min(520px, calc(100% - 200px)); font-size: 12px; color: var(--ink-3); background: color-mix(in srgb, var(--surface) 85%, transparent); padding: 6px 10px; border-radius: var(--r-sm); }
@media (max-width: 700px) { .dg-hint { display: none; } }
.dg-empty { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.dg-empty > div { pointer-events: auto; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; max-width: 420px; padding: 24px; }
.dg-empty p { color: var(--ink-2); }
.dg-edit { position: absolute; z-index: 5; border: 1.5px solid var(--accent); border-radius: var(--r-xs); background: var(--surface); text-align: center; font: var(--w-medium) 13px/1.3 var(--font-sans); color: var(--ink); resize: none; padding: 4px; box-shadow: var(--shadow-2); }
.dg-edit:focus { outline: none; }
/* éléments du diagramme (SVG) : couleurs par jetons */
.n-shape { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.4; }
.n-start .n-shape { fill: var(--ink); stroke: var(--ink); } .node.n-start text { fill: var(--paper); }
.n-end .n-shape { fill: var(--surface); stroke: var(--ink); stroke-width: 2.4; }
.n-decision .n-shape { fill: var(--accent-soft); stroke: var(--accent); }
.n-document .n-shape { fill: var(--surface); stroke: var(--ink-2); }
.n-wait .n-shape { fill: var(--warn-soft); stroke: var(--warn); }
.n-sub .n-shape { fill: var(--surface-2); stroke: var(--ink-2); }
.node text { fill: var(--ink); font: var(--w-medium) 13px var(--font-sans); pointer-events: none; }
.node { cursor: grab; }
.node.sel .n-shape { stroke: var(--accent); stroke-width: 2.4; }
.node .port { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; opacity: 0; cursor: crosshair; }
.node:hover .port, .node.sel .port { opacity: 1; }
.edge path.l { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.edge path.hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.edge.sel path.l { stroke: var(--accent); stroke-width: 2.2; }
.edge text { fill: var(--ink-2); font: var(--w-semi) 12px var(--font-sans); }
.edge rect { fill: var(--paper); }
.lane rect.bg { fill: var(--surface); stroke: var(--line); }
.lane:nth-child(even) rect.bg { fill: var(--surface-2); }
.lane rect.hd { fill: var(--sunk); stroke: var(--line); }
.lane text { fill: var(--ink-2); font: var(--w-semi) 12px var(--font-sans); letter-spacing: .04em; }
.ghost-line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.mk { fill: var(--ink-2); } .edge.sel .mk { fill: var(--accent); }
.dg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s-3); }
.dg-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: left; }
.dg-card:hover { border-color: var(--accent-line); }
.dg-card .thumb { width: 100%; border: 0; cursor: pointer; height: 140px; display: grid; place-items: center; overflow: hidden; background: var(--paper); border-radius: var(--r-sm); }
.dg-card .thumb svg { max-width: 100%; max-height: 130px; }

/* ---------------- leçon : fiche et descente PITT ---------------- */
.sheetpaper.wide { max-width: 1040px; }
[data-ph="P"] { --ph: var(--ph-p); } [data-ph="I"] { --ph: var(--ph-i); } [data-ph="T"] { --ph: var(--ph-t); } [data-ph="Q"] { --ph: var(--ph-q); } [data-ph="M"] { --ph: var(--ph-m); }
.lf-sec { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-5); margin-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.lf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
.lf-grid .field.full { grid-column: 1 / -1; }
@media (max-width: 700px) { .lf-grid { grid-template-columns: 1fr; } }
.pitt { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); }
.pitt-seg { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--sunk); gap: 2px; }
.pitt-seg i { display: block; background: var(--ph); min-width: 0; }
.pitt-leg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 700px) { .pitt-leg { grid-template-columns: 1fr 1fr; } }
.pitt-leg div { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 8px; align-items: center; font-size: 13px; }
.pitt-leg b { grid-column: 2; font-size: 15px; font-weight: var(--w-semi); }
.pitt-leg small { grid-column: 2; color: var(--ink-3); font-size: 11.5px; }
.pitt-leg .off b { color: var(--warn); }
.phdot { width: 10px; height: 10px; border-radius: 3px; background: var(--ph); display: inline-block; flex: none; }
.checks { margin-top: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; background: var(--surface); }
.checks summary { cursor: pointer; font-size: 14px; }
.checks ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; font-size: 14px; }
.checks li button { text-align: left; color: var(--ink); } .checks li button:hover { color: var(--accent); text-decoration: underline; }
.checks li small { grid-column: 2; color: var(--ink-3); font-size: 12.5px; }
.seqs { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
.seq { position: relative; border: 1px solid var(--line); border-left: 4px solid var(--ph); border-radius: var(--r-md); background: var(--surface); padding: 12px 14px 14px; scroll-margin: 80px; }
.seq.flash { animation: flash 1.6s var(--ease); }
.seq-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.seq-n { font-family: var(--font-accent); font-style: italic; color: var(--emph); font-size: 17px; }
.ph-btn { height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: var(--w-semi); color: var(--ph); background: color-mix(in srgb, var(--ph) 14%, transparent); }
.minw { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); }
.min { width: 58px; height: 28px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 0 6px; font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.min:disabled { background: var(--surface-2); color: var(--ink-2); }
.seq-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px 16px; }
@media (max-width: 860px) { .seq-grid { grid-template-columns: 1fr; } }
.seq-main, .seq-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sf { display: flex; flex-direction: column; gap: 3px; }
.sf > span { font-size: 11px; font-weight: var(--w-semi); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.sf textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; resize: none; overflow: hidden; padding: 4px 0 6px; font-size: 15px; line-height: 1.5; }
.sf textarea:focus { outline: none; border-bottom-color: var(--accent); }
.seq-main .sf textarea { font-size: 16px; }
.seq > .seq-b > .sf { margin-top: 10px; } .seq > .seq-b > .sf textarea { font-size: 14px; color: var(--ink-2); }
.sugs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.sugs button { height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11.5px; color: var(--ink-3); border: 1px dashed var(--line); }
.sugs button:hover { color: var(--accent); border-color: var(--accent-line); }
.seq:not(:focus-within) .sugs { display: none; }
.subs { display: flex; flex-direction: column; gap: 6px; }
.sub { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.sub textarea { border: 0; border-bottom: 1px dashed var(--line); background: transparent; resize: none; overflow: hidden; padding: 4px 0; font-size: 14.5px; }
.sub textarea:focus { outline: none; border-bottom-color: var(--accent); }
.subs > .btn { align-self: flex-start; }
.seq-grp { display: flex; align-items: center; gap: 8px; padding-top: var(--s-3); }
.grp-t { flex: 1; border: 0; background: transparent; font-size: var(--fs-20); font-weight: var(--w-semi); padding: 2px 4px; border-radius: var(--r-xs); }
.grp-t:focus { outline: none; box-shadow: var(--focus); }
.adder .phdot { margin-right: 2px; }
.reader table th { width: auto; }

.tw { overflow-x: auto; max-width: 100%; } .tw table { min-width: 560px; }

/* ---------------- contrôle des acquis, feedback cinq doigts ---------------- */
.qz { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.qz-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.qz-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qz-n { font-family: var(--font-accent); font-style: italic; color: var(--emph); font-size: 20px; min-width: 1.2em; }
.qz-q { width: 100%; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; resize: none; overflow: hidden; font-size: 16px; line-height: 1.5; padding: 2px 0 6px; }
.qz-q:focus { outline: none; border-bottom-color: var(--accent); }
.qz-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
@media (max-width: 700px) { .qz-row { grid-template-columns: 1fr; } }
.qz-src { font-size: 13px; color: var(--ink-3); font-style: italic; }
.fingers { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.fb-pick { display: flex; flex-direction: column; gap: 8px; margin-top: var(--s-5); padding: 14px 16px; border: 1px dashed var(--accent-line); border-radius: var(--r-md); background: var(--accent-soft); }
.fb-obj { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; text-align: left; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface); font-size: 14px; }
.fb-obj .ic { color: var(--accent); margin-top: 2px; } .fb-obj small { grid-column: 2; color: var(--ink-3); font-size: 12px; }
.fb-obj:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.fb-pick > .btn { align-self: flex-start; }
.fb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.fb-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); aspect-ratio: auto; }
.fb-h { display: flex; gap: 8px; align-items: flex-start; }
.fb-obj-t { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; overflow: hidden; font-size: 15px; font-weight: var(--w-semi); line-height: 1.35; padding: 6px 0; }
.fb-obj-t:focus { outline: none; box-shadow: 0 1px 0 var(--accent); }
.fb-f { display: flex; flex-direction: column; gap: 2px; }
.fb-f > span { font-size: 12px; color: var(--ink-3); } .fb-f > span b { color: var(--ink); font-weight: var(--w-semi); }
.fb-f textarea { border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; resize: none; overflow: hidden; font-size: 14px; line-height: 1.45; padding: 3px 0 5px; }
.fb-f textarea:focus { outline: none; border-bottom-color: var(--accent); }

/* ==========================================================================
   Couche Verre (système de Boussole) : le fond lumineux traverse les zones,
   les objets à part sont en verre dépoli, la navigation active est bleue.
   ========================================================================== */
body::before { background: transparent; }
.stage, .plan, .dg { background: transparent; }
.bar { background: color-mix(in srgb, var(--surface-solid) 55%, transparent); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); border-bottom-color: var(--line); }
.bar .title input { font-family: var(--font-head); font-weight: var(--w-semi); letter-spacing: -.02em; }
.bar .title small { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: var(--w-medium); }
.home-hero, .dcard, .sheetpaper, .side, .empty, .dg-bar, .dg-zoom {
  background-color: var(--surface); border: 1px solid var(--glass-bd); box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.home-hero { background-image: none; border-radius: var(--r-lg); }
.home-hero .t-display { font-size: clamp(34px, 5vw, 48px); }
.dcard { border-radius: var(--r-lg); transition: transform .35s var(--ease), box-shadow .35s; }
@media (hover: hover) { .dcard:hover { transform: translateY(-2px); border-color: var(--glass-bd); box-shadow: var(--glass-hi), 0 16px 40px rgba(40,50,120,.14); } }
.dcard h3 { font-family: var(--font-head); font-weight: var(--w-semi); letter-spacing: -.02em; font-size: 19px; }
.sheetpaper { border-radius: var(--r-lg); }
.doc-head .t-display { font-size: clamp(30px, 3.6vw, 38px); }
.side { border-width: 0 0 0 1px; border-radius: 0; box-shadow: none; }
@media (min-width: 1101px) { .side { margin: 12px 12px 12px 0; border-width: 1px; border-radius: var(--r-lg); } .ws[data-side="on"] .stage { padding-right: 0; } }
@media (max-width: 1100px) { .plan { background: var(--surface-solid); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); } .side { background: var(--surface-solid); } }
.plan { border-right: 0; }
@media (min-width: 1101px) { .plan { margin: 12px 0 12px 12px; border: 1px solid var(--glass-bd); border-radius: var(--r-lg); background: var(--surface); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); box-shadow: var(--shadow-2); } }
.plan-sec > .t-label { font-size: 12.5px; }
.pl { border-radius: 10px; }
.pl[aria-current="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: none; font-weight: var(--w-semi); }
.pl[aria-current="true"] .n { color: var(--accent); }
.mod { border-radius: 10px; min-height: 40px; }
.mod[aria-current="true"] { background: var(--accent); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.mod[aria-current="true"] small { color: rgba(255,255,255,.85) !important; }
/* tuiles d'icônes teintées par espace, comme les cartes de Boussole */
.mod > .ic { width: 28px; height: 28px; padding: 6px; border-radius: 8px; color: #fff; background: linear-gradient(160deg, var(--ga, var(--dom-outil-a)), var(--gb, var(--dom-outil-b))); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px color-mix(in srgb, var(--gb, var(--dom-outil-b)) 30%, transparent); }
.mod[aria-current="true"] > .ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.mod.d-lecon { --ga: var(--dom-lecon-a); --gb: var(--dom-lecon-b); }
.mod.d-acquis { --ga: var(--dom-acquis-a); --gb: var(--dom-acquis-b); }
.mod.d-scen { --ga: var(--dom-scen-a); --gb: var(--dom-scen-b); }
.mod.d-outil { --ga: var(--dom-outil-a); --gb: var(--dom-outil-b); }
.chip { border-color: var(--glass-bd); background: var(--surface); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 30%, transparent); }
.kind { border-color: var(--glass-bd); background: var(--surface-2); border-radius: var(--r-md); }
.kind[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.chap-h .n, .seq-n, .qz-n, .reader h2 .n, .reader h3 .n { font-weight: 300; }
.chap-h textarea, .grp-t { font-family: var(--font-head); font-weight: var(--w-semi); letter-spacing: -.022em; }
.seq, .rm, .qz-item, .fb-card, .dg-card, .checks, .src, .callout, .notew { border-radius: var(--r-md); }
.seq, .rm, .qz-item, .fb-card, .dg-card, .checks, .src { background: var(--surface-2); border-color: var(--line); }
.pitt { border-radius: var(--r-md); background: var(--surface-2); }
.statusSel { height: 32px; font-weight: var(--w-semi); }
.dg-wrap { background-color: transparent; }
.n-shape { fill: var(--surface-solid); }
.dg-bar { border-radius: 0; border-width: 0 0 1px 0; box-shadow: none; }
.dg-zoom { border-radius: var(--r-pill); }
.shape-btn { border-radius: var(--r-pill); border-color: var(--glass-bd); background: var(--surface); }
.drop { border-radius: var(--r-md); }
.adder .btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
.sf > span, .callout .ttl, .notew .t-label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: var(--w-medium); }

/* ---------------- scénario ---------------- */
.plan-g { padding: 8px 8px 2px; font-size: 11.5px; font-weight: var(--w-semi); color: var(--ink-3); }
.plan-note { padding: 8px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.msg-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: var(--s-5); }
.msg-tools .input { flex: 1 1 220px; }
.msgs { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-4); }
.msg-row { display: grid; grid-template-columns: 44px 52px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); text-align: left; }
.msg-row:hover { border-color: var(--accent-line); }
.msg-row[data-flux="live"] { box-shadow: inset 3px 0 0 var(--accent); }
.msg-l { font-weight: var(--w-semi); color: var(--accent); font-variant-numeric: tabular-nums; }
.msg-h { color: var(--ink-3); }
.msg-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg-who { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.msg-t { font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.msg-ch { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-3); } .msg-ch i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tens { color: var(--warn); font-size: 10px; letter-spacing: 1px; white-space: nowrap; }
@media (max-width: 600px) { .msg-row { grid-template-columns: 40px minmax(0, 1fr); } .msg-h { grid-column: 1; grid-row: 2; } .msg-b { grid-column: 2; grid-row: 1 / 3; } .tens { display: none; } }
.chk-list { display: flex; flex-direction: column; gap: 6px; }
.chk { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(90px, 160px) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--r-sm); background: var(--surface-2); }
.chk:has(input[type="date"]) { grid-template-columns: 26px minmax(0, 1fr) minmax(90px, 150px) 140px auto; }
@media (max-width: 600px) { .chk, .chk:has(input[type="date"]) { grid-template-columns: 26px minmax(0, 1fr) auto; } .chk .chk-w { grid-column: 2; } }
.chk.done .chk-t { text-decoration: line-through; color: var(--ink-3); }
.chk-t, .chk-w { border: 0; background: transparent; padding: 6px 4px; min-width: 0; font-size: 14.5px; border-radius: 8px; }
.chk-w { color: var(--ink-2); font-size: 13.5px; background: var(--sunk); }
.chk-t:focus, .chk-w:focus { outline: none; box-shadow: var(--focus); }
.cm-ck { width: 22px; height: 22px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink-3) 70%, transparent); display: grid; place-items: center; color: #fff; }
.cm-ck[aria-checked="true"] { background: var(--ok); border-color: var(--ok); }
.cm-ck .ic { width: 13px; height: 13px; }
.ch-list { display: flex; flex-direction: column; gap: 8px; }
.ch-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--c); }
.ch-row input[type="color"] { width: 30px; height: 30px; border: 0; padding: 0; background: none; border-radius: 50%; }
.tbl.mv input { width: 100%; min-width: 80px; border: 0; background: transparent; padding: 7px 8px; font-size: 14px; }
.tbl.mv input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.rg-notes { display: flex; flex-direction: column; gap: 4px; }
.rg-note { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 14px; }
.rg { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.rg-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.rg p { font-size: 14.5px; line-height: 1.5; }
.rg.next { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rg.envoye { opacity: .62; } .rg.annule { opacity: .45; } .rg.annule p { text-decoration: line-through; }
.db-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--line); }
.db-card[data-app="atteint"] { border-left-color: var(--ok); } .db-card[data-app="partiel"] { border-left-color: var(--warn); } .db-card[data-app="non"] { border-left-color: var(--bad); }
.db-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .db-h b { font-size: 15px; }

/* ==========================================================================
   Mise en page du poste de travail : la page défile en entier, comme Boussole.
   (Plus de hauteur 100dvh ni de défilement interne : dans le cadre de claude.ai,
   la colonne centrale pouvait s'écraser et paraître vide.)
   Barre collée en haut ; plan et panneau collés sous la barre ; 12 px entre les colonnes ;
   les trois colonnes partent du même haut.
   ========================================================================== */
.ws, .ws[data-side="off"], .ws[data-plan="off"], .ws[data-plan="off"][data-side="off"] { height: auto; min-height: 100vh; grid-template-rows: auto auto; column-gap: 12px; padding: 0 max(12px, env(safe-area-inset-right, 0px)) 24px max(12px, env(safe-area-inset-left, 0px)); align-items: start; }
.ws { grid-template-columns: var(--plan-w) minmax(0, 1fr) var(--side-w); }
.ws[data-side="off"] { grid-template-columns: var(--plan-w) minmax(0, 1fr); }
.ws[data-plan="off"] { grid-template-columns: minmax(0, 1fr) var(--side-w); }
.ws[data-plan="off"][data-side="off"] { grid-template-columns: minmax(0, 1fr); }
.ws > .bar { margin: 0 calc(-1 * max(12px, env(safe-area-inset-right, 0px))) 12px calc(-1 * max(12px, env(safe-area-inset-left, 0px))); padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); height: var(--bar-h); }
.ws > .stage { overflow: visible; min-height: calc(100vh - var(--bar-h) - 36px); }
.ws > .stage .sheetpaper { margin: 0 auto 24px; }
@media (min-width: 1101px) {
  .ws > .plan, .ws > .side { position: sticky; top: calc(var(--bar-h) + 12px + env(safe-area-inset-top, 0px)); margin: 0; max-height: calc(100vh - var(--bar-h) - 24px); overflow: auto; }
  .ws > .side { display: flex; height: calc(100vh - var(--bar-h) - 24px); }
  .ws[data-side="off"] > .side, .ws[data-plan="off"] > .plan { display: none; }
}
.dg-host { height: calc(100vh - var(--bar-h) - 36px); min-height: 420px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--glass-bd); background: var(--surface); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); box-shadow: var(--shadow-2); }
@media (max-width: 1100px) {
  .ws, .ws[data-side="off"], .ws[data-plan="off"], .ws[data-plan="off"][data-side="off"] { grid-template-columns: minmax(0, 1fr); padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  .ws > .bar { margin-left: calc(-1 * max(8px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(8px, env(safe-area-inset-right, 0px))); }
  .ws > .plan, .ws > .side { position: fixed; top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); bottom: 0; margin: 0; border-radius: 0; max-height: none; }
  .dg-host { height: calc(100vh - var(--bar-h) - 24px); }
}
@media (max-width: 760px) { .ws > .stage .sheetpaper { margin: 0 -8px 24px; } }
.chap { scroll-margin-top: calc(var(--bar-h) + 24px); } html { scroll-padding-top: calc(var(--bar-h) + 16px); }

/* ==========================================================================
   Pas de flou (backdrop-filter) sur les grandes surfaces : sur une feuille de
   plusieurs dizaines de milliers de pixels (PAS-50), les navigateurs (WebKit surtout)
   n'arrivent plus à peindre la couche et le contenu disparaît. Le flou reste sur
   les petits éléments (barre, boutons, menus, cartes de l'accueil) ; les grandes
   surfaces prennent un verre dense, sans flou.
   ========================================================================== */
.sheetpaper, .ws > .plan, .ws > .side, .dg-host, .side, .plan {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background-color: var(--surface-solid) !important; }
.sheetpaper .btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
.app-error { position: fixed; z-index: 200; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 12px 14px; border-radius: var(--r-md); background: var(--bad); color: #fff; font: 13px/1.4 var(--font-sans); white-space: pre-wrap; max-height: 40vh; overflow: auto; }

/* ---------------- scénario, vague 3b ---------------- */
details.flow { border-top: 1px solid var(--line); padding-top: 10px; }
details.flow summary { cursor: pointer; font-size: 14px; font-weight: var(--w-semi); color: var(--ink-2); margin-bottom: 10px; }
details.flow > * + * { margin-top: 10px; }
.mv-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
@media (max-width: 600px) { .mv-row { grid-template-columns: 1fr 1fr auto; } .mv-row > :nth-child(3) { grid-column: 1 / 3; } }
.tl-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px; border-radius: var(--r-sm); background: var(--surface-2); }
.tl-row .textarea { min-height: 0; }
.env-card, .pt-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; margin-top: var(--s-3); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--line)); }
.pt-card { --c: var(--warn); } .pt-card.done { --c: var(--ok); opacity: .75; }
.env-h { display: flex; gap: 8px; align-items: center; }
.env-h .grp-t { flex: 1; min-width: 0; }
.env-h .select { width: auto; max-width: 200px; }
.gt { position: relative; margin-top: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow-x: auto; padding: 8px 12px 12px; }
.gt-axis { position: relative; height: 22px; margin-left: 170px; min-width: 520px; border-bottom: 1px solid var(--line); }
.gt-axis span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gt-row { display: grid; grid-template-columns: 160px minmax(520px, 1fr); gap: 10px; align-items: center; min-height: 46px; border-bottom: 1px dashed var(--line-soft); }
.gt-l { display: flex; gap: 8px; align-items: center; font-size: 13px; min-width: 0; } .gt-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-l i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.gt-track { position: relative; height: 46px; }
.gt-peak { position: absolute; top: 0; bottom: 0; background: var(--warn-soft); border-radius: 4px; }
.gt-dot { position: absolute; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--c); background: var(--surface-solid); }
.gt-dot.live { background: var(--c); }
.gt-dot.key { box-shadow: 0 0 0 2px var(--surface-solid), 0 0 0 4px var(--c); }
.gt-dot:hover { transform: scale(1.3); }
.gt-bar { position: absolute; height: 5px; border-radius: 3px; opacity: .55; }

/* ---------------- scénario, vague 3b-2 ---------------- */
.map-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--s-4); }
.map-tools .input { flex: 1 1 260px; }
.map { position: relative; margin-top: var(--s-3); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.map.placing { cursor: crosshair; outline: 2px dashed var(--accent); outline-offset: -2px; }
.map-in { position: relative; }
.map-in img { display: block; width: 100%; height: auto; user-select: none; }
.pin { position: absolute; transform: translate(-50%, -100%); min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px 13px 13px 2px; background: var(--bad); color: #fff; font-size: 12px; font-weight: var(--w-semi); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.pin.on { background: var(--accent); transform: translate(-50%, -100%) scale(1.25); z-index: 2; }
.pin-row { display: grid; grid-template-columns: 30px minmax(0, 220px) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--r-sm); background: var(--surface-2); }
.pin-row.on { box-shadow: inset 0 0 0 2px var(--accent); }
.pin-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 12px 12px 12px 2px; background: var(--bad); color: #fff; font-size: 12px; }
@media (max-width: 600px) { .pin-row { grid-template-columns: 30px minmax(0, 1fr) auto; } .pin-row .t-meta { grid-column: 2 / 4; } }
.obs-form { display: flex; flex-direction: column; gap: 12px; margin-top: var(--s-4); }
.obs-form .btn.primary { align-self: flex-start; height: 44px; }
@media (max-width: 600px) { .obs-form .btn.primary { align-self: stretch; } }

/* ---------------- demandes à Claude Code (js/claude.js) ---------------- */
.dem-list { display: flex; flex-direction: column; gap: 8px; }
.dem { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; }
.dem .top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dem .q { margin: 0; color: var(--ink-2); font-style: italic; }
.dem .a p { margin: 4px 0; } .dem .a ul { padding-left: 18px; margin: 4px 0; }
.dem .note { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.dem .acts { display: flex; justify-content: flex-end; }
.dem > .btn { align-self: flex-start; }
.claude-box { display: flex; flex-direction: column; gap: 10px; margin: 0 0 var(--s-5); padding: 14px 16px; border-radius: var(--r-lg, 22px); background: var(--ai-soft); }
.claude-box .top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--ai); }
.claude-box .top .t-meta { color: var(--ink-2); }