/* FREYSINET Solutions. Palette taken from the Pleins Pouvoirs HUD (green-black, paper, JOUER gold). */
@font-face{font-family:"Pixelify";src:url(/assets/fonts/PixelifySans-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Jersey";src:url(/assets/fonts/Jersey15-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Instrument";src:url(/assets/fonts/InstrumentSans-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument";src:url(/assets/fonts/InstrumentSans-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}

:root{
  --bg:#152418; --bg-2:#1c2e20; --surface:#22372a; --ink:#f1ead8; --muted:#b9c2b3;
  --line:#3b5442; --paper:#f1ead8; --paper-ink:#152418; --gold:#ffe08a; --gold-ink:#152418;
  --shadow:#0b130d; --focus:#ffe08a; --logo-accent:#E07A55;
  --pixel:"Pixelify",ui-monospace,monospace; --label:"Jersey",ui-monospace,monospace;
  --sans:"Instrument",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{--bg:#e6eae1; --bg-2:#d9dfd3; --surface:#f5f6f0; --ink:#152418; --muted:#3f5045;
    --line:#9fae9f; --shadow:#152418; --focus:#152418; --logo-accent:#B5502F; color-scheme:light}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
.px{image-rendering:pixelated}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:2px}
a:hover{text-decoration-color:var(--gold)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
h1,h2,h3{font-family:var(--pixel);font-weight:700;line-height:1.05;letter-spacing:0;margin:0}
p{margin:0}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--gold-ink);padding:8px 12px;z-index:10}
.skip:focus{left:8px}
.muted{color:var(--muted)}

/* header */
.top{border-bottom:2px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.brand-logo{display:block;height:40px;width:auto}
.nav{display:flex;gap:18px;font-family:var(--label);font-size:1.25rem}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline}

/* buttons & stamps */
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;background:var(--gold);color:var(--gold-ink);
  font-family:var(--pixel);font-size:1.15rem;padding:12px 20px;border:2px solid var(--gold-ink);
  box-shadow:4px 4px 0 var(--shadow);text-decoration:none;transition:transform .15s cubic-bezier(.16,1,.3,1),box-shadow .15s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--shadow)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--shadow)}
.stamp{display:inline-block;font-family:var(--label);font-size:1.35rem;line-height:1;padding:10px 14px 8px;
  border:2px dashed currentColor;color:var(--gold);transform:rotate(-2deg)}
@media (prefers-color-scheme:light){.stamp{color:#7a2d1d}}

/* reveal */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

section{padding:64px 0}
@media (min-width:900px){section{padding:96px 0}}
.h2{font-size:clamp(1.9rem,6vw,3rem);max-width:18ch}
.lede{margin-top:14px;max-width:56ch;color:var(--muted)}

/* ===== studio home ===== */
.hero{padding:40px 0 56px}
.hero .wrap{display:grid;gap:36px;align-items:center}
.hero h1{font-size:clamp(2.3rem,8.6vw,3.7rem);max-width:21ch}
.hero .lede{font-size:1.15rem;color:var(--ink);opacity:.86}
.hero .actions{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.window{position:relative;height:420px;border:2px solid var(--shadow);box-shadow:8px 8px 0 var(--shadow);overflow:hidden;background:#0e1a12}
.window .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.window .who{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:68%;width:auto}
@media (min-width:900px){
  .hero{padding:72px 0 96px}
  .hero .wrap{grid-template-columns:1.15fr .85fr;gap:64px}
  .window{height:540px}
}

.games{background:var(--bg-2);border-top:2px solid var(--line);border-bottom:2px solid var(--line)}
.game-list{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:28px}
.game{display:grid;gap:28px;background:var(--surface);border:2px solid var(--shadow);box-shadow:6px 6px 0 var(--shadow);padding:20px}
.game .shots2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.game .shots2 img{background:#0e1a12;border:2px solid var(--shadow)}
.game .shots2 img+img{margin-top:28px}
.game .meta{display:flex;gap:14px;align-items:center}
.game .meta img{width:56px;height:56px;border:2px solid var(--shadow)}
.game h3{font-size:clamp(1.8rem,6vw,2.6rem)}
.game .sub{font-family:var(--label);font-size:1.2rem;color:var(--muted)}
.game p.desc{margin-top:18px;max-width:52ch}
.game .actions{margin-top:24px;display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center}
.next{display:flex;gap:16px;align-items:center;padding:18px 20px;border:2px dashed var(--line);color:var(--muted)}
.next img{width:64px;opacity:.85}
@media (min-width:760px){
  .game{grid-template-columns:1fr 420px;padding:36px;gap:48px;align-items:center}
}

.contact .wrap{display:grid;gap:28px;align-items:end}
.mail{display:inline-block;font-family:var(--pixel);font-size:clamp(1.5rem,7.4vw,3.6rem);line-height:1.1;word-break:break-all;margin-top:22px}
.contact .env{width:160px}
@media (min-width:760px){.contact .wrap{grid-template-columns:1fr auto}.contact .env{width:220px}}

.legal{border-top:2px solid var(--line);padding:48px 0 32px;font-size:.95rem}
.legal h2{font-size:1.5rem;margin-bottom:22px}
.legal dl{display:grid;gap:18px;margin:0}
.legal dt{font-family:var(--label);font-size:1.2rem;color:var(--gold)}
@media (prefers-color-scheme:light){.legal dt{color:#7a2d1d}}
.legal dd{margin:2px 0 0;color:var(--muted);max-width:44ch}
.legal .foot{margin-top:40px;display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--muted);font-family:var(--label);font-size:1.1rem}
@media (min-width:760px){.legal dl{grid-template-columns:1.3fr 1fr 1fr;gap:32px}}

/* ===== game page ===== */
[data-lang="fr"] body [lang="en"],[data-lang="en"] body [lang="fr"]{display:none !important}
.langs{display:flex;border:2px solid var(--line)}
.langs button{font:1.15rem/1 var(--label);background:none;color:var(--muted);border:0;padding:7px 10px 5px;cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--gold);color:var(--gold-ink)}

.pp-hero{padding:36px 0 64px}
.pp-hero .wrap{display:grid;gap:44px;align-items:center}
.pp-hero h1{font-size:clamp(3rem,14vw,6rem);line-height:.92;text-transform:uppercase}
.pp-hero .lede{color:var(--ink);opacity:.88;font-size:1.15rem}
.pp-hero .actions{margin-top:30px}
.phone{justify-self:center;width:min(270px,72vw);padding:10px;background:#0b130d;border:2px solid var(--line);box-shadow:8px 8px 0 var(--shadow);border-radius:0}
.phone img{width:100%;aspect-ratio:720/1440;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  /* the swing echoes the left/right swipe, the game's one input */
  .phone.swing{animation:swing 5s cubic-bezier(.45,0,.55,1) infinite}
  @keyframes swing{0%,100%{transform:rotate(-3deg) translateX(-6px)}50%{transform:rotate(3deg) translateX(6px)}}
}
@media (min-width:900px){
  .pp-hero{padding:64px 0 96px}
  .pp-hero .wrap{grid-template-columns:1.2fr .8fr}
  .phone{width:300px}
}

.hud{background:#152418;color:#f1ead8;border-top:2px solid #3b5442;border-bottom:4px solid #b5df9f}
.hud .h2{color:#f1ead8}
.hud .lede{color:#c6cfbf}
.gauges{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 16px}
.gauges li{text-align:center}
.gauges img{width:100%;max-width:200px;margin:0 auto}
.gauges span{display:block;margin-top:8px;font-family:var(--label);font-size:1.45rem}
.debt{margin-top:36px;font-family:var(--label);font-size:1.35rem;color:#ffe08a}
@media (min-width:760px){.gauges{grid-template-columns:repeat(4,1fr)}}

.cast-row{list-style:none;margin:40px 0 0;padding:0 0 12px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.cast-row li{scroll-snap-align:start;display:flex;flex-direction:column}
.cast-row figure{margin:0;height:220px;display:flex;align-items:flex-end;justify-content:center;background:var(--bg-2);border-bottom:4px solid var(--gold);overflow:hidden}
.cast-row img{height:200px;width:auto;max-width:none}
.cast-row b{display:block;margin-top:10px;font-family:var(--label);font-weight:400;font-size:1.35rem;line-height:1.1}

.cards .wrap{display:grid;gap:32px;align-items:center}
.cards .speaker{display:flex;flex-direction:column;align-items:flex-start}
.cards .speaker img{width:192px;margin-top:28px}
.cards .speaker b{font-family:var(--label);font-weight:400;font-size:1.3rem;margin-top:10px;border:2px solid var(--line);padding:4px 10px 2px}
.deck{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.card{background:var(--paper);color:var(--paper-ink);border:2px solid var(--shadow);box-shadow:5px 5px 0 var(--shadow);padding:20px 20px 16px}
.card q{display:block;font-weight:600;font-size:1.15rem;line-height:1.4;quotes:none}
.card .choices{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-family:var(--label);font-size:1.25rem;line-height:1.1}
.card .choices span:last-child{text-align:right}
.deck li:nth-child(1){transform:rotate(-1.2deg)}
.deck li:nth-child(2){transform:rotate(1deg)}
.deck li:nth-child(3){transform:rotate(-.6deg)}
@media (min-width:860px){.deck li:nth-child(2){transform:rotate(1deg) translateX(14px)}.cards .wrap{grid-template-columns:.8fr 1.2fr;gap:64px}.cards .speaker img{width:256px}}

.loop{position:relative;color:#f1ead8;text-align:center;overflow:hidden;padding:120px 0;background:#0a0716}
.loop>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.loop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(10,7,22,.35),rgba(10,7,22,.9))}
.loop .wrap{position:relative;z-index:1}
.loop p.big{font-family:var(--pixel);font-size:clamp(2rem,8vw,4.2rem);line-height:1.05;max-width:16ch;margin:0 auto}
.loop p.small{margin:22px auto 0;max-width:44ch;color:#ddd6e8}

.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:40px;align-items:start}
.shots figure{margin:0}
.shots a{display:block;border:2px solid var(--shadow);box-shadow:4px 4px 0 var(--shadow);background:#0b130d}
.shots figcaption{margin-top:12px;font-family:var(--label);font-size:1.1rem;color:var(--muted);line-height:1.15}
.shots figure:nth-child(2){margin-top:40px}
@media (min-width:760px){.shots{gap:32px;max-width:900px}.shots figure:nth-child(2){margin-top:80px}.shots figcaption{font-size:1.3rem}}

/* ===== privacy ===== */
.doc{max-width:70ch;margin:0 auto;padding:40px 20px 72px}
.doc h1{font-size:clamp(2rem,8vw,3rem)}
.doc .when{margin-top:12px;color:var(--muted)}
.doc .jump{margin-top:20px;display:flex;gap:18px;flex-wrap:wrap;font-family:var(--label);font-size:1.25rem}
.doc h2{font-family:var(--sans);font-weight:600;font-size:1.2rem;line-height:1.3;margin:36px 0 8px}
.doc p{line-height:1.7}
.doc .lang-split{margin-top:72px;padding-top:40px;border-top:2px solid var(--line)}
.doc .back{font-family:var(--label);font-size:1.25rem;display:inline-block;margin-bottom:28px}

/* Démo jouable (reprise de la version A) */
/* La carte jouable */
.stage { position: relative; width: min(380px, 100%); margin-inline: auto; aspect-ratio: 9 / 16; overflow: hidden; border: 4px solid #18221A; box-shadow: 10px 10px 0 #0006; user-select: none; touch-action: pan-y; }
.stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gauges-demo { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px 14px 10px; background: #1C2A20; border-bottom: 3px solid #B5DDA0; }
.gauge { font-size: .72rem; color: #A9BBA6; text-align: center; }
.gauge .bar { display: flex; gap: 2px; height: 10px; margin-bottom: 4px; }
.gauge .bar i { flex: 1; background: #ffffff22; }
.gauge .bar i.on { background: #F1F3E6; }
.gauge.up .bar i.on { background: #B5DDA0; }
.gauge.down .bar i.on { background: #E07A5F; }
.question { position: relative; margin: 14px 14px 0; background: #F1F3E6; color: #18221A; border: 3px solid #18221A; padding: 12px 14px; font-weight: 600; font-size: 1rem; line-height: 1.4; min-height: 5.6em; }
.dcard { position: absolute; left: 50%; bottom: 52px; width: 72%; translate: -50% 0; transition: transform .25s ease-out, opacity .25s; cursor: grab; }
.dcard img { width: 100%; display: block; filter: drop-shadow(0 0 0 #B5DDA0) drop-shadow(3px 0 0 #B5DDA0) drop-shadow(-3px 0 0 #B5DDA0) drop-shadow(0 -3px 0 #B5DDA0); }
.dcard.dragging { transition: none; cursor: grabbing; }
.dwho { position: absolute; left: 14px; right: 14px; bottom: 12px; text-align: center; background: #1C2A20; border: 2px solid #B5DDA0; color: #F1F3E6; font-size: .78rem; font-weight: 600; letter-spacing: .04em; padding: 6px; }
.choices { position: absolute; left: 0; right: 0; top: 45%; display: flex; justify-content: space-between; padding-inline: 8px; pointer-events: none; }
.choices button { pointer-events: auto; font: 600 .9rem var(--sans); background: #1C2A20; color: #F1F3E6; border: 2px solid #B5DDA0; padding: 8px 10px; min-height: 44px; max-width: 46%; cursor: pointer; }
.choices button:hover { background: #F1F3E6; color: #18221A; }
.stage-end { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 32px; background: #1C2A20ee; }
.stage.over .stage-end { display: flex; }
.stage-end p { font-family: var(--pixel); font-size: 1.5rem; color: #F1F3E6; }
.stage-hint { text-align: center; font-size: .85rem; color: var(--muted); max-width: 380px; margin-inline: auto; margin-top: 14px; }

.stage .replay { font: 600 1rem var(--sans); background: #F1F3E6; color: #18221A; border: 0; padding: 10px 18px; min-height: 44px; cursor: pointer; box-shadow: 4px 4px 0 #B5DDA0; }
.demo { justify-self: center; width: min(380px, 100%); }
@media (prefers-reduced-motion: reduce) { .stage * { transition: none !important; } }

/* Captures : carrousel au doigt sur mobile, agrandissement dans la page */
@media (max-width:759px){
  .shots{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:68vw;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:0 20px 16px;scroll-padding-inline:20px}
  .shots figure{scroll-snap-align:start}
  .shots figure:nth-child(2){margin-top:0}
}
.shots a{cursor:zoom-in}
.zoom{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%}
.zoom::backdrop{background:#0b130dee}
.zoom[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.zoom img{max-height:calc(100dvh - 96px);max-width:calc(100vw - 32px);width:auto;border:2px solid #3b5442}
.zoom-close{font:1.3rem/1 var(--label);background:var(--gold);color:var(--gold-ink);border:2px solid var(--gold-ink);padding:10px 18px;min-height:44px;cursor:pointer}

/* En-tête : menu + langues */
.top-right{display:flex;align-items:center;gap:18px}
@media (max-width:380px){.top-right .nav{display:none}}