:root{
  --cfdt-orange:#f58220;
  --cfdt-green:#00856f;
  --cfdt-green-dark:#006b5a;
  --yellow:#ffd23f;
  --ink:#111111;
  --paper:#f4efe4;
  --white:#ffffff;
  --muted:#68645e;
  --red:#d94b38;
  --blue:#4f7aa3;
  --shadow:0 24px 60px rgba(17,17,17,.18);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at top left,#fff6da 0,#f4efe4 34%,#e9e2d5 100%);}
button,a{font:inherit}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.app{min-height:100vh;padding:22px;display:grid;place-items:center}
.screen{display:none;width:100%;max-width:1120px;animation:fadeIn .28s ease}
.screen.is-active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.brand{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.brand-mark{background:var(--cfdt-orange);color:#fff;font-weight:1000;letter-spacing:-.08em;padding:10px 13px 9px;border-radius:8px;box-shadow:8px 8px 0 var(--ink);transform:rotate(-2deg)}
.brand-text{font-weight:800;color:#333}
.hero-layout{display:grid;grid-template-columns:1fr 1.08fr;gap:34px;align-items:center}
.hero-copy,.panel{background:rgba(255,255,255,.78);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.08);border-radius:30px;padding:34px;box-shadow:var(--shadow)}
.hero-copy h1{font-size:clamp(3rem,8vw,7rem);line-height:.86;margin:0 0 20px;letter-spacing:-.08em;text-transform:uppercase}
.hero-copy h1 span{color:var(--cfdt-green)}
.eyebrow{text-transform:uppercase;font-size:.82rem;font-weight:950;letter-spacing:.14em;color:var(--cfdt-green);margin:0 0 12px}
.brush{display:inline-block;background:var(--yellow);font-size:clamp(1.1rem,3vw,1.55rem);font-weight:1000;padding:10px 18px;border-radius:8px;box-shadow:8px 8px 0 rgba(0,0,0,.13);transform:rotate(-1.5deg);margin:0 0 20px}
.intro,.muted{font-size:1.08rem;line-height:1.55;color:#3b3934}
.home-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{border:0;border-radius:999px;padding:14px 20px;font-weight:950;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s ease;min-height:48px}
.btn-primary{background:var(--cfdt-green);color:#fff;box-shadow:0 12px 24px rgba(0,133,111,.24)}
.btn-primary:hover{background:var(--cfdt-green-dark);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--ink);border:2px solid rgba(0,0,0,.12)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--ink)}
.btn-share{background:var(--yellow);color:var(--ink)}
.hero-card{background:#111;border-radius:34px;padding:12px;box-shadow:var(--shadow);transform:rotate(1deg)}
.hero-scene{height:520px;border-radius:24px;overflow:hidden}

.panel{max-width:980px;margin:auto}
.panel.narrow{max-width:760px}
.panel h2{font-size:clamp(2rem,5vw,4rem);line-height:.95;margin:0 0 14px;letter-spacing:-.055em}
.rules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0}
.rule{background:#f7f3ea;border-radius:20px;padding:18px;border:1px solid rgba(0,0,0,.06)}
.rule strong{display:block;font-size:1.2rem;margin-bottom:6px}
.rule span{color:var(--muted)}
.job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}
.job-card{position:relative;overflow:hidden;text-align:left;background:#fff;border:2px solid rgba(0,0,0,.08);border-radius:24px;padding:18px;min-height:190px;cursor:pointer;transition:.18s ease;box-shadow:0 12px 28px rgba(0,0,0,.08)}
.job-card:hover{transform:translateY(-4px);border-color:var(--cfdt-green);box-shadow:0 18px 38px rgba(0,0,0,.12)}
.job-card h3{font-size:1.25rem;margin:0 0 8px}
.job-card p{color:var(--muted);line-height:1.4;margin:0}
.job-mini{position:absolute;right:12px;bottom:10px;transform:scale(.68);transform-origin:bottom right}

.game-shell{background:#111;border-radius:28px;padding:12px;box-shadow:var(--shadow);overflow:hidden}
.hud{background:#111;color:#fff;border-radius:18px 18px 0 0;padding:16px;display:grid;grid-template-columns:1.1fr 2fr;gap:18px;align-items:center}
.hud-label{color:#cfcfcf;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;margin:0 0 4px;font-weight:900}
.hud strong{font-size:1.15rem}
.hud-bars{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px}
.bar-row{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:center;font-size:.9rem;font-weight:800}
.bar{height:12px;background:#383838;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:50%;background:linear-gradient(90deg,var(--yellow),var(--cfdt-orange));border-radius:99px;transition:width .45s ease, background .25s ease}
.scene{position:relative;height:430px;background:linear-gradient(#c7e8ed 0 55%,#88b56d 55% 100%);overflow:hidden}
.sky{position:absolute;inset:0 0 45%;background:linear-gradient(#b9e4ef,#e8fbff)}
.decor{position:absolute;inset:0}
.dialogue{background:#fff;border-top:8px solid var(--cfdt-green);padding:22px;border-radius:0 0 18px 18px}
.dialogue-top{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.step-badge,.case-type{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:1000;border-radius:999px;padding:6px 10px}
.step-badge{background:#111;color:#fff}
.case-type{background:#f2efe6;color:#333}
.dialogue h2{font-size:clamp(1.45rem,3vw,2.4rem);margin:0 0 8px;letter-spacing:-.035em}
.dialogue p{font-size:1.04rem;line-height:1.45;margin:0 0 16px;color:#3d3a35}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.choice{border:2px solid rgba(0,0,0,.08);background:#f7f4ed;border-radius:18px;padding:15px;text-align:left;cursor:pointer;font-weight:900;line-height:1.25;transition:.16s ease}
.choice small{display:block;color:var(--muted);font-weight:700;margin-top:8px}
.choice:hover{transform:translateY(-3px);border-color:var(--cfdt-green);background:#fff}

.alert-pill{position:absolute;top:24px;left:50%;transform:translateX(-50%);background:var(--yellow);color:#111;padding:11px 18px;border-radius:999px;font-weight:1000;box-shadow:0 8px 22px rgba(0,0,0,.22);animation:pulse 1.5s infinite}
.impact-bubble{position:absolute;right:24px;bottom:26px;max-width:260px;background:#111;color:#fff;border-radius:18px;padding:14px;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.24);opacity:0;transform:translateY(10px);transition:.22s ease}
.impact-bubble.show{opacity:1;transform:none}

.cloud{position:absolute;background:#fff;border-radius:999px;opacity:.85}
.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud-1{width:120px;height:34px;left:60px;top:52px}
.cloud-1:before{width:50px;height:50px;left:18px;top:-22px}.cloud-1:after{width:64px;height:64px;right:10px;top:-32px}
.cloud-2{width:90px;height:28px;right:90px;top:74px;opacity:.65}
.cloud-2:before{width:44px;height:44px;left:14px;top:-20px}.cloud-2:after{width:50px;height:50px;right:6px;top:-25px}

.building{position:absolute;bottom:72px;background:#efe1c4;border:5px solid #111;border-radius:12px;box-shadow:10px 10px 0 rgba(0,0,0,.18)}
.building-townhall{left:50%;width:250px;height:185px;transform:translateX(-50%)}
.roof{position:absolute;left:-20px;right:-20px;top:-48px;height:55px;background:#e27a3f;border:5px solid #111;clip-path:polygon(50% 0,100% 100%,0 100%)}
.clock{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:42px;height:42px;border:4px solid #111;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:.7rem;font-weight:1000}
.door{position:absolute;bottom:0;left:50%;width:56px;height:78px;background:#6b4c35;border:4px solid #111;border-bottom:0;transform:translateX(-50%);border-radius:10px 10px 0 0}
.window{position:absolute;width:42px;height:45px;background:#9ed8e5;border:4px solid #111;border-radius:8px;top:86px}
.w1{left:30px}.w2{right:30px}

.character{position:absolute;width:78px;height:145px;filter:drop-shadow(0 10px 8px rgba(0,0,0,.22))}
.character .head{position:absolute;left:22px;top:0;width:42px;height:42px;background:#f0b384;border:4px solid #111;border-radius:50%;z-index:3}
.character .head:before{content:"";position:absolute;left:6px;top:-14px;width:32px;height:22px;background:#2f2a25;border:4px solid #111;border-radius:20px 20px 8px 8px}
.character .body{position:absolute;left:12px;top:38px;width:56px;height:66px;background:var(--cfdt-green);border:4px solid #111;border-radius:18px 18px 12px 12px}
.character .body:before,.character .body:after{content:"";position:absolute;top:10px;width:18px;height:54px;background:#f0b384;border:4px solid #111;border-radius:999px;z-index:-1}
.character .body:before{left:-18px;transform:rotate(14deg)}.character .body:after{right:-18px;transform:rotate(-14deg)}
.character .legs{position:absolute;left:18px;top:98px;width:46px;height:46px}
.character .legs:before,.character .legs:after{content:"";position:absolute;top:0;width:18px;height:48px;background:#252525;border:4px solid #111;border-radius:0 0 999px 999px}
.character .legs:before{left:0}.character .legs:after{right:0}
.char-tech{left:120px;bottom:55px}.char-admin{right:125px;bottom:55px}
.player{left:135px;bottom:58px;transform:scale(1.15)}
.idle{animation:idle 1.6s ease-in-out infinite}.delay{animation-delay:.4s}
@keyframes idle{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes pulse{0%,100%{scale:1}50%{scale:1.045}}

.npc{position:absolute;bottom:70px;width:56px;height:100px;border:4px solid #111;border-radius:16px;background:#fff;box-shadow:8px 8px 0 rgba(0,0,0,.12)}
.npc:before{content:"";position:absolute;top:-36px;left:8px;width:34px;height:34px;border-radius:50%;background:#e6aa7c;border:4px solid #111}
.npc-one{right:220px}.npc-two{right:140px;transform:scale(.86);opacity:.95}

.decor.ecole:before{content:"";position:absolute;left:45%;bottom:70px;width:320px;height:165px;background:#f1dfbd;border:5px solid #111;border-radius:14px;box-shadow:10px 10px 0 rgba(0,0,0,.18)}
.decor.ecole:after{content:"ÉCOLE";position:absolute;left:calc(45% + 95px);bottom:195px;background:#fff;border:4px solid #111;border-radius:8px;padding:6px 18px;font-weight:1000}
.decor.atelier:before{content:"";position:absolute;left:42%;bottom:68px;width:350px;height:165px;background:#d6d8d2;border:5px solid #111;border-radius:14px;box-shadow:10px 10px 0 rgba(0,0,0,.18)}
.decor.atelier:after{content:"CENTRE TECHNIQUE";position:absolute;left:calc(42% + 75px);bottom:196px;background:#fff;border:4px solid #111;border-radius:8px;padding:6px 14px;font-weight:1000}
.decor.mairie:before{content:"";position:absolute;left:44%;bottom:68px;width:330px;height:170px;background:#efe1c4;border:5px solid #111;border-radius:14px;box-shadow:10px 10px 0 rgba(0,0,0,.18)}
.decor.mairie:after{content:"MAIRIE";position:absolute;left:calc(44% + 125px);bottom:200px;background:#fff;border:4px solid #111;border-radius:8px;padding:6px 18px;font-weight:1000}
.decor.social:before{content:"";position:absolute;left:43%;bottom:68px;width:340px;height:165px;background:#ead6df;border:5px solid #111;border-radius:14px;box-shadow:10px 10px 0 rgba(0,0,0,.18)}
.decor.social:after{content:"ACCUEIL SOCIAL";position:absolute;left:calc(43% + 85px);bottom:196px;background:#fff;border:4px solid #111;border-radius:8px;padding:6px 14px;font-weight:1000}
.decor.biblio:before{content:"";position:absolute;left:43%;bottom:68px;width:340px;height:165px;background:#d2e3dc;border:5px solid #111;border-radius:14px;box-shadow:10px 10px 0 rgba(0,0,0,.18)}
.decor.biblio:after{content:"MÉDIATHÈQUE";position:absolute;left:calc(43% + 94px);bottom:196px;background:#fff;border:4px solid #111;border-radius:8px;padding:6px 14px;font-weight:1000}


.decor.projet:before{content:"";position:absolute;left:42%;bottom:68px;width:365px;height:175px;background:#dfe8ea;border:5px solid #111;border-radius:14px;box-shadow:10px 10px 0 rgba(0,0,0,.18)}
.decor.projet:after{content:"PÔLE PROJET";position:absolute;left:calc(42% + 110px);bottom:205px;background:#fff;border:4px solid #111;border-radius:8px;padding:6px 14px;font-weight:1000}
.decor.projet .dummy{display:none}

.result-panel{max-width:860px}
.result-text{font-size:1.12rem;line-height:1.55;color:#383632}
.result-card{display:flex;gap:16px;align-items:center;background:#f7f3ea;border-radius:24px;padding:18px;margin:20px 0;border:1px solid rgba(0,0,0,.08)}
.result-badge{font-size:2.4rem;background:#fff;border-radius:18px;min-width:80px;min-height:80px;display:grid;place-items:center;box-shadow:8px 8px 0 rgba(0,0,0,.08)}
.result-card strong{font-size:1.45rem}
.result-card p{margin:6px 0 0;color:var(--muted)}
.final-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}
.final-bars div{background:#111;color:#fff;border-radius:18px;padding:14px;text-align:center}
.final-bars span{display:block;color:#ddd;font-size:.82rem;text-transform:uppercase;font-weight:900}
.final-bars strong{font-size:2rem}
.claims{background:#fff;border:2px dashed rgba(0,0,0,.18);border-radius:20px;padding:18px}
.claims h3{margin:0 0 10px}
.claims ul{margin:0;padding-left:20px;line-height:1.55}
.privacy{font-size:.85rem;color:var(--muted);margin-top:18px}

.flash-good{animation:flashGood .5s ease}
.flash-bad{animation:flashBad .5s ease}
@keyframes flashGood{0%{box-shadow:inset 0 0 0 0 rgba(0,133,111,0)}35%{box-shadow:inset 0 0 0 999px rgba(0,133,111,.18)}100%{box-shadow:inset 0 0 0 0 rgba(0,133,111,0)}}
@keyframes flashBad{0%{box-shadow:inset 0 0 0 0 rgba(217,75,56,0)}35%{box-shadow:inset 0 0 0 999px rgba(217,75,56,.18)}100%{box-shadow:inset 0 0 0 0 rgba(217,75,56,0)}}

@media (max-width:900px){
  .app{padding:12px}
  .hero-layout{grid-template-columns:1fr}
  .hero-card{transform:none}
  .job-grid{grid-template-columns:1fr 1fr}
  .hud{grid-template-columns:1fr}
  .choices{grid-template-columns:1fr}
  .scene{height:360px}
  .hero-scene{height:420px}
  .bar-row{grid-template-columns:120px 1fr}
}
@media (max-width:620px){
  .brand{margin-bottom:12px}
  .hero-copy,.panel{padding:22px;border-radius:24px}
  .job-grid,.rules-grid,.final-bars{grid-template-columns:1fr}
  .hud-bars{grid-template-columns:1fr}
  .scene{height:320px}
  .character.player{left:48px;transform:scale(.9)}
  .npc-one{right:100px}.npc-two{right:44px}
  .alert-pill{font-size:.85rem;white-space:nowrap}
  .decor.ecole:before,.decor.atelier:before,.decor.mairie:before,.decor.social:before,.decor.biblio:before{left:38%;width:230px;height:135px}
  .decor.ecole:after,.decor.atelier:after,.decor.mairie:after,.decor.social:after,.decor.biblio:after{left:47%;bottom:170px;font-size:.75rem}
}

/* === Amélioration V2 : rappel campagne + sprites plus propres === */
.campaign-topline{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.campaign-topline .brand{margin-bottom:0}
.campaign-claim{background:#111;color:#fff;border-radius:999px;padding:12px 18px;font-weight:1000;letter-spacing:-.02em;box-shadow:8px 8px 0 rgba(0,0,0,.12)}
.campaign-kicker{display:inline-flex;background:#111;color:#fff;border-radius:999px;padding:8px 13px;font-weight:950;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px}
.campaign-tags{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 18px}
.campaign-tags span{background:#fff;border:2px solid rgba(0,0,0,.14);border-radius:999px;padding:7px 10px;font-size:.8rem;font-weight:900;color:#2e2c28}
.hero-copy{position:relative;overflow:hidden}
.hero-copy:after{content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:50%;background:var(--cfdt-orange);opacity:.14}
.hero-copy:before{content:"2026";position:absolute;right:24px;bottom:18px;font-size:5rem;font-weight:1000;letter-spacing:-.08em;color:rgba(0,0,0,.045);z-index:0}.hero-copy>*{position:relative;z-index:1}

/* Boutons de choix : on ne montre plus les points, seulement la décision. */
.choice{min-height:72px;display:flex;align-items:center;position:relative;padding-left:20px;padding-right:48px;background:linear-gradient(180deg,#fff,#f7f3ea)}
.choice:after{content:"→";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.35rem;font-weight:1000;color:var(--cfdt-green)}
.choice small{display:none!important}

/* Sprites premium CSS : visage, cheveux, badge, chaussures, accessoires par métier. */
.character{--skin:#efb07d;--hair:#29231f;--pants:#242424;--shoe:#111;}
.character .head{background:var(--skin);box-shadow:inset -5px -5px 0 rgba(0,0,0,.08)}
.character .head:before{background:var(--hair)}
.character .head:after{content:"";position:absolute;left:10px;top:18px;width:6px;height:6px;background:#111;border-radius:50%;box-shadow:17px 0 0 #111, 8px 11px 0 -2px rgba(180,70,55,.45)}
.character .body{background:var(--player-body,var(--cfdt-green));box-shadow:inset -7px -7px 0 rgba(0,0,0,.12)}
.job-card .character .body{background:var(--body)}
.character .body:after{right:-18px;transform:rotate(-14deg)}
.character .legs:before,.character .legs:after{background:var(--pants)}
.character .legs:before{box-shadow:0 46px 0 -2px var(--shoe)}
.character .legs:after{box-shadow:0 46px 0 -2px var(--shoe)}
.character:after{content:"";position:absolute;z-index:4;left:31px;top:57px;width:20px;height:14px;background:#fff;border:3px solid #111;border-radius:5px;box-shadow:0 0 0 2px rgba(255,255,255,.25)}

.char-enfance{--hair:#4b2f23;--pants:#333}.char-enfance .head:before{left:1px;top:-10px;width:44px;height:25px;border-radius:22px 22px 10px 10px}.char-enfance:before{content:"";position:absolute;left:56px;top:3px;width:20px;height:20px;border:4px solid #111;background:#4b2f23;border-radius:50%;z-index:4}.char-enfance .body{background:#00856f!important}
.char-tech{--hair:#1f1f1f;--pants:#303a43}.char-tech .head:before{left:4px;top:-18px;width:40px;height:20px;background:#f58220;border-radius:8px 8px 14px 14px}.char-tech:before{content:"";position:absolute;left:55px;top:86px;width:50px;height:11px;background:#6b4c35;border:4px solid #111;border-radius:9px;transform:rotate(-32deg);z-index:5}.char-tech .body{background:#2f6f9f!important}
.char-entretien{--hair:#3a2820;--pants:#252525}.char-entretien .head:before{background:#fff176;left:3px;top:-16px;width:42px;height:20px;border-radius:18px 18px 8px 8px}.char-entretien:before{content:"";position:absolute;left:57px;top:72px;width:12px;height:58px;background:#885f3b;border:4px solid #111;border-radius:8px;transform:rotate(-19deg);z-index:5}.char-entretien .body{background:#7b5aa6!important}
.char-administratif{--hair:#2b211c;--pants:#222}.char-administratif .head:before{left:5px;top:-13px;width:38px;height:22px;border-radius:18px 18px 9px 9px}.char-administratif:before{content:"";position:absolute;left:54px;top:78px;width:35px;height:25px;background:#fff;border:4px solid #111;border-radius:6px;z-index:5;box-shadow:5px 5px 0 rgba(0,0,0,.12)}.char-administratif .body{background:#00856f!important}
.char-social{--hair:#5a3828;--pants:#2c2c2c}.char-social .head:before{left:2px;top:-14px;width:44px;height:24px;border-radius:22px 22px 8px 8px}.char-social:before{content:"♥";position:absolute;left:58px;top:75px;width:30px;height:30px;background:#fff;border:4px solid #111;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:1000;color:#c2616b;z-index:5}.char-social .body{background:#c2616b!important}
.char-culture{--hair:#2a2520;--pants:#242424}.char-culture .head:before{left:3px;top:-15px;width:42px;height:23px;background:#111;border-radius:18px 18px 8px 8px}.char-culture:before{content:"";position:absolute;left:56px;top:77px;width:28px;height:34px;background:#ffd23f;border:4px solid #111;border-radius:5px;z-index:5;box-shadow:8px 6px 0 #fff}.char-culture .body{background:#d17b2d!important}

/* Décors plus proches de l’esprit campagne : aplats, noir franc, jaune CTA, texture affiche. */
.scene{background:linear-gradient(#d4eef0 0 55%,#d7d0bd 55% 100%)}
.scene:before{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 18px,rgba(255,255,255,.05) 18px 36px);z-index:0}
.decor:before{background-image:linear-gradient(135deg,rgba(255,255,255,.35),rgba(0,0,0,.04))!important}
.decor.ecole:after,.decor.atelier:after,.decor.mairie:after,.decor.social:after,.decor.biblio:after{box-shadow:6px 6px 0 rgba(0,0,0,.15);letter-spacing:.04em}
.alert-pill{border:3px solid #111;box-shadow:7px 7px 0 rgba(0,0,0,.18)}
.hud{background:linear-gradient(90deg,#111,#1f1f1f)}
.dialogue{background:linear-gradient(180deg,#fff,#fbf8f1)}
.case-type{background:var(--yellow);border:2px solid #111;color:#111}

@media (max-width:700px){
  .campaign-topline{align-items:flex-start}
  .campaign-claim{font-size:.86rem;padding:10px 12px}
  .choice{min-height:62px}
}


/* V3 — sprites plus illustrés, plus réalistes et plus lisibles */
.character{
  width:96px;
  height:172px;
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.24));
}
.character .head{
  left:27px;
  top:0;
  width:48px;
  height:52px;
  background:linear-gradient(#f4bf95,#dda071);
  border:4px solid #111;
  border-radius:48% 48% 44% 44%;
  z-index:5;
}
.character .head:before{
  content:"";
  position:absolute;
  left:1px;
  top:-17px;
  width:44px;
  height:31px;
  background:#2c2520;
  border:4px solid #111;
  border-radius:28px 28px 14px 14px;
  transform:rotate(-3deg);
}
.character .head:after{
  content:"";
  position:absolute;
  left:11px;
  top:19px;
  width:5px;
  height:5px;
  background:#111;
  border-radius:50%;
  box-shadow:20px 0 0 #111, 10px 14px 0 -2px #7d3e2a;
}
.character .body{
  left:17px;
  top:48px;
  width:66px;
  height:78px;
  background:var(--player-body, var(--cfdt-green));
  border:4px solid #111;
  border-radius:24px 24px 18px 18px;
  overflow:visible;
}
.character .body:before,
.character .body:after{
  top:12px;
  width:19px;
  height:64px;
  background:linear-gradient(#f1bd91,#dda071);
  border:4px solid #111;
  border-radius:999px;
}
.character .body:before{left:-20px;transform:rotate(11deg)}
.character .body:after{right:-20px;transform:rotate(-11deg)}
.character .body .unused{display:none}
.character .body::selection{background:transparent}
.character .legs{
  left:22px;
  top:118px;
  width:56px;
  height:54px;
}
.character .legs:before,
.character .legs:after{
  width:21px;
  height:56px;
  background:#22252b;
  border:4px solid #111;
  border-radius:0 0 14px 14px;
}
.character .legs:before{left:2px;transform:rotate(2deg)}
.character .legs:after{right:2px;transform:rotate(-2deg)}
.character:before{
  content:"";
  position:absolute;
  z-index:6;
  left:39px;
  top:58px;
  width:22px;
  height:16px;
  background:#fff;
  border:3px solid #111;
  border-radius:4px;
}
.character:after{
  content:"";
  position:absolute;
  z-index:7;
  left:45px;
  top:64px;
  width:10px;
  height:4px;
  background:var(--yellow);
  border-radius:99px;
}

/* Accessoires métier lisibles */
.job-card:nth-child(1) .character .head:before,
.player[data-job="enfance"] .head:before{background:#54301f}
.job-card:nth-child(1) .character:after,
.player[data-job="enfance"]:after{content:"✏";left:72px;top:78px;background:transparent;font-size:26px;width:auto;height:auto;color:#111}

.job-card:nth-child(2) .character .head:before,
.player[data-job="technique"] .head:before{background:#ffd23f;border-radius:22px 22px 10px 10px}
.job-card:nth-child(2) .character:after,
.player[data-job="technique"]:after{content:"🔧";left:69px;top:78px;background:transparent;font-size:24px;width:auto;height:auto}

.job-card:nth-child(3) .character:after,
.player[data-job="entretien"]:after{content:"🧹";left:68px;top:76px;background:transparent;font-size:27px;width:auto;height:auto}

.job-card:nth-child(4) .character:after,
.player[data-job="administratif"]:after{content:"📁";left:67px;top:76px;background:transparent;font-size:25px;width:auto;height:auto}

.job-card:nth-child(5) .character:after,
.player[data-job="social"]:after{content:"❤";left:72px;top:80px;background:#fff;color:#d94b38;border:3px solid #111;border-radius:50%;display:grid;place-items:center;font-size:14px;width:26px;height:26px}

.job-card:nth-child(6) .character:after,
.player[data-job="culture"]:after{content:"📚";left:66px;top:76px;background:transparent;font-size:24px;width:auto;height:auto}

.job-card:nth-child(7) .character .head:before,
.player[data-job="encadrants"] .head:before{background:#30343b;border-radius:24px 24px 12px 12px}
.job-card:nth-child(7) .character:after,
.player[data-job="encadrants"]:after{content:"📐";left:68px;top:76px;background:transparent;font-size:25px;width:auto;height:auto}

/* Tenues différenciées dans les cartes */
.job-card:nth-child(1) .character .body{background:#00856f}
.job-card:nth-child(2) .character .body{background:#2f6f9f}
.job-card:nth-child(3) .character .body{background:#7b5aa6}
.job-card:nth-child(4) .character .body{background:#00856f}
.job-card:nth-child(5) .character .body{background:#c2616b}
.job-card:nth-child(6) .character .body{background:#d17b2d}
.job-card:nth-child(7) .character .body{background:#1d5d73}

/* Choix sans affichage des points */
.choice small{display:none}
.choice em{
  display:block;
  margin-top:9px;
  font-style:normal;
  color:var(--cfdt-green);
  font-weight:950;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.choice span{display:block;position:relative;padding-right:28px}
.choice span:after{
  content:"›";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-size:1.7rem;
  line-height:1;
}

/* Scène projet / encadrants */
.scene-projet{background:linear-gradient(#c7e8ed 0 55%,#9eb186 55% 100%)}
.scene-projet .npc-one:after{
  content:"";
  position:absolute;
  left:-54px;
  bottom:4px;
  width:46px;
  height:62px;
  background:#fff;
  border:4px solid #111;
  border-radius:8px;
  box-shadow:0 -18px 0 -8px #ffd23f inset;
}
.scene-projet .npc-two:after{
  content:"";
  position:absolute;
  right:-54px;
  bottom:8px;
  width:50px;
  height:44px;
  background:#222;
  border:4px solid #111;
  border-radius:8px;
}

/* Responsive correction for new decor */
@media (max-width:620px){
  .decor.projet:before{left:38%;width:240px;height:138px}
  .decor.projet:after{left:49%;bottom:173px;font-size:.75rem}
}


/* V4 — vrais sprites SVG illustrés */
.player-img{
  position:absolute;
  left:110px;
  bottom:40px;
  width:185px;
  height:auto;
  z-index:5;
  filter:drop-shadow(0 16px 12px rgba(0,0,0,.24));
  transform-origin:bottom center;
}
.player-img.idle{
  animation:heroFloat 1.8s ease-in-out infinite;
}
.hero-character{
  position:absolute;
  width:185px;
  height:auto;
  bottom:28px;
  z-index:5;
  filter:drop-shadow(0 16px 12px rgba(0,0,0,.24));
}
.hero-tech{left:82px}
.hero-admin{right:82px}
@keyframes heroFloat{
  0%,100%{transform:translateY(0) rotate(-.5deg)}
  50%{transform:translateY(-7px) rotate(.5deg)}
}

.job-card{
  display:grid;
  grid-template-columns:1fr 118px;
  gap:10px;
  align-items:end;
}
.job-copy{position:relative;z-index:2}
.job-character-img{
  width:128px;
  max-width:100%;
  align-self:end;
  justify-self:end;
  filter:drop-shadow(8px 10px 0 rgba(0,0,0,.10));
  transform:translate(8px,18px);
  transition:.18s ease;
}
.job-card:hover .job-character-img{
  transform:translate(4px,10px) scale(1.04);
}
.job-card .character.job-mini{display:none!important}

/* L'ancien sprite CSS reste disponible pour certains éléments, mais n'est plus utilisé comme personnage principal. */
.scene .character.player{display:none!important}

/* Décors enrichis pour accompagner les SVG */
.scene:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:76px;
  background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(255,255,255,.12),rgba(0,0,0,.06));
  z-index:1;
}
.decor,.npc,.alert-pill,.impact-bubble{z-index:3}
.decor:before,.decor:after{z-index:2}
.npc{z-index:4}
.alert-pill{z-index:8}
.impact-bubble{z-index:9}

@media (max-width:900px){
  .player-img{width:165px;left:70px}
  .hero-character{width:160px}
}
@media (max-width:620px){
  .player-img{width:132px;left:28px;bottom:48px}
  .hero-character{width:132px}
  .hero-tech{left:38px}
  .hero-admin{right:34px}
  .job-card{grid-template-columns:1fr 92px;min-height:174px}
  .job-character-img{width:104px;transform:translate(10px,14px)}
}


/* V5 — corrections accueil, logo CFDT, partage social */
.app{
  align-content:start;
  gap:16px;
}
.campaign-topbar{
  width:100%;
  max-width:1120px;
  margin:0 auto 6px;
  display:flex;
  align-items:center;
  gap:14px;
  background:#111;
  color:#fff;
  border-radius:22px;
  padding:12px 16px;
  box-shadow:0 16px 40px rgba(0,0,0,.16);
}
.campaign-logo{
  display:flex;
  width:90px;
  min-width:90px;
  height:42px;
  border-radius:10px;
  overflow:hidden;
  box-shadow:5px 5px 0 rgba(255,255,255,.12);
}
.campaign-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.campaign-topbar-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.campaign-topbar-text strong{
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.campaign-topbar-text span{
  color:#ffd23f;
  font-size:.92rem;
  font-weight:800;
}

.brand-mark{
  background:#f58220!important;
  letter-spacing:-.06em;
}
.home-title{
  font-size:clamp(2.45rem,7.5vw,5.7rem)!important;
  line-height:.9!important;
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
  letter-spacing:-.075em!important;
}
.home-title span{
  display:block;
}
.hero-copy{
  overflow:hidden;
}
.hero-copy .brush,
.brush{
  background:#f58220!important;
  color:#fff!important;
  box-shadow:8px 8px 0 rgba(0,0,0,.20);
}
.hero-copy .intro{
  max-width:56ch;
}
.hero-layout{
  grid-template-columns:minmax(0,1fr) minmax(360px,1.02fr);
}
.hero-copy h1 span{
  color:var(--cfdt-green);
}
.screen:not(.screen-home) .panel:before,
.result-panel:before{
  content:"";
  display:block;
  width:96px;
  height:42px;
  background:url("assets/logo-cfdt-officiel.png") center/contain no-repeat;
  margin-bottom:18px;
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.10));
}
.game-shell:before{
  content:"";
  display:block;
  width:86px;
  height:36px;
  background:url("assets/logo-cfdt-officiel.png") center/contain no-repeat;
  margin:0 0 10px 4px;
}
.share-preview-wrap{
  margin-top:22px;
  background:#f7f3ea;
  border:2px solid rgba(0,0,0,.10);
  border-radius:24px;
  padding:18px;
}
.share-preview-wrap h3{
  margin:0 0 12px;
}
#result-canvas{
  width:100%;
  max-width:720px;
  height:auto;
  display:block;
  border-radius:18px;
  border:4px solid #111;
  background:#f58220;
  box-shadow:0 16px 34px rgba(0,0,0,.15);
}
.small-note{
  font-size:.9rem;
  margin-bottom:0;
}
@media (max-width:900px){
  .hero-layout{
    grid-template-columns:1fr;
  }
  .home-title{
    font-size:clamp(2.3rem,13vw,4.3rem)!important;
  }
}
@media (max-width:620px){
  .campaign-topbar{
    align-items:flex-start;
    border-radius:18px;
  }
  .campaign-logo{
    width:78px;
    min-width:78px;
    height:36px;
  }
  .campaign-topbar-text strong{
    font-size:.86rem;
  }
  .campaign-topbar-text span{
    font-size:.8rem;
  }
  .home-title{
    font-size:clamp(2.15rem,14vw,3.65rem)!important;
    letter-spacing:-.06em!important;
  }
}


/* V6 — titre vraiment responsive + logo rond CFDT fourni */
.campaign-logo{
  width:58px!important;
  min-width:58px!important;
  height:58px!important;
  border-radius:50%!important;
  background:#f58220;
  box-shadow:5px 5px 0 rgba(255,255,255,.12);
}
.campaign-logo img{
  object-fit:contain!important;
  padding:0!important;
}
.screen:not(.screen-home) .panel:before,
.result-panel:before{
  width:64px!important;
  height:64px!important;
  border-radius:50%;
  background:url("assets/logo-cfdt-officiel.png") center/contain no-repeat!important;
}
.game-shell:before{
  width:58px!important;
  height:58px!important;
  border-radius:50%;
  background:url("assets/logo-cfdt-officiel.png") center/contain no-repeat!important;
}
.home-title{
  display:block!important;
  width:100%!important;
  max-width:680px!important;
  font-size:clamp(2.05rem, 6.2vw, 4.75rem)!important;
  line-height:.88!important;
  letter-spacing:-.085em!important;
  text-transform:uppercase;
  overflow:visible!important;
}
.home-title span{
  display:block!important;
  white-space:nowrap!important;
  transform-origin:left center;
}
.hero-copy{
  min-width:0!important;
}
.hero-layout{
  grid-template-columns:minmax(0,0.95fr) minmax(360px,1.05fr)!important;
}
@media (max-width:1050px){
  .home-title{
    font-size:clamp(2rem, 8vw, 4.15rem)!important;
    letter-spacing:-.075em!important;
  }
}
@media (max-width:900px){
  .hero-layout{
    grid-template-columns:1fr!important;
  }
  .home-title{
    max-width:100%!important;
    font-size:clamp(2.4rem, 12vw, 5rem)!important;
  }
}
@media (max-width:620px){
  .campaign-logo{
    width:50px!important;
    min-width:50px!important;
    height:50px!important;
  }
  .home-title{
    font-size:clamp(2.05rem, 11.8vw, 3.75rem)!important;
    letter-spacing:-.065em!important;
  }
}
@media (max-width:390px){
  .home-title{
    font-size:clamp(1.85rem, 10.8vw, 3.1rem)!important;
  }
}


/* V7 — logo propre, boutons réseaux et compteur joueurs */
.campaign-logo{
  width:62px!important;
  min-width:62px!important;
  height:62px!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:0 10px 20px rgba(0,0,0,.22)!important;
}
.campaign-logo img{
  width:62px!important;
  height:62px!important;
  border-radius:50%!important;
  object-fit:contain!important;
  display:block!important;
  background:transparent!important;
}
.screen:not(.screen-home) .panel:before,
.result-panel:before{
  width:62px!important;
  height:62px!important;
  background:url("assets/logo-cfdt-officiel.png") center/contain no-repeat!important;
  margin-bottom:16px!important;
}
.game-shell:before{
  width:58px!important;
  height:58px!important;
  background:url("assets/logo-cfdt-officiel.png") center/contain no-repeat!important;
}
.counter-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  background:#111;
  color:#fff;
  border-radius:999px;
  padding:10px 14px;
  box-shadow:8px 8px 0 rgba(0,0,0,.12);
}
.counter-pill strong{
  background:#ffd23f;
  color:#111;
  border-radius:999px;
  min-width:42px;
  padding:6px 10px;
  text-align:center;
  font-weight:1000;
}
.counter-pill span{
  font-weight:850;
  font-size:.92rem;
}
.social-share-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:14px 0 6px;
  padding:14px;
  background:#f7f3ea;
  border-radius:20px;
  border:1px solid rgba(0,0,0,.08);
}
.share-label{
  width:100%;
  margin:0 0 2px;
  font-weight:1000;
  color:#111;
}
.btn-facebook{background:#1877f2;color:#fff}
.btn-twitter{background:#111;color:#fff}
.btn-linkedin{background:#0a66c2;color:#fff}
.btn-facebook:hover,.btn-twitter:hover,.btn-linkedin:hover{transform:translateY(-2px);filter:brightness(.95)}
@media (max-width:620px){
  .campaign-logo,.campaign-logo img{
    width:54px!important;
    min-width:54px!important;
    height:54px!important;
  }
  .social-share-links .btn{
    width:100%;
  }
}


/* V8 — compteur visible + correction aperçu image résultat */
.counter-pill{
  display:inline-flex!important;
  visibility:visible!important;
}
.counter-pill[hidden]{
  display:inline-flex!important;
}
#share-preview-wrap{
  overflow:hidden;
}
#result-canvas{
  background:#f58220!important;
}


/* V9 — icônes sociales + correction image résultat */
.btn-facebook,
.btn-twitter,
.btn-linkedin{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff!important;
  border:0!important;
}
.btn-facebook{
  background:#1877f2!important;
}
.btn-twitter{
  background:#111111!important;
}
.btn-linkedin{
  background:#0a66c2!important;
}
.social-icon{
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  color:currentColor;
  font-weight:1000;
  font-size:.92rem;
  line-height:1;
}
.btn-facebook .social-icon{
  color:#1877f2;
  font-family:Arial, sans-serif;
  font-size:1.05rem;
}
.btn-twitter .social-icon{
  color:#111;
}
.btn-linkedin .social-icon{
  color:#0a66c2;
  border-radius:6px;
  font-size:.8rem;
  font-family:Arial, sans-serif;
}
#result-canvas{
  background:#f58220!important;
}
.share-preview-wrap{
  background:#f7f3ea!important;
}


/* V10 — logo officiel PNG, scénarios et image résultat recalibrée */
.campaign-logo{
  width:74px!important;
  min-width:74px!important;
  height:74px!important;
  border-radius:50%!important;
  overflow:hidden!important;
  background:#fff!important;
  padding:0!important;
  box-shadow:0 10px 22px rgba(0,0,0,.18)!important;
}
.campaign-logo img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:50%!important;
}
.screen:not(.screen-home) .panel:before,
.result-panel:before{
  width:74px!important;
  height:74px!important;
  border-radius:50%!important;
  background:url("assets/logo-cfdt-officiel.png") center/cover no-repeat!important;
}
.game-shell:before{
  width:68px!important;
  height:68px!important;
  border-radius:50%!important;
  background:url("assets/logo-cfdt-officiel.png") center/cover no-repeat!important;
}
.scenario-count{
  display:inline-flex;
  align-items:center;
  margin-top:12px;
  background:#111;
  color:#ffd23f;
  border-radius:999px;
  padding:7px 10px;
  font-size:.78rem;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.scenario-name{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:1000;
  border-radius:999px;
  padding:6px 10px;
  background:#fff2c2;
  color:#111;
}
.dialogue-top{
  flex-wrap:wrap;
}
#result-canvas{
  aspect-ratio:1200/630;
}
@media (max-width:620px){
  .campaign-logo,.campaign-logo img{
    width:58px!important;
    min-width:58px!important;
    height:58px!important;
  }
}

.privacy:empty{display:none!important}


/* V12 — compteur plus robuste */
.counter-pill{
  flex-wrap:wrap;
}
.counter-status{
  display:block;
  width:100%;
  color:#ffd23f;
  font-size:.72rem;
  font-weight:800;
  opacity:.85;
  margin-left:54px;
  margin-top:-4px;
}


/* V14 — diagnostic compteur */
.counter-test{
  border:0;
  background:#ffd23f;
  color:#111;
  font-weight:1000;
  border-radius:999px;
  padding:5px 9px;
  cursor:pointer;
  margin-left:6px;
}
.counter-status.is-error{
  color:#ffb3a8;
}
.counter-debug{
  margin-top:12px;
  max-width:620px;
  white-space:pre-wrap;
  background:#111;
  color:#ffd23f;
  padding:12px;
  border-radius:14px;
  font-size:.78rem;
  line-height:1.35;
  overflow:auto;
}


/* V15 — compteur ultra simple */
.counter-test{
  background:#f58220!important;
  color:#fff!important;
  border:2px solid #fff!important;
}
.counter-debug{
  display:block;
  min-height:24px;
}
.counter-debug[hidden]{
  display:none!important;
}


/* V16 — slogan jaune, sons 8-bit et infobulles plus visibles */
.hero-copy .brush,
.brush{
  background:#ffd23f!important;
  color:#111!important;
  box-shadow:8px 8px 0 rgba(0,0,0,.18)!important;
}
.btn-sound{
  background:#111;
  color:#ffd23f;
  border:2px solid #111;
}
.btn-sound.is-on{
  background:#ffd23f;
  color:#111;
}
.impact-bubble{
  transition:.28s ease!important;
  padding:16px 18px!important;
  font-size:1rem!important;
  line-height:1.35!important;
  border:3px solid #ffd23f;
}
.impact-bubble.show{
  opacity:1!important;
  transform:none!important;
}


/* V17 — compteur sans diagnostic */
.counter-test,
.counter-debug{
  display:none!important;
}
.counter-status{
  margin-left:0;
}


/* V18 — compteur stable */
.counter-status.is-error{
  color:#ffb3a8;
}


/* V19 — sécurité boutons */
button,
.btn,
[data-action]{
  position:relative;
  z-index:20;
}


/* V20 — mode desktop compact pour écrans portables type MacBook Air
   Aucune modification de logique : uniquement CSS responsive. */

@media (min-width: 901px) and (max-height: 900px) {
  .app {
    min-height: 100vh;
    padding: 10px 16px;
    gap: 8px;
    align-content: start;
  }

  .campaign-topbar {
    padding: 8px 12px;
    border-radius: 16px;
    margin-bottom: 4px;
  }

  .campaign-logo,
  .campaign-logo img {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
  }

  .campaign-topbar-text strong {
    font-size: .86rem;
  }

  .campaign-topbar-text span {
    font-size: .78rem;
  }

  .brand {
    margin-bottom: 10px;
  }

  .hero-copy,
  .panel {
    padding: 20px 24px;
    border-radius: 22px;
  }

  .hero-layout {
    gap: 18px;
    align-items: start;
  }

  .home-title {
    font-size: clamp(2.2rem, 5.1vw, 3.9rem) !important;
    line-height: .84 !important;
    margin-bottom: 10px !important;
  }

  .hero-copy h1 {
    margin-bottom: 10px;
  }

  .brush {
    padding: 7px 13px;
    margin: 0 0 12px;
    font-size: clamp(.95rem, 2vw, 1.25rem);
  }

  .intro,
  .muted {
    font-size: .96rem;
    line-height: 1.38;
  }

  .home-actions {
    margin-top: 12px;
    gap: 8px;
  }

  .btn {
    min-height: 40px;
    padding: 10px 15px;
    font-size: .92rem;
  }

  .counter-pill {
    margin-top: 10px;
    padding: 7px 11px;
  }

  .counter-pill strong {
    min-width: 34px;
    padding: 4px 8px;
  }

  .hero-card {
    padding: 9px;
    border-radius: 24px;
  }

  .hero-scene {
    height: 365px;
    border-radius: 18px;
  }

  .hero-character {
    width: 142px;
    bottom: 18px;
  }

  .building-townhall {
    transform: translateX(-50%) scale(.82);
    transform-origin: bottom center;
  }

  .alert-pill {
    top: 16px;
    padding: 8px 14px;
    font-size: .88rem;
  }

  .panel h2 {
    font-size: clamp(1.7rem, 3.8vw, 3rem);
    margin-bottom: 8px;
  }

  .job-grid {
    gap: 10px;
    margin: 16px 0;
  }

  .job-card {
    min-height: 145px;
    padding: 14px;
    border-radius: 18px;
  }

  .job-card h3 {
    font-size: 1.05rem;
    margin-bottom: 5px;
  }

  .job-card p {
    font-size: .88rem;
    line-height: 1.25;
  }

  .scenario-count {
    margin-top: 8px;
    padding: 5px 8px;
    font-size: .68rem;
  }

  .job-character-img {
    width: 98px;
    transform: translate(8px, 12px);
  }

  .game-shell {
    padding: 8px;
    border-radius: 22px;
  }

  .game-shell:before {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: 6px;
  }

  .hud {
    padding: 10px 12px;
    gap: 12px;
    border-radius: 14px 14px 0 0;
  }

  .hud strong {
    font-size: .98rem;
  }

  .hud-label {
    font-size: .66rem;
    margin-bottom: 2px;
  }

  .hud-bars {
    gap: 7px 10px;
  }

  .bar-row {
    grid-template-columns: 112px 1fr;
    font-size: .78rem;
    gap: 7px;
  }

  .bar {
    height: 9px;
  }

  .scene {
    height: 290px;
  }

  .player-img {
    width: 138px;
    left: 90px;
    bottom: 30px;
  }

  .npc {
    transform: scale(.82);
    transform-origin: bottom center;
  }

  .npc-one {
    right: 190px;
  }

  .npc-two {
    right: 112px;
  }

  .decor.ecole:before,
  .decor.atelier:before,
  .decor.mairie:before,
  .decor.social:before,
  .decor.biblio:before,
  .decor.projet:before {
    transform: scale(.82);
    transform-origin: bottom center;
  }

  .decor.ecole:after,
  .decor.atelier:after,
  .decor.mairie:after,
  .decor.social:after,
  .decor.biblio:after,
  .decor.projet:after {
    transform: scale(.88);
    transform-origin: center;
  }

  .dialogue {
    padding: 14px 16px;
    border-top-width: 6px;
  }

  .dialogue-top {
    gap: 7px;
    margin-bottom: 7px;
  }

  .step-badge,
  .case-type,
  .scenario-name {
    padding: 4px 8px;
    font-size: .68rem;
  }

  .dialogue h2 {
    font-size: clamp(1.1rem, 2.3vw, 1.75rem);
    margin-bottom: 5px;
  }

  .dialogue p {
    font-size: .92rem;
    line-height: 1.32;
    margin-bottom: 10px;
  }

  .choices {
    gap: 8px;
  }

  .choice {
    padding: 10px 12px;
    border-radius: 14px;
    font-size: .88rem;
  }

  .choice em {
    margin-top: 5px;
    font-size: .66rem;
  }

  .impact-bubble {
    right: 16px;
    bottom: 18px;
    max-width: 240px;
    padding: 12px 14px !important;
    font-size: .88rem !important;
  }

  .result-panel {
    max-width: 800px;
  }

  .result-text {
    font-size: .98rem;
    line-height: 1.38;
  }

  .result-card {
    padding: 12px;
    margin: 12px 0;
    border-radius: 18px;
  }

  .result-badge {
    min-width: 58px;
    min-height: 58px;
    font-size: 1.8rem;
  }

  .final-bars {
    gap: 8px;
    margin: 12px 0;
  }

  .final-bars div {
    padding: 10px;
    border-radius: 14px;
  }

  .final-bars strong {
    font-size: 1.45rem;
  }

  .claims {
    padding: 12px;
    border-radius: 16px;
  }

  .claims ul {
    line-height: 1.35;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .campaign-topbar {
    padding: 6px 10px;
  }

  .campaign-logo,
  .campaign-logo img {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  .hero-copy,
  .panel {
    padding: 16px 20px;
  }

  .home-title {
    font-size: clamp(2rem, 4.6vw, 3.35rem) !important;
  }

  .intro {
    font-size: .9rem;
    line-height: 1.32;
  }

  .hero-scene {
    height: 315px;
  }

  .scene {
    height: 245px;
  }

  .hud {
    padding: 8px 10px;
  }

  .dialogue {
    padding: 12px 14px;
  }

  .dialogue p {
    font-size: .86rem;
  }

  .choice {
    padding: 8px 10px;
  }

  .player-img {
    width: 120px;
    bottom: 24px;
  }

  .alert-pill {
    top: 12px;
  }
}