/* NIMBY — page du jeu selon la Charte Coherix et NIMBY (2026-10-23).
   Identite du sticker : creme, rouge, contour noir epais, titres affiche.
   Un seul aspect (pas de mode sombre) : les couleurs sont celles du sticker. */
body[data-page="nimby"]{
  --paper:#F2E8D0; --paper-raised:#FFF9EC; --ink:#151313; --ink-muted:#4A4238;
  --plan-blue:#1E5D9A; --redline:#D7261E; --hairline:#CDBF9F;
  --chap-nimby:#D7261E; --chap-pimby:#2E5A38; --chap-simby:#2A74B8; --chap-cimby:#9A5A0E;
  color-scheme:light; background-color:var(--paper); color:var(--ink);
}
body[data-page="nimby"] main{display:block}
body[data-page="nimby"] main > section{max-width:var(--sheet);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body[data-page="nimby"] .top,body[data-page="nimby"] footer .wrap{border-color:var(--ink)}

.button{display:inline-block;font-weight:600;text-decoration:none;padding:12px 18px;border:3px solid var(--ink);background:var(--redline);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);color:#fff}
@media (prefers-reduced-motion:reduce){.button:hover{transform:none}}
.text-link{color:var(--ink);font-weight:600}

/* entete : la ville en image, encadree comme une affiche */
.game-hero{position:relative;margin-block:var(--space-12) !important}
.game-hero-image{width:100%;aspect-ratio:16/8;object-fit:cover;border:3px solid var(--ink)}
.game-hero-shade{display:none}
.game-hero-copy{position:relative;margin:-96px var(--space-12) 0;background:var(--paper-raised);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:var(--space-6) var(--space-12) var(--space-12);max-width:760px}
.game-name-expansion{display:inline-block;font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--ink);border-radius:999px;padding:4px 12px;background:#fff}
.game-hero h1{font:400 112px/100px var(--font-poster);color:var(--redline);-webkit-text-stroke:3px var(--ink);text-transform:uppercase;margin:var(--space-4) 0 var(--space-2);letter-spacing:-.01em}
.game-hero h1 span{color:var(--ink);-webkit-text-stroke:0}
.game-slogan{font:600 32px/34px var(--font-plan);margin-bottom:var(--space-4)}
.game-hero-description{font-size:19px;line-height:29px;max-width:60ch}
.game-hero-actions{display:flex;gap:var(--space-6);align-items:center;flex-wrap:wrap;margin-top:var(--space-6)}
.tier-hero-link{color:var(--ink);font-weight:600}

/* introduction */
.game-intro{padding-block:var(--space-12)}
.game-intro h2,.tier-journey h2,.gallery-heading h2,.game-simulator h2,body[data-page="nimby"] .contact h2{font:400 52px/50px var(--font-poster);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:var(--space-4)}
.game-intro h2 em{font-style:normal;color:var(--redline)}
.game-intro p{font-size:19px;line-height:29px;max-width:62ch}

/* parcours des 12 tiers */
.tier-journey{padding-block:var(--space-12);border-top:3px solid var(--ink)}
.tier-journey-lead{font-size:18px;line-height:28px;max-width:66ch;margin-top:var(--space-4)}
.tier-chapter-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.tier-chapter-nav a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);background:var(--paper-raised);border:3px solid var(--ink);padding:var(--space-4);border-top-width:10px}
.tier-chapter-nav a strong{font:400 26px/28px var(--font-poster)}
.tier-chapter-nav small{font:500 11px/15px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.tier-chapter-nav .phase-nimby{border-top-color:var(--chap-nimby)}.tier-chapter-nav .phase-pimby{border-top-color:var(--chap-pimby)}
.tier-chapter-nav .phase-simby{border-top-color:var(--chap-simby)}.tier-chapter-nav .phase-cimby{border-top-color:var(--chap-cimby)}
.tier-chapter{margin-top:var(--space-12);--chap:var(--chap-nimby)}
.tier-chapter.phase-pimby{--chap:var(--chap-pimby)}.tier-chapter.phase-simby{--chap:var(--chap-simby)}.tier-chapter.phase-cimby{--chap:var(--chap-cimby)}
.tier-chapter-header{display:flex;justify-content:space-between;gap:var(--space-6);align-items:end;border-bottom:3px solid var(--chap);padding-bottom:var(--space-4);flex-wrap:wrap}
.tier-chapter-header > div{min-width:0;max-width:70ch}
.tier-chapter-name{font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--chap)}
.tier-chapter-header h3{font:400 30px/32px var(--font-poster);text-transform:uppercase;margin:var(--space-2) 0}
.tier-range{font:500 12px/16px var(--font-mono);letter-spacing:.06em;color:var(--chap)}
.tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-6)}
.tier-card{background:var(--paper-raised);border:3px solid var(--ink);display:flex;flex-direction:column;min-width:0}
.tier-card:target,.tier-card:focus{outline:3px solid var(--chap);outline-offset:3px}
.tier-card-art{padding:var(--space-4);border-bottom:3px solid var(--ink);background:var(--paper)}
.tier-card-top{display:flex;justify-content:space-between;gap:var(--space-2);font:500 11px/15px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--chap);margin-bottom:var(--space-2)}
.tier-focus{background:var(--chap);color:#fff;border-radius:999px;padding:0 8px}
.tier-card-art img{width:100%;aspect-ratio:1;object-fit:contain}
.tier-name{font:400 20px/24px var(--font-poster);text-transform:uppercase;margin:var(--space-4) 0 0}
.tier-card-body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.tier-question{font-weight:600}
.tier-goal-label{font:500 11px/15px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--chap);margin-top:var(--space-2)}
.tier-card-body p{font-size:15px;line-height:23px}
.tier-topics{list-style:none;padding:0;margin:var(--space-2) 0 0;display:flex;gap:6px;flex-wrap:wrap}
.tier-topics li{font-size:13px;line-height:18px;border:2px solid var(--ink);border-radius:999px;padding:2px 10px;background:#fff}
.tier-next{margin-top:auto;padding-top:var(--space-4);color:var(--ink);font-weight:600}
.tier-journey-focus{margin-top:var(--space-12);background:var(--ink);color:var(--paper);padding:var(--space-6);display:flex;gap:var(--space-6);justify-content:space-between;align-items:center;flex-wrap:wrap}
.tier-journey-focus a{color:var(--paper);font-weight:600}
.tier-journey-focus strong{font-family:var(--font-plan);font-size:24px}

/* galerie */
.game-gallery{padding-block:var(--space-12);border-top:3px solid var(--ink)}
.gallery-heading{display:flex;justify-content:space-between;align-items:end;gap:var(--space-6);flex-wrap:wrap}
.gallery-filters{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-6)}
.gallery-filters button{font:500 14px/1 var(--font-sans);border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);padding:8px 14px;cursor:pointer}
.gallery-filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.gallery-count{font:500 12px/16px var(--font-mono);letter-spacing:.06em;color:var(--ink-muted);margin:var(--space-4) 0}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.gallery-grid figure{margin:0;min-width:0}
.gallery-grid figure[hidden]{display:none}
.gallery-open{display:block;border:3px solid var(--ink);background:var(--ink)}
.gallery-open img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:opacity .2s}
.gallery-open:hover img{opacity:.85}
.gallery-grid figcaption{font-size:14px;line-height:20px;margin-top:var(--space-2);display:flex;gap:var(--space-2)}
.gallery-index{font:500 12px/20px var(--font-mono);color:var(--redline)}

/* simulateur */
.game-simulator{padding-block:var(--space-12);border-top:3px solid var(--ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12);align-items:center}
.game-simulator p + p{margin-top:var(--space-4)}
.game-simulator figure img{border:3px solid var(--ink)}
.game-simulator figcaption{font:500 12px/16px var(--font-mono);letter-spacing:.04em;color:var(--ink-muted);margin-top:var(--space-2)}

/* contact */
body[data-page="nimby"] .contact{padding-block:var(--space-12);border-top:3px solid var(--ink)}
body[data-page="nimby"] .contact p{font-size:18px;line-height:28px;margin-bottom:var(--space-6)}
body[data-page="nimby"] .contact .text-link{margin-left:var(--space-6)}
.wrap-notes{border-top:3px solid var(--ink) !important}

/* visionneuse d'images */
#image-viewer{border:3px solid var(--ink);padding:0;background:var(--ink);color:var(--paper);max-width:min(1200px,94vw);width:100%}
#image-viewer::backdrop{background:rgba(21,19,19,.85)}
#image-viewer img{width:100%;max-height:78vh;object-fit:contain;background:#000}
.viewer-toolbar,.viewer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-4)}
#image-viewer button{font:600 14px/1 var(--font-sans);background:var(--paper);color:var(--ink);border:2px solid var(--paper);padding:8px 12px;cursor:pointer}
#image-viewer button:disabled{opacity:.4;cursor:default}

@media (max-width:860px){
  .game-hero-copy{margin:-48px var(--space-4) 0;padding:var(--space-4) var(--space-4) var(--space-6);box-shadow:5px 5px 0 var(--ink)}
  .game-hero h1{font-size:64px;line-height:60px;-webkit-text-stroke:2px var(--ink)}
  .game-intro h2,.tier-journey h2,.gallery-heading h2,.game-simulator h2,body[data-page="nimby"] .contact h2{font-size:34px;line-height:34px}
  .tier-chapter-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tier-grid,.gallery-grid{grid-template-columns:minmax(0,1fr)}
  .game-simulator{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
}
@media (min-width:861px) and (max-width:1100px){.gallery-grid,.tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* titres longs (« D'EXPÉRIMENTATION ») : plus petits et coupables */
.game-simulator h2{font-size:40px;line-height:40px}
body[data-page="nimby"] h1,body[data-page="nimby"] h2,body[data-page="nimby"] h3{overflow-wrap:break-word;hyphens:auto}
@media (max-width:860px){
  .game-intro h2,.tier-journey h2,.gallery-heading h2,.game-simulator h2,body[data-page="nimby"] .contact h2{font-size:28px;line-height:30px}
  .game-hero h1{font-size:56px;line-height:54px}
}

/* boutons « touche » (modele A, 2026-10-23) : flanc visible, s'enfonce au clic */
body[data-page="nimby"] .button{position:relative;padding:0 0 10px;border:0;background:none;box-shadow:none;color:#fff;-webkit-tap-highlight-color:transparent}
body[data-page="nimby"] .button:hover{transform:none;box-shadow:none}
body[data-page="nimby"] .button::before{content:"";position:absolute;left:0;right:0;top:10px;bottom:0;border:3px solid var(--ink);border-radius:12px;background:var(--ink);box-shadow:0 8px 14px rgba(21,19,19,.3)}
body[data-page="nimby"] .button .cap{display:block;position:relative;padding:13px 24px;font:400 18px/22px var(--font-poster);text-transform:uppercase;letter-spacing:.01em;color:#fff;border:3px solid var(--ink);border-radius:12px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.28),transparent 55%),linear-gradient(180deg,#E3302A,#B81F19);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -6px 10px rgba(0,0,0,.18);text-shadow:0 1px 0 rgba(0,0,0,.3);transition:transform .07s ease}
body[data-page="nimby"] .button:hover .cap{transform:translateY(1px)}
body[data-page="nimby"] .button:active .cap,body[data-page="nimby"] .button.is-down .cap{transform:translateY(8px)}
.gallery-filters button{box-shadow:0 3px 0 var(--ink);transition:transform .06s ease,box-shadow .06s ease}
.gallery-filters button:active,.gallery-filters button[aria-pressed="true"]{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
#image-viewer button:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){body[data-page="nimby"] .button .cap,.gallery-filters button{transition:none;transform:none!important}}