/* Thème années 70 de la jauge : même palette que l'accueil. Chargé après le CSS intégré. */
:root{
  --bg:#F6E8C9; --sheet:#FFF6DF; --sheet-2:#F0DDB4;
  --ink:#4A2C17; --ink-2:#6E4A30; --ink-3:#7A5638; --rule:#C9AD7F;
  --signal:#B5441A; --signal-ink:#F6E8C9; --marine:#2F6F73;
  --ok:#4F6A14; --ok-soft:#E4EBC6; --warn:#7A4E00; --warn-soft:#F8E6B8; --bad:#A8221A; --bad-soft:#F5D5CE;
  --stage:#2B1A0F; --stage-ctl:rgba(43,26,15,.78); --stage-line:rgba(246,232,201,.3); --stage-ink:#F6E8C9;
  --shadow:4px 4px 0 #4A2C17;
  --font-display:"Nunito","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Nunito","Trebuchet MS",system-ui,sans-serif;
  color-scheme:light;
}
body{background-image:radial-gradient(rgba(74,44,23,.09) 1.2px,transparent 1.4px);background-size:18px 18px}

/* la barre d'outils déborde du padding du corps pour couvrir toute la largeur */
.barre-outils{
  margin-top:-14px;
  margin-left:calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  margin-right:calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  margin-bottom:14px;
}

/* en-tête */
.top h1{font-family:"Shrikhand","Cooper Black",Georgia,serif;font-weight:400;font-size:1.75rem;text-transform:none;letter-spacing:.2px;color:var(--signal)}
.top p{font-weight:600;color:var(--ink-2)}
.logo .l-bg{fill:var(--ink)}

/* cartes principales */
.act,.fiche{border:3px solid var(--ink);border-radius:20px;box-shadow:var(--shadow)}
.fiche-h{background:var(--sheet-2);border-bottom:3px solid var(--ink)}
.setup > summary{border-bottom:2px dotted var(--rule)}
.sum-l,.lbl{font-weight:800}

/* champs et segments */
select,input{border:2px solid var(--ink);border-radius:12px;font-weight:600}
.seg{border:2px solid var(--ink);border-radius:999px;background:var(--sheet-2)}
.seg button{border-radius:999px;font-weight:800}
.seg button[aria-pressed="true"]{background:var(--signal);color:var(--signal-ink);box-shadow:none}
.mastbox{border-top:2px dashed var(--rule)}
.tips li::before{background:var(--signal);height:3px;border-radius:2px}

/* boutons */
.btn{border:2px solid var(--ink);border-radius:999px;font-weight:800;box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s, box-shadow .12s}
@media (hover:hover){.btn:not(:disabled):hover{filter:none;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}}
.btn:not(:disabled):active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-signal{background:var(--signal);border-color:var(--ink);color:var(--signal-ink)}
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.tools .snap{border-color:var(--ink);color:var(--marine)}

/* étapes */
.steps button{border:2px solid var(--ink);border-radius:14px;background:var(--sheet)}
.steps button[aria-current="step"]{background:var(--d70-mustard);color:var(--ink);box-shadow:none}
.count{border:2px solid var(--ink);background:var(--sheet);font-weight:800}
.q-num{font-weight:800}

/* scène photo */
.stage{border:3px solid var(--ink);border-radius:20px}
@media (max-width:640px){.stage.bleed{border-radius:0;border-inline:0}}
.zoom button{border-radius:999px;border:2px solid var(--stage-line)}
.chip-ex{background:var(--d70-rust);border-radius:999px;font-weight:800}

/* résultat */
.big{font-weight:800}
.verdict{border:2px solid currentColor;border-radius:14px;font-weight:800}
.gauge{border:2px solid var(--ink);border-radius:999px;background:var(--sheet-2)}
.g-fill{background:var(--ink);border-radius:999px 0 0 999px}
.toast{border:2px solid var(--d70-mustard);background:var(--ink);color:var(--signal-ink);font-weight:700}