:root{
  --papier:#f3e2c0; --papier2:#e8d09f; --encre:#3b2412; --encre2:#6b4a2b;
  --rouge:#a8321f; --rouge2:#7e2415; --vert:#3f6b2f; --or:#c8902e;
  --fond:#2b1a0e;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Bitter",Georgia,serif; color:var(--encre); background:var(--fond);
  background-image:radial-gradient(circle at 20% 10%,#4a2e18 0,transparent 60%),radial-gradient(circle at 80% 90%,#3a2210 0,transparent 55%);
  min-height:100vh; line-height:1.45;
}
a{color:var(--rouge)}
.wrap{max-width:560px;margin:0 auto;padding:16px 16px 32px}
h1,h2,.western{font-family:"Rye",Georgia,serif;font-weight:400;letter-spacing:.02em}

/* Affiche papier */
.affiche{
  background:var(--papier);
  background-image:radial-gradient(ellipse at center,transparent 55%,rgba(120,70,20,.25) 100%);
  border-radius:4px; padding:22px 18px; margin:14px 0;
  box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 0 0 2px rgba(59,36,18,.25), inset 0 0 0 7px var(--papier), inset 0 0 0 8px rgba(59,36,18,.35);
  position:relative;
}
.affiche::before,.affiche::after{content:"";position:absolute;top:8px;width:10px;height:10px;border-radius:50%;background:#7a5a3a;box-shadow:inset -2px -2px 3px rgba(0,0,0,.4)}
.affiche::before{left:10px}.affiche::after{right:10px}
.wanted{font-family:"Rye";font-size:clamp(46px,15vw,76px);text-align:center;line-height:1;margin:4px 0 0;letter-spacing:.06em}
.sous-titre{text-align:center;text-transform:uppercase;letter-spacing:.2em;font-weight:800;font-size:13px;margin:4px 0 12px;color:var(--encre2)}
.centre{text-align:center}
.petit{font-size:13px;color:var(--encre2)}

/* Accueil */
.logo-salon{color:var(--papier);text-align:center;margin:18px 0 4px}
.logo-salon h1{font-size:clamp(26px,7vw,36px);margin:0;color:var(--or);text-shadow:0 2px 0 #000}
.logo-salon p{margin:4px 0 0;opacity:.85}
.choix{display:block;text-decoration:none;color:inherit}
.choix .affiche{transition:transform .15s}
.choix:active .affiche{transform:scale(.98)}
.choix h2{margin:0 0 6px;font-size:24px}
.badge{display:inline-block;background:var(--rouge);color:#fff;font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:3px;margin-bottom:6px}

/* Boutons & formulaires */
.btn{display:block;width:100%;border:0;border-radius:6px;padding:15px 18px;font:800 17px "Bitter",serif;
  background:var(--rouge);color:#fff;cursor:pointer;text-align:center;text-decoration:none;box-shadow:0 4px 0 var(--rouge2)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--rouge2)}
.btn[disabled]{opacity:.55;cursor:wait}
.btn.sec{background:var(--encre2);box-shadow:0 4px 0 var(--encre)}
.btn+.btn{margin-top:12px}
label{display:block;font-weight:600;margin:12px 0 4px}
input[type=text],input[type=email],input[type=tel],input[type=url],select{
  width:100%;padding:12px;border:2px solid var(--encre2);border-radius:6px;background:#fff8ea;font:16px "Bitter",serif;color:var(--encre)}
input:focus,select:focus{outline:3px solid var(--or);outline-offset:1px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;margin:12px 0}
.check input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--rouge)}
.seg{display:flex;gap:8px}
.seg label{flex:1;margin:0;border:2px solid var(--encre2);border-radius:6px;padding:11px;text-align:center;cursor:pointer;background:#fff8ea}
.seg input{position:absolute;opacity:0}
.seg label:has(input:checked){background:var(--encre);color:var(--papier)}
.erreur{background:#fbe3dc;border:2px solid var(--rouge);color:var(--rouge2);padding:10px 12px;border-radius:6px;margin:12px 0;font-weight:600}
.hidden{display:none!important}

/* Jeu */
.progress{display:flex;gap:5px;justify-content:center;margin:10px 0 0}
.progress span{width:22px;height:8px;border-radius:4px;background:rgba(243,226,192,.25)}
.progress span.fait{background:var(--or)}
.progress span.actuel{background:var(--papier)}
.silhouette{width:110px;height:110px;margin:6px auto 10px;border:3px solid var(--encre);background:var(--papier2);display:grid;place-items:center;font-size:58px;filter:sepia(.6)}
.indice{font-size:20px;font-weight:600;text-align:center;margin:8px 0 14px;min-height:3.2em}
.recompense{font-family:"Rye";text-align:center;font-size:22px;color:var(--rouge);margin:12px 0 4px}
.nav{display:flex;gap:10px;margin-top:14px}
.nav .btn{margin:0}
.recap{list-style:none;padding:0;margin:10px 0}
.recap li{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px dashed rgba(59,36,18,.3);font-size:14px}
.ok{color:var(--vert);font-weight:800}.ko{color:var(--rouge);font-weight:800}

/* Diagnostic */
.jauge{font-family:"Rye";font-size:64px;text-align:center;line-height:1;margin:6px 0}
.jauge small{font-size:26px}
.verdict{font-family:"Rye";font-size:26px;text-align:center;margin:0}
.bon{color:var(--vert)} .moyen{color:var(--or)} .mauvais{color:var(--rouge)}
.barres{margin:14px 0}
.barre{margin:8px 0}
.barre div{display:flex;justify-content:space-between;font-weight:600;font-size:14px}
.barre i{display:block;height:10px;border-radius:5px;background:rgba(59,36,18,.15);overflow:hidden}
.barre i b{display:block;height:100%;background:var(--encre2);border-radius:5px;transition:width 1s}
.crimes{padding-left:0;list-style:none}
.crimes li{padding:6px 0 6px 28px;position:relative;font-size:15px}
.crimes li::before{content:"✗";position:absolute;left:4px;color:var(--rouge);font-weight:800}
.crimes.atouts li::before{content:"✓";color:var(--vert)}
.tampon{display:inline-block;border:3px solid currentColor;padding:4px 10px;transform:rotate(-6deg);font-family:"Rye";font-size:20px;border-radius:4px;opacity:.9}
.chargement{text-align:center;padding:30px 0}
.fer{display:inline-block;font-size:44px;animation:tourne 1.2s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

.foot{color:rgba(243,226,192,.6);text-align:center;font-size:12px;padding:10px 16px 24px}
.foot a{color:rgba(243,226,192,.8)}

/* Écran géant */
body.ecran{overflow:hidden;height:100vh}
.ecran-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:2.2vw;padding:2.2vw;height:100vh}
.ecran .affiche{margin:0;padding:2vw 2.4vw;display:flex;flex-direction:column}
.ecran .wanted{font-size:6.5vw}
.ecran .sous-titre{font-size:1.1vw}
.board{list-style:none;margin:1vw 0 0;padding:0;flex:1}
.board li{display:grid;grid-template-columns:3.2vw 1fr auto;align-items:center;gap:1vw;font-size:2vw;padding:.55vw 0;border-bottom:2px dashed rgba(59,36,18,.25)}
.board li .rg{font-family:"Rye";color:var(--rouge);font-size:2.3vw}
.board li .pr{font-family:"Rye";color:var(--vert)}
.board li.nouveau{animation:flash 2s}
@keyframes flash{0%{background:var(--or)}100%{background:transparent}}
.compteurs{display:grid;grid-template-columns:repeat(3,1fr);gap:1vw;text-align:center;margin-top:1vw}
.compteurs b{display:block;font-family:"Rye";font-size:3.2vw;color:var(--rouge)}
.compteurs span{font-size:1.1vw;font-weight:600}
.cote{display:flex;flex-direction:column;gap:2.2vw}
.cote .affiche{flex:1;align-items:center;justify-content:center;text-align:center}
.cote h2{font-size:2.3vw;margin:0 0 .6vw}
.cote p{font-size:1.25vw;margin:.5vw 0}
.qr{background:#fff;padding:.8vw;border-radius:6px;display:inline-block}
.qr img,.qr canvas{display:block;width:min(10vw,24vh)!important;height:min(10vw,24vh)!important}
.vide{font-size:1.6vw;text-align:center;opacity:.7;margin-top:3vw}

/* Admin */
body.admin{background:#f4efe6}
.admin .wrap{max-width:1100px}
.admin table{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
.admin th,.admin td{padding:8px;border-bottom:1px solid #e3d8c6;text-align:left;vertical-align:top}
.admin th{background:#3b2412;color:#f3e2c0;position:sticky;top:0}
.admin .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}
.admin .kpi{background:#fff;border-radius:8px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.admin .kpi b{display:block;font-size:28px;color:var(--rouge)}
.admin .actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.admin .actions .btn{width:auto;display:inline-block;padding:10px 14px;font-size:14px}
.admin .actions .btn+.btn{margin-top:0}
.admin h2{font-family:"Bitter";font-weight:800;margin-top:28px}
.scroll{overflow-x:auto}
.tag{display:inline-block;padding:2px 7px;border-radius:10px;font-size:12px;font-weight:700;background:#eee}
.tag.pro{background:#3b2412;color:#f3e2c0}

@media print{
  body{background:#fff}
  .noprint{display:none!important}
}

/* Galerie des recherchés (fin de partie) */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0 14px}
.carte{background:#fff8ea;border:2px solid var(--encre2);border-radius:6px;padding:10px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;line-height:1.25}
.carte .logo{width:72px;height:72px;display:grid;place-items:center;border-radius:50%;background:#fff;overflow:hidden;border:2px solid var(--papier2)}
.carte .logo img{max-width:88%;max-height:88%;object-fit:contain}
.carte .logo span{font-family:"Rye";font-size:26px;color:var(--papier);background:var(--encre2);width:100%;height:100%;display:grid;place-items:center}
.carte.rate{opacity:.75}
.carte.rate .logo{filter:grayscale(1)}
.niveau{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:12px;background:var(--papier2);color:var(--encre2)}
.niveau.dur{background:var(--rouge);color:#fff}
