/* Ébauche de terminal inspirée des captures fournies.
   Les images et couleurs personnalisées se règlent dans assets/custom.css. */
:root {
  color-scheme: light;
  --bg: #b9bcb5;
  --panel: #a6aaa3;
  --line: #757e76;
  --text: #252d29;
  --muted: #48544d;
  --red: #712335;
  --accent: #742839;
  --ok: #304a37;
  --desktop-image: none;
  --window-image: none;
  --logo-image: none;
  --portrait-image: none;
  font-family: 'Lucida Console', 'Courier New', monospace;
  font-size: 16px;
}
html {
  min-height: 100%;
  background-color: #080e10;
  background-image: var(--desktop-image), radial-gradient(ellipse at center, #15383b 0%, #091719 64%, #030707 100%);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
body {
  position: relative;
  margin: 5vh auto;
  width: min(1500px, 94%);
  border: 3px solid #303e39;
  outline: 2px solid #0d1413;
  box-shadow: 0 0 0 5px #5e6c5b55, 0 0 45px #337f8044;
  background-color: var(--bg);
  background-image: var(--window-image), repeating-linear-gradient(0deg, #ffffff04 0 1px, #192b2304 1px 2px);
  background-size: cover, auto;
  min-height: 88vh;
}
button,input,select,textarea {font-family: inherit;}
button {
  border: 2px solid;
  border-color: #e2e4dc #606c61 #606c61 #e2e4dc;
  background: #aeb3a9;
  color: var(--text);
  box-shadow: 1px 1px 0 #737d73;
  padding: .6rem .85rem;
  letter-spacing: 0;
}
button:hover {background: #c3c8bc;border-color: #edf0e6 #606c61 #606c61 #edf0e6;}
button:active {border-color: #606c61 #e2e4dc #e2e4dc #606c61;box-shadow: none;}
button.primary {background: #bbc1b3;color: #202b24;border: 2px solid;border-color: #eef0e8 #596658 #596658 #eef0e8;font-weight: normal;}
button.primary:hover {background: #d1d6c8;}
:focus-visible {outline: 2px dashed #4a5b4c;outline-offset: 3px;}
.masthead {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  height: 38px;
  padding: 0;
  gap: 10px;
  background: #712b3d;
  border: 2px solid;
  border-color: #a66571 #472e35 #472e35 #a66571;
  color: #d4c7c5;
  font-family: inherit;
  letter-spacing: .025em;
}
.masthead a {
  width: 34px;height: 32px;flex-shrink: 0;
  display: grid;place-items: center;
  background: #939b8f;color: #202d24;
  border: 2px solid;border-color: #c8cec0 #4a584a #4a584a #c8cec0;
  font: bold 28px/1 'Courier New', monospace;
}
.terminal-title {text-align: center;font-size: 1rem;line-height:1.2;letter-spacing:.025em;}
.terminal-version {font-size: .75rem;padding-right: 12px;}
h1,h2,h3 {font-family: inherit;font-weight: normal;letter-spacing: -.04em;}
h1 {font-size: clamp(1.65rem, 3.5vw, 3rem);line-height: 1.25;}
h2 {font-size: 1.45rem;line-height: 1.35;}
p {line-height: 1.55;}
.eyebrow,.mono,.identifier,.status {font-family: inherit;}
.eyebrow {letter-spacing: .025em;color: var(--muted);}
.landing {max-width: 900px;text-align: center;margin: 5vh auto;padding: 32px;}
.landing:before {content: none;display: none;}
.record-home {min-height:65vh;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.landing h1,.landing .intro {margin-left: auto;margin-right: auto;}
.landing .intro {color: var(--text);}
.landing .actions {justify-content: center;}
.landing .actions button {padding: .8rem;}
.bottom-note {border-top: 2px groove #d8ddd0;margin-top: 45px;letter-spacing: 0;font-size: .75rem;}
.class-card {background: #a8afa4;min-height: 175px;padding: 24px;}
.class-card span {font-family: inherit;color: var(--text);font-size: .9rem;}
.workspace {height: calc(90dvh - 44px);min-height: 540px;grid-template-columns: 245px minmax(260px, 1fr) 265px;gap: 0;}
.nav {border: 0;padding: 22px 16px 20px 20px;}
.nav-caption {background: #979f94;border: 1px solid #879080;padding: 12px 8px;font-size: .85rem;margin-bottom: 15px;line-height: 1.2;}
.nav > button {position: relative;margin: 0 0 0 16px;padding: 17px 8px 17px 25px;border: 0;border-left: 2px solid #768776;background: transparent;box-shadow: none;font-size: .95rem;}
.nav > button:before {content: '';position: absolute;left: -5px;top: 24px;width: 7px;height: 7px;background: #86505b;border: 1px solid #5e4346;}
.nav > button:after {content: '';position: absolute;left: 3px;top: 28px;width: 17px;border-top: 2px solid #768776;}
.nav > button[aria-current=step] {background: #c2c8b9;border-left-color: #768776;outline: 2px dashed #61735f;outline-offset: -7px;}
.nav > button:hover {background: #c7ccbf;}
.step-index {display: none;}
.nav-summary {padding: 25px 3px 0;}
.progress {height: 9px;border: 1px inset #83917e;background: #a4ad9b;}
.progress span {background: #6e805f;}
.nav-summary button {margin: 6px 0 0;border: 2px outset #bfc6b6;padding: 8px 12px;background: #b0b9a7;}
.center {
  margin: 22px 0 18px;padding: 18px 22px 35px;
  border: 2px solid;border-color: #7a8779 #dce0d3 #dce0d3 #7a8779;
  background-color: #a9b0a5;
  background-image: repeating-conic-gradient(#ffffff08 0% 25%, #263c2607 0% 50%);
  background-size: 4px 4px;
  scrollbar-color: #7f8d78 #bcc5b4;
}
.section-head {border-bottom: 1px solid #7b8775;padding-bottom: 15px;margin-bottom: 20px;}
.section-head .eyebrow {margin-bottom: 10px;}
.section-head h2 {margin-bottom: 12px;}
.fields {gap: 19px 16px;}
.field {gap: 7px;}
.field label {color: var(--text);}
input,select,textarea {
  background: #c9cec2;color: #202b24;
  border: 2px solid;border-color: #7e8a79 #e0e5d8 #e0e5d8 #7e8a79;
  padding: 9px 10px;line-height: 1.45;
}
input:focus,select:focus,textarea:focus {background: #d3d8ca;border-color: #65785e #eaf0df #eaf0df #65785e;}
[aria-invalid=true] {border-left-color: var(--accent);}
.error,.review-errors {color: #742233;}
.auto-panel {background: #b4bdae;border: 2px groove #d2daca;padding: 17px;}
.auto-panel h3 {font-family: inherit;color: var(--accent);}
.identifier {font-size: 1.4rem;letter-spacing: 0;}
.side {border: 0;background: transparent;padding: 22px 20px 20px;}
.portrait {aspect-ratio: 3/4;max-height: 260px;width: 100%;background-color: #969f91;background-image: var(--portrait-image);background-size: cover;background-position: center;border: 2px inset #acb6a1;color: #303e30;font-family: inherit;text-align: center;line-height: 1.7;letter-spacing: 0;}
.portrait-actions {margin: 10px 0 18px;flex-wrap: wrap;}
.portrait-actions button {font-size: .75rem;}
.record-info {border-top: 0;padding: 0 0 20px;text-align: center;line-height: 1.7;color: var(--text);}
.lore {border-top: 2px groove #d2daca;padding-top: 16px;}
.lore .eyebrow {background: #939f8d;color: #23311f;padding: 7px;margin-bottom: 12px;}
.lore p {font-size: .875rem;line-height: 1.55;}
.lore summary {color: #612c39;}
.footer {border-top: 2px groove #d8ddd0;background: transparent;padding: 12px 18px;gap: 10px;}
.save-status {font-size: .75rem;}
.review-row {border-bottom: 1px solid #7a8774;padding: 16px 0;}
.review-preview details {border: 2px groove #d9e0d0;background: #b6c0ab;}
.status {color: #2a4c2a;}
.status.incomplete {color: #75283a;}
dialog {background: var(--bg);border: 3px outset #c2c9b9;font-family: inherit;}
.dialog-head {background: var(--accent);color: #e0d5d5;padding: 8px 10px;}
.dialog-head h2 {font-size: 1.3rem;}
.draft small {color: #465440;}
#notice {background: #ccd3c1;color: #25351f;border: 2px outset #e0e7d4;box-shadow: 4px 4px 0 #22302066;font-family: inherit;bottom: 100px;}
@media(min-width:1600px){.workspace{grid-template-columns:280px minmax(320px,1fr) 300px}.center{padding:22px 30px}}
@media(max-width:1100px){.workspace{grid-template-columns:200px minmax(240px,1fr) 225px}.nav{padding-left:12px}.center{padding:16px}.side{padding:22px 14px}.fields{grid-template-columns:1fr}}
@media(max-width:850px){
  body{width:96%;margin:2vh auto;min-height:96vh}
  .terminal-version{display:none}.terminal-title{font-size:1rem}
  .workspace{height:auto;min-height:0;display:flex;flex-direction:column}
  .nav{flex-direction:row;flex-wrap:wrap;padding:12px;gap:6px;border-bottom:2px groove #d8ddd0;overflow:visible}
  .nav-caption,.nav-summary{display:none}
  .nav > button{margin:0;padding:10px 12px;border:1px solid #7f8d77;font-size:.85rem}
  .nav > button:before,.nav > button:after{display:none}
  .nav > button[aria-current=step]{outline-offset:-4px}
  .center{margin:14px;padding:18px;overflow:visible}
  .side{border-top:2px groove #d8ddd0;display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;overflow:visible}
  .portrait-area{grid-row:1/3}.lore{grid-column:2}.record-info{text-align:left;padding-bottom:0}
  .footer{position:sticky;bottom:0;background:var(--bg);z-index:2;gap:7px;padding:10px}
  .footer button{padding:9px 8px;font-size:.75rem}.save-status{flex-basis:100%;order:3}
  .landing{padding:24px 18px}.landing .actions button{min-width:180px}
}
@media(max-width:460px){.side{display:block}.portrait-area{max-width:180px;margin:0 auto 20px}.center{margin:10px;padding:14px}.fields{grid-template-columns:1fr}.terminal-title{font-size:.85rem}.bottom-note{flex-direction:column;gap:8px}.class-card{padding:18px}.record-info{text-align:center}.review-row{gap:8px}.review-row button{padding:8px;font-size:.75rem}}

/* Parcours guidé : hiérarchie de lecture et commandes de progression. */
.editing .workspace{grid-template-columns:215px minmax(300px,1fr) 275px}
.editing .center{background-image:none;background-color:#bcc2b6;padding:20px 28px}
.editing .section-head{margin-bottom:22px;border:0;padding-bottom:0}
.editing .section-head h2{font-size:1.25rem;margin-bottom:14px}
.step-instruction{background:#e0e4d8;border-left:5px solid #6c3541;padding:12px 14px;margin:0;font-size:1rem;line-height:1.55;color:#24301f}
.draft-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
.draft-actions .danger{color:#712335}
@media(max-width:560px){.draft{align-items:flex-start;flex-direction:column}.draft-actions{width:100%}.draft-actions button{flex:1}}
.field-group{min-width:0;margin:0 0 24px;padding:18px 16px 20px;border:1px solid #899681;background:#c7cdbf}
.field-group legend{padding:0 8px;font-size:.95rem;font-weight:bold;color:#263522}
.field-hint{font-size:.875rem;line-height:1.45;color:#36452f;margin:0;letter-spacing:0;font-family:Arial,Helvetica,sans-serif}
.editing .field label{font-size:1rem;font-weight:bold}
.editing .field{gap:8px}
.editing input,.editing select,.editing textarea{background:#eef0e7}
.editing input:focus,.editing select:focus,.editing textarea:focus{background:#fffdf4;outline:2px solid #6f3b48;outline-offset:1px}
.editing .fields{column-gap:22px;row-gap:22px}
.step-state{display:block;font-size:.7rem;margin-top:7px;color:#4e5a47}
.editing .nav > button{font-size:.875rem;padding-top:14px;padding-bottom:14px}
.editing .nav > button:disabled{opacity:.65;cursor:not-allowed;background:transparent;outline:0}
.editing .nav > button:disabled:before{background:#939c8b}
.editing .nav > button[aria-current=step]{background:#d7ddcd}
.editing .side{background:#b3bbab;display:flex;flex-direction:column;gap:22px}
.editing .lore{border-top:0;padding-top:0;order:0}
.editing .lore .eyebrow{font-size:.75rem;background:none;padding:0;color:#4f5c47}
.editing .lore h3{font-size:1rem}
.editing .lore p{font-family:Arial,Helvetica,sans-serif;line-height:1.6;color:#35422e}
.editing .lore .muted{font-size:.75rem;color:#59654f}
.source-link{display:block;color:#602839;text-decoration:underline;text-underline-offset:3px;font-size:.875rem;line-height:1.5;margin:14px 0;font-weight:bold}
.portrait-section{border-top:1px solid #8b9880;padding-top:16px;order:1}
.portrait-section summary{cursor:pointer;font-size:.875rem;color:#4c5945}
.portrait-section .portrait-area{max-width:150px;margin-top:14px}
.editing .record-info{font-size:.75rem;text-align:left;color:#5b6653;order:2}
.editing .footer{display:grid;grid-template-columns:1fr auto;gap:8px 18px;background:#c8cfc0;border-top:2px groove #e4e8dd}
.secondary-actions,.journey-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.secondary-actions button{font-size:.7rem;padding:8px}
.journey-actions button{min-height:48px;padding:12px 20px;font-size:1rem;font-weight:bold}
.journey-actions button.primary{background:#712b3d;color:#faf3ed;border-color:#b8828d #481825 #481825 #b8828d;box-shadow:2px 2px 0 #64594f}
.journey-actions button.primary:hover{background:#87394b}
.editing .save-status{grid-column:1/-1;font-size:.7rem;max-width:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.inline-portrait{margin-top:28px;padding-top:20px;border-top:1px solid #899681}
.inline-portrait .portrait-area{max-width:180px;margin-top:14px}
.inline-portrait .portrait{max-height:220px}
.review-portrait{margin:20px 0}
.review-portrait img{display:block;max-width:180px;max-height:240px;object-fit:contain}
.review-portrait figcaption{font-size:.8rem;margin-top:8px}
.editing .lore{background:#d4dacd;border:2px solid;border-color:#edf0e7 #87927e #87927e #edf0e7;padding:16px}
.editing .lore .eyebrow{font-size:.8rem;font-weight:bold;letter-spacing:.03em;color:#30412c;border-bottom:1px solid #8c9981;padding-bottom:12px;margin-bottom:16px}
.editing .lore h3{font-weight:bold;line-height:1.4}
.editing .lore p{font-size:.95rem;color:#283922}
.editing .lore .source-link{background:#e7ebdf;border:1px solid #87977b;padding:10px;color:#31472b;font-family:Arial,Helvetica,sans-serif}
.origin-cues{border:2px groove #dfe6d6;background:#dbe2d1;padding:16px;margin:0 0 24px}
.origin-cues h3{font-weight:bold;margin:0 0 10px}
.origin-cues p{font-family:Arial,Helvetica,sans-serif;font-size:1rem;margin-bottom:10px;line-height:1.5}
.origin-cues .cue-note{font-size:.875rem;color:#42543a}
.origin-cues .source-link{margin-bottom:0;color:#31472b}
@media(max-width:1100px){.editing .workspace{grid-template-columns:185px minmax(240px,1fr) 225px}.editing .center{padding:18px}.journey-actions button{padding:12px;font-size:.875rem}}
@media(max-width:850px){.editing .workspace{display:flex}.editing .side{display:flex}.editing .center{padding:16px}.editing .footer{display:flex;flex-wrap:wrap}.journey-actions{order:0;width:100%;justify-content:space-between}.secondary-actions{order:1}.editing .save-status{order:2}.editing .nav > button{padding:10px;font-size:.8rem}.step-state{font-size:.65rem}.field-group{padding:14px 12px}.editing .record-info{text-align:left}}