/* Thème années 70 du configurateur : même palette que l'accueil. Chargé après style.css. */
:root{
  --bg:#F6E8C9; --panel:#FFF6DF; --panel-2:#F0DDB4; --line:#C9AD7F;
  --txt:#4A2C17; --txt-dim:#6E4A30;
  --accent:#B5441A; --accent-soft:rgba(181,68,26,.16);
  --radius:16px;
  --font:var(--d70-body); --font-title:var(--d70-display);
}
body{background-image:radial-gradient(rgba(74,44,23,.09) 1.2px,transparent 1.4px);background-size:18px 18px}
#app{height:calc(100vh - var(--barre))}

/* barre du haut */
.topbar{background:var(--panel);border-bottom:3px solid var(--d70-brown)}
.brand strong{font-family:var(--d70-display);font-weight:400;font-size:19px;letter-spacing:.2px;text-transform:none;color:var(--d70-rust)}
.brand span{font-weight:600;color:var(--txt-dim)}
.brand svg{stroke:var(--d70-rust)}
.btn{background:var(--d70-rust);color:var(--d70-cream);border:2px solid var(--d70-brown);border-radius:999px;font-weight:800;
  padding:8px 18px;box-shadow:3px 3px 0 var(--d70-brown);transition:transform .12s, box-shadow .12s}
.btn:hover{filter:none;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--d70-brown)}
.btn.ghost{background:var(--panel);color:var(--d70-brown);border:2px solid var(--d70-brown);font-weight:800}
.btn.ghost:hover{background:var(--d70-mustard);border-color:var(--d70-brown);color:var(--d70-brown)}

/* scène : dégradé de soleil couchant, le char (transparent) se détache */
.stage{background:radial-gradient(120% 100% at 50% 0%,#F6E8C9 0%,#EBC27A 45%,#D9622B 120%)}
.hint{color:#FFF6DF;opacity:.95;font-weight:700;text-shadow:0 1px 3px rgba(74,44,23,.7)}
.viewtools{--txt:#F6E8C9;--txt-dim:#D8BE8E;background:rgba(43,26,15,.9);border:2px solid #8B6B4A;border-radius:999px;backdrop-filter:blur(6px)}
.viewtools button{font-weight:700;border-radius:999px}
.viewtools button:hover{background:rgba(246,232,201,.14)}
.viewtools button.active{background:var(--d70-rust);color:var(--d70-cream)}
.viewtools .sep{background:#8B6B4A}
.loader{background:rgba(246,232,201,.96)}

/* panneau de réglages */
.panel{border-left:3px solid var(--d70-brown)}
.panel-scroll{scrollbar-color:var(--line) transparent}
.panel-scroll::-webkit-scrollbar-thumb{background:var(--line);border-color:var(--panel)}
.group{border-bottom:2px dotted var(--line)}
.group h2{font-family:var(--d70-display);font-weight:400;font-size:19px;letter-spacing:.2px;text-transform:none;color:var(--d70-rust)}
.subgroup h3{font-weight:800;color:var(--txt-dim)}
.swatches button{box-shadow:inset 0 0 0 2px rgba(74,44,23,.35)}
.swatches button.sel{border-color:var(--d70-brown);box-shadow:0 0 0 3px var(--panel),0 0 0 6px var(--d70-brown)}
.card{border:2px solid var(--d70-brown);box-shadow:3px 3px 0 var(--d70-brown);background:var(--panel)}
.card:hover{border-color:var(--d70-brown);background:var(--panel-2)}
.card.sel{border-color:var(--d70-brown);background:var(--d70-mustard)}
.card-label{font-family:var(--d70-body);font-weight:800}
.range input{height:7px;background:var(--panel-2);border:2px solid var(--d70-brown);border-radius:999px}
.range input::-webkit-slider-thumb{width:18px;height:18px;background:var(--d70-rust);border:3px solid var(--d70-brown);box-shadow:none}
.range input::-moz-range-thumb{width:14px;height:14px;background:var(--d70-rust);border:3px solid var(--d70-brown)}
.track{background:var(--panel-2);border:2px solid var(--d70-brown)}
.knob{background:var(--d70-brown2)}
.toggle input:checked + .track{background:var(--d70-rust)}
.toggle input:checked + .track .knob{background:var(--d70-cream)}
.toggle-label{font-weight:600}
.recap li{border-bottom:1px dashed var(--line)}
.recap b{font-weight:800}
.recap i{box-shadow:inset 0 0 0 1px var(--d70-brown)}
.toast{background:var(--d70-brown);color:var(--d70-cream);border:2px solid var(--d70-mustard);font-weight:700}

@media (max-width:1100px){
  .panel{border-left:0;border-top:3px solid var(--d70-brown)}
}

/* petits écrans : barre du haut compacte pour que les trois boutons tiennent */
@media (max-width:700px){
  .topbar{padding:0 10px;gap:8px}
  .topbar-actions{gap:6px}
  .btn{padding:6px 11px;font-size:12px;box-shadow:2px 2px 0 var(--d70-brown)}
  .brand span{display:none}
  .brand strong{font-size:16px;white-space:nowrap}
}
@media (max-width:480px){
  .brand strong{display:none}
}