/* Une colonne, une question : le parcours de l’arnaqueur se lit de haut en bas, sans panneau latéral. */
.hg-game{color:#edf4ff;max-width:820px;margin:0 auto;font-size:16px;line-height:1.6;overflow-wrap:anywhere}
.hg-game *{box-sizing:border-box}
.hg-game h1,.hg-game h2,.hg-game h3{color:#f4f8ff;line-height:1.25;margin:0}
.hg-game p{margin:0}
.hg-kicker{display:block;font-size:12px;letter-spacing:.07em;font-weight:750;color:#a9c9f3;margin-bottom:8px}
.hg-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}
.hg-heading h1{font-size:clamp(26px,3vw,34px);letter-spacing:-.02em}
.hg-goal{margin-top:10px!important;color:#d6e4f6;font-size:16px}
.hg-goal strong{color:#c5edae}
.hg-situation{margin-top:8px!important;color:#c3d5ec;font-size:15px;max-width:680px}
.hg-situation strong{color:#a9c9f3}

.hg-game button{font:inherit;line-height:1.45;cursor:pointer;min-height:48px;white-space:normal;max-width:100%;transition:background .15s,border-color .15s,opacity .15s}
.hg-game button:focus-visible,.hg-workbench:focus-visible{outline:3px solid #acdaff;outline-offset:3px}
.hg-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border:1px solid #7493b8;border-radius:12px;background:#243951;color:#ecf4ff;font-size:16px;font-weight:650}
.hg-button:hover:not(:disabled){background:#345174;border-color:#b0d3ff}
.hg-game .hg-primary{background:#c5edae;color:#1e3a23;border-color:#c5edae;font-weight:750;margin-top:22px}
.hg-game .hg-primary:hover:not(:disabled){background:#d9f7c9}
.hg-help{flex:none}

/* Progression : quatre étapes nommées, l’étape en cours se repère d’un coup d’œil. */
.hg-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0;margin:0 0 22px}
.hg-steps li{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;background:#17263c;border:1px solid #2f4562;color:#8fa7c6;font-size:15px;font-weight:650}
.hg-steps li>span{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;background:#253852;font-size:14px}
.hg-steps .is-current{background:#223a57;border-color:#a9c9f3;color:#f4f8ff}
.hg-steps .is-current>span{background:#a9c9f3;color:#10203a}
.hg-steps .is-done{color:#cfeec0}
.hg-steps .is-done>span{background:#305a42;color:#d8ffda}

.hg-workbench{background:#17263c;border:1px solid #33506f;border-radius:18px;padding:28px}
.hg-question{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.015em}
.hg-intro{color:#c3d5ec;margin-top:8px!important}

/* Cartes de choix : grandes zones cliquables, une idée chacune. */
.hg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.hg-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:18px 16px;border:1px solid #5f7ea3;border-radius:14px;background:#22364f;color:#f0f6ff}
.hg-card-source{margin-top:4px;font-size:12px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:#a9c9f3}
.hg-card strong{font-size:17px;line-height:1.35}
.hg-card>span{font-size:15px;color:#c9daf0}
.hg-card:hover:not(:disabled){background:#2f4b6c;border-color:#b6d7ff}
.hg-card.is-picked{background:#284a35;border-color:#a6d5b7}
.hg-card.is-picked:disabled{opacity:1;cursor:default}
.hg-card:disabled{cursor:default;opacity:.55}
.hg-card.is-tried{opacity:.6;border-style:dashed}
.hg-mark{font-style:normal;font-size:14px;font-weight:700;margin-top:auto}
.hg-mark-ok{color:#c5edae}
.hg-mark-no{color:#ffc9a3}

.hg-feedback,.hg-help-note{padding:14px 16px;border-radius:12px;margin-top:18px!important;font-size:16px;border:1px solid #789dcd;background:#203b59;color:#e3f0ff}
.hg-feedback-warning{background:#3d312b;border-color:#d8ab75;color:#ffecd5}
.hg-feedback-success{background:#244334;border-color:#8eb89a;color:#e5f9e4}
.hg-help-note{margin:0 0 20px!important}
.hg-help-note strong{display:block;margin-bottom:4px}

.hg-preview{margin-top:20px;background:#f2f5fa;color:#1f3150;border-radius:14px;padding:18px 20px;max-width:560px}
.hg-preview-from{display:block;font-size:13px;font-weight:750;color:#4a5f80;margin-bottom:6px}
.hg-preview p{font-size:17px;line-height:1.55}
.hg-preview-empty{background:transparent;border:1px dashed #58799f;color:#b9cde6}
.hg-preview-empty p{font-size:15px}

.hg-known{background:#203b59;border:1px solid #789dcd;color:#e3f0ff;border-radius:12px;padding:14px 16px;margin-bottom:22px!important}
.hg-known strong{color:#c5edae}
.hg-event{background:#3a2d2a;border:1px solid #c79b78;color:#ffe9d6;border-radius:12px;padding:14px 16px;margin-bottom:22px!important}
.hg-next-risk{margin-top:18px;padding:16px;border-left:3px solid #f0c48a;background:#2a2b33;border-radius:0 12px 12px 0}
.hg-next-risk strong{display:block;font-size:17px;margin-bottom:4px}
.hg-next-risk p{color:#d9dfe9}

.hg-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.hg-compare article{padding:16px;border-radius:12px;background:#392f2c;border:1px solid #bc9373}
.hg-compare article.is-safe{background:#243c31;border-color:#82a58e}
.hg-compare span{display:block;font-size:12px;font-weight:750;letter-spacing:.06em;margin-bottom:6px;color:#f5d8bd}
.hg-compare .is-safe span{color:#d1f1c5}
.hg-compare p{font-size:15px}

.hg-if-trapped{margin-top:18px}
.hg-if-trapped h3{font-size:18px;margin-bottom:8px}
.hg-if-trapped ul{margin:0;padding-left:20px;color:#d6e4f6}
.hg-if-trapped li{margin-bottom:6px}
.hg-final-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hg-final-actions .hg-primary{margin-top:0}
.hg-error{padding:20px}

@media(max-width:760px){
 .hg-cards{grid-template-columns:1fr}
 .hg-card{padding:15px 14px}
 .hg-workbench{padding:20px 16px;border-radius:14px}
 .hg-compare{grid-template-columns:1fr}
 .hg-steps li{flex-direction:column;justify-content:center;gap:4px;padding:8px 4px;font-size:13px;text-align:center}
 .hg-game .hg-primary{width:100%}
 .hg-final-actions{flex-direction:column}
 .hg-final-actions .hg-button{width:100%}
}
@media(max-width:420px){
 .hg-heading{flex-direction:column;gap:10px}
 .hg-help{min-height:44px!important;padding:8px 14px;font-size:15px}
 .hg-steps{gap:5px}
 .hg-steps li{font-size:12px}
 .hg-recap li{flex-direction:column;gap:2px}
}
@media(prefers-reduced-motion:reduce){.hg-game button{transition:none}}

/* Bilan : Lumi fête la fin, le film de l’arnaque apparaît image par image, puis les cartes se retournent. */
.hg-bilan-hero{display:flex;gap:18px;align-items:center;margin-bottom:22px}
.hg-bilan-lumi{position:relative;flex:none;width:96px;height:96px;animation:lumi-hop .9s ease-out both}
.hg-bilan-lumi .lumi-avatar{width:96px;height:96px}
.hg-spark{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff1a6;box-shadow:0 0 12px #fff1a6;animation:spark 1.6s ease-out infinite}
.hg-spark.s1{top:4px;right:2px}.hg-spark.s2{bottom:14px;left:-4px;animation-delay:.5s;background:#c5edae}.hg-spark.s3{top:30px;left:-10px;animation-delay:1s;width:7px;height:7px}
.hg-badge{display:inline-block;margin-top:10px;padding:5px 11px;border-radius:999px;background:#284331;border:1px solid #79b88a;color:#dcf7d5;font-size:13px;font-weight:700}
.hg-film{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;position:relative}
.hg-film li{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 12px;border-radius:14px;background:#22364f;border:1px solid #4d6c91;animation:film-in .5s ease-out both;animation-delay:calc(var(--i)*.35s)}
.hg-film li:not(:last-child)::after{content:'→';position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:#7f9cc0;font-size:16px;z-index:1}
.hg-film-icon{font-size:26px;line-height:1}
.hg-film small{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#a9c9f3}
.hg-film strong{font-size:15px;line-height:1.35}
.hg-film li.is-safe{background:#244334;border-color:#8eb89a}
.hg-film li.is-safe small{color:#c5edae}
.hg-film-cut{margin-top:12px!important;padding:10px 14px;border-radius:12px;background:#1f3a2c;color:#dcf7d5;font-weight:650;animation:film-in .5s ease-out both;animation-delay:calc(var(--i)*.35s)}
.hg-film-cut span{display:inline-block;animation:snip .6s ease-in-out 2;animation-delay:1.7s}
.hg-takeaway{margin:10px 0 0;padding:10px 14px;border-left:4px solid #8b7cf6;border-radius:8px;background:rgba(139,124,246,.12);line-height:1.5;animation:film-in .5s ease-out both;animation-delay:calc(var(--i)*.35s)}
.hg-remember{margin-top:26px;padding:20px;border-radius:16px;background:#1c2e46;border:1px solid #3c5878;transition:border-color .3s,box-shadow .3s}
.hg-remember.is-complete .hg-remember-count{animation:dot-pop .5s ease-out}
@keyframes dot-pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.hg-remember.is-complete{border-color:#8eb89a;box-shadow:0 0 0 4px #8eb89a33}
.hg-remember-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.hg-remember-head h3{font-size:20px}
.hg-remember-count{font-size:14px;font-weight:700;color:#c5edae}
.hg-flip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.hg-game .hg-flip{position:relative;min-height:250px;padding:0;border:0;background:transparent;perspective:900px;text-align:left;color:inherit}
.hg-flip-inner{position:absolute;inset:0;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.hg-flip.is-flipped .hg-flip-inner{transform:rotateY(180deg)}
.hg-flip-front,.hg-flip-back{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;font-size:16px;line-height:1.4;font-weight:650}
.hg-flip-front{background:#2b4366;border:1px solid #6f8fb6;color:#f0f6ff}
.hg-flip-front small{margin-top:auto;font-size:13px;color:#c5edae;font-weight:700}
.hg-flip-back{font-size:15px;gap:6px;background:#f3fbef;color:#1d3a24;border:2px solid #8eb89a;transform:rotateY(180deg)}
.hg-flip em{font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;opacity:.75}
.hg-flip:not(.is-flipped):hover .hg-flip-front{background:#34507a;border-color:#b6d7ff}
.hg-flip.is-flipped{cursor:default}
@keyframes film-in{from{opacity:0;transform:translateY(14px)}}
@keyframes lumi-hop{0%{transform:scale(.6) translateY(20px);opacity:0}60%{transform:scale(1.08) translateY(-6px);opacity:1}100%{transform:none}}
@keyframes spark{0%{transform:scale(0);opacity:1}70%{opacity:1}100%{transform:scale(1.6) translateY(-12px);opacity:0}}
@keyframes snip{50%{transform:rotate(-25deg) scale(1.2)}}
@media(max-width:760px){.hg-film{grid-template-columns:1fr 1fr}.hg-film li:nth-child(2)::after{content:none}.hg-flip-grid{grid-template-columns:1fr}.hg-game .hg-flip{min-height:170px}.hg-bilan-hero{gap:12px}.hg-bilan-lumi,.hg-bilan-lumi .lumi-avatar{width:72px;height:72px}}
@media(max-width:420px){.hg-film{grid-template-columns:1fr;gap:6px}.hg-film li{display:grid;grid-template-columns:30px 1fr;column-gap:10px;padding:10px 12px}.hg-film-icon{grid-row:1/3;align-self:center;font-size:22px}.hg-film li::after{content:none!important}}
@media(prefers-reduced-motion:reduce){.hg-bilan *{animation:none!important}.hg-flip-inner{transition:none}}
/* Score de vigilance : les étoiles s’allument une à une. */
.hg-stars{display:flex;align-items:center;gap:4px;margin-top:10px;flex-wrap:wrap}
.hg-stars span{font-size:28px;line-height:1;color:#3a4f6b}
.hg-stars span.is-on{color:#ffd45c;text-shadow:0 0 12px #ffd45c88;animation:star-pop .5s ease-out both;animation-delay:calc(var(--i)*.25s + .4s)}
.hg-stars small{margin-left:8px;font-size:14px;color:#d6e4f6;font-weight:650}
.hg-flip-example{display:block;margin-top:auto;font-size:13px;font-weight:500;line-height:1.4;color:#33553b}
@keyframes star-pop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.3)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.hg-stars span{animation:none!important}}
/* Retour à l’accueil en bas du bilan : discret, sous les deux actions du dossier. */
.hg-final-actions .hg-home{background:transparent;border-color:transparent;text-decoration:underline;text-underline-offset:3px}