/* =========================================================
   PORTFOLIO ELOÏSE ROBERT — THÈME JEU VIDÉO RÉTRO
   ========================================================= */

/* --- 0. POLICES (hébergées sur le site, jeu de caractères latin uniquement) --- */
/* Un navigateur ne télécharge une police que si elle est réellement utilisée :
   Lexend et OpenDyslexic ne coûtent rien tant que personne ne les choisit. */
@font-face {
    font-family: 'Press Start 2P';
    src: url('fonts/press-start-2p-latin.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'VT323';
    src: url('fonts/vt323-latin.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('fonts/lexend-latin-variable.woff2') format('woff2');
    font-weight: 400 600;
    font-display: swap;
}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('fonts/opendyslexic-latin-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

/* --- 1. VARIABLES --- */
:root {
    --bg: #0d0b1e;
    --bg-2: #15122e;
    --panel: #1c1840;
    --panel-2: #262057;
    --border: #3d3580;
    --text: #e8e6ff;
    --muted: #a39fd0;

    --pink: #ff3ea5;
    --cyan: #2de2e6;
    --yellow: #ffd319;
    --green: #3cff8f;
    --red: #ff4b4b;
    --purple: #8b5cf6;

    --font-pixel: 'Press Start 2P', monospace;
    --font-text: 'VT323', monospace;

    --heading: #ffffff;     /* titres */
    --deep: #070614;        /* fonds les plus sombres (dialogues, champs) */
    --on-accent: #0d0b1e;   /* texte posé sur la couleur rose (contraste 6:1) */
    --bug: var(--pink);     /* nourriture du Snake : doit trancher avec le serpent */
    --grid-line: rgba(139, 92, 246, 0.07);
    --vignette: rgba(0, 0, 0, 0.6);

    --px: 4px; /* taille d'un "pixel" pour les bordures */
    --shadow: 0 var(--px) 0 0 #000;

    color-scheme: dark;
}

/* --- THÈMES DE COULEURS (bouton 🎨 du HUD) --- */

/* Game Boy : 4 nuances de vert */
:root[data-theme="gameboy"] {
    --bg: #0f380f;
    --bg-2: #143f14;
    --panel: #1d4a1d;
    --panel-2: #306230;
    --border: #4f7a28;
    --text: #d4ec9a;
    --muted: #9bbc0f;
    --heading: #e8f8c0;
    --deep: #082208;
    --pink: #8bac0f;
    --cyan: #c4f070;
    --yellow: #e0f8a0;
    --green: #9bbc0f;
    --red: #b8d850;
    --purple: #306230;
    --on-accent: #0f380f;
    --bug: var(--heading);
    --grid-line: rgba(155, 188, 15, 0.08);
}

/* Console : thème clair façon Super Nintendo */
:root[data-theme="console"] {
    --bg: #e6e2ef;
    --bg-2: #dcd6ea;
    --panel: #f8f6fc;
    --panel-2: #ece7f7;
    --border: #8a80b0;
    --text: #2a2340;
    --muted: #574f75;
    --heading: #1a1530;
    --deep: #ffffff;
    --pink: #a81c4e;
    --cyan: #0a7480;
    --yellow: #8a5d00;
    --green: #0d6e38;
    --red: #c62828;
    --purple: #5b34c4;
    --on-accent: #ffffff;
    --grid-line: rgba(91, 52, 196, 0.08);
    --vignette: rgba(0, 0, 0, 0.12);
    color-scheme: light;
}

/* Lave : rouge façon Virtual Boy */
:root[data-theme="lave"] {
    --bg: #140404;
    --bg-2: #1e0707;
    --panel: #2a0a0a;
    --panel-2: #3d0f0f;
    --border: #6e1e1e;
    --text: #ffdcd4;
    --muted: #d4908a;
    --heading: #ffffff;
    --deep: #0a0202;
    --pink: #ff3b3b;
    --cyan: #ff9a3b;
    --yellow: #ffd23b;
    --green: #ff7b4a;
    --red: #ff3b3b;
    --purple: #a01010;
    --bug: var(--heading);
    --on-accent: #1a0000;
    --grid-line: rgba(255, 59, 59, 0.07);
}

/* Daltonisme : palette Okabe-Ito (distinguable avec toutes les formes de daltonisme)
   + contraste renforcé */
:root[data-theme="access"] {
    --bg: #0b0b0f;
    --bg-2: #121218;
    --panel: #18181f;
    --panel-2: #24242e;
    --border: #8a8aa0;
    --text: #f4f4f4;
    --muted: #cfcfd8;
    --heading: #ffffff;
    --deep: #000000;
    --pink: #e69f00;   /* orange */
    --cyan: #56b4e9;   /* bleu ciel */
    --yellow: #f0e442; /* jaune */
    --green: #009e73;  /* vert bleuté */
    --red: #d55e00;    /* vermillon */
    --purple: #cc79a7; /* rose violacé */
    --on-accent: #000000;
    --bug: #ffffff;
    --grid-line: rgba(255, 255, 255, 0.05);
}

/* Thème clair : texte blanc sur les pastilles colorées (contraste suffisant) */
:root[data-theme="console"] :is(.world, .step-num, .timeline-status, .filter-btn.active) {
    color: #ffffff;
}

/* Le thème clair n'a pas besoin des lignes cathodiques sombres */
:root[data-theme="console"] .crt {
    opacity: 0.35;
}

/* --- 2. BASE --- */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 32px 32px;
    color: var(--text);
    font-family: var(--font-text);
    font-size: 1.35rem;
    line-height: 1.35;
    overflow-x: hidden;
}

::selection {
    background: var(--pink);
    color: #fff;
}

strong {
    color: var(--yellow);
    font-weight: normal;
}

kbd {
    display: inline-block;
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    padding: 4px 6px;
    margin: 0 2px;
    background: var(--panel-2);
    border: 2px solid var(--border);
    border-bottom-width: 4px;
    color: var(--text);
    vertical-align: middle;
}

:focus-visible {
    outline: 3px dashed var(--yellow);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 8px;
    z-index: 1000;
    background: var(--yellow);
    color: #000;
    padding: 8px 12px;
    font-family: var(--font-pixel);
    font-size: 0.6rem;
}

.skip-link:focus {
    left: 8px;
}

/* Effet CRT (lignes de balayage) */
.crt {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.18) 3px
    );
    box-shadow: inset 0 0 120px var(--vignette);
}

/* --- 3. ÉCRAN TITRE --- */
.title-screen {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px 16px;
    text-align: center;
    background: radial-gradient(ellipse at center, var(--panel-2) 0%, var(--bg) 70%);
    overflow: hidden;
    transition: opacity 0.6s, transform 0.6s;
}

/* Pas de défilement de la page tant que l'écran titre est affiché */
body:has(.title-screen:not([hidden]):not(.leaving)) {
    overflow: hidden;
}

.title-screen.leaving {
    opacity: 0;
    transform: scale(1.15);
    pointer-events: none;
}

.stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 20% 30%, #fff, transparent),
        radial-gradient(2px 2px at 70% 20%, #fff, transparent),
        radial-gradient(2px 2px at 40% 80%, #fff, transparent),
        radial-gradient(2px 2px at 85% 65%, #fff, transparent),
        radial-gradient(2px 2px at 10% 75%, #fff, transparent),
        radial-gradient(2px 2px at 55% 45%, #fff, transparent),
        radial-gradient(2px 2px at 92% 10%, #fff, transparent);
    background-size: 400px 400px;
    animation: stars 40s linear infinite;
    opacity: 0.6;
}

@keyframes stars {
    to { background-position: 0 400px; }
}

.title-insert {
    position: relative;
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    color: var(--muted);
    letter-spacing: 2px;
}

.game-logo {
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: var(--font-pixel);
    font-weight: normal;
    line-height: 1.2;
}

.logo-top,
.logo-bottom {
    font-size: clamp(1.8rem, 8vw, 4.2rem);
    background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow) 45%, #ff8a00 55%, var(--pink) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(4px 4px 0 #000) drop-shadow(0 0 18px rgba(255, 62, 165, 0.5));
}

.logo-bottom {
    background: linear-gradient(180deg, #fff 0%, var(--cyan) 50%, var(--purple) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.game-subtitle {
    position: relative;
    color: var(--cyan);
    font-size: 1.5rem;
}

.title-avatar {
    position: relative;
    width: 96px;
    animation: bob 1.2s steps(2) infinite;
}

@keyframes bob {
    50% { transform: translateY(-6px); }
}

.press-start {
    position: relative;
    font-family: var(--font-pixel);
    font-size: clamp(0.8rem, 3vw, 1.1rem);
    color: var(--heading);
    padding: 14px 22px;
}

.blink {
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

.title-hint {
    position: relative;
    color: var(--muted);
    font-size: 1.1rem;
}

.hi-score {
    position: relative;
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    color: var(--pink);
}

.hi-score span {
    color: var(--heading);
}

/* --- 4. HUD --- */
.game {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
}

.hud {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    /* pas de flou d'arrière-plan : coûteux pour la carte graphique à chaque défilement */
    border-bottom: var(--px) solid var(--border);
    font-family: var(--font-pixel);
    font-size: 0.6rem;
}

.hud-player {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Avatar pixel art (image SVG générée en JS) */
[data-avatar] img {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
}

.hud-avatar {
    width: 30px;
}

.hud-name {
    color: var(--pink);
}

.hud-lvl strong {
    color: var(--yellow);
}

.hud-xp {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 360px;
}

.hud-label {
    color: var(--green);
}

.hud-xp-text {
    color: var(--muted);
    white-space: nowrap;
}

.hud-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.hud-btn {
    padding: 6px 8px;
    background: var(--panel);
    border: 2px solid var(--border);
    font-family: var(--font-pixel);
    font-size: 0.6rem;
    white-space: nowrap;
    transition: border-color 0.2s;
}

.hud-btn:hover {
    border-color: var(--yellow);
}

.hud-clock {
    color: var(--cyan);
}

/* Barres (XP, PV, PM…) */
.bar {
    flex: 1;
    height: 14px;
    background: var(--deep);
    border: 2px solid var(--border);
    padding: 2px;
}

.bar-fill {
    height: 100%;
    width: var(--v, 0%);
    background: repeating-linear-gradient(90deg, var(--green) 0 6px, #22c06a 6px 8px);
    transition: width 0.6s steps(12);
}

.bar-fill.hp { background: repeating-linear-gradient(90deg, var(--red) 0 6px, #c52f2f 6px 8px); }
.bar-fill.mp { background: repeating-linear-gradient(90deg, #4ea8ff 0 6px, #2f7bd0 6px 8px); }
.bar-fill.coffee { background: repeating-linear-gradient(90deg, #c08552 0 6px, #8b5a2b 6px 8px); }

/* Bandeau "recherche de stage" */
.stage-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 24px;
    padding: 12px 20px;
    background: repeating-linear-gradient(
        -45deg,
        var(--panel-2) 0 14px,
        var(--panel) 14px 28px
    );
    border-bottom: var(--px) solid var(--yellow);
    text-align: center;
}

.stage-banner p {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    color: var(--heading);
}

.stage-banner strong {
    font-family: var(--font-pixel);
    font-size: 0.65rem;
    color: var(--yellow);
}

:root[data-font] .stage-banner strong {
    font-size: 1.1rem;
}

.stage-banner-icon {
    font-size: 1.6rem;
    animation: bob 1.2s steps(2) 3;
}

.stage-banner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.stage-banner .pixel-btn {
    padding: 8px 12px;
}

/* --- 5. SCÈNE & ÉCRANS --- */
.stage {
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 20px 48px;
    outline: none;
}

.screen {
    animation: screenIn 0.35s steps(6);
}

@keyframes screenIn {
    from { opacity: 0; transform: translateY(12px); }
}

.screen > * + * {
    margin-top: 24px;
}

.screen-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.screen-title {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: clamp(0.85rem, 2.6vw, 1.25rem);
    line-height: 1.6;
    color: var(--heading);
    text-shadow: 3px 3px 0 var(--pink);
}

.world {
    display: inline-block;
    margin-right: 10px;
    padding: 4px 8px;
    background: var(--yellow);
    color: #000;
    font-size: 0.7em;
    text-shadow: none;
    vertical-align: middle;
}

.screen-intro {
    color: var(--muted);
}

.back-btn {
    font-family: var(--font-pixel);
    font-size: 0.6rem;
    padding: 10px 12px;
    background: var(--panel);
    border: 2px solid var(--border);
    box-shadow: var(--shadow);
    transition: transform 0.1s, border-color 0.2s;
}

.back-btn:hover {
    border-color: var(--pink);
    transform: translateX(-3px);
}

/* Panneaux style "fenêtre RPG" */
.panel {
    position: relative;
    background: var(--panel);
    border: var(--px) solid var(--border);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.04),
        6px 6px 0 0 #000;
    padding: 20px;
}

.panel-title {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--cyan);
    margin-bottom: 16px;
}

/* Boîte de dialogue */
.dialog-box {
    position: relative;
    background: var(--deep);
    border: var(--px) solid var(--heading);
    box-shadow: 0 0 0 var(--px) #000, 6px 6px 0 var(--px) #000;
    padding: 26px 20px 18px;
    margin-top: 14px;
}

.dialog-name {
    position: absolute;
    top: -14px;
    left: 16px;
    background: var(--pink);
    color: var(--on-accent);
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    padding: 6px 10px;
    border: 2px solid var(--heading);
}

.dialog-box p {
    font-size: 1.45rem;
    min-height: 1.4em;
}

.dialog-next {
    position: absolute;
    right: 14px;
    bottom: 6px;
    color: var(--yellow);
    animation: blink 0.8s steps(1) 6;
}

.typewriter::after {
    content: '▌';
    color: var(--cyan);
    animation: blink 0.7s steps(1) infinite;
}

.typewriter.done::after {
    content: '';
}

/* --- 6. CARTE DU MONDE (sélection de niveau) --- */
.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}

.level {
    --c: var(--cyan);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 20px 12px 16px;
    text-align: center;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: var(--px) solid var(--border);
    box-shadow: 6px 6px 0 #000;
    transition: transform 0.12s steps(3), border-color 0.15s, box-shadow 0.15s;
}

.level:hover,
.level:focus-visible {
    transform: translate(-3px, -3px);
    border-color: var(--c);
    box-shadow: 9px 9px 0 #000, 0 0 24px color-mix(in srgb, var(--c) 45%, transparent);
    outline: none;
}

.level:hover .level-icon,
.level:focus-visible .level-icon {
    animation: bob 0.5s steps(2) 4;
}

.level:focus-visible::before {
    content: '▶';
    position: absolute;
    left: -22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--yellow);
    font-size: 1.1rem;
    animation: blink 0.6s steps(1) 6;
}

.level-num {
    align-self: flex-start;
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    padding: 4px 6px;
    background: var(--c);
    color: #000;
}

.level-icon {
    font-size: 2.8rem;
    line-height: 1.2;
    filter: drop-shadow(3px 3px 0 #000);
}

.level-name {
    font-family: var(--font-pixel);
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--heading);
}

.level-sub {
    color: var(--muted);
    font-size: 1.1rem;
}

.level-star {
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--border);
    font-size: 1.2rem;
}

.level.cleared .level-star {
    color: var(--yellow);
    text-shadow: 0 0 8px var(--yellow);
}

.level-bonus {
    border-style: dashed;
}

.controls-hint {
    text-align: center;
    color: var(--muted);
    font-size: 1.1rem;
}

/* --- 7. PROFIL --- */
.profile-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: start;
}

.profile-main > * + * {
    margin-top: 24px;
}

.profile-main .dialog-box {
    margin-top: 14px;
}

.character-card {
    text-align: center;
}

.char-avatar {
    width: 128px;
    margin: 0 auto 14px;
    padding: 10px;
    background: radial-gradient(circle, var(--panel-2), var(--panel) 70%);
    border: var(--px) solid var(--yellow);
    image-rendering: pixelated;
}

.char-avatar.small {
    width: 96px;
    margin: 0;
    flex-shrink: 0;
}

.char-name {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--heading);
    margin-bottom: 8px;
}

.char-class {
    color: var(--muted);
    font-size: 1.15rem;
}

.stats {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.stat {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 8px;
}

.stat dt {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    color: var(--muted);
}

.stat dd {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat dd span {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    width: 28px;
}

.quest-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    counter-reset: step;
}

.quest-steps li {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-2);
    border: 2px solid var(--border);
}

.step-num {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    background: var(--green);
    color: #000;
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    box-shadow: 3px 3px 0 #000;
}

.quest-steps strong {
    display: block;
    color: var(--yellow);
}

.quest-steps p {
    color: var(--muted);
    font-size: 1.15rem;
}

/* Journal de quêtes (parcours) */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-left: var(--px) dashed var(--border);
    padding-left: 22px;
}

.timeline-item {
    position: relative;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 2px solid var(--border);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -35px;
    top: 16px;
    width: 14px;
    height: 14px;
    background: var(--muted);
    box-shadow: 2px 2px 0 #000;
}

.timeline-item.current {
    border-color: var(--green);
}

.timeline-item.current::before {
    background: var(--green);
    animation: blink 1s steps(1) 4;
}

.timeline-status {
    display: inline-block;
    margin-bottom: 6px;
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    padding: 4px 6px;
    background: var(--muted);
    color: #000;
}

.timeline-item.current .timeline-status {
    background: var(--green);
}

.timeline-item strong {
    display: block;
}

.timeline-item p {
    color: var(--muted);
    font-size: 1.15rem;
}

/* Inventaire */
.inventory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}

.item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    aspect-ratio: 1;
    background: var(--deep);
    border: 3px solid var(--border);
    cursor: help;
    transition: border-color 0.15s, transform 0.1s;
}

.item:hover,
.item:focus-visible {
    border-color: var(--yellow);
    transform: scale(1.06);
}

.item::after {
    content: 'Lv' attr(data-lvl);
    position: absolute;
    top: 4px;
    right: 5px;
    font-family: var(--font-pixel);
    font-size: 0.42rem;
    color: var(--green);
}

.item-icon {
    font-size: 1.9rem;
}

.item-name {
    font-size: 1.05rem;
    text-align: center;
    line-height: 1;
}

/* Compétences en cours d'apprentissage */
.inventory-sub {
    margin: 20px 0 12px;
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 0.55rem;
    line-height: 1.6;
    color: var(--yellow);
}

:root[data-font] .inventory-sub {
    font-size: 1.05rem;
}

.item.learning {
    border-style: dashed;
}

.item.learning::after {
    content: 'BTS';
    color: var(--yellow);
}

/* Projet pas encore réalisé */
.cartridge.upcoming {
    border-style: dashed;
}

.item-tooltip {
    margin-top: 14px;
    color: var(--muted);
    font-size: 1.15rem;
}

.perks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.perk {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-2);
    border: 2px solid var(--border);
}

.perk > span {
    font-size: 1.8rem;
}

.perk p {
    color: var(--muted);
    font-size: 1.1rem;
}

/* --- 8. CARTES DE PROJETS --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.card-grid.small {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.quest-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.quest-head h3,
.trophy h3 {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--heading);
}

.quest-card p,
.cartridge p,
.monster p,
.trophy p {
    color: var(--muted);
}

.tag {
    --t: var(--cyan);
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    padding: 5px 7px;
    color: var(--t);
    border: 2px solid var(--t);
    white-space: nowrap;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.badge {
    font-family: var(--font-pixel);
    font-size: 0.42rem;
    padding: 4px 6px;
    color: #fff;
    box-shadow: 2px 2px 0 #000;
}

.badge.html { background: #e34f26; }
.badge.css { background: #1572b6; }
.badge.js { background: #f7df1e; color: #000; }
.badge.node { background: #3c873a; }
.badge.react { background: #08b6d9; color: #000; }
.badge.json { background: #ff9800; color: #000; }
.badge.laravel { background: #ff2d20; }
.badge.wp { background: #21759b; }
.badge.php { background: #4f5d95; }
.badge.sql { background: #00758f; }
.badge.ts { background: #3178c6; }
.badge.expo { background: #1b1f23; }
.badge.firebase { background: #ffca28; color: #000; }
.badge.luau { background: #00a2ff; color: #000; }
.badge.roblox { background: #e2231a; }

/* Cartouches de jeu */
.cartridge {
    display: flex;
    flex-direction: column;
    transition: transform 0.15s steps(3);
}

.cartridge:hover {
    transform: translateY(-4px);
}

.cart-cover {
    position: relative;
    display: grid;
    place-items: center;
    height: 150px;
    margin: -20px -20px 16px;
    font-size: 3.4rem;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0 2px, transparent 2px 4px),
        linear-gradient(135deg, var(--a), var(--b));
    border-bottom: var(--px) solid #000;
    overflow: hidden;
}

/* Encoches de la cartouche */
.cart-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 60%;
    height: 10px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 14px);
    opacity: 0.5;
}

.cart-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    background: #000;
    color: #fff;
    padding: 5px 8px;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
}

.pixel-btn {
    display: inline-block;
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    line-height: 1.5;
    padding: 10px 14px;
    background: var(--pink);
    color: var(--on-accent);
    border: 3px solid #000;
    box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.3), 4px 4px 0 #000;
    transition: transform 0.08s, box-shadow 0.08s;
}

.pixel-btn:hover {
    filter: brightness(1.15);
}

.pixel-btn:active {
    transform: translate(4px, 4px);
    box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.3), 0 0 0 #000;
}

.pixel-btn.alt {
    background: var(--panel-2);
    color: var(--heading);
}

.pixel-btn.big {
    width: 100%;
    font-size: 0.65rem;
    padding: 14px;
}

/* Filtres */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-btn {
    font-family: var(--font-pixel);
    font-size: 0.52rem;
    padding: 9px 12px;
    background: var(--panel);
    border: 2px solid var(--border);
    transition: border-color 0.15s, background 0.15s;
}

.filter-btn:hover {
    border-color: var(--cyan);
}

.filter-btn.active {
    background: var(--cyan);
    border-color: var(--cyan);
    color: #000;
}

.empty-msg {
    text-align: center;
    color: var(--muted);
}

/* Iframes Figma chargées à la demande */
.embed-label {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 0.5rem;
    color: var(--yellow);
    letter-spacing: 1px;
    margin: 16px 0 8px;
}

.embed {
    margin-top: 12px;
    aspect-ratio: 16 / 10;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 10px, transparent 10px 20px),
        var(--deep);
    border: 3px solid var(--border);
    display: grid;
    place-items: center;
}

.embed-label + .embed {
    margin-top: 0;
}

.embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Bestiaire */
.monster {
    padding-top: 26px;
}

.monster:hover .monster-icon {
    animation: bob 1.4s steps(2) infinite;
}

.monster-icon {
    position: absolute;
    top: -18px;
    right: 16px;
    font-size: 2.2rem;
    filter: drop-shadow(3px 3px 0 #000);
    /* animation au survol seulement (voir .monster:hover) */
}

/* --- 9. GITHUB --- */
.gh-profile {
    display: flex;
    gap: 20px;
    align-items: center;
}

.gh-profile p {
    color: var(--muted);
    margin-bottom: 12px;
}

.gh-user {
    color: var(--cyan) !important;
}

.gh-chart {
    overflow-x: auto;
    padding: 12px;
    background: #fff;
    border: 3px solid #000;
}

.gh-chart img {
    min-width: 600px;
    width: 100%;
    height: auto;
}

.repo {
    display: block;
    padding: 14px;
    background: var(--bg-2);
    border: 2px solid var(--border);
    transition: border-color 0.15s;
}

.repo:hover {
    border-color: var(--cyan);
}

.repo-name {
    display: block;
    color: var(--cyan);
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.repo p {
    color: var(--muted);
    font-size: 1.1rem;
}

.langs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    font-size: 1.05rem;
}

.lang {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.lang i {
    width: 10px;
    height: 10px;
    background: var(--l);
}

/* --- 10. TROPHÉES & SUCCÈS --- */
.trophy {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.trophy > div {
    flex: 1;
}

.trophy-icon {
    font-size: 2.8rem;
    filter: drop-shadow(3px 3px 0 #000);
}

.trophy.gold {
    border-color: var(--yellow);
    box-shadow: 6px 6px 0 #000, 0 0 30px rgba(255, 211, 25, 0.25);
}

.trophy.silver { border-color: #c0c7d6; }
.trophy.bronze { border-color: #cd7f32; }

/* Trophée pas encore obtenu */
.trophy.locked {
    border-style: dashed;
}

.trophy.locked .trophy-icon {
    filter: grayscale(1) drop-shadow(3px 3px 0 #000);
}

.trophy-date {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    color: var(--yellow);
}

.section-sub {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 0.65rem;
    color: var(--muted);
    letter-spacing: 1px;
}

.achievements {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.achievement {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--panel);
    border: 3px solid var(--border);
    opacity: 0.45;
    filter: grayscale(1);
}

.achievement.unlocked {
    opacity: 1;
    filter: none;
    border-color: var(--yellow);
}

.achievement .ach-icon {
    font-size: 2rem;
}

.achievement strong {
    display: block;
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    line-height: 1.6;
}

.achievement p {
    color: var(--muted);
    font-size: 1.1rem;
}

/* Notification "succès débloqué" */
.toast-zone {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 600;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: calc(100vw - 32px);
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 320px;
    max-width: 100%;
    padding: 12px 14px;
    background: var(--deep);
    border: 3px solid var(--yellow);
    box-shadow: 6px 6px 0 #000;
    animation: toastIn 0.3s steps(4), toastOut 0.3s steps(4) 3.6s forwards;
}

.toast .ach-icon {
    font-size: 1.8rem;
}

.toast small {
    display: block;
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    color: var(--yellow);
    margin-bottom: 4px;
}

@keyframes toastIn {
    from { transform: translateX(120%); }
}

@keyframes toastOut {
    to { transform: translateX(120%); opacity: 0; }
}

/* Level up ! */
.level-up {
    position: fixed;
    inset: 0;
    z-index: 650;
    display: grid;
    place-items: center;
    pointer-events: none;
    font-family: var(--font-pixel);
    font-size: clamp(1.4rem, 6vw, 3rem);
    color: var(--yellow);
    text-shadow: 4px 4px 0 var(--pink), 0 0 30px var(--yellow);
    animation: levelUp 1.6s steps(8) forwards;
}

@keyframes levelUp {
    0% { opacity: 0; transform: scale(0.5); }
    20% { opacity: 1; transform: scale(1.1); }
    80% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: translateY(-40px); }
}

/* --- 11. CONTACT --- */
.contact-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    align-items: start;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field label {
    font-family: var(--font-pixel);
    font-size: 0.52rem;
    color: var(--cyan);
}

.field input,
.field select,
.field textarea {
    padding: 12px;
    background: var(--deep);
    border: 3px solid var(--border);
    color: var(--text);
    font-size: 1.3rem;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--pink);
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--border);
}

.form-status {
    min-height: 1.4em;
    font-size: 1.2rem;
}

.form-status.ok { color: var(--green); }
.form-status.error { color: var(--red); }

.contact-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    word-break: break-all;
    transition: transform 0.12s steps(3), border-color 0.15s;
}

.contact-pill:hover {
    transform: translateX(4px);
    border-color: var(--cyan);
}

.contact-pill span {
    font-size: 1.6rem;
}

/* --- 12. BONUS & PAGES LÉGALES --- */
.game-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.secret-hint {
    text-align: center;
    color: var(--border);
    font-size: 1.1rem;
}

.legal h3 {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 0.7rem;
    color: var(--cyan);
    margin: 22px 0 8px;
}

.legal h3:first-child {
    margin-top: 0;
}

.legal p {
    color: var(--muted);
}

.legal a {
    color: var(--pink);
    text-decoration: underline;
}

.sitemap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sitemap a {
    text-decoration: none;
    color: var(--text);
}

.sitemap a::before {
    content: '▶ ';
    color: var(--yellow);
}

.sitemap a:hover {
    color: var(--pink);
}

/* --- 13. FOOTER --- */
.game-footer {
    padding: 20px;
    text-align: center;
    border-top: var(--px) solid var(--border);
    background: var(--bg-2);
    color: var(--muted);
    font-size: 1.1rem;
}

.game-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-bottom: 8px;
    font-family: var(--font-pixel);
    font-size: 0.5rem;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    margin-bottom: 6px;
}

.footer-social a:hover,
.game-footer nav a:hover {
    color: var(--pink);
}

/* --- 14. MODE SECRET (Konami) --- */
body.rainbow .level,
body.rainbow .panel {
    animation: rainbow 2s linear infinite;
}

@keyframes rainbow {
    to { filter: hue-rotate(360deg); }
}

/* --- 15. PARCOURS, ÉQUIPEMENT & CV --- */
.cv-btn {
    margin-top: 18px;
    text-align: center;
}

.gear-slot h4 {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 0.55rem;
    color: var(--yellow);
    margin-bottom: 14px;
}

.gear {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.gear-slot {
    padding: 14px;
    background: var(--bg-2);
    border: 2px solid var(--border);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chips li {
    padding: 2px 10px;
    background: var(--panel-2);
    border: 2px solid var(--border);
    font-size: 1.15rem;
}

/* Expériences professionnelles */
.jobs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.job {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: var(--bg-2);
    border: 2px solid var(--border);
}

.job.current {
    border-color: var(--green);
}

.job.current .timeline-status {
    background: var(--green);
}

.job-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    font-size: 1.6rem;
    background: var(--panel-2);
    border: 2px solid var(--border);
    box-shadow: 3px 3px 0 #000;
}

.job-body {
    flex: 1;
    min-width: 0;
}

.job h4 {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 0.6rem;
    line-height: 1.6;
    color: var(--heading);
}

.job-place {
    color: var(--muted);
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.job-desc {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.job .chips li {
    font-size: 1rem;
    padding: 0 8px;
}

/* Prochaines quêtes (projets futurs) */
.level-locked .level-icon {
    filter: drop-shadow(3px 3px 0 #000) grayscale(0.4);
}

.future-quest {
    border-style: dashed;
    padding-top: 30px;
}

.future-icon {
    position: absolute;
    top: -20px;
    left: 16px;
    font-size: 2.2rem;
    filter: drop-shadow(3px 3px 0 #000);
}

.future-lock {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 1.2rem;
}

/* Quête déjà commencée */
.future-quest.unlocked {
    border-style: solid;
    border-color: var(--green);
}

.future-quest .quest-head {
    padding-right: 26px; /* laisse la place au cadenas */
}

.future-quest > p {
    color: var(--muted);
}

.future-goal {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px dashed var(--border);
}

.future-goal a {
    color: var(--cyan);
    text-decoration: underline;
}

/* --- MODULE E5 (BTS SIO) --- */
.table-scroll {
    overflow-x: auto;
    border: 2px solid var(--border);
}

.synthese {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.synthese th,
.synthese td {
    padding: 10px 12px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.synthese thead th {
    background: var(--panel-2);
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 0.5rem;
    line-height: 1.7;
    color: var(--cyan);
}

:root[data-font] .synthese thead th {
    font-size: 0.95rem;
}

.synthese abbr {
    display: block;
    color: var(--yellow);
    text-decoration: none;
    cursor: help;
}

.synthese tbody th {
    font-weight: normal;
}

.synthese tbody th a {
    color: var(--heading);
    text-decoration: underline;
    text-decoration-color: var(--border);
}

.synthese tbody th a:hover {
    color: var(--pink);
}

.synthese tbody td:nth-child(2) {
    color: var(--muted);
}

.synthese tbody tr:nth-child(even) {
    background: var(--bg-2);
}

.cell-yes,
.cell-no {
    text-align: center !important;
    font-size: 1.4rem;
}

.cell-yes {
    color: var(--green);
}

.cell-no {
    color: var(--border);
}

/* Tableau de synthèse E5 : 6 compétences, donc plus large */
.synthese-wide {
    min-width: 900px;
}

.text-link {
    color: var(--cyan);
    text-decoration: underline;
}

.table-legend {
    margin-top: 12px;
    color: var(--muted);
    font-size: 1.1rem;
}

.skill-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.skill-block {
    padding: 14px;
    background: var(--bg-2);
    border: 2px solid var(--border);
}

.skill-block h4 {
    font-weight: normal;
    color: var(--heading);
    margin-bottom: 10px;
    line-height: 1.3;
}

.skill-code {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 6px;
    background: var(--yellow);
    color: #000;
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    vertical-align: middle;
}

:root[data-theme="console"] .skill-code {
    color: #fff;
}

.skill-block p {
    color: var(--muted);
    font-size: 1.15rem;
}

.fiche-body > p {
    margin-bottom: 12px;
}

.skill-block li {
    color: var(--muted);
    font-size: 1.15rem;
    padding-left: 16px;
    position: relative;
}

.skill-block li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--yellow);
}

.fiches {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fiche {
    padding: 0;
    scroll-margin-top: 90px; /* le HUD ne cache pas la fiche ciblée */
}

.fiche summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
}

.fiche summary::-webkit-details-marker {
    display: none;
}

.fiche summary::before {
    content: '▶';
    color: var(--yellow);
    transition: transform 0.15s;
}

.fiche[open] summary::before {
    transform: rotate(90deg);
}

.fiche[open] summary {
    border-bottom: 2px dashed var(--border);
}

.fiche:target {
    border-color: var(--yellow);
}

.fiche-title {
    font-family: var(--font-pixel);
    font-size: 0.68rem;
    line-height: 1.6;
    color: var(--heading);
}

:root[data-font] .fiche-title {
    font-size: 1.2rem;
    font-weight: 600;
}

.fiche-meta {
    color: var(--muted);
    font-size: 1.1rem;
}

.fiche summary .badges {
    margin-left: auto;
}

.fiche-body {
    padding: 16px 20px 20px;
}

.fiche-dl {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fiche-dl dt {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    color: var(--cyan);
    margin-bottom: 4px;
}

:root[data-font] .fiche-dl dt {
    font-size: 0.95rem;
}

.fiche-dl dd {
    color: var(--text);
}

.fiche-comps li::before {
    content: '✔ ';
    color: var(--green);
}

/* --- 16. BOUTIQUE --- */
.card-grid.shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    row-gap: 36px; /* place pour les icônes qui dépassent */
}

.shop-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 30px;
}

.shop-item h3 {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--heading);
}

.shop-item > p {
    color: var(--muted);
}

.shop-icon {
    position: absolute;
    top: -20px;
    left: 16px;
    font-size: 2.2rem;
    filter: drop-shadow(3px 3px 0 #000);
}

.shop-perks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.shop-perks li::before {
    content: '+ ';
    color: var(--green);
}

.shop-price {
    margin-top: auto;
    align-self: flex-start;
    font-family: var(--font-pixel);
    font-size: 0.52rem;
    line-height: 1.7;
    padding: 8px 10px;
    background: var(--deep);
    border: 2px dashed var(--yellow);
    color: var(--yellow);
}

/* Option design (maquette + logo) */
.shop-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    border-color: var(--cyan);
}

.shop-option-icon {
    font-size: 2.6rem;
    filter: drop-shadow(3px 3px 0 #000);
}

.shop-option-body {
    flex: 1;
    min-width: 240px;
}

.shop-option h3 {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--heading);
    margin-bottom: 8px;
}

:root[data-font] .shop-option h3 {
    font-size: 1.3rem;
    font-weight: 600;
}

.shop-option p {
    color: var(--muted);
    margin-bottom: 8px;
}

.shop-option .shop-perks {
    margin-bottom: 0;
}

.shop-note {
    text-align: center;
    color: var(--muted);
    font-size: 1.1rem;
}

.cartridge .chips {
    margin-top: 12px;
}

/* FAQ de la boutique */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: var(--bg-2);
    border: 2px solid var(--border);
}

.faq-item[open] {
    border-color: var(--yellow);
}

.faq-item summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    color: var(--heading);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    margin-left: auto;
    font-family: var(--font-pixel);
    font-size: 0.8rem;
    color: var(--yellow);
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-icon {
    font-size: 1.3rem;
}

.faq-item p {
    padding: 0 14px 14px 50px;
    color: var(--muted);
}

@media (max-width: 640px) {
    .faq-item p {
        padding-left: 14px;
    }
}

.actions.center {
    justify-content: center;
}

/* --- 17. ARCADE (Snake) --- */
.arcade {
    display: grid;
    grid-template-columns: minmax(0, 460px) 1fr;
    gap: 24px;
    align-items: start;
}

.arcade-cabinet {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.arcade-scores {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-pixel);
    font-size: 0.6rem;
}

.arcade-scores strong {
    color: var(--yellow);
}

.arcade-screen {
    position: relative;
    border: var(--px) solid var(--heading);
    box-shadow: 0 0 0 var(--px) #000;
    touch-action: none; /* le glissement pilote le serpent, pas la page */
}

#snake {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    background: var(--deep);
    image-rendering: pixelated;
}

.arcade-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 16px;
    text-align: center;
    background: color-mix(in srgb, var(--deep) 80%, transparent);
}

.arcade-msg {
    font-family: var(--font-pixel);
    font-size: clamp(0.75rem, 3vw, 1rem);
    line-height: 1.8;
    color: var(--heading);
    text-shadow: 3px 3px 0 var(--pink);
}

.dpad {
    display: grid;
    grid-template-columns: repeat(3, 52px);
    grid-template-rows: repeat(2, 44px);
    grid-template-areas:
        ". up ."
        "left down right";
    gap: 6px;
    justify-content: center;
}

.dpad-btn {
    font-size: 1rem;
    background: var(--panel-2);
    border: 3px solid #000;
    box-shadow: 3px 3px 0 #000;
    color: var(--heading);
}

.dpad-btn:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

.dpad-btn.up { grid-area: up; }
.dpad-btn.left { grid-area: left; }
.dpad-btn.right { grid-area: right; }
.dpad-btn.down { grid-area: down; }

.arcade-rules > * + * {
    margin-top: 20px;
}

.arcade-rules .controls-hint {
    text-align: left;
}

/* --- 18. PAGE 404 --- */
.gameover {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 32px 16px;
    text-align: center;
}

.gameover-title {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: clamp(2rem, 9vw, 4.5rem);
    line-height: 1.2;
    color: var(--red);
    text-shadow: 5px 5px 0 #000, 0 0 30px color-mix(in srgb, var(--red) 50%, transparent);
    animation: shake 0.5s steps(4) 2;
}

@keyframes shake {
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.gameover-code {
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: var(--muted);
}

.gameover .dialog-box {
    max-width: 560px;
    text-align: left;
}

.continue {
    font-family: var(--font-pixel);
    font-size: clamp(0.8rem, 3vw, 1.1rem);
    color: var(--heading);
}

.continue strong {
    display: inline-block;
    min-width: 2ch;
    font-size: 1.6em;
    color: var(--yellow);
    vertical-align: middle;
}

.gameover-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}


/* --- NOUVEAUTÉS : boutons, badge éco, GitHub, palette, mode classique --- */

/* Lien de site qui n'est plus en ligne */
.pixel-btn.offline {
    background: var(--bg-2);
    color: var(--muted);
    box-shadow: none;
    border-style: dashed;
    border-color: var(--border);
    cursor: not-allowed;
}

.shop-choose {
    align-self: flex-start;
    margin-top: 10px;
}

/* Bouton "version classique" sur l'écran titre */
.classic-btn {
    position: relative;
    padding: 8px 14px;
    border: 2px solid var(--border);
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    color: var(--muted);
    font-size: 1.15rem;
    transition: border-color 0.15s, color 0.15s;
}

.classic-btn:hover,
.classic-btn:focus-visible {
    border-color: var(--cyan);
    color: var(--heading);
}

/* Badge éco-conçu (pied de page) */
.eco-badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 12px;
    margin: 4px auto 10px;
    padding: 6px 12px;
    border: 2px solid var(--green);
    background: var(--deep);
    color: var(--text);
    font-size: 1.05rem;
}

.eco-grade {
    display: inline-grid;
    place-items: center;
    min-width: 1.6em;
    padding: 0 4px;
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: #000;
}

/* GitHub : statut et statistiques */
.gh-status {
    color: var(--muted);
    font-size: 1.1rem;
    margin: -6px 0 14px;
}


.repo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 1rem;
}

/* Palette de commandes */
.palette {
    width: min(600px, calc(100vw - 32px));
    max-height: min(520px, calc(100vh - 64px));
    margin: 12vh auto auto;
    padding: 0;
    color: var(--text);
    overflow: hidden;
}

.palette[open] {
    display: flex;
    flex-direction: column;
}

.palette::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.palette-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 2px solid var(--border);
    background: var(--deep);
}

.palette-prompt {
    font-family: var(--font-pixel);
    color: var(--green);
    animation: blink 1s steps(1) infinite;
}

.palette-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--heading);
    font-size: 1.4rem;
}

.palette-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    cursor: pointer;
    border: 2px solid transparent;
}

.palette-item[aria-selected="true"] {
    background: var(--panel-2);
    border-color: var(--yellow);
}

.palette-item-icon {
    width: 1.6em;
    text-align: center;
    font-size: 1.2rem;
}

.palette-item-label {
    flex: 1;
}

.palette-item-hint {
    color: var(--muted);
    font-size: 1rem;
}

.palette-empty {
    padding: 14px;
    color: var(--muted);
}

.palette-help {
    padding: 8px 16px;
    border-top: 2px solid var(--border);
    color: var(--muted);
    font-size: 1rem;
}

/* --- MODE "RECRUTEUR PRESSÉ" (version classique) --- */
.classic-bar {
    display: none;
}

:root[data-mode="classic"] .classic-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    padding: 12px 20px;
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    /* pas de flou d'arrière-plan (économie d'énergie) */
    border-bottom: var(--px) solid var(--border);
}

.classic-name {
    color: var(--heading);
}

.classic-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    flex: 1;
}

.classic-nav a {
    color: var(--cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Version classique = présentation professionnelle ----
   Palette claire et sobre (sauf si un thème a été choisi exprès dans les options),
   sans décor ni vocabulaire de jeu. */
:root[data-mode="classic"]:not([data-theme]) {
    --bg: #f5f6f8;
    --bg-2: #eef0f4;
    --panel: #ffffff;
    --panel-2: #f1f3f7;
    --border: #c9ced8;
    --text: #1f2733;
    --muted: #55606e;
    --heading: #111827;
    --deep: #ffffff;
    --pink: #1d4ed8;   /* couleur d'accent : bleu */
    --cyan: #0b5cab;
    --yellow: #8a5d00;
    --green: #0d6e38;
    --red: #b42318;
    --purple: #5b34c4;
    --on-accent: #ffffff;
    --grid-line: transparent;
    color-scheme: light;
}

:root[data-mode="classic"]:not([data-theme]) :is(.step-num, .timeline-status, .filter-btn.active, .skill-code) {
    color: #ffffff;
}

/* Éléments propres au jeu : masqués */
:root[data-mode="classic"] :is(.world, .level-num, .stats, .char-avatar, .dialog-name, .dialog-next,
    .perk p, .future-lock, .game-only, .level-icon, .perk > span) {
    display: none !important;
}

:root[data-mode="classic"] .item::after,
:root[data-mode="classic"] .cart-cover::before {
    content: none;
}

/* Habillage sobre : bordures fines, coins arrondis, plus d'ombres "pixel" */
:root[data-mode="classic"] body {
    background-image: none;
}

:root[data-mode="classic"] :is(.panel, .dialog-box, .level) {
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

:root[data-mode="classic"] .dialog-box {
    background: var(--panel);
    padding: 18px 20px;
    margin-top: 0;
}

:root[data-mode="classic"] .level {
    background: var(--panel);
}

:root[data-mode="classic"] .pixel-btn {
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
}

:root[data-mode="classic"] .pixel-btn.alt {
    border-color: var(--border);
}

:root[data-mode="classic"] .screen-title {
    text-shadow: none;
}

:root[data-mode="classic"] .cart-cover {
    height: 90px;
    border-radius: 9px 9px 0 0;
    border-bottom-width: 1px;
    font-size: 2.4rem;
}

:root[data-mode="classic"] :is(.level-icon, .shop-icon, .future-icon, .monster-icon, .trophy-icon, .shop-option-icon, .job-icon, .step-num, .dpad-btn) {
    filter: none;
    box-shadow: none;
}

/* Pas d'écran titre, de HUD ni d'effets de jeu ; la carte sert de sommaire */
:root[data-mode="classic"] :is(.title-screen, .hud, .crt, .back-btn, .level-up, .secret-hint, .toast-zone,
    .intro-dialog, .controls-hint, .level-star) {
    display: none !important;
}

:root[data-mode="classic"] .screen {
    animation: none;
}

/* En-tête et pied de page communs (layout.js) : n'ajoutent pas de boîte à la mise en page */
site-header,
site-footer {
    display: contents;
}

/* --- 19. ACCESSIBILITÉ : POLICES LISIBLES (dyslexie) --- */
/* Les polices pixel sont dessinées très petites : on réduit la base
   et on redonne une taille confortable à chaque type de texte. */
:root[data-font] {
    font-size: 80%;
}

:root[data-font="lexend"] {
    --font-pixel: 'Lexend', system-ui, sans-serif;
    --font-text: 'Lexend', system-ui, sans-serif;
}

:root[data-font="dyslexic"] {
    --font-pixel: 'OpenDyslexic', 'Lexend', sans-serif;
    --font-text: 'OpenDyslexic', 'Lexend', sans-serif;
}

:root[data-font] body {
    line-height: 1.65;
}

/* Petites étiquettes (boutons, badges, labels…) */
:root[data-font] :is(kbd, .skip-link, .title-insert, .hi-score, .hud, .hud-btn, .back-btn,
    .dialog-name, .level-num, .stat dt, .stat dd span, .tag, .badge, .cart-label,
    .pixel-btn, .filter-btn, .embed-label, .trophy-date, .section-sub,
    .achievement strong, .toast small, .field label, .game-footer nav, .job h4,
    .gear-slot h4, .timeline-status, .shop-price, .arcade-scores, .gameover-code, .step-num) {
    font-size: 1rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

:root[data-font] .item::after {
    font-size: 0.85rem;
}

/* Titres */
:root[data-font] :is(.panel-title, .level-name, .char-name, .quest-head h3, .trophy h3,
    .legal h3, .shop-item h3) {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.35;
}

:root[data-font] .screen-title {
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
    font-weight: 600;
    line-height: 1.3;
}

:root[data-font] :is(.press-start, .continue, .arcade-msg) {
    font-size: 1.4rem;
}

:root[data-font] .dialog-box p {
    font-size: 1.3rem;
}

/* Aperçus des polices dans la fenêtre de réglages */
.font-preview-lexend { font-family: 'Lexend', sans-serif; font-size: 0.95em; }
.font-preview-dyslexic { font-family: 'OpenDyslexic', sans-serif; font-size: 0.85em; }

/* --- 20. ACCESSIBILITÉ : ESPACEMENT, EFFETS, ANIMATIONS --- */
/* Valeurs recommandées par les WCAG (critère 1.4.12) */
:root[data-spacing="on"] body {
    line-height: 1.9;
    letter-spacing: 0.06em;
    word-spacing: 0.16em;
}

:root[data-spacing="on"] p + p {
    margin-top: 1em;
}

:root[data-crt="off"] .crt {
    display: none;
}

:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* --- 21. FENÊTRE D'ACCESSIBILITÉ --- */
.a11y-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: 0;
    color: var(--text);
    overflow: auto;
}

.a11y-dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.a11y-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
}

.a11y-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.a11y-head .panel-title {
    margin: 0;
}

.a11y-group {
    border: 2px solid var(--border);
    padding: 12px 14px 14px;
}

.a11y-group legend {
    padding: 0 6px;
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    color: var(--yellow);
}

:root[data-font] .a11y-group legend {
    font-size: 1rem;
}

.a11y-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    cursor: pointer;
}

.a11y-choice:hover {
    background: var(--panel-2);
}

.a11y-choice input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--pink);
}

.a11y-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

/* --- 22. RESPONSIVE --- */
@media (max-width: 900px) {
    .profile-layout,
    .contact-layout,
    .arcade {
        grid-template-columns: 1fr;
    }

    .arcade-cabinet {
        max-width: 460px;
        width: 100%;
        margin: 0 auto;
    }

    .character-card {
        max-width: 420px;
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 1.25rem;
    }

    .hud {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 16px;
    }

    .hud-xp {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .hud-clock {
        display: none;
    }

    .stage {
        padding: 22px 16px 40px;
    }

    .level-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .level {
        padding: 16px 8px 12px;
    }

    .level-icon {
        font-size: 2.2rem;
    }

    .level-name {
        font-size: 0.55rem;
    }

    .level:focus-visible::before {
        display: none;
    }

    .card-grid,
    .card-grid.small,
    .achievements {
        grid-template-columns: 1fr;
    }

    .gh-profile {
        flex-direction: column;
        text-align: center;
    }

    .controls-hint {
        display: none;
    }

    .hud-right {
        gap: 6px;
    }

    #theme-name,
    .hud-btn-label {
        display: none;
    }

    .classic-name {
        flex-basis: 100%;
    }

    .toast-zone {
        left: 16px;
        right: 16px;
    }

    .toast {
        width: 100%;
    }
}