/* Cher ou pas ? — feuille de style unique. Référence : prototype/template.html et docs/05-design.md.
   Chaque couleur est définie dans :root puis redéfinie dans les deux blocs sombres. */
:root{
  --bg:#F6F3EB; --surface:#FFFFFF; --text:#17181C; --muted:#6E6F76; --line:#E0DCD1;
  --tag:#FFD23F; --tag-ink:#17181C; --tag-soft:rgba(255,210,63,.28);
  --btn:#17181C; --btn-ink:#FFFFFF;
  --cold:#5B8DEF; --mild:#F2B84B; --warm:#F07A3A; --hot:#E0433B; --ok:#2E9E5B;
  --cold-ink:#FFFFFF; --mild-ink:#17181C; --warm-ink:#FFFFFF; --hot-ink:#FFFFFF; --ok-ink:#FFFFFF;
  --shadow:0 10px 30px rgba(30,25,10,.10); --radius:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#16171B; --surface:#1F2026; --text:#F1EFE9; --muted:#9A9AA3; --line:#30313A;
    --tag:#FFD23F; --tag-ink:#17181C; --tag-soft:rgba(255,210,63,.16);
    --btn:#FFD23F; --btn-ink:#17181C;
    --cold:#4F7FDB; --mild:#E2AC3E; --warm:#E76F32; --hot:#D63C34; --ok:#33A662;
    --shadow:0 10px 30px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#16171B; --surface:#1F2026; --text:#F1EFE9; --muted:#9A9AA3; --line:#30313A;
  --tag:#FFD23F; --tag-ink:#17181C; --tag-soft:rgba(255,210,63,.16);
  --btn:#FFD23F; --btn-ink:#17181C;
  --cold:#4F7FDB; --mild:#E2AC3E; --warm:#E76F32; --hot:#D63C34; --ok:#33A662;
  --shadow:0 10px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--text); font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:15px; line-height:1.45; padding-inline:16px; padding-block:14px 40px; font-variant-numeric:tabular-nums}
img{max-width:100%}
[hidden]{display:none!important}
.app{max-width:470px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
header{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.tag{
  display:inline-block; background:var(--tag); color:var(--tag-ink); font-family:'Archivo Black','IBM Plex Sans',sans-serif;
  font-size:clamp(17px,5.4vw,22px); line-height:1; padding:10px 12px 9px; border-radius:6px; transform:rotate(-2deg); letter-spacing:-.01em; white-space:nowrap;
  box-shadow:0 3px 0 rgba(0,0,0,.12);
}
.brand p{margin:10px 0 0; color:var(--muted); font-size:13px}
.side{display:grid; justify-items:end; gap:8px}
.meta{color:var(--muted); font-size:13px; white-space:nowrap}
.icons{display:flex; gap:8px}
.ibtn{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); display:grid; place-items:center; cursor:pointer; font:inherit; font-weight:600; padding:0}
.ibtn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.photo{background:#FFFFFF; display:grid; place-items:center; padding:18px; min-height:220px; border-bottom:1px solid var(--line)}
.photo img{max-width:100%; max-height:200px; width:auto; height:auto; display:block}
.photo .fallback{font-family:'Archivo Black',sans-serif; font-size:28px; color:#17181C; text-align:center; padding:30px 10px}
.info{padding:12px 16px 14px; display:grid; gap:2px}
.info .b{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.info .n{font-size:18px; font-weight:600; line-height:1.25; text-wrap:balance}
.info .q{display:inline-block; margin-top:6px; font-size:12px; padding:3px 8px; border-radius:999px; background:var(--tag-soft); color:var(--text); width:max-content}
.info .q:empty{display:none}
.guess{display:flex; gap:8px; align-items:stretch; min-width:0}
.field{flex:1; display:flex; align-items:center; background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:0 14px; min-width:0}
.field:focus-within{border-color:var(--tag); box-shadow:0 0 0 3px var(--tag-soft)}
.field input{flex:1; width:80px; min-width:0; border:0; background:transparent; color:var(--text); font:inherit; font-size:22px; font-weight:600; padding:10px 0; outline:none; font-variant-numeric:tabular-nums}
.field input::placeholder{color:var(--muted); font-weight:400; font-size:16px}
.field span{font-size:20px; font-weight:600; color:var(--muted); padding-left:6px}
.btn{font:inherit; font-weight:600; padding:12px 16px; border-radius:12px; border:0; background:var(--btn); color:var(--btn-ink); cursor:pointer; white-space:nowrap}
.btn.ghost{background:transparent; color:var(--text); border:1.5px solid var(--line)}
.btn:disabled{opacity:.5; cursor:default}
.btn:focus-visible,.ibtn:focus-visible,.linkbtn:focus-visible{outline:2px solid var(--tag); outline-offset:2px}
.msg{min-height:18px; font-size:13px; color:var(--muted)}
.msg.err{color:var(--hot)}
.tries{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.tries li{display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; padding:7px 10px; border-radius:12px; border:1.5px dashed var(--line); min-height:48px; color:var(--muted)}
.tries li.filled{border-style:solid; background:var(--surface); color:var(--text)}
.tile{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-weight:600; font-size:13px; background:var(--bg); color:var(--muted)}
.tile.cold{background:var(--cold); color:var(--cold-ink)} .tile.mild{background:var(--mild); color:var(--mild-ink)} .tile.warm{background:var(--warm); color:var(--warm-ink)} .tile.hot{background:var(--hot); color:var(--hot-ink)} .tile.ok{background:var(--ok); color:var(--ok-ink)}
.tries .g{font-size:17px; font-weight:600}
.tries .g small{display:block; font-size:12px; font-weight:400; color:var(--muted)}
.tries .d{font-size:13px; font-weight:600; text-align:right}
.tries .d small{display:block; font-weight:400; color:var(--muted); font-size:12px}
.result{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:grid; gap:12px}
.result h2{margin:0; font-size:20px; font-weight:600; letter-spacing:-.01em}
.bigprice{font-family:'Archivo Black','IBM Plex Sans',sans-serif; font-size:44px; line-height:1; letter-spacing:-.02em; background:var(--tag); color:var(--tag-ink); padding:10px 14px 8px; border-radius:8px; width:max-content; max-width:100%; transform:rotate(-1.5deg)}
.note{margin:0; color:var(--muted); font-size:13px}
.note.others{color:var(--text); background:var(--tag-soft); padding:8px 10px; border-radius:10px}
.grid{font-size:22px; letter-spacing:3px; line-height:1}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.next{font-size:13px; color:var(--muted)}
h3{margin:4px 0 0; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.regions,.latest{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.regions li{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:baseline; font-size:14px}
.regions li i{font-style:normal; color:var(--muted); font-size:12px; margin-left:6px}
.regions li b{font-weight:600}
.latest li{display:grid; grid-template-columns:1fr auto; gap:10px; font-size:13px; color:var(--muted)}
.latest li b{color:var(--text); font-weight:600}
.legend{display:flex; gap:10px 14px; flex-wrap:wrap; font-size:12px; color:var(--muted); align-items:center; justify-content:space-between}
.keys{display:flex; gap:10px; flex-wrap:wrap}
.sq{display:inline-block; width:10px; height:10px; border-radius:3px; vertical-align:-1px; margin-right:5px}
.sq.cold{background:var(--cold)} .sq.mild{background:var(--mild)} .sq.warm{background:var(--warm)} .sq.hot{background:var(--hot)} .sq.ok{background:var(--ok)}
.linkbtn{font:inherit; font-size:12px; font-weight:600; color:var(--text); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.credits{font-size:11.5px; color:var(--muted); line-height:1.5; margin:0}
.credits a{color:inherit}
a.tag{text-decoration:none}
.pagenav{font-size:13px; color:var(--muted); white-space:nowrap}
.pagenav a{color:inherit}
.pagenav-foot{white-space:normal; text-align:center}
.prose{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 16px 20px; display:grid; gap:10px; box-shadow:var(--shadow)}
.prose h1{margin:0 0 4px; font-size:22px; font-weight:600; letter-spacing:-.01em}
.prose h2{margin:10px 0 0; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.prose p,.prose li{margin:0; font-size:15px}
.prose ul{margin:0; padding-left:18px; display:grid; gap:6px}
.prose a{color:inherit}
.prose code{font-size:13px; background:var(--bg); padding:1px 5px; border-radius:5px}
.prose .sq{margin-right:6px}
/* page marques et enseignes */
.partners .hero{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 18px; display:grid; gap:12px}
.partners .kicker{margin:0; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.partners .hero h1{margin:0; font-size:clamp(24px,5vw,34px); line-height:1.15; letter-spacing:-.02em; font-weight:600; text-wrap:balance}
.partners .lead{margin:0; font-size:16px; color:var(--text)}
.partners .lead em{font-style:normal; background:var(--tag-soft); padding:0 4px; border-radius:4px}
.partners .args{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.partners .arg{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px 16px; display:grid; gap:6px; align-content:start}
.partners .arg h2{margin:0; font-size:15px; font-weight:600}
.partners .arg p{margin:0; font-size:14px; color:var(--muted)}
.partners .arg p b{color:var(--text)}
.partners .showcase{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); align-items:center}
.partners .mock{max-width:360px}
.partners .mock .band{background:var(--tag-soft); color:var(--text); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:7px 12px; border-bottom:1px solid var(--line)}
.partners .mock .fallback{color:var(--muted); font-size:22px}
.partners .showcase-text{display:grid; gap:8px}
.partners .showcase-text h2{margin:0; font-size:18px; font-weight:600}
.partners .showcase-text p{margin:0; font-size:14px}
.partners .offers{display:grid; gap:10px}
.partners .offers li{font-size:15px}
.partners .cta{background:var(--tag); color:var(--tag-ink); border-radius:var(--radius); padding:22px 18px; display:grid; gap:8px; transform:rotate(-.6deg); box-shadow:0 4px 0 rgba(0,0,0,.12)}
.partners .cta h2{margin:0; font-family:'Archivo Black','IBM Plex Sans',sans-serif; font-size:24px; font-weight:400}
.partners .cta p{margin:0}
.partners .cta .note{color:var(--tag-ink); opacity:.75}
.partners .cta .btn{background:var(--tag-ink); color:var(--tag)}
/* pages produit et catalogue */
.crumbs{font-size:12px; color:var(--muted); overflow-wrap:anywhere}
.crumbs a{color:inherit}
.produit h1{margin:0; font-size:20px; font-weight:600; letter-spacing:-.01em; text-wrap:balance}
a.btn{text-decoration:none; display:inline-block; text-align:center}
.spark{width:100%; height:60px; display:block; background:var(--bg); border-radius:10px}
.spark polyline{fill:none; stroke:var(--tag); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.catalog{display:grid; gap:6px}
.catalog h2{margin:10px 0 2px}
.catalog .regions li a{color:inherit; text-decoration:none; min-width:0}
.catalog .regions li a:hover{text-decoration:underline}
.catalog .regions li .badge{justify-self:end}
/* admin */
.app.wide{max-width:900px}
.flash{margin:0; padding:10px 14px; border-radius:12px; background:var(--tag-soft); font-size:13px}
.admin table{width:100%; border-collapse:collapse; font-size:13px}
.admin th,.admin td{padding:6px 4px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.admin th{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600}
.cand{display:grid; gap:8px; padding:10px 0; border-top:1px solid var(--line)}
.cand-head{display:flex; gap:14px; align-items:flex-start; font-size:13px}
.cand-head a.pic{flex:none; display:block; width:150px; height:150px; padding:6px; background:#fff; border-radius:10px; border:1px solid var(--line)}
.cand-head a.pic img{width:100%; height:100%; object-fit:contain; display:block}
@media (max-width:600px){ .cand-head a.pic{width:104px; height:104px} }
.cand-head small{color:var(--muted)}
.cand-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:6px; align-items:center}
.admin input,.admin select{font:inherit; font-size:13px; padding:7px 8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); min-width:0}
.admin .btn{padding:8px 10px; font-size:13px}
.rayons{font-size:13px; line-height:2}
.badge{display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; background:var(--tag-soft); color:var(--text); text-decoration:none; white-space:nowrap}
.badge.on{background:var(--tag); color:var(--tag-ink)}
.badge i{font-style:normal; color:var(--muted)}
.admin details{font-size:13px}
.admin pre{white-space:pre-wrap; font-size:11px; color:var(--muted); margin:6px 0 0}
.overlay{position:fixed; inset:0; background:rgba(10,10,14,.55); display:grid; place-items:center; padding:16px; z-index:20}
.modal{background:var(--surface); color:var(--text); border-radius:var(--radius); padding:20px; width:min(430px,100%); display:grid; gap:12px; box-shadow:var(--shadow); position:relative; max-height:90vh; overflow:auto}
.modal h2{margin:0; font-size:20px; font-weight:600}
.modal p{margin:0}
.modal .close{position:absolute; right:12px; top:12px}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; text-align:center}
.stats b{display:block; font-size:24px; font-family:'Archivo Black','IBM Plex Sans',sans-serif; line-height:1.1}
.stats span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.dist{display:grid; gap:4px}
.dist div{display:grid; grid-template-columns:14px 1fr; gap:8px; align-items:center; font-size:12px}
.dist i{display:block; height:18px; background:var(--line); border-radius:4px; min-width:22px; text-align:right; padding-right:6px; color:var(--text); font-style:normal; line-height:18px; font-size:11px}
.dist i.win{background:var(--ok); color:var(--ok-ink)}
/* ligues */
.leagues{display:grid; gap:8px}
.leagues .regions li b{font-weight:600}
.leagues .regions li a{color:inherit}
.stack{display:grid; gap:8px}
.stack .field input{font-size:16px; font-weight:500}
.linkbox{margin:0; padding:10px 12px; border-radius:12px; background:var(--bg); border:1px dashed var(--line); font-weight:600; word-break:break-all}
.board li.me{border-color:var(--tag); border-style:solid; box-shadow:0 0 0 3px var(--tag-soft)}
.board .tile.rank{background:var(--surface); border:1.5px solid var(--line); color:var(--text)}
.board .tile.rank.top{background:var(--tag); color:var(--tag-ink); border-color:var(--tag)}
.board .g small{display:block}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--text); color:var(--bg); padding:10px 14px; border-radius:999px; font-size:13px; z-index:30; opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap}
.toast.show{opacity:1}
.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }