/* Aucun vert : teintes limitées au bleu (≈ 212°), à l'orange (≈ 24°), au rouge (≈ 355°) et aux gris bleutés. */
:root {
  --fond: #14181f; --panneau: #1c222c; --bord: #2c3442; --texte: #e6eaf0; --discret: #8f9bad;
  --bleu: #4aa3ff; --orange: #ff8a2a; --rouge: #ff4d5e; --ciel: #c9d3e0;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.4 system-ui, "Segoe UI", sans-serif; background: var(--fond); color: var(--texte); display: flex; flex-direction: column; }
header { display: flex; align-items: baseline; gap: 1.5rem; padding: .5rem 1rem; border-bottom: 1px solid var(--bord); background: var(--panneau); }
h1 { font-size: 1.05rem; margin: 0; }
h1 span { color: var(--discret); font-weight: 400; font-size: .85rem; margin-left: .5rem; }
#entete-infos { color: var(--discret); flex: 1; font-size: .85rem; }
#entete-infos b.ok { color: var(--bleu); } #entete-infos b.ko { color: var(--rouge); }
nav a { color: var(--bleu); margin-left: .8rem; font-size: .85rem; }
main { flex: 1; display: grid; grid-template-columns: 290px 1fr 330px; min-height: 0; }
aside { overflow-y: auto; background: var(--panneau); padding: .2rem .8rem 1rem; }
#gauche { border-right: 1px solid var(--bord); } #droite { border-left: 1px solid var(--bord); }
h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--discret); margin: 1rem 0 .4rem; display: flex; justify-content: space-between; align-items: center; }
h3 { font-size: .78rem; color: var(--discret); margin: .6rem 0 .2rem; font-weight: 600; }
button, select { font: inherit; color: var(--texte); background: #252d3a; border: 1px solid var(--bord); border-radius: 5px; padding: .3rem .55rem; cursor: pointer; }
button:hover { border-color: var(--bleu); }
button.actif { background: #1d3a5c; border-color: var(--bleu); }
button.petit { font-size: .75rem; padding: .1rem .45rem; text-transform: none; letter-spacing: 0; }
.liste { display: flex; flex-direction: column; gap: .25rem; }
.liste button, #pieces button { text-align: left; display: flex; justify-content: space-between; gap: .5rem; width: 100%; margin-bottom: .25rem; }
.liste button small, #pieces button small { color: var(--discret); white-space: nowrap; }
.ligne { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .5rem 0; color: var(--discret); }
.ligne.colonne { flex-direction: column; align-items: stretch; gap: .25rem; }
select { width: 100%; min-width: 0; }
.segments { display: inline-flex; }
#rotations button { flex: 1; }
.segments button { border-radius: 0; margin-left: -1px; padding: .25rem .5rem; }
.segments button:first-child { border-radius: 5px 0 0 5px; margin-left: 0; } .segments button:last-child { border-radius: 0 5px 5px 0; }
.aide { color: var(--discret); font-size: .8rem; margin: .4rem 0 0; }
kbd { background: #252d3a; border: 1px solid var(--bord); border-radius: 3px; padding: 0 .3rem; font-size: .75rem; }
.grille-essais { display: grid; grid-template-columns: repeat(2, 1fr); gap: .25rem; }
.grille-essais button { font-size: .78rem; text-align: left; padding: .2rem .4rem; }
.grille-essais button.conforme { border-left: 3px solid var(--bleu); } .grille-essais button.ecart { border-left: 3px solid var(--rouge); }

#vue { position: relative; min-width: 0; min-height: 0; background: var(--ciel); }
#scene { width: 100%; height: 100%; display: block; }
#outils { position: absolute; top: .6rem; left: .6rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; background: rgba(20, 24, 31, .82); padding: .4rem .6rem; border-radius: 6px; font-size: .82rem; max-width: calc(100% - 1.2rem); }
#outils label { display: flex; align-items: center; gap: .3rem; cursor: pointer; }
#outils input { accent-color: var(--bleu); }
#verdict { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; padding: .55rem .8rem; border-radius: 6px; background: rgba(20, 24, 31, .9); border-left: 5px solid var(--discret); font-size: .95rem; }
#verdict.ok { border-left-color: var(--bleu); } #verdict.refus { border-left-color: var(--rouge); }
#verdict b { text-transform: uppercase; font-size: .78rem; letter-spacing: .05em; margin-right: .5rem; }
#verdict.ok b { color: var(--bleu); } #verdict.refus b { color: var(--rouge); }

#prises button { align-items: center; }
#prises .etat { font-size: .75rem; color: var(--discret); }
#prises button.ok { border-left: 3px solid var(--bleu); } #prises button.refus { border-left: 3px solid var(--rouge); }
#prises button.refus .etat { color: var(--rouge); } #prises button.ok .etat { color: var(--bleu); }
#prises button.prise-occupee { opacity: .6; }
#poses { padding-left: 1.4rem; margin: 0; }
#poses li { margin-bottom: .15rem; } #poses .pose { display: flex; justify-content: space-between; align-items: start; gap: .5rem; }
#poses li:hover { color: var(--orange); }
#bilan { color: var(--discret); font-size: .82rem; margin-top: .5rem; }
#journal { font-size: .8rem; display: flex; flex-direction: column; gap: .35rem; }
#journal div { border-left: 3px solid var(--discret); padding-left: .5rem; }
#journal div.ok { border-left-color: var(--bleu); } #journal div.refus { border-left-color: var(--rouge); }
#journal code { color: var(--discret); }
@media (max-width: 1000px) { main { grid-template-columns: 1fr; grid-template-rows: auto 60vh auto; overflow-y: auto; } aside { overflow: visible; } }