:root {
  --jaune: #FFD100; --noir: #1a1a1a; --gris: #6b6a64; --bordure: #e4e2da; --fond: #f7f6f1;
  --bleu: #2a5db0; --bleu-clair: #e3ecfa; --jaune-clair: #fff6c7; --rouge: #c8321f; --rouge-clair: #fde3df;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.4 Arial, Helvetica, sans-serif; color: var(--noir); background: var(--fond); }
body { display: flex; flex-direction: column; }
#entete { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--noir); color: #fff; border-bottom: 4px solid var(--jaune); }
#entete strong { font-size: 16px; }
.etat { padding: 2px 10px; border-radius: 12px; font-size: 12px; }
.etat-bleu { background: var(--bleu-clair); color: var(--bleu); }
.etat-jaune { background: var(--jaune-clair); color: #7a5a00; }
.etat-rouge { background: var(--rouge-clair); color: var(--rouge); animation: clignote 1s steps(2) infinite; }
@keyframes clignote { to { opacity: 0.45; } }
main { flex: 1; display: flex; min-height: 0; }
#vue { flex: 1; position: relative; display: flex; flex-direction: column; min-width: 0; background: #ddd; }
#conteneur3d { flex: 1; position: relative; min-height: 240px; }
#conteneur3d canvas { display: block; width: 100% !important; height: 100% !important; }
#etiquettes { position: absolute; inset: 0 0 46px 0; pointer-events: none; display: none; }
.etiquette { position: absolute; transform: translate(8px, -50%); background: rgba(26,26,26,0.85); color: var(--jaune); padding: 2px 6px; border-radius: 4px; font-size: 12px; white-space: nowrap; }
.cadre-insert { position: absolute; border: 3px solid var(--jaune); pointer-events: none; display: none; box-sizing: border-box; }
.cadre-insert .titre, .cadre-insert .consigne { position: absolute; left: 0; right: 0; padding: 3px 8px; background: rgba(26,26,26,0.85); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cadre-insert .titre { top: 0; color: var(--jaune); font-weight: 700; }
.cadre-insert .consigne { bottom: 0; color: #fff; }
.habillage { position: absolute; inset: 0 0 46px 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
.habillage.cache { display: none; }
.bandeau { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 14px; background: rgba(26,26,26,0.85); color: #fff; }
.bandeau.haut { border-bottom: 3px solid var(--jaune); font-weight: 700; }
.bandeau.bas { flex-direction: column; align-items: flex-start; gap: 2px; }
#hCompteur, #hExercice { color: var(--jaune); font-weight: 700; }
#transport { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #fff; border-top: 1px solid var(--bordure); height: 46px; }
#transport button { min-width: 36px; }
#curseur { flex: 1; min-width: 60px; }
#temps { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; color: var(--gris); }
#panneau { width: 340px; overflow-y: auto; background: #fff; border-left: 1px solid var(--bordure); display: flex; flex-direction: column; }
#onglets { display: flex; border-bottom: 1px solid var(--bordure); position: sticky; top: 0; background: #fff; z-index: 2; }
#onglets button { flex: 1; border: 0; background: none; padding: 10px 4px; cursor: pointer; border-bottom: 3px solid transparent; font-size: 13px; }
#onglets button.actif { border-bottom-color: var(--jaune); font-weight: 700; }
.section { display: none; padding: 12px; }
.section.actif { display: block; }
.section h3 { font-size: 13px; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
label { display: block; margin: 6px 0; }
label input[type=text], label input[type=number], label select, label textarea { display: block; width: 100%; margin-top: 2px; padding: 5px 6px; border: 1px solid var(--bordure); border-radius: 4px; font: inherit; }
label input[type=checkbox], label input[type=radio] { margin-right: 6px; }
button, .bouton-fichier { border: 1px solid var(--noir); background: #fff; padding: 5px 10px; border-radius: 4px; cursor: pointer; font: inherit; }
button.principal { background: var(--jaune); font-weight: 700; }
button:disabled { opacity: .5; cursor: default; }
.bouton-fichier { display: inline-block; }
.bouton-fichier input { display: none; }
.boutons { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.liste-clips { display: flex; flex-wrap: wrap; gap: 6px; }
.liste-clips button { font-size: 12px; }
.liste-clips button.haut { border-style: dashed; }
.elements { list-style: none; padding: 0; margin: 0; }
.elements li { border: 1px solid var(--bordure); border-left: 4px solid var(--jaune); border-radius: 4px; padding: 8px; margin: 6px 0; background: var(--fond); }
.elements li.actif { border-left-color: var(--bleu); background: var(--bleu-clair); }
.elements .ligne { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.elements .ligne select, .elements .ligne input { padding: 3px 4px; border: 1px solid var(--bordure); border-radius: 4px; font: inherit; font-size: 12px; }
.elements .ligne input[type=number] { width: 56px; }
.elements .nom { font-weight: 700; }
.elements .outils { float: right; display: flex; gap: 3px; }
.elements .outils button { padding: 1px 6px; font-size: 12px; }
.erreurs:empty { display: none; }
.erreurs { background: var(--rouge-clair); color: var(--rouge); padding: 8px; border-radius: 4px; margin: 8px 0; white-space: pre-line; }
.info { color: var(--gris); font-size: 12px; margin: 6px 0; white-space: pre-line; }
.couleurs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 8px 0; }
.couleurs label { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.couleurs input[type=color] { width: 36px; height: 24px; padding: 0; border: 1px solid var(--bordure); }
.radio { margin: 8px 0; }
.radio label { display: inline-block; margin-right: 10px; }
.vues { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vues button.actif { background: var(--jaune); font-weight: 700; }
.mesures { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mesures td { padding: 3px 4px; border-bottom: 1px solid var(--bordure); }
.mesures td:last-child { text-align: right; font-weight: 700; }
.mesures tr.cible td:last-child::after { content: attr(data-cible); font-weight: 400; color: var(--gris); margin-left: 6px; }
.liens a { display: block; margin: 4px 0; color: var(--bleu); }
.mobile-seul { display: none; margin-left: auto; background: var(--jaune); border: 0; }
@media (max-width: 800px) {
  main { flex-direction: column; }
  #panneau { width: auto; border-left: 0; border-top: 1px solid var(--bordure); max-height: 45vh; }
  #panneau.replie { display: none; }
  #conteneur3d { min-height: 200px; }
  .mobile-seul { display: inline-block; }
  .couleurs { grid-template-columns: 1fr; }
  #onglets button { font-size: 12px; padding: 8px 2px; }
  #temps { display: none; }
}
body.export #entete, body.export #panneau, body.export #transport, body.export #habillage, body.export #etiquettes { display: none !important; }
body.export #conteneur3d { min-height: 0; }