/* Pages « Jeux » : chargé après service.css, dont il reprend les couleurs et les polices. */

/* ============ PAGE DES JEUX ============ */
.j-hero .ill{height:auto;width:min(300px,100%)}
.j-h2{font-size:clamp(32px,4.4vw,54px);margin-bottom:30px}
.j-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:22px}
.j-card{background:var(--mist);border-radius:var(--r);overflow:hidden;display:grid;grid-template-rows:auto 1fr;transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
.j-card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(12,53,82,.45)}
.j-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;max-width:100%}
.j-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.j-card:hover .j-thumb img{transform:scale(1.05)}
.j-badge{position:absolute;top:14px;left:14px;background:var(--lemon);color:var(--ink);font:600 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 11px;border-radius:999px}
.j-body{padding:22px 22px 24px;display:grid;gap:12px;align-content:start}
.j-body h3{font-size:clamp(30px,3vw,38px);color:var(--sky)}
.j-body h3 a{text-decoration:none}
.j-body h3 a:hover{color:var(--sky-deep)}
.j-body p{margin:0;max-width:52ch}
.j-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.j-meta li{font:600 11px/1 var(--f-mono);letter-spacing:.06em;background:var(--foam);padding:8px 10px;border-radius:999px}
.j-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.j-best{font-size:14px;color:var(--muted)}
.j-best b{color:var(--ink);font-variant-numeric:tabular-nums}
.j-soon{border:2px dashed var(--line);border-radius:var(--r);display:grid;place-content:center;justify-items:center;text-align:center;gap:10px;padding:36px 22px;min-height:280px;color:var(--muted)}
.j-soon img{width:64px;height:auto;opacity:.85}
.j-soon strong{font:800 24px/1.1 var(--f-display);color:var(--ink)}

/* ============ PAGE D'UN JEU ============ */
.j-game{background:var(--mist);padding-block:clamp(24px,4vw,48px) clamp(40px,6vw,72px)}
.j-title{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,4vw,48px);align-items:end;margin-bottom:clamp(18px,3vw,28px)}
.j-title h1{font-size:clamp(48px,7vw,96px);color:var(--sky)}
.j-title h1 .script{display:block;font-size:.5em;color:var(--ink);transform:rotate(-4deg);transform-origin:left;margin-top:.1em}
.j-title p{margin:0;max-width:52ch;font-size:clamp(16px,1.4vw,18px)}
@media (max-width:760px){.j-title{grid-template-columns:1fr;gap:12px}}
.j-districts .tag{color:var(--lemon);opacity:.85}
.j-bonus{grid-template-columns:repeat(2,minmax(0,1fr))}
.j-roofs{background:var(--ink);color:var(--foam);border-color:var(--ink)!important}
.j-roofs h3{color:var(--lemon)!important}
@media (max-width:760px){.j-bonus{grid-template-columns:1fr}}

/* ============ LE JEU (Sweep Runner) ============ */
.rn-stage{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:var(--r);overflow:hidden;background:#f1d7ae;box-shadow:0 30px 60px -36px rgba(12,53,82,.5);font-family:var(--f-body)}
@media (max-width:760px){.rn-stage{aspect-ratio:4/5}}
/* En jeu : tout l'écran, exactement (100 % de la largeur × hauteur visible, stable quand la barre du navigateur bouge) */
.rn-stage.is-playing{position:fixed;inset:0;z-index:1000;width:100vw;height:100vh;height:100dvh;max-width:none;aspect-ratio:auto;border-radius:0;box-shadow:none;overscroll-behavior:none}
.rn-stage.is-playing .rn-hud{padding:calc(env(safe-area-inset-top,0px) + 12px) calc(env(safe-area-inset-right,0px) + 12px) 0 calc(env(safe-area-inset-left,0px) + 12px)}
.rn-stage.is-playing .rn-overlay{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
html.play-lock,html.play-lock body{overflow:hidden;overscroll-behavior:none}
.rn-quit{pointer-events:auto;border:0;cursor:pointer;width:40px;height:40px;border-radius:50%;background:rgba(12,53,82,.84);color:var(--foam);font:700 16px/1 var(--f-body);flex:none}
.rn-quit:focus-visible{outline:3px solid var(--foam);outline-offset:2px}
.rn-hud > .rn-brand{margin-right:auto}
.rn-hud{justify-content:flex-start}
.rn-poster{position:absolute;inset:0}
.rn-poster img{width:100%;height:100%;object-fit:cover}
.rn-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,53,82,.55),rgba(12,53,82,0) 55%);pointer-events:none}
.rn-launch{position:absolute;left:50%;bottom:clamp(20px,5vw,40px);transform:translateX(-50%);z-index:2;display:grid;justify-items:center;gap:6px;
  border:0;border-radius:22px;background:var(--sky);color:var(--foam);padding:16px 38px 14px;cursor:pointer;box-shadow:0 6px 0 var(--sky-deep);transition:transform .15s,box-shadow .15s}
.rn-launch span{font:900 clamp(28px,4vw,40px)/1 var(--f-display)}
.rn-launch small{font:600 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.rn-launch:hover{transform:translateX(-50%) translateY(-2px)}
.rn-launch:active{transform:translateX(-50%) translateY(4px);box-shadow:0 2px 0 var(--sky-deep)}
.rn-launch:disabled{cursor:progress}
.rn-best{position:absolute;top:16px;right:16px;z-index:2;background:var(--foam);color:var(--ink);font:600 13px/1 var(--f-body);padding:9px 12px;border-radius:999px}

.rn-root{position:absolute;inset:0}
.rn-root canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.rn-hud{position:absolute;top:0;left:0;right:0;padding:14px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;pointer-events:none}
.rn-brand{height:22px;width:auto;background:var(--foam);border-radius:999px;padding:8px 14px;box-sizing:content-box;box-shadow:0 6px 18px rgba(12,53,82,.18)}
.rn-right{display:grid;gap:8px;justify-items:end}
.rn-meters{display:flex;gap:8px}
.rn-meter{background:rgba(12,53,82,.84);color:var(--foam);border-radius:14px;padding:6px 12px 7px;min-width:72px;text-align:right}
.rn-meter b{display:block;font:900 22px/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.rn-meter span{font:600 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.rn-power{display:grid;gap:4px;width:150px;background:var(--foam);border-radius:12px;padding:7px 10px 8px;font-size:12px;color:var(--ink);box-shadow:0 6px 18px rgba(12,53,82,.18)}
.rn-power i{display:block;height:5px;border-radius:3px;background:var(--mist);overflow:hidden}
.rn-power i::after{content:"";display:block;height:100%;width:var(--p,100%);background:var(--c,var(--sky));border-radius:3px}
.rn-banner{position:absolute;left:50%;top:84px;transform:translate(-50%,-12px);opacity:0;transition:opacity .45s,transform .45s;display:grid;justify-items:center;gap:2px;text-align:center;pointer-events:none;
  color:var(--foam);text-shadow:0 2px 14px rgba(12,53,82,.6);width:max-content;max-width:calc(100% - 32px)}
.rn-banner.show{opacity:1;transform:translate(-50%,0)}
.rn-banner span{font:600 12px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.rn-banner b{font:900 clamp(30px,4vw,44px)/1.05 var(--f-display);text-wrap:balance}
.rn-overlay{position:absolute;left:0;right:0;bottom:0;padding:0 14px 16px;display:flex;justify-content:center}
.rn-card{width:100%;max-width:420px;background:var(--foam);border-radius:20px;padding:18px;box-shadow:0 18px 50px rgba(12,53,82,.3);display:grid;gap:12px}
.rn-card h2{margin:0;font:900 24px/1.05 var(--f-display);color:var(--ink)}
.rn-card p{margin:0;font-size:14px;color:var(--muted)}
.rn-keys{display:flex;flex-wrap:wrap;gap:6px}
.rn-keys span{font-size:12px;background:var(--mist);color:var(--ink);border-radius:8px;padding:5px 9px}
.rn-keys .tc,.rn-touch .rn-keys .kb{display:none}
.rn-touch .rn-keys .tc{display:inline}
.rn-btn{border:0;border-radius:14px;background:var(--sky);color:var(--foam);font:900 21px/1 var(--f-display);padding:13px 18px 12px;cursor:pointer;box-shadow:0 4px 0 var(--sky-deep)}
.rn-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sky-deep)}
.rn-btn:disabled{background:#9fc9df;box-shadow:0 4px 0 #86b3cb;cursor:progress}
.rn-badge{justify-self:start;background:var(--lemon);color:var(--ink);font:600 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;border-radius:8px;padding:6px 9px}
.rn-stats{display:flex;gap:10px}
.rn-stats div{flex:1;background:var(--mist);border-radius:12px;padding:10px 12px}
.rn-stats b{display:block;font:900 22px/1.1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.rn-stats span{font-size:12px;color:var(--muted)}
.rn-cta{font-size:14px;font-weight:600;color:var(--sky-deep);text-underline-offset:3px}
@media (max-width:480px){.rn-meter{min-width:58px;padding:5px 9px}.rn-meter b{font-size:18px}.rn-brand{display:none}.rn-hud > .rn-right{margin-left:auto}.rn-power{width:128px}.rn-quit{width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){.rn-banner{transform:translate(-50%,0)}}