/* Disposition de VS Code, couleurs du site CV. */
.page-lab { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.page-lab .barre { flex: none; position: static; padding-inline: 0.9rem; }
.page-lab .rail, .page-lab .bouton-meet { display: none; }
.lab { --fond: #151829; --barre: #1a1e33; --activite: #0f1120; --texte: #c9cde4; --clair: #ffffff; --ligne: #2a2f4d; --bleu: #5a4bb0; --vert: #a6d189; --rouge: #f28b82;
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; background: var(--fond); color: var(--texte); font-size: 1rem; overflow: hidden; }
.lab button { border: 0; box-shadow: none; }
.lab a { color: #82d6e8; }
.lab :focus-visible { outline: 2px solid #82d6e8; outline-offset: -2px; }
.lab-entete { display: flex; align-items: center; gap: 1rem; padding: 0.4rem 0.9rem; background: var(--activite); color: var(--clair); font-size: 0.875rem; }
.lab-entete a { text-decoration: none; white-space: nowrap; }
.lab-entete a:hover { text-decoration: underline; }
.lab-entete a:last-child { color: var(--doux); }
.lab-entete h1 { font: 400 0.875rem/1.2 "Inter", sans-serif; margin: 0; letter-spacing: 0; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lab-corps { display: grid; grid-template-columns: minmax(19rem, 25rem) minmax(0, 1fr); min-height: 0; }

.consigne { overflow-y: auto; background: var(--barre); border-right: 1px solid var(--ligne); padding: 0.9rem 1rem 1.5rem; line-height: 1.5; }
.liste-titre { font: 400 0.8rem/1.2 "Inter", sans-serif !important; color: var(--texte) !important; margin: 0 0 0.4rem !important; }
.consigne ol { list-style: none; margin: 0 0 1rem; padding: 0; }
.consigne ol button { display: block; width: 100%; text-align: left; font-weight: 400; background: none; color: var(--texte); padding: 0.35rem 0.5rem; border-radius: 3px; }
.consigne ol button:hover { background: #232846; }
.consigne ol button.actif { background: #2b3058; color: var(--clair); }
.consigne ol button.fait::after { content: " ✓"; color: var(--vert); }
.ex-genre { color: var(--vert); font-weight: 700; margin: 0; }
.consigne h2 { font: 700 1.3rem/1.2 "Bricolage", sans-serif; color: var(--clair); margin: 0.1rem 0 0.6rem; }
.consigne code { background: #232846; color: #dfe3f5; padding: 0.05em 0.3em; border-radius: 3px; font-size: 0.9em; }
.consigne summary { cursor: pointer; color: #82d6e8; padding: 0.15rem 0; }
.consigne details p { margin: 0.2rem 0 0.5rem; }
.lab-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.lab button.primaire, .lab button.secondaire { min-height: 2.5rem; padding: 0.4rem 0.8rem; border-radius: var(--rayon-s); font-size: 0.9375rem; }
.lab button.primaire { background: var(--action); color: var(--encre); }
.lab button.primaire:hover { background: #f6d78e; }
.lab button.primaire:disabled { opacity: 0.6; cursor: default; }
.lab button.secondaire { background: #2a2f4d; color: #fff; font-weight: 400; }
.lab button.secondaire:hover { background: #26385a; }

.ide { display: grid; grid-template-columns: 2.75rem 12rem minmax(0, 1fr); min-width: 0; min-height: 0; }
.activite { background: var(--activite); display: flex; justify-content: center; padding-top: 0.7rem; color: var(--clair); }
.explorateur { background: var(--barre); padding: 0.5rem 0; overflow-y: auto; font-size: 0.9rem; }
.explorateur h2 { font: 400 0.8rem/1.2 "Inter", sans-serif; margin: 0 0 0.5rem; padding: 0 0.9rem; }
.explorateur button { display: block; width: 100%; text-align: left; font: inherit; font-family: var(--code); font-size: 0.85rem; background: none; color: var(--texte); padding: 0.2rem 0.9rem; border-radius: 0; }
.explorateur button:hover { background: #232846; }
.explorateur button.actif { background: #2b3058; color: var(--clair); }
.lab button.lecture { color: #9298bc; }
.centre { display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(8rem, 32%); min-width: 0; min-height: 0; }
.onglets { display: flex; overflow-x: auto; background: var(--barre); }
.onglets button { font: inherit; font-size: 0.85rem; font-family: var(--code); background: #1a1e33; color: #9298bc; border-right: 1px solid var(--ligne); border-radius: 0; padding: 0.45rem 0.9rem; white-space: nowrap; }
.onglets button.actif { background: var(--fond); color: var(--clair); box-shadow: inset 0 1px 0 var(--bleu); }
.zone-code { position: relative; min-height: 0; }
#monaco, #diff { position: absolute; inset: 0; }
#chargement { padding: 1rem; }
.panneau { border-top: 1px solid var(--ligne); display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.panneau h2 { font: 400 0.8rem/1.2 "Inter", sans-serif; color: var(--clair); margin: 0; padding: 0.4rem 0.9rem; }
#terminal { overflow-y: auto; padding: 0 0.9rem 0.6rem; font-family: var(--code); font-size: 0.85rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
#terminal div { white-space: pre-wrap; }
#terminal .trace-mission { color: var(--action); font-weight: 600; }
#terminal .trace-client { color: var(--bleu-vif); }
#terminal .trace-modele { color: var(--structure); }
#terminal .trace-outil, #terminal .trace-info { color: #9298bc; }
#terminal .trace-erreur { color: var(--rouge); }
#terminal .reussi { color: var(--vert); }
#terminal .echec { color: var(--rouge); }
#terminal .discret { color: #9298bc; }
#terminal .detail { color: #f0c674; }
.etat { display: flex; gap: 1.2rem; padding: 0.15rem 0.9rem; background: var(--bleu); color: #fff; font-size: 0.85rem; }
.etat span:last-child { margin-left: auto; }

@media (max-width: 40rem) {
  .lab-entete { flex-wrap: wrap; gap: 0.25rem 1rem; }
  .lab-entete h1 { order: 1; flex-basis: 100%; white-space: normal; }
}
@media (max-width: 62rem) {
  .page-lab { height: auto; display: block; overflow: visible; }
  .lab { height: auto; overflow: visible; }
  .lab-corps { display: block; }
  .ide { grid-template-columns: minmax(0, 1fr); }
  .activite, .explorateur { display: none; }
  .centre { grid-template-rows: auto 26rem 16rem; }
}