/* Style commun des pages faites à la main (lié par <link href="commun.css">, publié en /assets/pages.css) */
:root{--night:#08071c;--panel:#141233;--panel2:#1c1a42;--line:rgba(190,182,255,.16);--line2:rgba(190,182,255,.3);
--ink:#ece9fb;--muted:#a9a6c9;--faint:#7d7aa3;--gold:#f0c36a;--c1:#f0c36a;--c2:#4fd1a1;--c3:#a291f7;--c4:#ff7a9a;--c5:#6ec3ff;--c6:#c9b79a;
--fd:'Marcellus',serif;--fb:'Nunito Sans',system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,#1d1850,var(--night));background-color:var(--night);color:var(--ink);font:16px/1.6 var(--fb);min-height:100vh}
.wrap{max-width:1040px;margin:0 auto;padding:24px 16px 60px}
a{color:var(--gold)}
h1,h2,h3{font-family:var(--fd);font-weight:400}
h1{font-size:clamp(1.7rem,4.4vw,2.4rem);margin:0 0 6px;line-height:1.2}
h2{font-size:1.45rem;margin:44px 0 6px}
h3{font-size:1.1rem;margin:18px 0 6px}
.lead{color:var(--muted);max-width:740px;margin:0 0 14px}
.rep{font-size:1.08rem;color:var(--ink);max-width:760px;margin:8px 0 14px;border-left:3px solid var(--gold);padding-left:14px}
.note{color:var(--faint);font-size:.88rem}
.card{background:linear-gradient(180deg,rgba(28,26,66,.88),rgba(20,18,51,.88));border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.chips button{font:inherit;font-size:.92rem;padding:6px 14px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);cursor:pointer}
.chips button[aria-pressed="true"]{border-color:var(--k,var(--gold));background:var(--panel2);box-shadow:0 0 14px rgba(240,195,106,.18)}
.duo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:800px){.duo{grid-template-columns:1fr}}
svg.scene{width:100%;display:block;border-radius:14px;background:#0d0b26}
svg.scene text{font-family:var(--fb)}
.ctl{display:grid;gap:12px}
.ctl label{display:grid;gap:2px;font-size:.92rem;color:var(--muted)}
.ctl label b{color:var(--ink);font-weight:600}
input[type=range]{width:100%;accent-color:var(--gold)}
select{font:inherit;background:var(--panel);color:var(--ink);border:1px solid var(--line2);border-radius:10px;padding:5px 8px}
.big{font-family:var(--fd);font-size:2rem;color:var(--gold);line-height:1.1}
.stats{display:flex;gap:18px;flex-wrap:wrap;font-size:.9rem;color:var(--muted);margin-top:8px}
.stats b{color:var(--ink);font-size:1.05rem}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.hc{border-top:3px solid var(--k)}
.hc p{margin:4px 0;color:var(--muted);font-size:.93rem}
.lv{font-size:.78rem;color:var(--faint)}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.93rem}
td,th{text-align:left;padding:7px 8px;border-top:1px solid var(--line);vertical-align:top}
th{color:var(--faint);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;border-top:0}
td{color:var(--muted)} td b{color:var(--ink);font-weight:600}
details{border-top:1px solid var(--line);padding:10px 0}
summary{cursor:pointer;font-weight:600}
details p{color:var(--muted);margin:8px 0 0}
ol.refs{color:var(--muted);font-size:.9rem;padding-left:22px}
ol.refs li{margin:4px 0}
.warn{margin-top:30px;border:1px solid var(--line2);border-radius:14px;padding:12px 16px;color:var(--muted);font-size:.92rem;background:rgba(240,195,106,.05)}
.voir{display:flex;flex-wrap:wrap;gap:8px}
.voir a{border:1px solid var(--line2);border-radius:999px;padding:5px 12px;text-decoration:none;font-size:.92rem}
/* Tablette et ordinateur : le titre, la réponse, la scène et ses réglages tiennent sur un écran (hauteur posée par le build) */
@media (min-width:900px) and (min-height:560px){
  .wrap{max-width:1240px;padding-top:12px}
  .wrap>h1{font-size:1.9rem;margin-bottom:4px}
  .wrap>.rep{max-width:none;font-size:1rem;line-height:1.5;margin:4px 0 8px}
  .wrap>.rep+.lead{max-width:none;font-size:.94rem;line-height:1.5;margin-bottom:12px}
  .duo{height:var(--h-ecran,auto);grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);align-items:stretch}
  .duo>*{min-height:0}
  .duo>div:first-child{display:flex;flex-direction:column;gap:8px}
  .duo>div:first-child>svg.scene{flex:0 1 auto;min-height:0;height:auto;margin-top:0!important}
  .duo>.ctl{overflow-y:auto;align-content:start;scrollbar-width:thin;gap:9px;padding:12px 15px}
  .duo .ctl label{font-size:.87rem}
  .duo .ctl .note{font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
button.act{font:inherit;font-size:.95rem;padding:7px 16px;border-radius:999px;border:1px solid var(--gold);background:var(--panel2);color:var(--ink);cursor:pointer}
button.act:hover{box-shadow:0 0 18px rgba(240,195,106,.25)}
dl.card dt{margin-top:10px} dl.card dd{margin:2px 0 0;color:var(--muted)}
ul.lead{padding-left:20px}