/* Colors by role, light values. The dark theme gives the same variables its own values (end of this file). */
:root {
  color-scheme: light;
  --ink: #142d3a;
  --ink-hover: #244653;
  --on-ink: #fff;
  --muted: #627780;
  --muted-strong: #4f666e;
  --cyan: #067c87;
  --brand-dot: #6cd4c8;
  --paper: #f7f8f5;
  --surface: #fff;
  --subtle: #f5f8f6;
  --tint: #e8f3ef;
  --notice: #eaf0ed;
  --panel: #e7eeea;
  --panel-text: #557a6c;
  --numeral: #c4d9d0;
  --well: #eef2ef;
  --line: #dce4e2;
  --soft-line: #d7e3dc;
  --panel-line: #c4d6ce;
  --control-line: #bccdcc;
  --accent-line: #89b7ae;
  --ok: #376d60;
  --success: #245d46;
  --success-bg: #e3f3ec;
  --warning: #7f5426;
  --warning-bg: #fff5e8;
  --error: #9b402a;
  --destructive: #97533c;
  --danger: #854522;
  --danger-bg: #fff1e8;
  --danger-line: #eed0bd;
  --star: #b86e00;
  --signal: #a3243b;
  --on-signal: #fff;
  --scrim: rgba(10,27,35,.84);
}
:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--paper);font-size:15px;line-height:1.6}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:5px}a:hover{color:var(--cyan)}header{background:color-mix(in srgb, var(--surface) 95%, transparent);border-bottom:1px solid var(--line)}.header-inner{max-width:1320px;margin:auto;min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 40px}.brand{display:flex;align-items:center;gap:13px;font-size:24px;font-weight:700;letter-spacing:-1px;white-space:nowrap}.brand-mark{background:var(--ink);color:var(--on-ink);border-radius:10px;width:45px;height:45px;display:block;line-height:45px;text-align:center;letter-spacing:-.04em;font-size:23px}.brand-mark span{display:inline-block;width:.19em;height:.19em;margin-left:.06em;vertical-align:calc(.6ex - .095em);border-radius:50%;background:var(--brand-dot);color:transparent;overflow:hidden}.dot{color:var(--cyan)}nav{display:flex;align-items:center;gap:22px;font-size:13px;font-weight:600;flex-wrap:wrap}nav form{margin:0}.profile{font-size:11px;color:var(--muted)}main{max-width:1240px;margin:0 auto;padding:44px 40px 90px;min-height:calc(100vh - 190px)}h1,h2,h3,p{margin-top:0}h1{font-size:46px;line-height:1.12;font-weight:570;letter-spacing:-1.9px;margin-bottom:26px}h2{font-size:25px;line-height:1.3;letter-spacing:-.6px}h3{font-size:19px;line-height:1.4;font-weight:600}em{font-style:normal;color:var(--cyan)}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px;color:var(--cyan);margin-bottom:20px}.lead{font-size:18px;line-height:1.8;color:var(--muted);max-width:620px}.muted{color:var(--muted)}.fine{font-size:12px}.button{border:1px solid var(--ink);border-radius:7px;background:var(--ink);color:var(--on-ink);padding:13px 22px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:20px;width:fit-content;text-align:center}.button:hover{background:var(--ink-hover);color:var(--on-ink)}.button.secondary{background:transparent;color:var(--ink);border-color:var(--control-line)}.button.secondary:hover{background:var(--tint)}.button.small{padding:9px 15px;font-size:12px}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin:24px 0}.text-link,.link-button{color:var(--cyan);font-weight:600;font-size:13px}.link-button{border:0;background:none;padding:0;cursor:pointer}.hero{display:grid;grid-template-columns:1.45fr 1fr;align-items:center;gap:80px;padding:30px 0 65px}.hero h1{font-size:clamp(42px,5vw,64px);line-height:1.1;letter-spacing:-2.6px;margin:25px 0}.hero .lead{font-size:17px}.hero-panel{padding:38px 42px;background:var(--panel);border:1px solid var(--line);border-radius:4px;min-height:420px;position:relative;overflow:hidden;container-type:inline-size}.hero-panel .eyebrow{color:var(--muted)}.chapter-number{position:absolute;right:25px;top:30px;font-size:100px;line-height:1;color:var(--numeral);font-weight:300;letter-spacing:-9px}.chapter-number span{font-size:50px}.hero-panel h2{font-size:min(49px,14cqi);font-weight:500;line-height:1.1;letter-spacing:-2px;margin-top:60px}.hero-panel p{max-width:240px;color:var(--panel-text)}.panel-rule{height:1px;background:var(--panel-line);margin:30px 0 20px}.principles{border-top:1px solid var(--line);padding-top:35px;display:grid;grid-template-columns:repeat(3,1fr);gap:55px;margin-bottom:40px}.principles p{font-size:14px;color:var(--muted)}.index{font-size:12px;color:var(--cyan);display:block;margin-bottom:14px}.notice{padding:16px 20px;background:var(--notice);border:1px solid var(--soft-line);border-radius:6px;font-size:13px;margin-bottom:24px}.notice.error{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}.notice.success{background:var(--success-bg);color:var(--success)}.form-shell{max-width:560px;margin:35px auto}.form-shell.wide{max-width:740px}.form-shell h1{font-size:40px}.stack{display:flex;flex-direction:column;gap:23px}.stack>div>label,.stack>label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}input,textarea,select{border:1px solid var(--control-line);border-radius:6px;padding:11px 13px;background:var(--surface);color:var(--ink);width:100%}textarea{resize:vertical;line-height:1.7}input[type=checkbox]{width:auto;margin-right:9px;accent-color:var(--cyan)}.helptext{font-size:12px;color:var(--muted);display:block;margin-top:7px}.helptext ul{padding-left:20px}.errorlist{color:var(--error);font-size:13px;padding-left:20px}.steps{display:flex;gap:25px;border-block:1px solid var(--line);padding:20px 0;margin:30px 0;color:var(--muted);font-size:12px}.complete{color:var(--cyan);font-weight:700}.card{padding:30px;background:var(--surface);border:1px solid var(--line);border-radius:9px}.badge{display:inline-flex;background:var(--tint);color:var(--ok);border:1px solid var(--soft-line);border-radius:30px;padding:5px 12px;font-size:11px;font-weight:650;white-space:nowrap}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:15px 0 25px}.page-heading h1{margin-bottom:16px}.page-heading .eyebrow{margin-bottom:16px}.search-bar{background:var(--surface);border:1px solid var(--line);padding:14px;border-radius:9px;display:flex;gap:10px;align-items:center;margin-bottom:42px}.search-bar .search-input{flex:1}.search-bar input{border:0}.search-bar select{width:auto;max-width:260px;border-color:var(--line);font-size:12px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:25px 0}.section-heading h2{font-size:21px;margin:0}.section-heading span{font-size:12px}.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.case-card{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface);transition:transform .15s}.case-card:hover{transform:translateY(-3px);color:var(--ink);border-color:var(--accent-line)}.case-cover{height:175px;background:var(--panel);position:relative;padding:22px;color:var(--panel-text);font-size:13px}.case-cover strong{position:absolute;right:22px;top:9px;font-size:72px;color:var(--numeral);font-weight:300}.case-card-body{padding:25px}.case-card .eyebrow{font-size:9px;margin-bottom:12px}.case-card h3{min-height:54px}.case-card .muted{font-size:12px}.card-bottom{padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted)}.empty{grid-column:1/-1;text-align:center;padding:75px 25px;border:1px dashed var(--control-line);border-radius:9px;color:var(--muted);width:100%}.empty h2{color:var(--ink)}.version-row{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:16px;padding-bottom:16px}.version-row h3{margin-bottom:7px}.version-row+.version-row{border-top:1px solid var(--line)}.editor-layout,.reading-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:30px;align-items:start}.editor-aside{padding:25px 12px;position:sticky;top:30px}.editor-aside h2{font-size:25px}.editor-aside p{font-size:14px;color:var(--muted)}hr{border:0;border-top:1px solid var(--line);margin:30px 0}fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}fieldset+fieldset{border-top:1px solid var(--line);padding-top:25px}legend{font-size:19px;font-weight:600;padding-bottom:18px}.stack>div>fieldset>legend{font-size:13px;padding-bottom:7px}.stack>div>fieldset label{font-weight:400}fieldset label{font-size:13px;font-weight:600;display:block;margin-bottom:7px}.back-link{display:inline-block;font-size:12px;color:var(--muted);margin-bottom:30px}.case-heading{max-width:920px;margin-bottom:25px}.case-heading h1{font-size:43px}.reading{padding:38px}.prose{line-height:1.95}.takeaways{background:var(--tint);padding:25px;margin-top:30px;border-radius:6px}.takeaways p:last-child{margin-bottom:0}.metadata dt{color:var(--muted);font-size:11px;margin-top:20px}.metadata dd{margin:3px 0 0;font-size:14px}.metadata dl{margin-bottom:30px}.editorial{margin-top:30px;max-width:800px}.editorial form{margin:25px 0}blockquote{border-left:3px solid var(--panel-line);margin:20px 0;padding:10px 20px;background:var(--subtle);font-size:14px;overflow-wrap:anywhere}.diff{overflow-x:auto;white-space:pre-wrap;word-break:break-word;background:var(--subtle);padding:20px;font-size:12px}footer{max-width:1240px;padding:30px 40px;margin:auto;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:25px;color:var(--muted);font-size:11px}footer .brand{font-size:20px;color:var(--ink)}.skip,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;padding:10px;background:var(--surface);z-index:99}@media(max-width:1050px){.header-inner{padding:20px}nav{gap:12px}.profile{display:none}.hero{gap:35px}.case-grid{grid-template-columns:repeat(2,1fr)}.search-bar{flex-wrap:wrap}.search-bar .search-input{min-width:100%}.editor-layout,.reading-layout{grid-template-columns:minmax(0,1fr) 240px}}@media(max-width:720px){main{padding:28px 20px 50px}.header-inner{flex-wrap:wrap;gap:15px}.brand{font-size:22px}nav{font-size:11px}.hero{grid-template-columns:1fr;padding-top:10px;gap:25px}.hero h1{font-size:46px}.hero-panel{min-height:320px}.hero-panel h2{margin-top:30px}.principles{grid-template-columns:1fr;gap:15px}.page-heading{align-items:flex-start;flex-direction:column}h1,.case-heading h1{font-size:34px}.case-grid,.editor-layout,.reading-layout{grid-template-columns:1fr}.editor-aside{position:static;grid-row:1}.card,.reading{padding:22px}.steps{gap:15px;flex-wrap:wrap}.version-row{align-items:flex-start;flex-direction:column}.search-bar select{max-width:100%}.search-bar label{width:100%}.search-bar select{width:100%}footer{padding:25px 20px;align-items:flex-start;flex-direction:column;gap:12px}.form-shell{margin:15px auto}.form-shell h1{font-size:32px}}

/* Django renders a checkbox after its label: the box comes first, on the label's line, with help and errors below. */
.stack > div:has(> input[type=checkbox]) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; }
.stack > div:has(> input[type=checkbox]) > input[type=checkbox] { order: -1; margin: 0; }
.stack > div:has(> input[type=checkbox]) > label { flex: 1; margin: 0; }
.stack > div:has(> input[type=checkbox]) > :not(input, label) { flex-basis: 100%; }
/* Library filters: applied as they change (library.js); the results fade while the next ones load. */
.search-bar [hidden] { display: none !important; }
.library-results { transition: opacity .15s; }
.library-results[aria-busy="true"] { opacity: .55; }
/* The library by batches of 24: the count shown, then "Afficher plus", centred under the cards. */
.library-more { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 36px 0 0; text-align: center; font-size: 13px; }
.library-more p { margin: 0; }
.library-more [aria-disabled="true"] { opacity: .6; cursor: progress; }
/* Draft persistence and private clinical galleries */
.save-status { font-size: 12px; color: var(--ok); margin: 0; }
.save-status.save-error, .image-error { color: var(--error); }
.image-error:empty, .image-warnings:empty { display: none; }
.image-warnings { padding: 14px 14px 14px 30px; background: var(--warning-bg); color: var(--warning); font-size: 12px; border-radius: 6px; }
/* For healthcare professionals; images that may shock (decision of 2 October 2026): the home page, the library and
   every case page, for readers without a verified account. */
.notice.audience-warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 32%, transparent); color: var(--warning); }
/* Their library covers, lightly blurred: a mouse hover or the card's keyboard focus reveals each one. Touch screens keep
   the blur; a tap opens the case, under its warning. The zoom keeps the blurred edges inside the cover. */
.soft-covers .case-cover.has-image { overflow: hidden; }
.soft-covers .case-cover.has-image img { filter: blur(8px); transform: scale(1.08); transition: filter .2s, transform .2s; }
.soft-covers .case-card:focus-visible .case-cover img { filter: none; transform: none; }
@media (hover: hover) { .soft-covers .case-card:hover .case-cover img { filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .soft-covers .case-cover.has-image img { transition: none; } }
/* Their clinical images give no long-press callout (iOS) and are not dragged out of the page; atlas.js withholds the menu. */
[data-image-saving="off"] :is(.clinical-figure img, .clinical-figure [data-lightbox], .dialog-images img, .case-cover img) { -webkit-touch-callout: none; -webkit-user-drag: none; }
.upload-queue { border-top: 1px solid var(--line); padding-top: 16px; }
.upload-summary { font-size: 13px; font-weight: 600; margin: 0; }
.upload-queue ol { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.upload-queue li { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1.3fr); gap: 14px; align-items: center; font-size: 13px; }
.upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-queue progress { width: 100%; accent-color: var(--cyan); }
.upload-state { grid-column: 3; color: var(--muted); }
.upload-queue [data-outcome="done"] .upload-state { color: var(--ok); }
.upload-queue [data-outcome="refused"] .upload-state { color: var(--error); }
/* What can still be done with a file: send it again, take up its retouch, retouch it after all (images.js). */
.upload-queue [data-outcome="failed"] .upload-state, .upload-queue [data-outcome="declined"] .upload-state { color: var(--warning); }
.upload-offers { grid-column: 3; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.drop-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--paper) 92%, transparent); border: 3px dashed var(--cyan); }
.drop-overlay[hidden] { display: none; }
.drop-overlay p { pointer-events: none; margin: 0; padding: 22px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; font-size: 20px; font-weight: 600; text-align: center; }
/* Step 4 of the editor: the drop zone, large while the case has no image, a bar once it has some. */
.image-drop { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 18px 0; padding: 30px 20px; border: 2px dashed var(--control-line); border-radius: 9px; text-align: center; }
.image-drop [hidden] { display: none !important; }
.image-drop p { margin: 0; }
.image-drop .actions { margin: 0; justify-content: center; }
.image-drop input[type=file] { flex: 1; min-width: 200px; max-width: 480px; }
.image-drop-title { font-size: 18px; font-weight: 600; }
.image-drop[data-has-images] { flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 14px 18px; text-align: left; }
.image-drop[data-has-images] .image-drop-title { font-size: 15px; }
.image-drop .upload-queue { align-self: stretch; text-align: left; }
.images-step .image-editor-grid { margin-top: 18px; }
@media (pointer: coarse) { .image-drop-title { display: none; } }
@media (max-width: 720px) { .upload-queue ol { gap: 12px; } .upload-queue li { grid-template-columns: minmax(0, 1fr) 90px; row-gap: 0; } .upload-state, .upload-offers { grid-column: 1 / -1; } }
.image-editor-grid, .clinical-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.image-edit-card { display: flex; flex-direction: column; gap: 12px; }
.image-edit-card label { font-size: 13px; font-weight: 600; }
/* The figure board (images.js): numbered tiles to order the figures, each leading to its card; a card's number is a
   menu that moves it too. The dragged tile follows the pointer above a dashed place, the others make room. */
.figure-board h3 { font-size: 16px; margin: 6px 0 4px; }
.figure-board p { margin: 0; }
.figure-list { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.figure-tile, .figure-slot { flex: none; width: 88px; height: 66px; border-radius: 7px; }
.figure-tile { position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.figure-link { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--well); cursor: grab; touch-action: manipulation; outline-offset: 3px; }
.figure-link img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.figure-number { position: absolute; top: 4px; left: 4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 86%, transparent); color: var(--on-ink); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.figure-cover { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 10px; background: var(--surface); color: var(--star); font-size: 12px; line-height: 20px; text-align: center; }
.figure-tile:is([data-figure-state="pending"], [data-figure-state="processing"]) .figure-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30%; height: 4px; background: var(--cyan); animation: image-waiting 1.4s ease-in-out infinite alternate; }
.figure-tile:is([data-figure-state="failed"], [data-figure-state="purged"]) .figure-link::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--error); font-size: 22px; font-weight: 700; }
.figure-tile.is-dragged { position: absolute; z-index: 3; transform: scale(1.06); }
.figure-tile.is-dragged .figure-link { cursor: grabbing; box-shadow: 0 12px 24px -10px rgba(0,0,0,.45); }
.figure-tile:is(.is-dragged, .is-held) .figure-link { outline: 2px solid var(--cyan); }
.figure-slot { border: 2px dashed var(--accent-line); }
.figure-heading { display: flex; align-items: center; min-height: 36px; }
.figure-title { font-size: 14px; font-weight: 700; }
.figure-heading .figure-position { width: auto; padding: 6px 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.image-edit-card:focus { outline: none; }
.image-edit-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.image-edit-card.is-reached { animation: figure-reached 1.6s ease-out; }
@keyframes figure-reached { 0%, 45% { border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 30%, transparent); } }
@media (max-width: 720px) { .figure-tile, .figure-slot { width: 64px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .figure-tile.is-dragged { transform: none; } .figure-tile .figure-link::after { animation: none; } .figure-tile:is([data-figure-state="pending"], [data-figure-state="processing"]) .figure-link::after { width: 100%; opacity: .5; } .image-edit-card.is-reached { animation: none; border-color: var(--cyan); } }
.image-preview { background: var(--well); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 6px; overflow: hidden; }
.image-preview img { width: 100%; height: 100%; object-fit: contain; }
.image-processing-label { font-size: 12px; color: var(--muted); }
.image-preview .image-processing-label { position: absolute; bottom: 12px; left: 10px; background: color-mix(in srgb, var(--surface) 94%, transparent); padding: 3px 9px; border-radius: 4px; }
/* The bar of an image in processing: moving while the image waits, then following its steps (images.js). */
.image-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; overflow: hidden; background: color-mix(in srgb, var(--cyan) 22%, transparent); }
.image-progress span { display: block; width: 0; height: 100%; background: var(--cyan); transition: width 1s ease-out; }
.image-progress[data-waiting]::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: var(--cyan); animation: image-waiting 1.4s ease-in-out infinite alternate; }
@keyframes image-waiting { from { transform: translateX(-100%); } to { transform: translateX(333%); } }
.image-edit-card[data-state="ready"] .image-progress { opacity: 0; transition: opacity .3s .8s; }
.image-edit-card:is([data-state="failed"], [data-state="purged"]) .image-progress { display: none; }
@media (prefers-reduced-motion: reduce) { .image-progress span { transition: none; } .image-progress[data-waiting]::after { animation: none; width: 100%; opacity: .5; } }
.cover-choice { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; }
.cover-choice input { width: auto; margin: 0; accent-color: var(--cyan); }
.remove-image { text-align: left; color: var(--destructive); width: fit-content; }
.version-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.delete-link { color: var(--destructive); }
.required-mark { color: var(--cyan); font-weight: 700; margin-left: .15em; }
.clinical-gallery { margin: 35px 0; }
.clinical-figure { margin: 0; }
.clinical-figure img { width: 100%; height: 300px; object-fit: contain; background: var(--well); border-radius: 4px; }
.clinical-figure figcaption { font-size: 13px; padding-top: 14px; overflow-wrap: anywhere; }
.gallery-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 12px; }
.image-dialog { width: min(1400px, 96vw); max-height: 94vh; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.image-dialog::backdrop { background: var(--scrim); }
.dialog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dialog-toolbar h2 { margin: 0; font-size: 21px; }
.dialog-images { display: flex; gap: 20px; margin-top: 20px; }
.dialog-images figure { flex: 1; min-width: 0; margin: 0; }
.dialog-images img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: var(--panel); }
.dialog-images figcaption { margin-top: 12px; font-size: 13px; overflow-wrap: anywhere; white-space: pre-line; }
/* The loupe of the figures (images.js), under the header anchored at the top of the page (z-index 50). Its light
   ring and its shadow detach it from dark radiographs as from light photographs. */
.loupe { position: fixed; left: 0; top: 0; z-index: 40; overflow: hidden; border-radius: 50%; background: var(--well); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .3); pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .1s, visibility .1s; }
.loupe.is-shown { visibility: visible; opacity: 1; }
.loupe canvas { display: block; width: 100%; height: 100%; }
.loupe::after { content: ""; position: absolute; inset: 0; border: 3px solid #fff; border-radius: 50%; }
.is-magnified { cursor: none; }
.loupe-hint { display: none; }
@media (any-hover: hover) and (any-pointer: fine) { .loupe-hint { display: inline; } }
@media (prefers-reduced-motion: reduce) { .loupe { transition: none; } }
.case-cover.has-image { padding: 0; }
.case-cover.has-image img { width: 100%; height: 100%; object-fit: cover; }
.case-cover.has-image > span:first-of-type, .case-cover.has-image > strong { display: none; }
button:disabled { cursor: not-allowed; opacity: .5; }
@media (max-width: 720px) { .image-editor-grid, .clinical-gallery-grid { grid-template-columns: 1fr; } .clinical-figure img { height: 240px; } .dialog-images { flex-direction: column; } .dialog-images img { max-height: 45vh; } .save-status { max-width: 55%; } }

.moderation-entry { padding: 20px 0; overflow-wrap: anywhere; }
.moderation-entry + .moderation-entry { border-top: 1px solid var(--line); }
.gallery-actions { flex-wrap: wrap; }

/* Progressive editor: every field remains usable without JavaScript. */
.guided-editor [hidden] { display: none !important; }
.guide-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-nav a { padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; }
.guide-nav a[aria-current="step"] { background: var(--ink); color: var(--on-ink); }
.guided-editor fieldset:focus { outline: 2px solid var(--cyan); outline-offset: 8px; }
.guide-checklist { border-top: 1px solid var(--line); padding-top: 15px; }
.guide-checklist li { margin-bottom: 8px; }
.guided-editor .save-status { max-width: none; }
/* Step 5, the English version: an explicit choice, then each text beside its French source. */
/* Choices drawn as cards: the case's English version, a report's reason. */
.language-choice, .choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.language-choice legend, .choice-cards legend { grid-column: 1 / -1; font-size: 15px; padding-bottom: 4px; }
.language-option, .choice-card { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; font-weight: 400; cursor: pointer; }
.language-option:has(input:checked), .choice-card:has(input:checked) { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.language-option input, .choice-card input { width: auto; margin: 4px 0 0; accent-color: var(--cyan); }
.language-option strong, .choice-card strong { display: block; font-size: 14px; }
.language-option small, .choice-card small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.guided-editor:has(input[name="english_version"][value="False"]:checked) :is([data-english-workspace], [data-english-count]) { display: none; }
.guide-count { margin-left: 2px; padding: 1px 7px; border-radius: 20px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: 11px; font-weight: 700; }
.english-progress { margin: 6px 0 0; font-size: 13px; font-weight: 600; }
.english-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.english-row-name { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 600; }
.english-thumb { width: 44px; height: 32px; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; }
.english-state { padding: 2px 9px; border-radius: 30px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.english-state:empty { display: none; }
.english-row[data-state="done"] .english-state { background: var(--success-bg); color: var(--success); }
.english-row:is([data-state="todo"], [data-state="stale"]) .english-state { background: var(--warning-bg); color: var(--warning); }
.english-row[data-state="orphan"] .english-state { background: var(--danger-bg); color: var(--danger); }
.english-row[data-state="waiting"] .english-state { background: var(--well); color: var(--muted-strong); }
/* Only what exists in French is translated: a text still empty in French folds into one line, with a link to
   write it; with no French at all, one sentence replaces the list. English already typed always stays shown. */
.english-waiting, .english-empty-note { display: none; }
.english-row[data-state="waiting"][data-english-empty] :is(.english-source, .english-target) { display: none; }
.english-row[data-state="waiting"][data-english-empty] .english-waiting { display: inline; margin-left: auto; }
.english-workspace[data-all-waiting] :is(.english-row, .english-progress) { display: none; }
.english-workspace[data-all-waiting] .english-empty-note { display: block; margin: 6px 0 0; }
.english-source, .english-target { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.english-language { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
/* The French stays in view while the English is written: long texts scroll inside their box. */
.source-text { flex: 1; max-height: 26em; overflow-y: auto; padding: 11px 13px; background: var(--subtle); border: 1px solid var(--line); border-radius: 6px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.source-text:empty::before { content: attr(data-empty); color: var(--muted); }
.english-note { display: none; font-size: 12px; }
.english-row[data-state="stale"] [data-english-note="stale"] { display: block; color: var(--warning); }
.english-row[data-state="orphan"] [data-english-note="orphan"] { display: block; color: var(--danger); }
.english-removal p { margin-bottom: 10px; }
.english-removal .actions { margin: 14px 0 0; }
.caption-english { margin: 0; font-size: 12px; color: var(--muted); }
.issue-actions { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; }
@media (max-width: 720px) { .english-row { grid-template-columns: minmax(0, 1fr); } }
/* The visual editor of the narrative and the takeaways (static/rich-text.js), then ProseMirror's own rules. */
.rich-text { border: 1px solid var(--control-line); border-radius: 6px; background: var(--surface); }
.rich-text:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.rich-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 6px; border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; background: var(--subtle); }
.rich-toolbar button { min-width: 32px; min-height: 32px; padding: 3px 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink); font-size: 13px; cursor: pointer; }
.rich-toolbar button:hover { background: var(--well); }
.rich-toolbar button[aria-pressed="true"] { border-color: var(--accent-line); background: var(--tint); }
.rich-toolbar button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.rich-toolbar button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.rich-separator { width: 1px; align-self: stretch; margin: 3px 4px; background: var(--line); }
.rich-surface { min-height: 7em; padding: 11px 13px; line-height: 1.7; outline: none; }
.rich-text.with-headings .rich-surface { min-height: 18em; }
.rich-hint { margin: 0; padding: 6px 13px 8px; border-top: 1px solid var(--line); }
.rich-surface p, .rich-surface ul, .rich-surface ol, .formatted-source p, .formatted-source ul, .formatted-source ol { margin: 0 0 .75em; }
.rich-surface > :last-child, .formatted-source > :last-child, .takeaways-text > :last-child { margin-bottom: 0; }
.rich-surface :is(ul, ol), .formatted-source :is(ul, ol), .prose :is(ul, ol), .takeaways :is(ul, ol) { padding-left: 1.5em; }
.rich-surface h3, .formatted-source h3, .prose h3 { margin: 1.2em 0 .35em; font-size: 16px; line-height: 1.5; }
.rich-surface > h3:first-child, .formatted-source > h3:first-child, .prose > h3:first-child { margin-top: 0; }
.formatted-source { white-space: normal; }
/* The site's em is a coloured accent in headings; in a formatted text, it is the author's italic. */
:is(.rich-surface, .formatted-source, .prose, .takeaways) em { font-style: italic; color: inherit; }
:is(.rich-surface, .formatted-source) li > p { margin: 0; }
:is(.rich-surface, .formatted-source) li + li { margin-top: .2em; }
/* On the case page, the paragraphs of the narrative and the takeaways are justified and hyphenated in the language
   read (lang, case.html), once their column holds about 65 characters. Narrower, on a phone or a tablet held upright,
   justified lines open wide gaps: the text stays aligned left there, like lists, headings and the editor. */
.reading { container: reading / inline-size; }
@container reading (min-width: 480px) { :is(.prose, .takeaways-text) > p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } }
.ProseMirror { position: relative; word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.ProseMirror li { position: relative; }
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }
.ProseMirror [draggable][contenteditable=false] { user-select: text; }
.ProseMirror-selectednode { outline: 2px solid var(--cyan); }
li.ProseMirror-selectednode { outline: none; }
li.ProseMirror-selectednode::after { content: ""; position: absolute; inset: -2px -2px -2px -32px; border: 2px solid var(--cyan); pointer-events: none; }
img.ProseMirror-separator { display: inline !important; border: none !important; margin: 0 !important; }
/* The category form follows its type, even without JavaScript: a specialty has neither parent nor reservation. */
[data-kind-help="specialty"] { display: none; }
.category-editor:has(select[name="kind"] option[value="specialty"]:checked) [data-kind-help="specialty"] { display: block; }
.category-editor:has(select[name="kind"] option[value="specialty"]:checked) :is([data-kind-help="region"], .category-form > div:has(:is([name="parent_code"], [name="specialties"]))) { display: none; }
.category-editor > details { margin: 0 0 22px; }
.taxonomy-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:30px;align-items:start}.taxonomy-layout .card{margin-bottom:20px}.taxonomy-layout details{margin-top:24px}.search-bar{flex-wrap:wrap}.search-bar .search-input{min-width:100%}@media(max-width:720px){.taxonomy-layout{grid-template-columns:minmax(0,1fr)}}

.language-switch { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* A target of at least 24 px (WCAG 2.5.8), without changing how the link looks. */
.language-switch .link-button { padding: 4px 0; }
.header-inner { flex-wrap: wrap; }
.header-inner nav { flex: 1 1 520px; min-width: 0; }
.header-tools { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; flex: 0 0 auto; font-size: 13px; font-weight: 600; }
.header-tools form { margin: 0; }
.header-tools .link-button { font-size: inherit; }
/* The pseudonym page's rules, read before the field. */
.pseudonym-rules { margin: 0 0 18px; padding-left: 20px; color: var(--muted); font-size: 14px; }
.pseudonym-rules li + li { margin-top: 4px; }
.account-link { display: flex; flex-direction: column; line-height: 1.25; }
.account-link .profile { font-weight: 400; }
/* Management pages, for the roles that have some: one band, by theme; colours at least 4.5:1 (WCAG 1.4.3). */
.staff-nav { display: block; background: var(--subtle); border-top: 1px solid var(--line); }
.staff-inner { max-width: 1320px; margin: auto; padding: 10px 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; }
.staff-title { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--cyan); }
.staff-theme { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.staff-theme + .staff-theme { border-left: 1px solid var(--panel-line); padding-left: 28px; }
.theme-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-strong); }
@media (max-width: 1050px) { .staff-inner { padding: 10px 20px; } }
@media (max-width: 720px) { .header-tools { gap: 12px; font-size: 11px; flex: 1 1 100%; } .staff-inner { flex-direction: column; align-items: flex-start; } .staff-theme + .staff-theme { border-left: 0; padding-left: 0; } }
/* Menu descriptions, under their entry: after a short hover with a mouse, at once with the keyboard. atlas.js keeps
   them inside the window and closes them with Escape (WCAG 1.4.13); the header clips any overflow, even hidden. */
body > header { overflow-x: clip; }
.menu-item { position: relative; display: inline-flex; }
.menu-tip { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: max-content; max-width: min(260px, calc(100vw - 32px)); padding: 8px 11px; border-radius: 6px; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; white-space: normal; visibility: hidden; opacity: 0; transition: opacity .12s, visibility 0s linear .12s; }
/* The gap above a description belongs to it: the pointer crosses it to reach the text without closing it. */
.menu-tip::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px; }
@media (hover: hover) { .menu-item:hover .menu-tip { visibility: visible; opacity: 1; transition-delay: .35s; } }
.menu-item a:focus-visible + .menu-tip { visibility: visible; opacity: 1; transition-delay: 0s; }
:root.menu-tips-closed .menu-item .menu-tip { visibility: hidden; opacity: 0; transition: none; }
/* Anchored header (atlas.js adds header-anchored): it stays at the top of the window, and the page keeps the full
   header's height (--header-space), so that nothing moves when it compacts. Past the top of the page (header-compact),
   it holds on one line: the mark, the member's pages, notifications and account, the management band staying under
   it; appearance, language and logout wait at the top. Up to 960 px, it is always a bar whose "Menu" unfolds every
   entry. Without JavaScript, the header stays as it is. */
.header-menu { display: contents; }
.header-toggle, .bar-notifications, .bar-messages { display: none; }
.header-toggle { align-items: center; gap: 6px; padding: 5px 13px; border: 1px solid var(--control-line); border-radius: 30px; background: none; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.header-toggle[aria-expanded="true"] { background: var(--tint); }
.header-toggle span { font-size: 10px; transition: transform .2s; }
.header-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.header-marker { position: absolute; top: 0; left: 0; width: 1px; height: 48px; visibility: hidden; pointer-events: none; }
.header-inner { transition: min-height .2s, padding .2s; }
.brand-mark { transition: width .2s, height .2s, line-height .2s, font-size .2s, border-radius .2s; }
html.header-anchored { scroll-padding-top: calc(var(--header-space) + 12px); }
html.header-anchored body { padding-top: var(--header-space); }
html.header-anchored body > header { position: fixed; inset: 0 0 auto; z-index: 50; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: box-shadow .2s; }
html.header-anchored.header-compact body > header { box-shadow: 0 10px 24px -18px rgba(0,0,0,.5); }
html.header-anchored .editor-aside { top: 86px; }
@media (min-width: 961px) {
  html.header-compact .header-inner { min-height: 56px; padding-top: 8px; padding-bottom: 8px; flex-wrap: nowrap; }
  html.header-compact .brand-mark { width: 34px; height: 34px; line-height: 34px; font-size: 17px; border-radius: 8px; }
  html.header-compact .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  html.header-compact .header-tools form, html.header-compact .account-link .profile { display: none; }
  /* The management band stays under the bar, one slimmer line. */
  html.header-compact .staff-inner { padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 960px) {
  html.header-anchored .header-inner { min-height: 0; padding-top: 8px; padding-bottom: 8px; gap: 0 14px; flex-wrap: wrap; }
  html.header-anchored .brand { font-size: 20px; gap: 10px; }
  html.header-anchored .brand-mark { width: 34px; height: 34px; line-height: 34px; font-size: 17px; border-radius: 8px; }
  html.header-anchored .bar-notifications, html.header-anchored .bar-messages:not([hidden]) { display: block; margin-left: auto; font-size: 13px; font-weight: 600; }
  html.header-anchored .bar-messages:not([hidden]) + .bar-notifications { margin-left: 0; }
  html.header-anchored .header-toggle { display: inline-flex; }
  html.header-anchored .header-menu, html.header-anchored .staff-nav, html.header-anchored .header-menu .notifications-link, html.header-anchored body > header .menu-tip { display: none; }
  html.header-anchored .header-menu.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 16px; flex: 1 1 100%; margin-top: 10px; padding: 12px 0 16px; border-top: 1px solid var(--line); }
  html.header-anchored .header-menu nav { flex: none; flex-direction: column; align-items: flex-start; gap: 0; font-size: 15px; }
  html.header-anchored .header-menu .menu-item a, html.header-anchored .header-menu nav > a:not(.button) { display: block; padding: 8px 0; }
  html.header-anchored .header-menu .header-tools { flex: none; gap: 12px 18px; font-size: 13px; }
  html.header-anchored .staff-nav.is-open { display: block; }
  html.header-anchored body > header:has(.is-open) { max-height: 100dvh; overflow-y: auto; }
}
@media (max-width: 480px) { html.header-anchored .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } }
/* With "Messages" in the bar, its three links and the menu share a phone's width, on one line. */
@media (max-width: 400px) {
  html.header-anchored .header-inner:has(> .bar-messages:not([hidden])) { column-gap: 10px; }
  html.header-anchored .header-inner:has(> .bar-messages:not([hidden])) :is(.bar-messages, .bar-notifications) { font-size: 12px; }
  html.header-anchored .header-inner:has(> .bar-messages:not([hidden])) .header-toggle { padding-inline: 11px; }
  .bar-messages .nav-count { margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) { .header-inner, .brand-mark, body > header, .header-toggle span { transition: none; } }
@media print { html.header-anchored body { padding-top: 0; } html.header-anchored body > header { position: static; box-shadow: none; } }
/* Links in content are recognisable without relying on colour (WCAG 1.4.1). */
main a:not(.button, .case-card, .figure-link, [data-guide-step]) { text-decoration: underline; text-underline-offset: .2em; }
/* Moderation removals: placeholder figure, priority badge, removable images. */
.removed-image { padding: 40px 20px; margin: 0 0 12px; background: var(--paper); border: 1px dashed var(--control-line); border-radius: 6px; color: var(--muted); text-align: center; font-size: 13px; }
.badge.alert { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.redaction-image { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; padding: 16px 0; }
.redaction-image + .redaction-image { border-top: 1px solid var(--line); }
.redaction-image img { width: 100%; border: 1px solid var(--line); border-radius: 6px; }
@media (max-width: 720px) { .redaction-image { grid-template-columns: 1fr; } }
/* Version history: changed sections, additions underlined and removals struck through (not colour alone). */
.history-field { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.history-field h3 { font-size: 15px; margin-bottom: 8px; }
.history-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; margin: 0; }
.history-text ins { background: var(--success-bg); color: var(--success); text-decoration: underline; text-decoration-thickness: 2px; }
.history-text del { background: var(--danger-bg); color: var(--danger); text-decoration: line-through; }
.history-text del + ins { margin-left: .35em; }
.history-skip { color: var(--muted); padding: 0 4px; }
/* Appearance switch in the header: automatic (the system's choice), light or dark. */
.appearance-switch { display: inline-flex; gap: 2px; padding: 2px; margin: 0; border: 1px solid var(--line); border-radius: 30px; }
.appearance-switch button { border: 0; background: none; cursor: pointer; padding: 3px 9px; border-radius: 30px; font-size: 11px; font-weight: 600; color: var(--muted); }
.appearance-switch button:hover { color: var(--ink); }
.appearance-switch button[aria-pressed="true"] { background: var(--tint); color: var(--ink); }
/* Case rating (atlas/ratings.py): a summary, and five radio buttons drawn as stars, filled up to the choice and,
   with a mouse, up to the star pointed at. Hollow and filled differ in shape, not colour alone (WCAG 1.4.1); the
   star colour keeps 3:1 against the page (WCAG 1.4.11). */
.star { width: 1em; height: 1em; flex: none; fill: var(--star); stroke: var(--star); stroke-width: 1.5; stroke-linejoin: round; }
.rating-summary { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
[data-rating-heading]:not(:has(*)) { display: none; }
/* The cards under a case's reading (rating, favourites, export, editorial space) keep apart from each other. */
.reading-layout ~ .card { margin-top: 30px; }
.rating-card [hidden] { display: none !important; }
.rating-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px; margin: 22px 0 14px; }
.star-rating { position: relative; flex-direction: row; gap: 2px; }
.star-rating legend { font-size: 13px; padding-bottom: 7px; }
.star-rating label { display: inline-flex; margin: 0; padding: 3px; font-size: 30px; cursor: pointer; border-radius: 5px; }
.star-rating .star { fill: none; stroke: var(--muted); }
.star-rating:has(input:checked) .star { fill: var(--star); stroke: var(--star); }
.star-rating input:checked + label ~ label .star { fill: none; stroke: var(--muted); }
@media (hover: hover) {
  .star-rating:hover:has(label:hover) .star { fill: var(--star); stroke: var(--star); }
  .star-rating:hover label:hover ~ label .star { fill: none; stroke: var(--muted); }
}
.star-rating input:focus-visible + label { outline: 2px solid var(--cyan); outline-offset: 1px; }
/* Dark theme: chosen in the header, or followed from the system while the choice is automatic. Both blocks carry
   the same values, one for each variable of the light block (atlas/test_appearance.py checks it). Clinical images
   are shown as they are. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e4ecea;
  --ink-hover: #c6d4d1;
  --on-ink: #0f171b;
  --muted: #9db0b3;
  --muted-strong: #b9c8ca;
  --cyan: #53c5cc;
  --brand-dot: #04666f;
  --paper: #0f171b;
  --surface: #162126;
  --subtle: #1a262b;
  --tint: #183331;
  --notice: #182a2d;
  --panel: #1b2b2f;
  --panel-text: #a3c1b6;
  --numeral: #2e4a45;
  --well: #0b1215;
  --line: #26363b;
  --soft-line: #2c4043;
  --panel-line: #35514b;
  --control-line: #3e5459;
  --accent-line: #4f9189;
  --ok: #86d0b0;
  --success: #93ddbb;
  --success-bg: #15322a;
  --warning: #f0c48d;
  --warning-bg: #332818;
  --error: #f59f87;
  --destructive: #eba285;
  --danger: #f3b48f;
  --danger-bg: #3a2218;
  --danger-line: #5c3a2a;
  --star: #f2c14e;
  --signal: #8c2a3b;
  --on-signal: #fff;
  --scrim: rgba(0,0,0,.8);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #e4ecea;
    --ink-hover: #c6d4d1;
    --on-ink: #0f171b;
    --muted: #9db0b3;
    --muted-strong: #b9c8ca;
    --cyan: #53c5cc;
    --brand-dot: #04666f;
    --paper: #0f171b;
    --surface: #162126;
    --subtle: #1a262b;
    --tint: #183331;
    --notice: #182a2d;
    --panel: #1b2b2f;
    --panel-text: #a3c1b6;
    --numeral: #2e4a45;
    --well: #0b1215;
    --line: #26363b;
    --soft-line: #2c4043;
    --panel-line: #35514b;
    --control-line: #3e5459;
    --accent-line: #4f9189;
    --ok: #86d0b0;
    --success: #93ddbb;
    --success-bg: #15322a;
    --warning: #f0c48d;
    --warning-bg: #332818;
    --error: #f59f87;
    --destructive: #eba285;
    --danger: #f3b48f;
    --danger-bg: #3a2218;
    --danger-line: #5c3a2a;
    --star: #f2c14e;
    --signal: #8c2a3b;
    --on-signal: #fff;
    --scrim: rgba(0,0,0,.8);
  }
}
/* Private messages (templates/atlas/conversation.html, message_inbox.html), lots A and B of the messaging audit
   (docs/audit/2026-10-01-messagerie-ux.md): the list and the conversation side by side, one at a time on a phone.
   With the anchored header (atlas.js), the page holds the window: the list and the messages scroll each on their
   own, the field to write stays in view. Without JavaScript, the page scrolls and the field sticks to its bottom. */
/* The count of messages not seen yet, on "Messages" and in the list: its number is read with its meaning. */
.nav-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--cyan); color: var(--on-ink); font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: 0; vertical-align: 1px; }
.nav-count[hidden] { display: none; }
.msg-layout [hidden], .msg-dialog [hidden] { display: none !important; }
.msg-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); min-height: min(640px, 75vh); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: clip; }
html.header-anchored main:has(> .msg-layout) { display: flex; flex-direction: column; height: calc(100dvh - var(--header-space)); min-height: 0; padding-top: 24px; padding-bottom: 24px; }
html.header-anchored .msg-layout { flex: 1 1 auto; min-height: 0; }
.msg-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.msg-list-head { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.msg-list-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.msg-list-title { margin: 0; font-size: 24px; font-weight: 650; line-height: 1.2; letter-spacing: -.5px; }
/* Toutes · Non lues, and the moderators' list: links, so that a list keeps its filter from one page to another. */
.msg-filter { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 30px; }
main .msg-filter a { padding: 4px 11px; border-radius: 30px; color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
main .msg-filter a:hover { color: var(--ink); }
main .msg-filter a[aria-current="page"] { background: var(--tint); color: var(--ink); }
/* The two lists of a member of the editorial team: their own conversations and the team's (decision M5). */
.msg-tabs { display: flex; flex-wrap: nowrap; width: 100%; }
main .msg-tabs a { flex: 1 1 auto; text-align: center; }
/* The recipient's pseudonym suggested to the team as it is typed (static/team-compose.js). */
.member-suggestions ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.msg-search { margin: 0; }
.msg-search input { padding: 8px 12px; border-color: var(--line); background: var(--subtle); font-size: 13px; }
/* The rows, refreshed in place by messages.js, scroll on their own between the list's head and foot. */
.msg-list-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.msg-items { margin: 0; padding: 0; list-style: none; }
.msg-items li + li { border-top: 1px solid var(--line); }
.msg-layout a.msg-item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 12px; padding: 13px 18px 13px 20px; color: var(--ink); text-decoration: none; }
.msg-layout a.msg-item:hover { background: var(--subtle); color: var(--ink); }
.msg-layout a.msg-item[aria-current="page"] { background: var(--tint); }
.msg-layout a.msg-item[aria-current="page"]::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--cyan); }
.msg-avatar { grid-row: span 2; align-self: start; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--panel); color: var(--panel-text); font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.msg-name { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.msg-when { justify-self: end; font-size: 11px; color: var(--muted); white-space: nowrap; }
.msg-excerpt { grid-column: 2; overflow: hidden; font-size: 13px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.msg-item .badge { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; padding: 2px 8px; font-size: 10px; }
.msg-item .nav-count { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; margin: 0; }
.msg-item.is-unread .msg-name { font-weight: 750; }
.msg-item.is-unread .msg-excerpt { color: var(--ink); }
/* The case a conversation is about, under its row's excerpt, and under the head of the conversation. */
.msg-topic { grid-column: 2 / 4; overflow: hidden; font-size: 11px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.msg-context { display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 8px 24px; border-bottom: 1px solid var(--line); background: var(--subtle); color: var(--muted); font-size: 12px; }
.msg-context span { flex: none; }
.msg-context a { overflow: hidden; color: var(--ink); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.msg-list-pages { display: flex; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--line); }
/* Archived conversations: a list of their own, reached from the end of the others. */
.msg-shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0; padding: 11px 20px; border-bottom: 1px solid var(--line); background: var(--subtle); font-size: 13px; }
.msg-shelf-link { margin: 0; padding: 11px 20px; border-top: 1px solid var(--line); }
.msg-state { flex-wrap: wrap; gap: 2px 18px; }
.msg-state form { margin: 0; }
.msg-state .link-button { font-size: 12px; }
.msg-undo { display: inline; margin: 0 0 0 6px; }
.msg-empty { padding: 22px 20px; color: var(--muted); font-size: 13px; }
.msg-empty strong { color: var(--ink); }
.msg-list-foot { padding: 12px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.msg-list-foot summary, .msg-menu > summary { list-style: none; cursor: pointer; }
.msg-list-foot summary::-webkit-details-marker, .msg-menu > summary::-webkit-details-marker { display: none; }
.msg-preference { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 10px 0 0; }
.msg-preference p { margin: 0; font-size: 12px; }
.msg-check { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: 13px; font-weight: 600; }
.msg-check input { margin: 3px 0 0; }
/* Pseudonyms never break at their hyphens. */
.msg-name, .msg-thread-who h1, .msg-meta, .msg-inspection-title, .msg-review-list a { hyphens: none; }
.msg-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.msg-thread-head { display: flex; align-items: center; gap: 14px; padding: 13px 24px; border-bottom: 1px solid var(--line); }
.msg-thread-head .msg-avatar { grid-row: auto; }
.msg-thread-who { flex: 1; min-width: 0; }
.msg-thread-who h1 { margin: 0; overflow: hidden; font-size: 18px; font-weight: 650; line-height: 1.3; letter-spacing: -.3px; white-space: nowrap; text-overflow: ellipsis; }
.msg-thread-who p { margin: 0; overflow: hidden; font-size: 12px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.msg-thread-actions { display: flex; align-items: center; gap: 8px; }
.msg-icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.msg-icon-button:hover, .msg-menu[open] > summary { background: var(--subtle); color: var(--ink); }
main .msg-thread-head a.msg-back { display: none; text-decoration: none; }
.msg-menu { position: relative; }
.msg-menu-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; min-width: 240px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px -18px rgba(10, 27, 35, .45); }
.msg-menu-panel form { margin: 0; }
main .msg-menu-panel a, .msg-menu-panel button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 6px; background: none; color: var(--ink); font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
/* The member's own settings first, each with what it does; then, apart, reporting and blocking. */
.msg-menu-panel { width: 300px; max-width: calc(100vw - 32px); }
.msg-menu-panel small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.msg-menu-panel hr { margin: 6px 4px; }
.msg-menu-panel a:hover, .msg-menu-panel button:hover { background: var(--subtle); color: var(--ink); }
main .msg-menu-panel a.is-destructive { color: var(--destructive); }
.msg-reports { padding: 8px 24px; border-bottom: 1px solid var(--line); background: var(--subtle); font-size: 13px; }
.msg-reports summary { font-weight: 600; cursor: pointer; }
.msg-report-entry { padding-top: 10px; }
.msg-report-entry p { margin: 0 0 6px; }
.msg-report-entry + .msg-report-entry { margin-top: 10px; border-top: 1px solid var(--line); }
.msg-stream { flex: 1 1 auto; min-height: 0; padding: 8px 24px 12px; overflow-x: hidden; overflow-y: auto; }
.msg-stream:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.msg-older, .msg-newer { margin: 10px 0; text-align: center; }
.msg-day { width: fit-content; margin: 16px auto 8px; padding: 3px 10px; border-radius: 30px; background: var(--subtle); color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.6; letter-spacing: 0; }
/* Before the first message not seen yet, at the conversation's opening. */
.msg-new { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; color: var(--cyan); font-size: 11px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; text-transform: uppercase; }
.msg-new::before, .msg-new::after { content: ""; flex: 1; border-top: 1px solid currentColor; opacity: .45; }
.msg-messages { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.msg { position: relative; display: flex; flex-direction: column; max-width: min(68ch, 82%); }
.msg.is-theirs { align-self: flex-start; }
.msg.is-mine { align-self: flex-end; align-items: flex-end; }
.msg-meta { margin: 8px 4px 3px; font-size: 11px; color: var(--muted); }
/* A follow-up repeats neither name nor time on screen; screen readers still read them. */
.msg.is-followup .msg-meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.msg-bubble { padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--subtle); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.is-theirs:not(.is-followup) .msg-bubble { border-top-left-radius: 4px; }
.msg.is-mine:not(.is-followup) .msg-bubble { border-top-right-radius: 4px; }
.msg.is-mine .msg-bubble { border-color: color-mix(in srgb, var(--cyan) 28%, var(--surface)); background: color-mix(in srgb, var(--cyan) 11%, var(--surface)); }
/* A message on its way (messages.js): shown at once, faded until the server keeps it; refused by the network, it
   says so and offers to send again, with the same token, so that a second try never doubles it. */
.msg.is-pending .msg-bubble { opacity: .65; }
.msg.is-failed .msg-bubble { border-color: var(--danger-line); opacity: 1; }
.msg-failed { margin: 4px 4px 0; color: var(--danger); font-size: 12px; }
.msg-failed .link-button { font-size: 12px; }
/* Inspection: each reported message marked in the transcript, the reports beside it on a wide screen, under it on a
   narrow one; the panel follows the reading, and scrolls on its own when longer than the screen. */
.msg.is-reported .msg-bubble { border-color: var(--danger-line); box-shadow: inset 3px 0 0 var(--danger); }
.msg-flag { margin-left: 6px; padding: 1px 8px; font-size: 10.5px; vertical-align: 1px; }
.msg-inspection { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.msg-transcript { padding: 0; overflow: clip; }
.msg-transcript-body { padding: 8px 24px 16px; }
.msg-audit { margin: 0; padding: 9px 24px; border-bottom: 1px solid var(--line); background: var(--warning-bg); color: var(--warning); font-size: 12px; font-weight: 600; }
.msg-decision { position: sticky; top: 16px; max-height: calc(100vh - 32px); padding: 22px; overflow-y: auto; }
/* Under the compact bar and its management band, always there for a moderator. */
@media (min-width: 961px) { html.header-anchored .msg-decision { top: 106px; max-height: calc(100vh - 122px); } }
.msg-decision h2 { margin-bottom: 14px; font-size: 19px; }
.msg-decision h3 { margin: 8px 0 4px; font-size: 16px; }
.msg-decision p { margin-bottom: 8px; }
.msg-decision blockquote { margin: 10px 0 14px; }
.msg-decision .stack { gap: 12px; }
.msg-decision-entry + .msg-decision-entry { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
/* The moderators' list: the waiting reports first, every conversation on an explicit choice. */
.msg-review-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 12px; }
.msg-review-search { display: flex; gap: 8px; margin: 0; }
.msg-review-search input { width: 240px; padding: 8px 12px; font-size: 13px; }
.msg-review-list { margin: 0; padding: 0; list-style: none; }
.msg-review-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 0; }
.msg-review-list li:first-child { padding-top: 0; }
.msg-review-list li + li { border-top: 1px solid var(--line); }
@media (max-width: 960px) {
  .msg-inspection { grid-template-columns: 1fr; }
  .msg-decision { position: static; max-height: none; }
}
/* New messages below while the reader is further up: a button brings them into view. */
.msg-jump-wrap { position: relative; height: 0; }
.msg-jump { position: absolute; bottom: 12px; left: 50%; z-index: 2; padding: 6px 14px; border: 1px solid var(--accent-line); border-radius: 30px; background: var(--surface); color: var(--cyan); font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 22px -12px rgba(10, 27, 35, .45); transform: translateX(-50%); }
.msg-jump:hover { background: var(--tint); }
/* The cases a message links to, under it and outside the bubble, whose text alone is reported: the title to open, as
   any member may read it now, or "Cas indisponible". */
.msg-body { position: relative; }
.msg-cases { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.msg.is-mine .msg-cases { align-items: flex-end; }
main .msg-cases a.msg-case, .msg-case { display: flex; flex-direction: column; max-width: 100%; margin: 0; padding: 7px 12px; border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13px; line-height: 1.45; text-decoration: none; }
main .msg-cases a.msg-case:hover { border-color: var(--accent-line); border-left-color: var(--cyan); background: var(--tint); color: var(--ink); }
.msg-case-label { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.msg-case strong { font-weight: 600; overflow-wrap: anywhere; }
.msg-case.is-gone { border-left-color: var(--line); color: var(--muted); }
/* Reporting a message received: beside it, shown on hover and focus, always on a touch screen. */
main a.msg-report { position: absolute; bottom: 6px; left: 100%; margin-left: 8px; color: var(--muted); font-size: 11px; white-space: nowrap; opacity: 0; }
.msg:hover .msg-report, main a.msg-report:focus-visible { opacity: 1; }
@media (hover: none) { main a.msg-report { opacity: 1; } }
.msg-composer { position: sticky; bottom: 0; z-index: 1; padding: 12px 24px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.msg-composer .notice { margin-bottom: 10px; }
.msg-quota { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.msg-compose-box { display: flex; align-items: flex-end; gap: 10px; padding: 5px 5px 5px 14px; border: 1px solid var(--control-line); border-radius: 12px; background: var(--surface); }
.msg-compose-box:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 18%, transparent); }
.msg-compose-box textarea { flex: 1; min-height: 40px; max-height: 40vh; padding: 8px 0; border: 0; background: none; line-height: 1.55; resize: none; outline: none; }
.msg-compose-box .button { flex: none; padding: 9px 16px; border-radius: 8px; font-size: 13px; }
.msg-compose-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 7px; color: var(--muted); font-size: 11.5px; }
.msg-compose-foot details { min-width: 0; }
.msg-compose-foot summary { cursor: pointer; }
.msg-compose-foot ul { margin: 6px 0 2px; padding-left: 18px; }
.msg-hint { margin: 0; white-space: nowrap; }
/* The list's shortcut (messages.js), where a keyboard is at hand. */
.msg-keys { margin: 0; padding: 8px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; }
.msg-counter { color: var(--warning); font-weight: 600; }
kbd { padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--subtle); font: inherit; font-size: 10.5px; }
.msg-alert { margin: 0 0 10px; padding: 12px 14px; border: 1px solid; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.msg-alert p { margin: 0; }
.msg-alert.is-warning { border-color: color-mix(in srgb, var(--warning) 32%, transparent); background: var(--warning-bg); color: var(--warning); }
.msg-alert.is-error { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger); }
.msg-alert.is-error p + p { margin-top: 4px; }
.msg-stale { margin-bottom: 12px; }
.msg-alert mark { padding: 0 3px; border-radius: 3px; background: color-mix(in srgb, var(--warning) 22%, transparent); color: inherit; font-weight: 650; }
.msg-alert-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.button.warning { border-color: var(--warning); background: var(--warning); color: var(--on-ink); }
.button.warning:hover { background: color-mix(in srgb, var(--warning) 85%, var(--ink)); color: var(--on-ink); }
.msg-closed { padding: 16px 24px; border-top: 1px solid var(--line); background: var(--subtle); color: var(--muted-strong); font-size: 13px; text-align: center; }
.msg-closed p, .msg-closed form { margin: 0; }
.msg-first { margin: 18px 0 0; }
.msg-placeholder { display: grid; place-items: center; padding: 40px; color: var(--muted); text-align: center; }
.msg-dialog { width: min(520px, calc(100vw - 32px)); padding: 26px 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -30px rgba(10, 27, 35, .55); }
.msg-dialog::backdrop { background: var(--scrim); }
.msg-dialog h2 { margin-bottom: 12px; font-size: 21px; }
.msg-dialog ul { margin: 0 0 6px; padding-left: 18px; color: var(--muted-strong); font-size: 14px; }
.msg-dialog .stack { gap: 16px; }
.msg-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.msg-dialog-actions form { margin: 0; }
.msg-quote { max-height: 30vh; padding: 10px 14px; overflow-y: auto; border-left: 3px solid var(--panel-line); border-radius: 0 8px 8px 0; background: var(--subtle); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1050px) { .msg-layout { grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); } }
@media (max-width: 720px) {
  main:has(> .msg-layout), html.header-anchored main:has(> .msg-layout) { padding: 0; }
  main:has(> .msg-layout) > .notice { margin: 12px 16px; }
  .msg-layout { grid-template-columns: 1fr; border-inline: 0; border-radius: 0; }
  .msg-layout.is-thread .msg-list, .msg-layout:not(.is-thread) .msg-thread { display: none; }
  main .msg-thread-head a.msg-back { display: inline-grid; }
  .msg-thread-head { gap: 10px; padding: 10px 12px; }
  .msg-thread-head .msg-avatar { display: none; }
  .msg-reports, .msg-context, .msg-audit { padding: 8px 12px; }
  .msg-transcript-body { padding: 6px 12px 12px; }
  .msg-review-search, .msg-review-search input { width: 100%; }
  /* Too long for one line, the two choices share it, each over two lines if need be. */
  .msg-review-tools .msg-filter { display: flex; width: 100%; border-radius: 12px; }
  main .msg-review-tools .msg-filter a { flex: 1; border-radius: 10px; text-align: center; white-space: normal; }
  .msg-stream { padding: 6px 12px 10px; }
  .msg { max-width: 80%; }
  .msg-composer { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  .msg-compose-foot .msg-hint, .msg-keys { display: none; }
}
/* Requests for opinions (atlas/opinion_requests.py, decision of 6 October 2026; mockup docs/propositions/demande-avis/
   maquette.html). « Avis demandé »: on a library card, the case's heading and « Mes cas »; a dot and a word, never the
   colour alone (WCAG 1.4.1). White on dark red (decision of 21 October 2026), apart from the pale grounds of the
   site's errors; its solid ground keeps it readable over a cover image. The request's block below stays cyan. */
.badge.opinion { align-items: center; gap: 6px; background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.badge.opinion::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
main a.badge.opinion { text-decoration: none; }
a.badge.opinion:hover { background: color-mix(in srgb, var(--signal) 88%, var(--ink)); border-color: color-mix(in srgb, var(--signal) 88%, var(--ink)); color: var(--on-signal); }
.case-cover .badge.opinion { position: absolute; right: 12px; bottom: 12px; padding: 3px 9px; font-size: 10px; }
/* The library's « Avis demandés » filter: a box that reads like the lists beside it. */
.search-toggle { display: inline-flex; flex: none; align-items: center; gap: 8px; margin: 0; padding: 10px 13px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.search-toggle input[type=checkbox] { margin: 0; }
.search-toggle:has(input:checked) { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); color: var(--cyan); }
@media (max-width: 720px) { .search-bar .search-toggle { width: 100%; } }
/* The request on the case page, under the heading and before the narrative: what the author awaits on the left, the
   button on the right, below it when room is short (the block measures its own width). Without a running request
   (offering to open one, a closed one), it stays quiet. */
.opinion-request { container-type: inline-size; position: relative; margin: 0 0 30px; padding: 26px 30px; border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--cyan) 4%, var(--surface)); scroll-margin-top: 110px; }
.opinion-request::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: -1px; width: 4px; border-radius: 0 4px 4px 0; background: var(--cyan); }
.opinion-request.is-quiet { border-color: var(--line); background: var(--surface); }
.opinion-request.is-quiet::before { background: var(--control-line); }
.opinion-request [hidden] { display: none !important; }
.opinion-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 18px 40px; align-items: center; }
.opinion-request .eyebrow { margin-bottom: 10px; }
.opinion-request h2 { margin-bottom: 14px; font-size: 22px; letter-spacing: -.4px; }
.opinion-aspects { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.opinion-aspects li { padding: 4px 12px; border: 1px solid var(--soft-line); border-radius: 30px; background: var(--surface); font-size: 12px; font-weight: 600; }
.opinion-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; color: var(--muted-strong); font-size: 13px; }
/* The author's last visit, by the day: a full dot within the week, a circle beyond, and always the words. */
.opinion-activity { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.opinion-activity::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.opinion-activity.is-quiet { color: var(--muted-strong); }
.opinion-activity.is-quiet::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.opinion-reply { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.opinion-reply p { margin: 0; color: var(--muted-strong); font-size: 12px; line-height: 1.55; }
@container (max-width: 640px) { .opinion-layout { grid-template-columns: 1fr; } }
/* For its author: its state, its deadline, renewing or closing it; what to know before acting. */
.opinion-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; font-size: 14px; }
.opinion-deadline.is-near { color: var(--warning); font-weight: 600; }
.opinion-note { margin: 12px 0 0; color: var(--warning); font-size: 13px; }
.opinion-manage { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.opinion-manage form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.opinion-manage label { margin: 0; font-size: 13px; font-weight: 600; }
.opinion-manage select { width: auto; padding: 7px 10px; font-size: 13px; }
.opinion-manage p { margin: 0; color: var(--muted-strong); font-size: 13px; }
/* Opening it: the form unfolds under the button, without JavaScript; aspects as boxes to tick (three at most, atlas.js
   greys the others), the length as cards. */
.opinion-start { margin-top: 18px; }
.opinion-start > summary { list-style: none; }
.opinion-start > summary::-webkit-details-marker { display: none; }
.opinion-start[open] > summary { margin-bottom: 18px; }
.opinion-form { display: flex; flex-direction: column; gap: 22px; }
.opinion-form legend { padding-bottom: 8px; font-size: 13px; font-weight: 600; }
.opinion-form legend .muted { font-weight: 400; }
.opinion-form fieldset + fieldset { padding-top: 0; border-top: 0; }
.opinion-form .choice-cards { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.opinion-form .notice { margin: 0; }
.opinion-form .notice p { margin-bottom: 10px; }
.opinion-form .actions { margin: 0; }
.opinion-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.opinion-choices label { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border: 1px solid var(--control-line); border-radius: 30px; background: var(--surface); font-size: 13px; font-weight: 500; cursor: pointer; }
.opinion-choices input[type=checkbox] { margin: 0; }
.opinion-choices label:has(input:checked) { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.opinion-choices label:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.opinion-consent { margin: 0; padding: 12px 14px; border-radius: 6px; background: var(--subtle); color: var(--muted-strong); font-size: 12px; line-height: 1.65; }
/* « Mes cas »: where the request of a published case stands, under its versions. */
.opinion-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
/* Messages: a request running, in the banner of a conversation's case and in its line of the list. In the line, the
   mention comes before the title, which the ellipsis may cut; in ink, it keeps 4.5:1 on the open conversation's tint. */
.msg-context .opinion-flag { flex: none; color: var(--cyan); font-weight: 600; }
.msg-topic .opinion-flag { color: var(--ink); font-weight: 600; }

/* « Statistiques » (decisions of 6 October 2026, INTENT §11.1): aggregates only. Bars and charts are SVG whose geometry
   sits in attributes, as the CSP allows; periods are links. The page measures its own width, like the opinion block. */
.stats-page { container-type: inline-size; --stats-other: var(--ink); }
/* Readers without a verified account, beside members in cyan: the ink, softened in the dark theme so that it does not
   dazzle, still above 3:1 on the panel (WCAG 1.4.11). */
:root[data-theme="dark"] .stats-page { --stats-other: color-mix(in srgb, var(--ink) 55%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stats-page { --stats-other: color-mix(in srgb, var(--ink) 55%, var(--surface)); } }
.stats-intro { max-width: 760px; margin: -6px 0 22px; font-size: 14px; }
.stats-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 18px; }
.stats-periods { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--control-line); border-radius: 9px; background: var(--surface); font-size: 13px; font-weight: 600; }
main .stats-periods a { padding: 6px 13px; border-radius: 6px; color: var(--muted-strong); text-decoration: none; }
main .stats-periods a:hover { background: var(--tint); color: var(--ink); }
main .stats-periods a[aria-current] { background: var(--ink); color: var(--on-ink); }
.stats-compare { color: var(--muted); font-size: 13px; }
.stats-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: -4px 0 18px; font-size: 13px; font-weight: 600; }
.stats-dates input { width: auto; padding: 7px 10px; font-size: 13px; }
.stats-dates .muted { font-size: 12px; font-weight: 500; }
.stats-dates .errorlist { flex-basis: 100%; margin: 0; }
/* The current day: live for the administration. */
.stats-live { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 22px; padding: 10px 16px; border: 1px solid var(--soft-line); border-radius: 9px; background: var(--notice); color: var(--muted-strong); font-size: 13px; }
.stats-live strong { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.stats-live-label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 650; }
.stats-live-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
/* The four sections: links, so that each keeps the period chosen. */
.stats-tabs { display: flex; flex-wrap: wrap; gap: 2px 24px; margin: 0 0 24px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
main .stats-tabs a { margin-bottom: -1px; padding: 9px 0 11px; border-bottom: 2px solid transparent; color: var(--muted-strong); text-decoration: none; }
main .stats-tabs a:hover { color: var(--ink); }
main .stats-tabs a[aria-current] { border-color: var(--cyan); color: var(--ink); }
/* Key figures. A change is never judged: a delay that grows is no good news. */
.stats-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0 0 18px; }
.stats-kpi { min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.stats-kpi-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; color: var(--muted-strong); font-size: 12px; font-weight: 650; }
.stats-kpi-value { display: block; font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.stats-kpi-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.stats-delta { color: var(--muted-strong); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Exact or estimated: a word, never the colour alone. */
.stats-precision { display: inline-flex; padding: 1px 7px; border: 1px solid; border-radius: 30px; font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.stats-precision.is-exact { border-color: color-mix(in srgb, var(--success) 30%, transparent); background: var(--success-bg); color: var(--success); }
.stats-precision.is-estimate { border-color: color-mix(in srgb, var(--warning) 30%, transparent); background: var(--warning-bg); color: var(--warning); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; margin: 0 0 18px; }
.stats-panel { min-width: 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.stats-panel.is-wide { margin: 0 0 18px; }
.stats-panel h2 { margin: 0 0 4px; font-size: 16px; letter-spacing: 0; }
.stats-panel h2.is-spaced { margin-top: 22px; }
.stats-panel-note { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.stats-panel .stats-rest { margin: 10px 0 0; }
/* Readers per day: members at the bottom. A fixed height, the panel's width; marks and dates are HTML text, readable at
   any width, and « Afficher les chiffres » gives the same figures as a table. */
.stats-chart-frame { position: relative; padding-left: 40px; }
.stats-chart { display: block; width: 100%; height: 180px; overflow: visible; }
.stats-chart .is-members { fill: var(--cyan); }
.stats-chart .is-visitors { fill: var(--stats-other); }
.stats-chart .stats-gridline { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.stats-chart g:hover rect { opacity: .8; }
.stats-tick { position: absolute; left: 0; color: var(--muted); font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; transform: translateY(-50%); }
.stats-tick.is-top { top: 0; }
.stats-tick.is-middle { top: 90px; }
.stats-tick.is-bottom { top: 180px; }
.stats-axis { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 0 40px; color: var(--muted); font-size: 11px; }
.stats-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--muted-strong); font-size: 12px; }
.stats-legend li { display: inline-flex; align-items: center; gap: 7px; }
.stats-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; }
.stats-legend .is-members::before { background: var(--cyan); }
.stats-legend .is-visitors::before { background: var(--stats-other); }
.stats-data { margin: 14px 0 0; font-size: 12px; }
.stats-data > summary { width: fit-content; color: var(--cyan); font-weight: 600; cursor: pointer; }
.stats-data .stats-table-wrap { max-height: 280px; margin-top: 10px; }
/* Rankings: label, number, share and bar. */
.stats-bars { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.stats-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.stats-bars li:last-child { border-bottom: 0; }
.stats-label { min-width: 0; overflow-wrap: anywhere; }
.stats-count { font-weight: 650; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stats-count small { margin-left: 6px; color: var(--muted); font-weight: 500; }
.stats-bar { grid-column: 1 / -1; display: block; width: 100%; height: 6px; }
.stats-bar .stats-track { fill: var(--well); }
.stats-bar .stats-fill { fill: var(--cyan); }
.stats-figures { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 16px; margin: 0; font-size: 13px; }
.stats-figures dt { color: var(--muted-strong); }
.stats-figures dd { margin: 0; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.stats-figures dt small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
/* A table inside a panel scrolls rather than leave it. */
.stats-table-fit { overflow-x: auto; }
/* From the account to the verification: each step, its share of the one before and the median delay. */
.stats-funnel { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.stats-funnel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 8px 0; }
.stats-funnel .stats-bar { height: 10px; }
.stats-step-delay { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.stats-uses { margin: 18px 0; }
.stats-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.stats-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.stats-table th, .stats-table td { padding: 9px 14px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.stats-table th:first-child { text-align: left; white-space: normal; }
.stats-table thead th { position: sticky; top: 0; background: var(--surface); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; vertical-align: bottom; }
.stats-table tbody th { font-weight: 600; }
.stats-table tbody tr:last-child > * { border-bottom: 0; }
.stats-table tfoot > tr > * { border-top: 1px solid var(--panel-line); border-bottom: 0; font-weight: 650; }
.stats-panel .stats-table th:first-child { padding-left: 0; }
.stats-panel .stats-table th:last-child, .stats-panel .stats-table td:last-child { padding-right: 0; }
.stats-cases th:first-child { min-width: 220px; }
.stats-table-wrap.is-tall { max-height: 70vh; }
/* A figure per case or per small group of members, under 5: « moins de 5 ». */
.stats-small, .stats-count.stats-small { color: var(--muted); font-weight: 500; }
.stats-definitions { margin: 8px 0 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); scroll-margin-top: 110px; }
.stats-definitions > summary { padding: 14px 20px; font-weight: 650; cursor: pointer; }
.stats-definitions dl { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); align-items: start; gap: 10px 22px; margin: 0; padding: 4px 20px 20px; font-size: 13px; }
.stats-definitions dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 650; }
.stats-definitions dd { margin: 0; color: var(--muted-strong); }
@container (max-width: 640px) {
  .stats-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stats-kpi { padding: 14px; }
  .stats-kpi-value { font-size: 24px; letter-spacing: -.5px; }
  .stats-panel { padding: 18px 16px; }
  .stats-tabs { gap: 2px 18px; font-size: 13px; }
  .stats-panel .stats-table th, .stats-panel .stats-table td { padding: 8px 5px; }
  .stats-panel .stats-table thead th { letter-spacing: .2px; }
  .stats-chart-frame { padding-left: 32px; }
  .stats-axis { margin-left: 32px; }
  .stats-definitions dl { grid-template-columns: 1fr; gap: 4px; }
  .stats-definitions dd { margin-bottom: 10px; }
}
/* Usage statistics, lot 3: under each published case of « Mes cas », its totals up to yesterday, without a figure
   per day (mockup docs/propositions/statistiques/maquette.html, section 2). */
.stats-case-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 14px 0 0; padding: 10px 14px; border-radius: 7px; background: var(--subtle); color: var(--muted-strong); font-size: 13px; }
.stats-case-line strong { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.stats-case-line .text-link { margin-left: auto; }
/* The image editor of step 4 (image-editor/; INTENT §9.2, decision of 14 October 2026; mockup
   docs/propositions/retouche-images/maquette.html), and its ways in from the cards of the images. */
[data-retouch], [data-retouch-option], [data-retouch-help] { display: none; }
.has-image-editor .image-edit-card[data-state="ready"] [data-retouch] { display: inline-flex; }
.has-image-editor [data-retouch-option] { display: flex; }
.has-image-editor [data-retouch-help] { display: block; margin: -4px 0 0; }
/* On the image it acts on, as photo editors place it (audit of 14 October 2026, RET-13): dark in both themes, like
   the label of the processing. */
.retouch-button { position: absolute; top: 8px; right: 8px; align-items: center; gap: 6px; min-height: 36px; padding: 6px 13px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 18px; background: rgba(11, 15, 18, .8); color: #fff; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.retouch-button:hover { background: rgba(11, 15, 18, .94); }
.retouch-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(11, 15, 18, .9); }
.zones-cta { align-self: flex-start; text-align: left; }
/* A card just replaced or added says so for a moment (images.js). */
.image-edit-card.is-arrived { box-shadow: 0 0 0 3px var(--cyan); }
@media (prefers-reduced-motion: no-preference) { .image-edit-card { transition: box-shadow .8s; } }
/* A retouch not received: its card keeps it, to send again or to edit again (images.js, RET-06). */
.image-retry { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent); border-radius: 6px; background: var(--warning-bg); color: var(--warning); font-size: 13px; font-weight: 600; }
.image-retry .link-button { font-size: 13px; }
.image-edit-card:is([data-state="pending"], [data-state="processing"]) [data-replace] { display: none; }
/* A card whose replacement is on its way offers no other one (images.js). */
.has-image-editor .image-edit-card[data-replacing] [data-retouch], .image-edit-card[data-replacing] [data-replace] { display: none; }
.image-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.image-edits { margin: 0; padding: 8px 12px; border-radius: 6px; background: var(--tint); color: var(--ok); font-size: 12px; }
.upload-option { align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; cursor: pointer; }
.upload-option input { width: auto; margin: 0; accent-color: var(--cyan); }
/* The editor (lot A of the audit of 14 October 2026): four modes around an image that zooms, in a window over the page.
   On a phone, the whole screen, the modes at the bottom of it, as photo applications place them (§5.2, §5.9).
   image-editor/ sets data-layout (wide, portrait, landscape) from the editor's own size. */
.image-editor { width: min(1440px, 96vw); height: min(940px, 94vh); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
@media (max-width: 860px), (max-height: 600px) { .image-editor { width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; } }
/* Buttons and grids set their own display: in the editor, hidden stays hidden (RET-12). */
.image-editor [hidden] { display: none !important; }
.image-editor::backdrop { background: var(--scrim); }
.retouche-icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.retouche { position: relative; display: grid; height: 100%; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "bar modes history" "notice notice notice" "body body body" "footer footer footer"; }
/* The header's row, behind its three parts. */
.retouche::before { content: ""; grid-row: 1; grid-column: 1 / -1; background: var(--surface); border-bottom: 1px solid var(--line); }
.retouche-bar { grid-area: bar; display: flex; align-items: center; gap: 6px 14px; min-width: 0; padding: 10px 18px; }
.retouche-bar h2 { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; font-size: 17px; letter-spacing: -.2px; white-space: nowrap; text-overflow: ellipsis; }
/* The file's name and size give way first. */
.retouche-file { flex: 1 1 0; min-width: 0; margin: 0; overflow: hidden; color: var(--muted-strong); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.retouche-close { flex: none; min-height: 36px; font-size: 14px; }
.retouche-modes { grid-area: modes; justify-self: center; align-self: center; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--well); }
.retouche-modes [role="tab"] { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted-strong); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.retouche-modes [role="tab"]:hover { color: var(--ink); }
.retouche-modes [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .14), inset 0 0 0 1px var(--line); }
.retouche-modes [role="tab"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.retouche-modes svg { width: 18px; height: 18px; }
/* The zones still to check, on Anonymiser; a dot on a mode whose edits change the image. */
.retouche-badge { display: inline-grid; place-items: center; }
.retouche-badge.is-count { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--warning); color: var(--paper); font-size: 11px; font-weight: 700; line-height: 1; }
.retouche-badge.is-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.retouche-history { grid-area: history; justify-self: end; display: flex; align-items: center; gap: 4px; padding: 8px 14px; }
.retouche-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.retouche-icon:hover:not(:disabled, [aria-disabled="true"]) { background: var(--tint); }
/* Nothing to undo or redo: the button stays where the focus is, dimmed (RET-27). */
.retouche-icon:is(:disabled, [aria-disabled="true"]) { opacity: .38; cursor: default; }
.retouche-icon svg { width: 20px; height: 20px; }
.retouche-help-button { border-color: var(--control-line); border-radius: 50%; width: 32px; height: 32px; margin-left: 4px; font-size: 15px; }
.retouche-finish { display: none; }
.retouche .notice { margin: 0; }
.notice.warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 32%, transparent); color: var(--warning); }
.retouche-unreadable { grid-area: notice; margin: 18px !important; }
.retouche-body { grid-area: body; display: grid; grid-template-columns: minmax(0, 1fr) 316px; min-height: 0; }
/* The image stays dark in both themes, like a viewer: masks and frame read the same on a radiograph or a photo. */
.retouche-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #0d1316; touch-action: none; user-select: none; -webkit-user-select: none; }
.retouche-stage > canvas, .retouche-stage > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.retouche-stage > svg { overflow: hidden; outline: none; }
/* The loupe of a corner, over the overlay, beside the finger (lot C). */
.retouche-stage > .retouche-loupe { inset: auto; width: 120px; height: 120px; pointer-events: none; }
/* A light ring on the dark stage, in both themes (RET-30). */
.retouche-stage > svg:focus-visible { outline: none; }
/* A light ring on a dark one, over the image (C40): it shows on a white label as on a radiograph. */
.retouche-stage:has(> svg:focus-visible)::after { content: ""; position: absolute; inset: 3px; border: 2px solid #eef3f2; border-radius: 6px; box-shadow: 0 0 0 2px #0b0f12, inset 0 0 0 2px #0b0f12; pointer-events: none; }
.retouche-stage:is([data-tool="mask"], [data-tool="arrow"], [data-tool="arrowhead"], [data-tool="circle"], [data-tool="marker"], [data-tool="asterisk"]) > svg { cursor: crosshair; }
.retouche-stage[data-tool="pan"] > svg, .retouche.is-grab .retouche-stage > svg { cursor: grab; }
.retouche.is-panning .retouche-stage > svg { cursor: grabbing; }
.retouche-stage.is-original > svg > * { visibility: hidden; }
.retouche-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; color: #c9d4d6; font-size: 14px; text-align: center; pointer-events: none; }
.retouche-loading[role="alert"] { color: #ffcf8a; font-weight: 600; }
/* Comparing and the zoom, over the bottom of the image. */
.retouche-view { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; }
.retouche-view > *, .retouche-zoom > * { pointer-events: auto; }
.retouche-compare, .retouche-zoom { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 4px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; background: rgba(11, 15, 18, .8); color: #fff; font: inherit; font-size: 13px; font-weight: 650; }
.retouche-compare { gap: 7px; padding: 0 14px 0 11px; cursor: pointer; }
/* Switched on by a click, « Comparer » stays lit while the original shows. */
.retouche-compare[aria-pressed="true"] { border-color: #ffd34d; background: #ffd34d; color: #0b0f12; }
.retouche-compare svg { width: 17px; height: 17px; }
.retouche-zoom .retouche-icon { width: 32px; height: 32px; border-radius: 16px; color: #fff; font-size: 18px; }
.retouche-zoom .retouche-icon:hover { background: rgba(255, 255, 255, .12); }
.retouche-zoom-level { min-width: 4.2em; color: #e8eeef; font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.retouche-fit { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 9px; border: 0; border-left: 1px solid rgba(255, 255, 255, .22); border-radius: 0 16px 16px 0; background: transparent; color: #fff; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.retouche-fit svg { width: 16px; height: 16px; }
.retouche-compare:focus-visible, .retouche-zoom button:focus-visible { outline: 2px solid #eef3f2; outline-offset: 2px; box-shadow: 0 0 0 5px #0b0f12; }
/* On a phone, the last words over the top of the image, a moment. */
.retouche-toast { position: absolute; top: 10px; left: 50%; z-index: 2; max-width: calc(100% - 24px); margin: 0; padding: 7px 13px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 18px; background: rgba(11, 15, 18, .88); color: #fff; font-size: 13px; font-weight: 600; text-align: center; transform: translateX(-50%); pointer-events: none; }
/* The panel of the mode: its first commands stay in place, its lists scroll (§5.2). */
.retouche-panel { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--surface); font-size: 13px; }
.retouche-mode { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.retouche-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 16px 14px; border-bottom: 1px solid var(--line); }
.retouche-more { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 18px; }
.retouche-more h3 { margin: 16px 0 4px; font-size: 13px; }
.retouche-more p { margin: 0 0 8px; }
.retouche-more-toggle { display: none; }
.retouche-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.retouche-label { margin: 2px 0 -4px; color: var(--muted-strong); font-size: 12px; font-weight: 650; }
.retouche-warn { margin: 0; color: var(--warning); font-size: 12px; font-weight: 600; }
/* Cadrer, lot C (decision R6): while the corners of a perspective are placed, the panel shows only what to do with them. */
.retouche-perspective { display: none; }
.retouche[data-quad="on"] .retouche-perspective { display: grid; gap: 10px; }
.retouche-perspective p { margin: 0; }
.retouche-perspective .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.retouche-computed { margin-left: 5px; color: var(--muted-strong); font-weight: 500; font-variant-numeric: tabular-nums; }
.retouche-computed:empty { display: none; }
/* Before the help that lying phones always show (below): nothing but the corners while they are placed. */
.retouche[data-quad="on"] [data-mode-panel="crop"] .retouche-head > :not(.retouche-perspective),
.retouche[data-quad="on"] [data-mode-panel="crop"] .retouche-more { display: none !important; }
/* A pass over every pixel, of a fraction of a second: the stage waits. */
.retouche[data-busy] .retouche-stage { cursor: progress; }
/* The search before sending, under way (decision R5). */
.retouche [data-editor-action="detect"][aria-disabled="true"] { opacity: .6; cursor: progress; }
.retouche[data-busy] .retouche-stage canvas { opacity: .55; }
.button.small.retouche-with-icon { gap: 7px; }
.retouche-with-icon svg { width: 17px; height: 17px; }
/* What remains of the anonymisation: zones to check, or none (decision R3). */
.retouche-pending { margin: 0; color: var(--warning); font-size: 14px; font-weight: 700; }
.retouche-pending.is-done { color: var(--ok); }
.retouche-pending.is-neutral { color: var(--muted-strong); font-size: 13px; font-weight: 600; }
/* Exclusive choices: chips and tools, checked as radios. */
.retouche-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.retouche-chips [role="radio"] { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--control-line); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.retouche-chips [role="radio"] svg { width: 16px; height: 16px; }
.retouche-chips [role="radio"][aria-checked="true"], .retouche-tools [role="radio"][aria-checked="true"] { border-color: var(--cyan); background: var(--tint); box-shadow: inset 0 0 0 1px var(--cyan); }
/* Five tools (lot C): those drawn, then those laid, in two rows beside the image; in one on a phone. */
.retouche-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.retouche-tool-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.retouche-tools [role="radio"] { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 58px; padding: 8px 6px; border: 1px solid var(--control-line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.retouche-tools svg { width: 22px; height: 22px; }
.retouche-chips [role="radio"]:focus-visible, .retouche-tools [role="radio"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.retouche-swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--control-line); border-radius: 50%; }
.retouche-swatch.is-white { background: #fff; }
.retouche-swatch.is-yellow { background: #ffd34d; }
.retouche-swatch.is-black { background: #111; border-color: #9aa9ab; }
.retouche-swatch.is-auto { background: linear-gradient(135deg, #fff 50%, #111 50%); border-color: #9aa9ab; }
/* Sliders across the panel, centred on zero with a notch (RET-19). */
.retouche-range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; width: 100%; }
.retouche-range label { font-size: 13px; font-weight: 650; }
.retouche-range .retouche-value { min-width: 3ch; color: var(--muted-strong); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.retouche-range input { grid-column: 1 / -1; width: 100%; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: linear-gradient(var(--muted), var(--muted)) center / 2px 14px no-repeat; appearance: none; -webkit-appearance: none; cursor: pointer; }
.retouche-range input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--control-line) 80%, transparent); }
.retouche-range input::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; border: 2px solid var(--cyan); border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); -webkit-appearance: none; appearance: none; }
.retouche-range input::-moz-range-track { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--control-line) 80%, transparent); }
.retouche-range input::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--cyan); border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.retouche-range input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.retouche-switch { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13px; font-weight: 650; cursor: pointer; }
.retouche-switch input { width: 18px; height: 18px; margin: 0; accent-color: var(--cyan); }
/* The lists: zones by their number, masks and annotations by their place, each with what can be done to it. */
.retouche-list { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 10px; padding: 0; list-style: none; }
.retouche-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1px 10px; padding: 6px 8px; border-radius: 8px; }
.retouche-list li:hover { background: var(--subtle); }
.retouche-list li.is-selected { background: var(--tint); }
.retouche-list li.is-selected .retouche-item-name { color: var(--cyan); }
.retouche-item-name { min-width: 0; color: var(--ink); font-size: 13px; font-weight: 650; text-align: left; }
.retouche-list .link-button.retouche-item-name { color: var(--ink); font-size: 13px; }
.retouche-item-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.retouche-item-actions .link-button { padding: 3px 0; font-size: 12px; }
.retouche-item-actions select { width: auto; padding: 2px 6px; font-size: 12px; }
.retouche-zones li { grid-template-columns: auto minmax(0, 1fr); }
.retouche-zones .retouche-item-actions { grid-column: 2; }
.retouche-chip { grid-row: span 2; display: grid; place-items: center; align-self: start; width: 24px; height: 24px; margin-top: 1px; border-radius: 6px; background: #0b0f12; color: #f5b13d; font-size: 12px; font-weight: 700; }
.retouche-zones li.is-done .retouche-chip { color: #86d0b0; }
.retouche-zones li.is-cleared .retouche-chip { color: #c3cdcf; }
.retouche-done { color: var(--ok); font-size: 12px; font-weight: 650; }
.retouche-also { margin: 14px 0 10px; }
.retouche-also summary { cursor: pointer; font-size: 13px; font-weight: 650; }
.retouche-also ul { margin: 0 0 8px; padding-left: 18px; }
.retouche-also > :not(summary) { margin-top: 8px; }
/* The footer: the last words to the left, the choices to the right, the main one first (§5.2). Its height does not
   change with what it says: the image does not jump. Why « Ajouter » cannot be is in its tooltip, and said when it is
   chosen. */
.retouche-footer { grid-area: footer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto minmax(20px, auto) minmax(18px, auto) auto; align-items: center; gap: 2px 18px; padding: 10px 18px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.retouche-published { grid-column: 1 / -1; grid-row: 1; margin: 0 0 8px !important; padding: 8px 12px; font-size: 12px; }
.retouche-said { grid-column: 1; grid-row: 2; min-width: 0; margin: 0; color: var(--ink); font-size: 13px; }
.retouche-burn { grid-column: 1; grid-row: 3; margin: 0; color: var(--muted-strong); font-size: 12px; }
.retouche-reset { grid-column: 2; grid-row: 2 / span 2; font-size: 13px; }
.retouche-footer .actions { grid-column: 3; grid-row: 2 / span 2; margin: 0; gap: 10px; }
.retouche-footer .button { padding: 10px 18px; font-size: 13px; }
.retouche-footer .button:disabled { opacity: .5; cursor: not-allowed; }
.retouche-footer .button.is-unavailable { opacity: .55; cursor: not-allowed; }
.retouche-explain { display: none; margin: 0; color: var(--muted-strong); font-size: 12px; }
.retouche-rest { grid-column: 1 / -1; grid-row: 4; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; margin: 6px 0 0; }
.retouche-blocked { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); margin: 0; }
.retouche-continue { display: none; }
/* Questions and help over the editor, which waits for them (RET-21). */
.retouche-layer { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--scrim) 75%, transparent); }
.retouche-card { width: min(470px, 100%); max-height: 100%; overflow: auto; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.retouche-card > p:first-child { margin: 0 0 12px; font-size: 15px; font-weight: 650; }
.retouche-card ul { margin: 0 0 10px; padding-left: 20px; font-size: 13px; }
.retouche-card .fine { color: var(--muted-strong); }
.retouche-card .actions { margin: 16px 0 0; gap: 10px; }
.retouche-help { width: min(600px, 100%); }
.retouche-help h3 { margin: 0 0 10px; font-size: 17px; }
.retouche-help dl { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: 9px 18px; margin: 0; font-size: 13px; }
.retouche-help dt { font-weight: 650; }
.retouche-help dd { margin: 0; color: var(--muted-strong); }
.retouche-help kbd { display: inline-block; min-width: 1.7em; padding: 0 5px; border: 1px solid var(--control-line); border-bottom-width: 2px; border-radius: 5px; background: var(--subtle); color: var(--ink); font: inherit; font-size: 11px; font-weight: 650; line-height: 1.6; text-align: center; }
@media (max-width: 520px) { .retouche-help dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .retouche-help dd { margin-bottom: 8px; } }
/* A control's name and its shortcut (RET-15). */
.retouche-tip { position: absolute; z-index: 20; max-width: min(300px, calc(100% - 8px)); padding: 6px 10px; border-radius: 6px; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 500; line-height: 1.45; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }

/* Lot 2: the zones the detection found (decision I7), proposed as masks in the editor and shown to the reviewer on
   demand, over the figure of the editorial gallery (gallery.html). A hidden figure stays hidden: images paused for a
   reader, an image in processing. */
.retouche-zone { fill: rgba(245, 177, 61, .14); stroke: #f5b13d; stroke-width: 2; stroke-dasharray: 7 4; vector-effect: non-scaling-stroke; }
.retouche-stage [data-zone] { cursor: pointer; }
.retouche-zone-under { fill: none; stroke: rgba(11, 15, 18, .85); stroke-width: 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.retouche-zone-label { fill: #f5b13d; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: #0b0f12; stroke-linejoin: round; }
/* A zone the author declared without risk, or that the frame leaves out: still shown, in grey. */
.retouche-zone.is-cleared { fill: none; stroke: #c3cdcf; }
.retouche-zone-label.is-cleared { fill: #c3cdcf; }
.clinical-figure [data-lightbox]:not([hidden]) { position: relative; display: block; }
.clinical-figure [data-lightbox] img:not([hidden]) { display: block; }
.zones-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.clinical-figure:has([data-zones-toggle]:checked) .zones-layer, .zones-layer.is-shown { display: block; }
/* Numbered as in the author's editor, with a dark halo, and listed under the figure (lot B, RET-23). */
.zones-layer .retouche-zone-label { stroke-width: .22em; }
.zones-legend { display: none; margin: 8px 0 0; padding-left: 0; list-style: none; color: var(--warning); font-size: 12px; font-weight: 600; }
.clinical-figure:has([data-zones-toggle]:checked) .zones-legend, .zones-legend.is-shown { display: block; }
.zones-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; font-weight: 600; }
.dialog-image { position: relative; }
/* Lot 3: annotations. One is caught by its stroke, widened: inside a circle, the pointer still masks, marks or picks a
   zone. */
.retouche-hit { fill: none; stroke: transparent; pointer-events: stroke; }
/* An asterisk or a marker without its disc is taken anywhere within its round. */
.retouche-hit.is-area { pointer-events: all; }
/* What the editor draws over the image, in the image's own pixels (the overlay's world). Objects of another mode show,
   and let the pointer through. */
.is-passive, .is-passive * { pointer-events: none; }
.retouche-mask { fill: url(#retouche-hatch); }
.retouche-hatch-line { stroke: rgba(255, 255, 255, .2); }
.retouche-shape { cursor: move; }
.retouche-shape:focus { outline: none; }
.retouche-mask-edge { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.retouche-outline, .retouche-outline-under, .retouche-focus, .retouche-focus-under { fill: none; stroke: none; vector-effect: non-scaling-stroke; pointer-events: none; }
.retouche-shape.is-selected .retouche-outline-under { stroke: #0b0f12; stroke-width: 4; }
.retouche-shape.is-selected .retouche-outline { stroke: #ffffff; stroke-width: 2; stroke-dasharray: 5 3; }
.retouche-shape:focus-visible .retouche-focus-under { stroke: #0b0f12; stroke-width: 5; }
.retouche-shape:focus-visible .retouche-focus { stroke: #ffd34d; stroke-width: 2; }
/* A handle, and around it its invisible target (lot B, RET-08); taken by a click, it waits in the site's colour for
   the next one; held by the keyboard, the one that has the focus is yellow. */
.retouche-handle { fill: #fff; stroke: #0b0f12; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.retouche-handle-hit { fill: transparent; stroke: none; }
.retouche-grip { cursor: nwse-resize; }
.retouche-grip:is([data-handle="ne"], [data-handle="sw"]) { cursor: nesw-resize; }
.retouche-grip:is([data-handle="n"], [data-handle="s"]) { cursor: ns-resize; }
.retouche-grip:is([data-handle="e"], [data-handle="w"]) { cursor: ew-resize; }
.retouche-grip:is([data-handle="a"], [data-handle="b"]) { cursor: crosshair; }
[data-grips-for="quad"] .retouche-grip { cursor: move; }
.retouche-grip:focus { outline: none; }
/* Focused or taken, a handle gets a ring in two tones, not a colour alone (C40): yellow when the keyboard holds it,
   teal and dashed when a click took it. */
.retouche-grip-ring, .retouche-grip-ring-under { fill: none; stroke: none; vector-effect: non-scaling-stroke; pointer-events: none; }
.retouche-grip:is(:focus-visible, .is-armed) .retouche-grip-ring-under { stroke: #0b0f12; stroke-width: 5; }
.retouche-grip:focus-visible .retouche-grip-ring { stroke: #ffd34d; stroke-width: 2.5; }
.retouche-grip.is-armed .retouche-grip-ring { stroke: #6cd4c8; stroke-width: 2.5; stroke-dasharray: 4 3; }
.retouche-grip:focus-visible .retouche-handle { fill: #ffd34d; }
.retouche-grip.is-armed .retouche-handle { fill: #6cd4c8; }
/* The origin of an arrow or a circle laid by a first click: yellow over a dark line. */
.retouche-origin, .retouche-origin-under { fill: none; vector-effect: non-scaling-stroke; pointer-events: none; }
.retouche-origin-under { stroke: #0b0f12; stroke-width: 5; }
.retouche-origin { stroke: #ffd34d; stroke-width: 2; }
.retouche-shade { fill: rgba(0, 0, 0, .55); fill-rule: evenodd; pointer-events: none; }
.retouche-frame-under { fill: none; stroke: #0b0f12; stroke-width: 3.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.retouche-frame { fill: none; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.retouche-frame-grid { stroke: rgba(255, 255, 255, .45); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.retouche-crop-move { fill: transparent; cursor: move; }
/* « Voir »: where to look, a moment. */
.retouche-flash { fill: none; stroke: #ffd34d; stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .retouche-flash { animation: retouche-flash 1.4s ease-out forwards; } }
@keyframes retouche-flash { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }

/* A phone: the whole screen, the image first, the modes at the bottom within the thumb's reach and the screen's safe
   areas; « Terminé » brings the choices up from the bottom (§5.9). Targets of 44 pixels. */
.retouche:not([data-layout="wide"]) { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.retouche:not([data-layout="wide"]) .retouche-bar { gap: 6px; padding: 4px 4px 4px 12px; }
.retouche:not([data-layout="wide"]) .retouche-bar h2 { font-size: 15px; }
.retouche:not([data-layout="wide"]) .retouche-file { display: none; }
.retouche:not([data-layout="wide"]) .retouche-close { min-height: 44px; }
.retouche:not([data-layout="wide"]) .retouche-history { gap: 0; padding: 4px 8px 4px 0; }
.retouche:not([data-layout="wide"]) .retouche-icon { width: 44px; height: 44px; }
.retouche:not([data-layout="wide"]) .retouche-help-button { width: 44px; height: 44px; margin: 0; border-color: transparent; }
.retouche:not([data-layout="wide"]) .retouche-help-button span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--control-line); border-radius: 50%; }
.retouche:not([data-layout="wide"]) .retouche-finish { display: inline-flex; min-height: 44px; margin-left: 4px; padding: 8px 14px; font-size: 13px; }
.retouche:not([data-layout="wide"]) .retouche-modes { justify-self: stretch; display: grid; gap: 0; padding: 0; border: 0; border-radius: 0; background: var(--surface); }
.retouche:not([data-layout="wide"]) .retouche-modes [role="tab"] { flex-direction: column; justify-content: center; gap: 3px; min-height: 56px; padding: 6px 4px; border-radius: 0; font-size: 11px; }
.retouche:not([data-layout="wide"]) .retouche-modes [role="tab"][aria-selected="true"] { background: transparent; color: var(--cyan); box-shadow: none; }
.retouche:not([data-layout="wide"]) .retouche-modes svg { width: 22px; height: 22px; }
.retouche:not([data-layout="wide"]) .retouche-badge { position: absolute; top: 5px; left: calc(50% + 7px); }
.retouche:not([data-layout="wide"]) .retouche-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 0; }
.retouche:not([data-layout="wide"]) .retouche-head > * { flex: none; max-width: 100%; }
/* A row of commands wraps rather than leaving the screen. */
.retouche:not([data-layout="wide"]) .retouche-quick { flex: 1 1 100%; min-width: 0; }
.retouche:not([data-layout="wide"]) .retouche-head .retouche-range { flex: 1 1 100%; }
/* Cadrer on a phone (lot C): the quarter turns as icons, which keep their names, beside « Perspective »; the
   straightening on one line, its value at the end. */
.retouche:not([data-layout="wide"]) [data-mode-panel="crop"] .retouche-quick { flex: 0 1 auto; }
.retouche:not([data-layout="wide"]) [data-editor-action="perspective-remove"] { display: inline-flex; align-items: center; min-height: 44px; }
.retouche:not([data-layout="wide"]) [data-mode-panel="crop"] .retouche-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.retouche:not([data-layout="wide"]) [data-mode-panel="crop"] [data-editor-action^="rotate"] { min-width: 44px; padding-inline: 11px; justify-content: center; }
.retouche:not([data-layout="wide"]) .retouche-tilt { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "label input value"; }
.retouche:not([data-layout="wide"]) .retouche-tilt label { grid-area: label; }
.retouche:not([data-layout="wide"]) .retouche-tilt input { grid-area: input; }
.retouche:not([data-layout="wide"]) .retouche-tilt .retouche-value { grid-area: value; min-width: 5ch; }
.retouche:not([data-layout="wide"]) .retouche-pending, .retouche:not([data-layout="wide"]) .retouche-warn { flex: 1 1 100%; }
.retouche:not([data-layout="wide"]) .retouche-label { display: none; }
.retouche:not([data-layout="wide"]) .retouche-chips { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.retouche:not([data-layout="wide"]) .retouche-chips [role="radio"], .retouche:not([data-layout="wide"]) .retouche-head .button { min-height: 40px; flex: none; }
.retouche:not([data-layout="wide"]) .retouche-tools { flex: 1 1 100%; }
.retouche:not([data-layout="wide"]) .retouche-tools { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Annoter on a phone: the colours, wider with « Auto », after the button that unfolds the list, which then sits beside
   « Ajouter… » rather than on a line of its own. */
.retouche:not([data-layout="wide"]) [data-mode-panel="annotate"] [data-editor-colours] { order: 2; flex-wrap: wrap; overflow: visible; }
/* A lying phone's panel is narrow: the tools as beside the image, in two rows. */
.retouche[data-layout="landscape"] .retouche-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 380px) { .retouche:not([data-layout="wide"]) [data-mode-panel="annotate"] .retouche-tools [role="radio"] { padding-inline: 1px; font-size: 10px; letter-spacing: -0.1px; } }
/* A marker's disc, in its list. */
.retouche-disc { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; cursor: pointer; }
.retouche-disc input { margin: 0; }
@media (pointer: coarse) { .retouche-disc { min-height: 40px; } }
.retouche:not([data-layout="wide"]) .retouche-tools [role="radio"] { min-height: 52px; padding: 6px 2px; font-size: 11px; }
.retouche:not([data-layout="wide"]) .retouche-more-toggle { display: inline-flex; align-items: center; min-height: 40px; margin-left: auto; }
.retouche:not([data-layout="wide"]) .retouche-more-toggle::after { content: "▴"; margin-left: 6px; }
.retouche[data-more="open"]:not([data-layout="wide"]) .retouche-more-toggle::after { content: "▾"; }
.retouche:not([data-layout="wide"]):not([data-more="open"]) .retouche-more { display: none; }
.retouche:not([data-layout="wide"]) .retouche-more { flex: none; max-height: 42dvh; padding-top: 4px; border-top: 1px solid var(--line); }
.retouche:not([data-layout="wide"]) .retouche-panel { border-left: 0; }
.retouche:not([data-layout="wide"]) .retouche-view { left: 8px; right: 8px; bottom: 8px; }
.retouche:not([data-layout="wide"]) :is(.retouche-compare, .retouche-zoom) { min-height: 44px; border-radius: 22px; }
.retouche:not([data-layout="wide"]) .retouche-fit { min-height: 44px; border-radius: 0 22px 22px 0; }
/* Touched with a finger, a list's commands are tall enough to aim at. */
@media (pointer: coarse) { .retouche-item-actions .link-button { display: inline-flex; align-items: center; min-height: 40px; } }
/* Two fingers zoom on a phone: the bar keeps the level and « Ajuster », as an icon. */
.retouche:not([data-layout="wide"]) .retouche-zoom :is([data-editor-action="zoom-in"], [data-editor-action="zoom-out"]) { display: none; }
.retouche:not([data-layout="wide"]) .retouche-fit { padding: 0 14px; }
.retouche:not([data-layout="wide"]) .retouche-fit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.retouche:not([data-layout="wide"]) .retouche-zoom-level { min-width: 3.6em; padding-left: 6px; }
/* A change of layout moves things at once. */
.retouche.is-settling, .retouche.is-settling * { transition: none !important; }
.retouche:not([data-layout="wide"]) .retouche-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
/* The choices, from the bottom, over a dimmed editor. */
.retouche:not([data-layout="wide"]) .retouche-blocked { position: static; width: auto; height: auto; clip: auto; color: var(--muted-strong); font-size: 12px; }
.retouche:not([data-layout="wide"]) .retouche-footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .35); visibility: hidden; transform: translateY(100%); }
@media (prefers-reduced-motion: no-preference) { .retouche:not([data-layout="wide"]) .retouche-footer { transition: transform .2s ease, visibility 0s linear .2s; } }
.retouche[data-sheet="done"]:not([data-layout="wide"]) .retouche-footer { visibility: visible; transform: none; transition-delay: 0s; }
.retouche[data-sheet="done"]:not([data-layout="wide"])::after { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, .5); }
.retouche:not([data-layout="wide"]) .retouche-footer .actions { flex-direction: column; align-items: stretch; margin: 0; }
.retouche:not([data-layout="wide"]) .retouche-footer .button { width: 100%; min-height: 48px; font-size: 14px; }
.retouche:not([data-layout="wide"]) .retouche-explain { display: block; order: 2; }
.retouche:not([data-layout="wide"]) :is(.retouche-blocked, .retouche-burn, .retouche-rest) { order: 3; justify-content: flex-start; text-align: left; }
.retouche:not([data-layout="wide"]) .retouche-reset { order: 4; align-self: flex-start; min-height: 44px; }
/* Back to the image, without choosing; a touch above the choices does the same. */
.retouche:not([data-layout="wide"]) .retouche-continue { display: inline-flex; order: 5; align-self: center; align-items: center; min-height: 44px; font-size: 14px; }
/* A file the browser cannot open: its message and its choices, in place. */
.retouche[data-unreadable] :is(.retouche-modes, .retouche-history) { visibility: hidden; }
.retouche[data-unreadable] .retouche-footer { grid-area: body !important; position: static !important; align-self: start; visibility: visible !important; transform: none !important; box-shadow: none; border-top: 0; background: transparent; }
.retouche[data-unreadable] .retouche-footer .actions { margin: 0; }
.retouche[data-unreadable] .retouche-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.retouche[data-unreadable]::after { content: none !important; }
.retouche[data-unreadable] .retouche-continue { display: none; }
/* Upright: the image, the panel's first commands, then the modes. */
.retouche[data-layout="portrait"] { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(min-content, 1fr) auto; grid-template-areas: "bar history" "notice notice" "body body" "modes modes"; }
/* Very low, as at 400 % on a computer, the editor scrolls rather than leave the image no room; the choices of
   « Terminé », out of the layout until they are asked for, add nothing to scroll. */
.retouche[data-tight] { overflow-y: auto; }
.retouche[data-tight] .retouche-stage { min-height: 200px; }
.retouche[data-tight]:not([data-sheet="done"]):not([data-unreadable]) .retouche-footer { display: none; }
.retouche[data-layout="portrait"] .retouche-modes { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.retouche[data-layout="portrait"] .retouche-body { display: flex; flex-direction: column; }
.retouche[data-layout="portrait"] .retouche-stage { flex: 1; }
.retouche[data-layout="portrait"] .retouche-panel { flex: none; border-top: 1px solid var(--line); }
/* Lying: the panel to the left, the image, the modes down the right side. */
.retouche[data-layout="landscape"] { grid-template-columns: minmax(0, 1fr) 76px; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "bar bar" "notice notice" "body modes"; }
/* The header's commands share its row with the title, whose room they leave. */
.retouche[data-layout="landscape"] .retouche-history { grid-area: bar; justify-self: end; }
.retouche[data-layout="landscape"] .retouche-bar { padding-right: 244px; }
.retouche[data-layout="landscape"] .retouche-modes { align-self: stretch; align-content: center; grid-auto-rows: minmax(52px, auto); border-left: 1px solid var(--line); }
.retouche[data-layout="landscape"] .retouche-modes [role="tab"] { min-height: 52px; }
.retouche[data-layout="landscape"] .retouche-body { grid-template-columns: 252px minmax(0, 1fr); }
.retouche[data-layout="landscape"] .retouche-panel { order: -1; border-right: 1px solid var(--line); overflow-y: auto; }
.retouche[data-layout="landscape"] .retouche-head { padding: 10px; }
.retouche[data-layout="landscape"] .retouche-more { display: block !important; max-height: none; overflow: visible; }
.retouche[data-layout="landscape"] .retouche-more-toggle { display: none; }
.retouche[data-layout="landscape"] .retouche-footer .actions { flex-direction: row; flex-wrap: wrap; }
.retouche[data-layout="landscape"] .retouche-footer .button { flex: 1 1 200px; width: auto; }
@media (forced-colors: active) {
  .retouche-zone, .retouche-zone-under, .retouche-mask-edge, .retouche-frame, .retouche-shape.is-selected .retouche-outline { stroke: CanvasText; }
  .retouche-shape:focus-visible .retouche-focus, .retouche-flash { stroke: Highlight; }
  .retouche-handle { fill: Canvas; stroke: CanvasText; }
  .retouche-grip:is(:focus-visible, .is-armed) .retouche-grip-ring, .retouche-origin { stroke: Highlight; }
  .retouche-modes [role="tab"][aria-selected="true"], .retouche-chips [role="radio"][aria-checked="true"], .retouche-tools [role="radio"][aria-checked="true"] { outline: 2px solid Highlight; }
  .retouche-badge.is-dot, .retouche-badge.is-count { background: Highlight; color: HighlightText; }
}
/* A masked figure says so to its readers (decision I10). */
.figure-masked { margin: 6px 0 0; color: var(--muted); font-size: 12px; }