/* Polices auto-hébergées (offline-first) : Material Symbols + Share Tech Mono sont déclarées dans assets/css/fonts.css, chargé via dans le de chaque page (avant novel.css). Cf. dev/fonts/README.md. */ :root { --bg-deep: #07111a; --red: #c0001a; --red-dim: #8a0012; --glass: rgba(245, 240, 232, .04); --glass-b: rgba(255, 255, 255, .08); --text-main: #d8cfc0; --text-dim: #7a7060; --text-muted: rgba(255, 255, 255, .3); --voice-col: #4ea8b8; /* Largeur de la sidebar outils créateur (/dev) */ --dev-side-w: 232px; /* Fonts */ --font-mono: 'Share Tech Mono', monospace; --font-heading: 'ITC Avant Garde Gothic', 'Avant Garde', 'Century Gothic', Futura, sans-serif; /* Red palette */ --red-006: rgba(192, 0, 26, .06); --red-012: rgba(192, 0, 26, .12); --red-035: rgba(192, 0, 26, .35); --red-040: rgba(192, 0, 26, .4); /* White palette */ --white-007: rgba(255, 255, 255, .07); --white-010: rgba(255, 255, 255, .1); --white-035: rgba(255, 255, 255, .35); /* Violet palette (flashbacks) */ --violet-012: rgba(160, 20, 140, .12); --violet-055: rgba(160, 20, 140, .55); --violet-090: rgba(160, 20, 140, .9); /* Blue palette (fins) */ --blue-012: rgba(30, 90, 200, .12); --blue-055: rgba(30, 90, 200, .55); --blue-090: rgba(30, 90, 200, .9); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Restaure le comportement de l'attribut HTML `hidden` : certaines règles d'auteur (ex. `.cfg-credits-link { display: flex }`) ont la même spécificité que `[hidden]` du UA-stylesheet et l'écrasent en cascade. */ [hidden] { display: none !important; } html, body { width: 100%; max-width: 100%; overflow-x: clip; } body { font-family: 'Times New Roman', Times, serif; font-size: 20px; line-height: 1.8; background: var(--bg-deep); color: var(--text-main); min-height: 100vh; position: relative; } /* ── BACKGROUND ── */ @keyframes noiseDrift { 0% { transform: translate(0, 0); } 100% { transform: translate(200px, 200px); } } .bg { position: fixed; inset: -4%; z-index: 0; background: radial-gradient(ellipse 50% 40% at 80% 100%, rgba(0, 40, 80, .35) 0%, transparent 55%), linear-gradient(160deg, #0b1822 0%, #07111a 100%); } /* ── FOND DYNAMIQUE Teal + rouge interpolés jour par jour via JS (updateBgPhase). BG_FROM (j1) : teal haut-gauche large, rouge infime bas-droit. BG_TO (jMax) : teal réduit coin haut-droit, rouge dominant centre-bas. ────────────────────────────────────────────────── */ #bg-dynamic { position: fixed; inset: -4%; z-index: 0; pointer-events: none; } .bg::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-size: 200px; opacity: .5; pointer-events: none; animation: noiseDrift 120s linear infinite; will-change: transform; } @media (prefers-reduced-motion: reduce) { .bg::after { animation: none; will-change: auto; } } /* ── TAP HINT ── */ .tap-hint::after { content: '▼'; display: block; text-align: right; color: rgba(255, 255, 255, .18); font-size: 10px; letter-spacing: .2em; margin-top: 4px; animation: tapBlink 1.2s ease-in-out infinite; pointer-events: none; } @keyframes tapBlink { 0%, 100% { opacity: .18; } 50% { opacity: .55; } } /* ── SHARED ── */ .page { position: relative; z-index: 10; min-height: 100vh; display: none; flex-direction: column; align-items: center; } .page.active { display: flex; } .card { background: var(--glass); border: 1px solid var(--glass-b); backdrop-filter: blur(10px); border-radius: 2px; padding: 1.5rem 1.75rem; } /* ══════════════════════════════════════ CONFIG PAGE ══════════════════════════════════════ */ #page-config { justify-content: center; gap: 2rem; padding: 2rem 1.5rem; } .cfg-header, .credits-header { display: flex; flex-direction: column; align-items: center; gap: .5rem; } .h-series { font-family: var(--font-mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 255, 255, .28); } .h-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(48px, 8vw, 88px); letter-spacing: .06em; color: #fff; line-height: 1; text-shadow: 0 0 80px var(--red-040); } .h-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .28); } .cfg-actions { display: flex; flex-direction: column; align-items: center; gap: .75rem; width: min(360px, 90vw); } /* ── Base partagée des "gros boutons d'action" (typo + layout) ── Utilisée par .replay-btn, .credits-back, .cfg-action-btn, .cfg-credits-link, .pause-btn, .fin-link-btn, .dev-link. Chaque classe ajoute ensuite ses propres border/background/color/padding. */ .replay-btn, .credits-back, .cfg-action-btn, .cfg-credits-link, .pause-btn, .fin-link-btn, .dev-link { display: flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-heading); font-weight: 700; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border-radius: 1px; transition: all .25s; cursor: pointer; box-sizing: border-box; } /* Boutons qui prennent toute la largeur de leur conteneur */ .replay-btn, .cfg-action-btn, .cfg-credits-link, .pause-btn, .fin-link-btn, .dev-link { width: 100%; } .cfg-action-btn { border: none; padding: 1rem 2rem; } /* ── SAVE SLOTS ── */ .save-slots { display: flex; flex-direction: column; gap: .5rem; width: 100%; } .save-slot { border: 1px solid var(--glass-b); border-radius: 2px; padding: .8rem 1rem; background: rgba(255, 255, 255, .02); transition: border-color .2s; } .save-slot:hover { border-color: rgba(255, 255, 255, .14); } .slot-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; } .slot-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--white-035); } .slot-date { font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, .22); } .slot-info { font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, .5); margin-bottom: .6rem; min-height: 1.3em; } .slot-btns { display: flex; flex-direction: column; gap: .4rem; } .slot-btns .cfg-action-btn { font-size: 15px; width: 100%; } /* ── Icône dans les boutons ── */ .btn-icon { font-size: 20px !important; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; user-select: none; flex-shrink: 0; } /* CTA rouge gradient (cfg-action-primary + fin-link-btn partagent gradient + ombre + animation hover). */ .cfg-action-primary, .fin-link-btn { background: linear-gradient(135deg, var(--red-dim), var(--red)); color: #fff; box-shadow: 0 4px 30px var(--red-035); } .cfg-action-primary:hover, .fin-link-btn:hover { box-shadow: 0 6px 50px rgba(192, 0, 26, .55); transform: translateY(-1px); } .cfg-footer { margin-top: 28px; text-align: center; width: min(360px, 90vw); } .cfg-footer-links { display: flex; flex-direction: column; gap: 8px; width: 100%; } .cfg-credits-link { padding: 1rem 2rem; border: 1px solid var(--glass-b); color: var(--text-muted); } .cfg-credits-link:hover { border-color: var(--red-dim); color: rgba(255, 255, 255, .55); background: rgba(192, 0, 26, .04); } .cfg-footer-sep { width: 100%; border: 0; border-top: 1px solid var(--white-010); margin: .25rem 0; } .cfg-version { margin-top: 12px; text-align: center; display: flex; flex-direction: column; gap: 4px; } .cfg-version-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--text-muted); } .cfg-version-demo { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: rgba(192, 0, 26, .5); text-transform: uppercase; } .stats-version { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--text-muted); margin-top: 6px; } .version-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .version-tag { padding: 5px 14px; border: 1px solid var(--glass-b); border-radius: 2px; background: transparent; color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .version-tag:hover:not(.active) { border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .5); } .version-tag.active { border-color: var(--red-dim); color: rgba(255, 255, 255, .85); background: var(--red-006); } .version-tag-badge { font-size: 10px; color: var(--red-035); margin-left: 5px; letter-spacing: .05em; } /* ══════════════════════════════════════ PAUSE MODAL ══════════════════════════════════════ */ .pause-overlay { display: none; position: fixed; inset: 0; z-index: 900; background: rgba(7, 17, 26, .85); backdrop-filter: blur(6px); align-items: center; justify-content: center; } .pause-overlay.open { display: flex; } .pause-modal { background: rgba(11, 24, 34, .98); border: 1px solid var(--glass-b); border-top: 2px solid var(--red); width: 100%; max-width: 400px; padding: 2.5rem 2rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .pause-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--red); } .pause-info { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--white-035); line-height: 1.7; } .pause-menu { display: flex; flex-direction: column; gap: .5rem; } .pause-btn { background: transparent; border: 1px solid var(--white-010); color: rgba(255, 255, 255, .45); padding: 1rem 1.5rem; } .pause-btn-disabled { opacity: .3; cursor: not-allowed; } .pause-btn-danger { border-color: rgba(192, 0, 26, .25); color: rgba(192, 0, 26, .6); } .pause-btn-danger:hover:not(:disabled) { border-color: var(--red); color: var(--red); background: rgba(192, 0, 26, .08); } /* ══════════════════════════════════════ CUSTOM MODAL (alert / confirm) ══════════════════════════════════════ */ .vn-modal-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(7, 17, 26, .85); backdrop-filter: blur(6px); align-items: center; justify-content: center; } .vn-modal-overlay.open { display: flex; } .vn-modal { background: rgba(11, 24, 34, .98); border: 1px solid var(--glass-b); border-top: 2px solid var(--red); width: 100%; max-width: 380px; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .vn-modal-message { font-family: 'Times New Roman', serif; font-size: 17px; line-height: 1.6; color: var(--text-main); white-space: pre-line; } .vn-modal-btns { display: flex; gap: .75rem; justify-content: flex-end; } .vn-modal-btns .pause-btn { width: auto; padding: .6rem 1.25rem; } .pause-speed { display: flex; flex-direction: column; gap: .5rem; } .pause-speed-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--text-muted); } .pause-speed-btns { display: flex; gap: .4rem; } .speed-btn { flex: 1; background: transparent; border: 1px solid var(--white-010); color: var(--white-035); font-family: var(--font-heading); font-weight: 700; font-size: 15px; letter-spacing: .15em; text-transform: uppercase; padding: .55rem .5rem; border-radius: 1px; cursor: pointer; transition: all .2s; } /* Hover "rouge tinté" partagé entre .speed-btn, .pause-btn (hors disabled) et .dev-link — bordure rouge sombre, fond rouge léger, texte blanc. */ .speed-btn:hover, .pause-btn:hover:not(:disabled), .dev-link:hover { border-color: var(--red-dim); color: #fff; background: var(--red-006); } .speed-btn-active { border-color: var(--red-dim); color: #fff; background: var(--red-012); } .pause-mode { display: flex; flex-direction: column; gap: .5rem; } .pause-mode-rows { display: flex; flex-direction: column; } .mode-row { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .04); cursor: pointer; user-select: none; -webkit-user-select: none; } .mode-row:last-child { border-bottom: none; } .mode-row-icon { font-size: 16px; color: var(--white-035); flex-shrink: 0; } .mode-row-label { flex: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--white-035); } /* Toggle switch style iOS */ .toggle-switch { position: relative; width: 44px; height: 26px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .15); border-radius: 13px; cursor: pointer; flex-shrink: 0; padding: 0; transition: background .25s, border-color .25s; outline: none; } .toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: rgba(255, 255, 255, .4); border-radius: 50%; pointer-events: none; transition: transform .25s cubic-bezier(.22, .61, .36, 1), background .25s; } .toggle-switch[aria-checked="true"] { background: var(--red); border-color: var(--red); } .toggle-switch[aria-checked="true"] .toggle-thumb { transform: translateX(18px); background: #fff; } .pause-close { background: linear-gradient(135deg, var(--red-dim), var(--red)); border: none; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; padding: 1rem 2rem; border-radius: 1px; width: 100%; cursor: pointer; transition: all .25s; box-shadow: 0 4px 30px var(--red-035); display: flex; align-items: center; justify-content: center; gap: .5rem; } .pause-close:hover { box-shadow: 0 6px 50px rgba(192, 0, 26, .55); transform: translateY(-1px); } .pause-shortcuts { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: rgba(255, 255, 255, .2); text-align: center; padding: .5rem 0 .25rem; border-top: 1px solid rgba(255, 255, 255, .05); } .pause-shortcuts kbd { display: inline-block; background: var(--white-007); border: 1px solid rgba(255, 255, 255, .12); border-radius: 3px; padding: 0 .3rem; font-family: inherit; font-size: 9px; line-height: 1.5; } /* Focus visible pour l'accessibilité clavier ────────────────────────────────────────── Règle générale (outline rouge) appliquée à tous les éléments focusables. Renforcement spécifique pour les boutons foncés où l'outline seul est peu contrasté (ajout d'un box-shadow halo). */ :focus-visible { outline: 2px solid rgba(192, 0, 26, .85); outline-offset: 2px; } .choice-btn:focus-visible, .pause-btn:focus-visible, .pause-close:focus-visible, .replay-btn:focus-visible, .cfg-action-btn:focus-visible, .topbar-btn:focus-visible, .day-chip:focus-visible, .fb-delete-btn:focus-visible, .retour-submit:focus-visible, .fin-link-btn:focus-visible, .version-tag:focus-visible, .map-filter-btn:focus-visible { outline: 2px solid rgba(192, 0, 26, .9); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(192, 0, 26, .25); } /* Cible les liens-bouton (focus moins agressif sur les ancres dans le texte) */ a:focus-visible { outline-offset: 1px; } /* ══════════════════════════════════════ GAME PAGE ══════════════════════════════════════ */ #page-game { padding: 0 1.5rem 5rem; } /* Mobile topbar — visible seulement quand scene-recap est caché */ .game-topbar-mobile { display: none; width: 100%; align-items: center; gap: .75rem; } /* Recap header — titre + bouton pause en haut du panneau gauche */ .recap-header { display: flex; align-items: center; gap: .5rem; padding-bottom: 1rem; margin-bottom: .5rem; border-bottom: 1px solid var(--white-007); } /* Bouton fermeture du récap — visible uniquement en mobile. Sélecteur double-classe (.topbar-btn.recap-close-btn) pour surpasser la spécificité de .topbar-btn { display:flex }. */ .topbar-btn.recap-close-btn { display: none; } .topbar-txt { flex: 1; } .topbar-series { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .22); } .topbar-title { font-family: var(--font-heading); font-weight: 700; font-size: 16px; letter-spacing: .1em; color: rgba(255, 255, 255, .65); } /* ── Big scene heading ── */ .scene-heading { padding: .1rem 0 1rem; border-bottom: 1px solid var(--glass-b); margin-bottom: 1.25rem; opacity: 0; transition: opacity .6s; } .scene-heading.visible { opacity: 1; } .scene-heading-sup { font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--red-dim); margin-bottom: .3rem; } .scene-heading-title { font-family: var(--font-heading); font-weight: 700; font-size: 28px; letter-spacing: .05em; color: rgba(255, 255, 255, .88); line-height: 1.2; } .topbar-btn { background: none; border: 1px solid var(--white-010); color: var(--text-muted); font-size: 15px; width: 30px; height: 30px; cursor: pointer; transition: all .2s; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .topbar-btn:hover { border-color: var(--red-dim); color: rgba(255, 255, 255, .7); } /* Game body: two-column — left (titre + recap & portrait) | text */ .game-layout { width: 100%; max-width: 1400px; margin-left: auto; margin-right: 0; display: grid; grid-template-columns: auto 1fr; gap: 1.8rem; align-items: start; min-height: calc(100vh - 5rem); } /* ── LEFT: titre + (recap & portrait) ── */ /* Wrapper sticky pour que le titre, le récap ET le portrait/toasts restent visibles au scroll. Sur mobile, neutralisé via display:contents (cf. media query) pour que la grille passe en 1 colonne et que .scene-recap reprenne son comportement de drawer fixe. */ .left-col { position: sticky; top: 1.5rem; align-self: start; display: flex; flex-direction: column; gap: .75rem; z-index: 5; } .left-row { display: grid; grid-template-columns: 360px 185px; gap: 1.8rem; align-items: start; } .recap-col { display: flex; flex-direction: column; gap: .75rem; } .scene-recap { display: flex; flex-direction: column; gap: .55rem; padding-top: .5rem; } /* ── RIGHT: text panel ── */ .text-panel { display: flex; flex-direction: column; gap: 1.1rem; } /* Scene card — extends .card */ .scene-card { padding: 2rem 2rem 5rem; min-height: 200px; position: relative; } .scene-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--red), rgba(192, 0, 26, 0)); } #log { display: flex; flex-direction: column; } #choices, .past-choices { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.5rem; margin-bottom: 3rem; } #ending { display: none; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; } #ending.visible { display: flex; } /* Lines */ .line { opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; padding: .1rem 0; } .line.shown { opacity: 1; transform: none; } .line-narration { font-style: italic; color: var(--text-main); font-size: 20px; line-height: 1.8; padding: .3rem 0; } /* ── Style B: Dialogue with integrated portrait ── */ @keyframes slideFromLeft { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideFromLeftVoice { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } /* Dialogue block — portrait + text fused */ .line-dialogue-block { display: flex; gap: 0; align-items: stretch; margin: .8rem 0; transition: none; } .line-dialogue-block.shown { animation: slideFromLeft .5s cubic-bezier(.22, .61, .36, 1) forwards; } /* Voice block slide (slightly shorter travel) */ .line-voice-block.shown { animation: slideFromLeftVoice .45s cubic-bezier(.22, .61, .36, 1) forwards; } /* Portrait area */ .portrait { flex-shrink: 0; position: relative; width: 120px; align-self: flex-start; background: var(--char-col); overflow: hidden; } .portrait img { width: 120px; height: 120px; object-fit: cover; object-position: center top; display: block; filter: brightness(.85) contrast(1.1); } .portrait-fallback { width: 120px; height: 120px; background: var(--char-col, #333); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: rgba(255, 255, 255, .7); } /* ── MIDDLE COL (portrait + toasts succès) ── Le sticky est désormais porté par .left-col (parent), qui englobe titre + récap + portrait sur desktop. Sur mobile, .middle-col passe en display:contents (cf. media query) pour neutraliser le wrapper. */ .middle-col { display: flex; flex-direction: column; gap: 1rem; margin-top: 15px; } /* ── PORTRAIT PANEL (portrait du personnage qui parle) ── */ #portrait-panel { display: flex; flex-direction: column; align-items: center; pointer-events: none; /* Réserve la hauteur d'un portrait (cadre 185px + nom) même quand vide, pour que le toast succès reste à la même place qu'il y ait portrait ou non. */ min-height: 220px; } @keyframes portraitEntrance { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .portrait-card { display: none; flex-direction: column; align-items: center; gap: 8px; } .portrait-card.present { display: none; } .portrait-card.active { display: flex; animation: portraitEntrance .35s cubic-bezier(.22, .61, .36, 1) forwards; } /* ── Cadre style viseur ── */ .pc-frame { position: relative; padding: 10px; } /* Coin supérieur gauche & inférieur droit via pseudo-éléments */ .pc-frame::before, .pc-frame::after { content: ''; position: absolute; width: 18px; height: 18px; border-color: var(--pcolor, #888); border-style: solid; opacity: .9; transition: opacity .3s; } .pc-frame::before { top: 0; left: 0; border-width: 2px 0 0 2px; } .pc-frame::after { bottom: 0; right: 0; border-width: 0 2px 2px 0; } /* Coin supérieur droit & inférieur gauche via spans .pc-corner */ .pc-corner { position: absolute; width: 18px; height: 18px; border-color: var(--pcolor, #888); border-style: solid; opacity: .9; } .pc-corner-tr { top: 0; right: 0; border-width: 2px 2px 0 0; } .pc-corner-bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; } .pc-img { width: 165px; height: 165px; background-size: cover; background-position: top center; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 32px; color: rgba(255, 255, 255, .7); background-color: var(--pcolor, #333); box-shadow: 0 0 24px var(--pglow, rgba(136, 136, 136, .35)); } .pc-info { display: block; text-align: center; } .pc-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pcolor, rgba(255, 255, 255, .5)); opacity: .75; } /* Dialogue body */ .dlg-body { flex: 1; padding: .7rem 1rem; display: flex; flex-direction: column; gap: .15rem; background: rgba(245, 240, 232, .05); border-left: 2px solid var(--char-col, rgba(255, 255, 255, .2)); border-radius: 0 3px 3px 0; min-height: 120px; } /* Speaker tag */ .speaker-tag { font-family: var(--font-mono); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--char-col, rgba(255, 255, 255, .5)); margin-bottom: 2px; } /* Mood tag */ .dlg-mood { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--char-col, var(--text-muted)); opacity: .6; margin-bottom: 2px; } /* Dialogue text */ .dlg-text { font-size: 20px; line-height: 1.6; color: var(--text-main); } /* Voice block */ .line-voice-block { margin: .8rem 0; padding: .6rem 1rem .6rem 1.1rem; border-radius: 0 4px 4px 0; background: rgba(200, 0, 26, .06); border-left: 2px solid var(--voice-accent, var(--red)); transition: none; } .voice-tag { font-family: var(--font-mono); font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--voice-accent, var(--red)); opacity: .55; margin-bottom: 3px; } .voice-text { font-style: italic; font-size: 20px; line-height: 1.5; color: #e85a5a; } .line-quote { border: 1px solid rgba(192, 0, 26, .18); background: rgba(192, 0, 26, .04); padding: .85rem 1.35rem; margin: .75rem 0; position: relative; } .line-quote::before { content: '❝'; position: absolute; top: -.55rem; left: .8rem; background: #0e1a22; padding: 0 .2rem; color: var(--red-040); font-size: 15px; } .quote-text { font-style: italic; color: rgba(200, 190, 170, .75); font-size: 20px; } .line-sep { text-align: center; color: rgba(192, 0, 26, .3); font-family: var(--font-mono); font-size: 15px; letter-spacing: .35em; padding: .85rem 0; } /* Scene divider between scenes */ .scene-divider { display: flex; align-items: center; gap: 1rem; padding: 2.2rem 0; margin: .5rem 0; } .scene-divider::before, .scene-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(192, 0, 26, .25), transparent); } .scene-divider-symbol { font-family: var(--font-mono); font-size: 15px; letter-spacing: .3em; color: var(--red-035); flex-shrink: 0; } /* ── Day grid (compact chips) ── */ .day-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; padding: .3rem 0 .5rem; } .day-chip { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 34px; padding: 0; box-sizing: border-box; background: rgba(192, 0, 26, .04); border: 1px solid rgba(192, 0, 26, .2); border-radius: 2px; cursor: pointer; transition: background .2s, border-color .2s; overflow: hidden; } .day-chip:hover { background: var(--red-012); border-color: rgba(192, 0, 26, .55); } .day-chip.active { background: rgba(192, 0, 26, .18); border-color: rgba(192, 0, 26, .85); } .day-chip-num { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: rgba(192, 0, 26, .65); user-select: none; transition: color .2s; } .day-chip:hover .day-chip-num { color: rgba(192, 0, 26, .9); } .day-chip.active .day-chip-num { color: rgba(192, 0, 26, 1); } /* Past choices (already selected) */ .choice-btn.past { opacity: .25; pointer-events: none; transition: all .5s; } .choice-btn.past.chosen { opacity: 1; pointer-events: none; border-color: var(--red-040); background: var(--red-006); box-shadow: 0 0 25px rgba(192, 0, 26, .1), inset 0 0 30px rgba(192, 0, 26, .03); } .choice-btn.past.chosen .choice-num { color: var(--red); background: rgba(192, 0, 26, .08); text-shadow: 0 0 12px rgba(192, 0, 26, .6); } .choice-btn.past.chosen .choice-text { color: rgba(255, 255, 255, .95); } /* ── Day chip states ── */ .day-chip.unplayed { border-color: var(--white-007); background: rgba(255, 255, 255, .01); } .day-chip.unplayed .day-chip-num { color: rgba(255, 255, 255, .2); } .day-chip.selected { background: rgba(192, 0, 26, .22); border-color: rgba(192, 0, 26, .9); } .day-chip.selected .day-chip-num { color: #fff; } /* ── Chip type: neutral (intro, épilogue) — blanc ── */ .day-chip.chip-type-neutral:not(.unplayed) { border-color: rgba(255, 255, 255, .25); } .day-chip.chip-type-neutral:not(.unplayed) .day-chip-num { color: rgba(255, 255, 255, .55); } .day-chip.chip-type-neutral:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .45); } .day-chip.chip-type-neutral:hover .day-chip-num { color: rgba(255, 255, 255, .85); } .day-chip.chip-type-neutral.selected { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .75); } .day-chip.chip-type-neutral.selected .day-chip-num { color: #fff; } /* ── Chip type: flashback — rouge-violet ── */ .day-chip.chip-type-flashback:not(.unplayed) { border-color: rgba(160, 20, 140, .4); } .day-chip.chip-type-flashback:not(.unplayed) .day-chip-num { color: rgba(200, 70, 180, .8); } .day-chip.chip-type-flashback:hover { background: var(--violet-012); border-color: var(--violet-055); } .day-chip.chip-type-flashback:hover .day-chip-num { color: rgba(200, 70, 180, .9); } .day-chip.chip-type-flashback.selected { background: rgba(160, 20, 140, .22); border-color: var(--violet-090); } .day-chip.chip-type-flashback.selected .day-chip-num { color: rgba(220, 110, 200, 1); } /* ── Chip type: ending — bleu ── */ .day-chip.chip-type-ending:not(.unplayed) { border-color: rgba(30, 90, 200, .4); } .day-chip.chip-type-ending:not(.unplayed) .day-chip-num { color: rgba(80, 140, 230, .8); } .day-chip.chip-type-ending:hover { background: var(--blue-012); border-color: var(--blue-055); } .day-chip.chip-type-ending:hover .day-chip-num { color: rgba(80, 140, 230, .9); } .day-chip.chip-type-ending.selected { background: rgba(30, 90, 200, .22); border-color: var(--blue-090); } .day-chip.chip-type-ending.selected .day-chip-num { color: rgba(120, 170, 255, 1); } /* ── Day detail panel ── */ .day-detail { margin-top: .5rem; border-top: 1px solid rgba(192, 0, 26, .2); padding-top: .5rem; display: flex; flex-direction: column; gap: .25rem; } /* ── Décor de la scène courante (sous le récap, grand écran) ── Image du lieu (4e argument de setScene → window.VN_LIEUX). Masquée en tablette/mobile (cf. media query 1024px) où le récap devient un tiroir. */ .scene-decor { margin: .6rem 0 0; padding: 0; border: 1px solid rgba(192, 0, 26, .25); border-radius: 6px; overflow: hidden; background: rgba(0, 0, 0, .25); animation: decor-fade .45s ease both; } .scene-decor-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .scene-decor-cap { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 236, 224, .55); padding: .35rem .5rem; text-align: center; } @keyframes decor-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .day-detail-header { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(192, 0, 26, .85); margin-bottom: .25rem; } .day-detail-scene { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; color: rgba(255, 255, 255, .4); text-transform: uppercase; text-decoration: none; padding: .2rem 0 .2rem .5rem; border-left: 2px solid rgba(192, 0, 26, .15); transition: color .2s, border-color .2s; line-height: 1.4; } .day-detail-scene:hover { color: rgba(255, 255, 255, .8); border-left-color: rgba(192, 0, 26, .6); } .day-detail-choice { display: flex; align-items: flex-start; gap: .3rem; padding-left: .4rem; } .day-detail-arrow { font-family: var(--font-mono); font-size: 11px; color: rgba(192, 0, 26, .5); flex-shrink: 0; line-height: 1.5; } .day-detail-choice-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase; font-style: italic; line-height: 1.5; } .day-detail-choice-block { display: flex; flex-direction: column; gap: .15rem; padding-left: 1rem; margin: .1rem 0 .3rem; } .day-detail-scene + .day-detail-choice-block { margin-top: .15rem; } .day-detail-choice-block + .day-detail-scene { margin-top: .35rem; } .day-detail-choice-chosen { display: flex; align-items: flex-start; gap: .3rem; } .day-detail-choice-chosen .day-detail-choice-text { color: rgba(255, 255, 255, .55); font-style: normal; } .day-detail-choice-alt { display: flex; align-items: flex-start; gap: .3rem; padding-left: .8rem; } .day-detail-arrow-alt { color: rgba(255, 255, 255, .15); } .day-detail-choices-title { font-family: var(--font-mono); font-size: 8px; letter-spacing: .22em; text-transform: uppercase; color: var(--red-040); padding: .4rem .4rem .2rem; margin-top: .2rem; border-top: 1px solid rgba(255, 255, 255, .05); } .day-detail-empty { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .15); padding: .2rem .5rem; } .cursor { display: inline-block; width: 1.5px; height: .85em; background: var(--red); margin-left: 1px; vertical-align: middle; animation: blink .9s step-end infinite; } @keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } } /* Choices */ .choices-label { font-family: var(--font-mono); font-size: 20px; letter-spacing: .35em; text-transform: uppercase; color: var(--text-main); text-align: center; padding-top: 1.5rem; margin-bottom: 1.2rem; position: relative; } .choices-label::before, .choices-label::after { content: ''; position: absolute; top: 0; height: 1px; width: 35%; background: linear-gradient(90deg, transparent, var(--red-035), transparent); } .choices-label::before { left: 0; } .choices-label::after { right: 0; } .choice-btn { position: relative; overflow: hidden; background: rgba(192, 0, 26, .03); border: 1px solid var(--red-012); border-radius: 2px; display: flex; align-items: stretch; width: 100%; text-align: left; cursor: pointer; padding: 0; transition: all .35s cubic-bezier(.22, .61, .36, 1); opacity: 0; transform: translateX(-12px); } .choice-btn.shown { opacity: 1; transform: none; } /* Fond animé au hover */ .choice-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--red-012) 0%, rgba(192, 0, 26, .03) 40%, transparent 100%); opacity: 0; transition: opacity .35s; } .choice-btn:hover::before { opacity: 1; } /* Ligne lumineuse en haut */ .choice-btn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--red) 50%, transparent 100%); opacity: 0; transition: opacity .4s; } .choice-btn:hover::after { opacity: .7; } .choice-num { font-family: var(--font-mono); font-size: 10px; font-weight: 400; line-height: 1; color: rgba(192, 0, 26, .5); min-width: 3.2rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(192, 0, 26, .1); padding: .9rem .4rem; transition: all .35s; position: relative; z-index: 1; letter-spacing: .12em; } .choice-text { font-family: 'Times New Roman', Times, serif; font-size: 20px; color: rgba(255, 255, 255, .55); padding: .85rem 1.15rem; flex: 1; transition: all .35s; line-height: 1.55; position: relative; z-index: 1; } .choice-btn:hover { border-color: var(--red-040); background: var(--red-006); box-shadow: 0 0 25px rgba(192, 0, 26, .1), inset 0 0 30px rgba(192, 0, 26, .03); transform: translateX(4px); } .choice-btn:hover .choice-num { color: var(--red); background: rgba(192, 0, 26, .08); text-shadow: 0 0 12px rgba(192, 0, 26, .6); } .choice-btn:hover .choice-text { color: rgba(255, 255, 255, .95); } /* Active / click */ .choice-btn:active { transform: scale(.985) translateX(4px); border-color: var(--red); box-shadow: 0 0 35px rgba(192, 0, 26, .25), inset 0 0 40px var(--red-006); } /* Ending */ .ending-narrative p { font-style: italic; color: var(--text-dim); font-size: 20px; text-align: center; line-height: 2.1; border-top: 1px solid var(--white-007); padding-top: 1.5rem; } .ending-narrative p+p { border-top: none; padding-top: 0; } .community-stat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em; color: var(--text-muted); text-align: center; margin: 0 0 1.5rem; } /* ── SUCCÈS ── */ .ach-block { border: 1px solid var(--white-007); border-left: 2px solid var(--red-dim); padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .ach-trophy-icon { font-size: 14px; vertical-align: middle; color: rgba(192, 0, 26, .7); } .ach-count { color: rgba(192, 0, 26, .7); } .ach-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .ach-item { border: 1px solid var(--white-010); border-radius: 1px; padding: .4rem .75rem; background: rgba(255, 255, 255, .03); cursor: default; position: relative; display: flex; align-items: center; gap: .5rem; transition: border-color .2s, background .2s; } .ach-item:hover { border-color: var(--red-035); background: rgba(192, 0, 26, .04); } .ach-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .65); } .ach-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--red-dim); border: 1px solid var(--red-040); padding: .1rem .3rem; border-radius: 1px; } .ach-new { border-color: var(--red-040); background: var(--red-006); } .ach-locked { opacity: .22; } /* Dans fin.php : description visible au survol via tooltip natif (title) + affichage inline sous le label */ .ach-desc { display: none; } /* ── TITRE RÉSUMÉ ── */ .ending-summary-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-muted); text-align: center; padding-bottom: .5rem; } /* ── BLOC BILAN ── */ .ending-recap { border: 1px solid var(--white-007); border-left: 2px solid var(--red-dim); padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; } /* Titre de section partagé (Bilan + Succès) */ .recap-section-title { font-family: var(--font-heading); font-size: 22px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: .5rem; margin-bottom: -.25rem; } .recap-section-icon { font-size: 22px; color: var(--red); } .recap-section-count { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); margin-left: auto; letter-spacing: .1em; } /* Lignes Fin / Scènes */ .recap-main-rows { display: flex; flex-direction: column; gap: .65rem; } .recap-row { display: flex; align-items: baseline; gap: 1rem; } .recap-row-key { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); min-width: 4.5rem; flex-shrink: 0; } .recap-row-val { font-family: var(--font-mono); font-size: 15px; color: rgba(255, 255, 255, .8); } /* Sous-titres Amitié / Enquête */ .recap-sub-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--text-muted); border-top: 1px solid var(--white-007); padding-top: 1rem; margin-bottom: -.25rem; } /* ── CARTES PERSONNAGES (Amitié) ── */ .recap-chars-grid { display: flex; flex-direction: column; gap: .75rem; } .recap-char-card { display: flex; flex-direction: row; align-items: center; gap: .85rem; } .recap-char-sq { width: 52px; height: 52px; border-radius: 2px; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .12); transition: filter .3s; } .recap-char-sq img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .recap-char-sq.recap-char-grey { filter: grayscale(1) brightness(.4); } .recap-char-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; background: var(--char-col, #555); color: rgba(255, 255, 255, .9); } .recap-char-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .5); } .recap-char-card-grey .recap-char-name { color: rgba(255, 255, 255, .25); } .recap-char-pct { font-family: var(--font-heading); font-size: 20px; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, .85); } .recap-char-card-grey .recap-char-pct { color: rgba(255, 255, 255, .3); } .recap-char-pct-unit { font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .4); } .recap-char-pts { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: .05em; } /* ── ENQUÊTE ── */ .recap-enquete-block { display: flex; flex-direction: column; gap: .75rem; } .recap-enquete-row { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; } .recap-enquete-pct { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: rgba(255, 255, 255, .75); } /* Badges */ .recap-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 1px; } .badge-ok { background: rgba(26, 143, 160, .15); border: 1px solid rgba(26, 143, 160, .4); color: #1a8fa0; } .badge-no { background: rgba(255, 255, 255, .04); border: 1px solid var(--white-010); color: var(--text-muted); } .recap-sub { font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, .2); letter-spacing: .08em; } .recap-gauge-wrap { flex: none; width: 160px; margin-left: auto; height: 3px; background: var(--glass-b); border-radius: 2px; overflow: hidden; min-width: 60px; align-self: center; } .recap-gauge-fill { height: 100%; background: rgba(26, 143, 160, .65); border-radius: 2px; transition: width 1.2s cubic-bezier(.4, 0, .2, 1); } .book-cta { display: flex; flex-direction: row; gap: 2rem; align-items: center; background: rgba(192, 0, 26, .10); border: 1px solid rgba(192, 0, 26, .38); padding: 2rem 2.2rem; border-radius: 2px; box-shadow: 0 6px 40px rgba(192, 0, 26, .18), 0 4px 30px rgba(0, 0, 0, .4); } .book-cta-cover { width: 300px; flex-shrink: 0; box-shadow: 0 8px 32px rgba(192, 0, 26, .55); } .book-cta-info { display: flex; flex-direction: column; gap: .5rem; flex: 1; } .book-cta-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; color: var(--red-dim); text-transform: uppercase; } .book-title-cta { font-family: var(--font-heading); font-weight: 700; font-size: 28px; letter-spacing: .06em; color: #fff; line-height: 1.15; } .book-award { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: rgba(255, 255, 255, .38); text-transform: uppercase; line-height: 1.7; } .book-link { display: inline-block; margin-top: .6rem; padding: .6rem 1.6rem; background: var(--red-012); border: 1px solid var(--red); color: var(--red); font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; transition: all .2s; align-self: flex-start; } .book-link:hover { background: rgba(192, 0, 26, .28); color: #ff3040; } /* .fin-link-btn : typo via la base partagée des boutons d'action, gradient + shadow + animation hover via la base "CTA rouge". */ .fin-link-btn { border: none; padding: 1rem 2rem; } .fin-wrapper, .credits-page { position: relative; z-index: 10; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .fin-wrapper { padding: 3rem 1rem; justify-content: flex-start; } .fin-card { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 1.5rem; } .fin-card .page-subtitle { font-size: clamp(28px, 5vw, 40px); } .fin-separator { border: none; border-top: 1px solid rgba(255, 255, 255, .1); margin: 0; } .fin-duration { display: flex; align-items: center; gap: .5rem; justify-content: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--text-dim); padding: .5rem 0; } .fin-dur-icon { font-size: 14px; color: var(--text-dim); } /* Bouton "secondaire" (transparent, bordure pâle) — partagé entre .replay-btn / .credits-back (action button base) et .cfg-action-secondary (variante de .cfg-action-btn). */ .replay-btn, .credits-back, .cfg-action-secondary { background: transparent; border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .45); } .replay-btn, .credits-back { padding: 1rem 2rem; } .replay-btn:hover, .credits-back:hover, .cfg-action-secondary:hover { border-color: var(--red-dim); color: rgba(255, 255, 255, .75); background: var(--red-006); } .replay-btn-secondary { border-color: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .3); } .replay-btn-secondary:hover { border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .55); background: transparent; } .fin-btns { display: flex; gap: .75rem; } .fin-btns .replay-btn { flex: 1; } .credits-back { margin-top: 64px; } /* ══ EN-TÊTE PARTAGÉ (fin.php / stats.php) ══ */ .page-header { display: flex; flex-direction: column; gap: .25rem; } .page-series { font-family: var(--font-mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: rgba(192, 0, 26, .65); } .page-subtitle { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: rgba(255, 255, 255, .7); letter-spacing: .06em; } /* ══ STATS DASHBOARD ══ */ .stats-wrapper { position: relative; z-index: 10; min-height: 100vh; padding: 3rem 1.5rem; max-width: 860px; margin: 0 auto; } .stats-header { margin-bottom: 2.5rem; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; } .stat-card { background: rgba(245, 240, 232, .04); border: 1px solid rgba(255, 255, 255, .07); padding: 1.2rem 1rem; border-radius: 2px; } .stat-card-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: rgba(192, 0, 26, .65); margin-bottom: .4rem; } .stat-card-value { font-family: var(--font-heading); font-size: 32px; font-weight: 700; color: #fff; line-height: 1; } .stat-card-sub { font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, .3); margin-top: .4rem; } .stats-section-title { font-family: var(--font-mono); font-size: 9px; letter-spacing: .25em; text-transform: uppercase; color: rgba(192, 0, 26, .55); margin-bottom: 1rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(255, 255, 255, .06); } /* ── Encart « Mes statistiques » (local, depuis localStorage) ── */ .my-stats { margin-bottom: 2rem; padding: 1.1rem 1.2rem 1.2rem; background: rgba(192, 0, 26, .05); border: 1px solid rgba(192, 0, 26, .22); border-radius: 4px; } .my-stats-title { color: rgba(192, 0, 26, .85); margin: 0 0 1rem; } .my-stats-grid { /* Sur cet encart on aère un peu moins que la grille principale */ margin-bottom: 0; } .stat-card-frac { font-size: 18px; font-weight: 400; color: rgba(255, 255, 255, .35); margin-left: .15em; } .my-stats-endings-block { margin-top: 1.1rem; } .my-stats-endings-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .25em; text-transform: uppercase; color: rgba(255, 255, 255, .35); margin-bottom: .55rem; } .my-stats-endings { display: flex; flex-wrap: wrap; gap: .45rem; } .my-stats-ending-tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; line-height: 1.2; padding: .3rem .6rem; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); border-radius: 3px; letter-spacing: .03em; } .my-stats-actions { margin-top: 1.2rem; display: flex; justify-content: flex-end; } /* Bouton de réinitialisation : autonome (n'hérite plus de .replay-btn). */ .my-stats-reset { width: auto; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; background: transparent; border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .55); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border-radius: 3px; cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .my-stats-reset:hover { border-color: rgba(192, 0, 26, .55); color: rgba(255, 255, 255, .85); background: rgba(192, 0, 26, .08); } .my-stats-reset:focus-visible { outline: 2px solid rgba(192, 0, 26, .85); outline-offset: 2px; } /* ── Couverture des scènes (dev/map.php) ── */ .map-coverage-cell { text-align: center; width: 4rem; font-family: var(--font-mono); font-size: 12px; transition: filter .15s; } .map-coverage-cell:hover { filter: brightness(1.15); } .map-coverage-num { font-weight: 700; } /* ── Avis des joueurs (commentaires publiés) + réactions ── */ .public-comments { margin-top: 2rem; } .comments-list { display: flex; flex-direction: column; gap: .85rem; } .comment-card { padding: .85rem 1rem; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); border-radius: 4px; } .comment-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: rgba(255, 255, 255, .35); margin-bottom: .4rem; } .comment-msg { color: rgba(255, 255, 255, .85); font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .ending-row { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .04); } .ending-label { flex: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; color: rgba(255, 255, 255, .55); } .ending-count { font-family: var(--font-mono); font-size: 13px; color: #fff; min-width: 3rem; text-align: right; } .ending-pct { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, .3); min-width: 4rem; text-align: right; } .ending-bar-wrap { width: 120px; height: 4px; background: rgba(255, 255, 255, .06); border-radius: 2px; overflow: hidden; } .ending-bar-fill { height: 100%; background: linear-gradient(90deg, var(--red-dim), var(--red)); border-radius: 2px; } .stats-avg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-top: 1.5rem; } .avg-item { background: rgba(245, 240, 232, .03); border: 1px solid rgba(255, 255, 255, .06); padding: .9rem 1rem; border-radius: 2px; } .avg-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .25); margin-bottom: .3rem; } .avg-value { font-size: 22px; font-family: var(--font-heading); font-weight: 700; color: rgba(255, 255, 255, .8); } .stats-back { margin-top: 3rem; } .empty-notice { font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, .25); padding: 2rem 0; text-align: center; letter-spacing: .1em; } /* ══ CRÉDITS ══ */ .credits-page { padding: 60px 24px 80px; } .credits-header { margin-bottom: 64px; } .credits-grid { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 40px; } .credits-block { border-left: 2px solid var(--red-dim); padding-left: 20px; } .credits-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; } .credits-name { font-family: var(--font-heading); font-size: 20px; color: #fff; line-height: 1.35; } .credits-name a { color: rgba(255, 255, 255, .55); text-decoration: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; display: block; margin-top: 6px; transition: color .2s; } .credits-name a:hover { color: var(--red); } .credits-name ul { list-style: none; margin-top: 4px; } .credits-name ul li { font-family: 'Times New Roman', Times, serif; font-size: 20px; color: rgba(255, 255, 255, .7); line-height: 1.5; } .credits-name ul li::before { content: '— '; color: var(--red-dim); } .credits-sep { width: 40px; height: 1px; background: var(--red-dim); margin: 0 auto; opacity: .5; } .credits-section-sep { width: 100%; max-width: 560px; height: 1px; background: linear-gradient(to right, transparent, var(--red-dim), transparent); margin: 32px 0; opacity: .4; } .credits-section-title { font-family: var(--font-heading); font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .22); text-align: center; margin-bottom: 32px; } .credits-note { font-size: 20px; line-height: 1.7; color: rgba(255, 255, 255, .5); margin-top: 8px; font-style: italic; } .credits-note a { color: rgba(255, 255, 255, .55); text-decoration: none; font-style: normal; font-family: var(--font-mono); font-size: 10px; transition: color .2s; } .credits-note a:hover { color: var(--red); } .credits-block-dim { border-left: 2px solid rgba(138, 0, 18, .35); padding-left: 20px; } .credits-disclaimer-text { font-size: 20px; line-height: 1.75; color: var(--white-035); font-style: italic; } .credits-disclaimer-text+.credits-disclaimer-text { margin-top: 12px; } /* ══════════════════════════════════════════════════════════════════ GALERIE DE BONUS (game/bonus.php) Cartes verrouillées / déverrouillées + modal de lecture (markdown). ══════════════════════════════════════════════════════════════════ */ .bonus-page { position: relative; z-index: 10; min-height: 100vh; max-width: 980px; margin: 0 auto; padding: 3rem 1.25rem 4rem; display: flex; flex-direction: column; } .bonus-header { align-items: center; text-align: center; margin-bottom: 1rem; } .bonus-intro { text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 2.5rem; } .bonus-intro-count { color: var(--red); font-weight: 700; margin-right: .35em; font-size: 14px; } .bonus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } /* ── Onglets « Succès » / « Bonus » ───────────────────────────────── */ .extras-tabs { display: flex; justify-content: center; gap: .5rem; margin: 0 0 2rem; border-bottom: 1px solid var(--glass-b); } .extras-tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: .75rem 1.25rem; margin-bottom: -1px; color: var(--text-dim); cursor: pointer; transition: color .2s, border-color .2s; display: inline-flex; align-items: center; gap: .55rem; } .extras-tab-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; } .extras-tab-count { font-family: var(--font-mono); font-size: 10px; font-weight: 600; line-height: 1; padding: .2rem .5rem; border-radius: 999px; border: 1px solid transparent; background: rgba(255, 255, 255, .06); color: var(--text-dim); transition: background .2s, color .2s, border-color .2s, box-shadow .2s; } .extras-tab.is-active .extras-tab-count { background: var(--red-035); border-color: var(--red-dim); color: #fff; box-shadow: 0 0 0 1px var(--red-012), 0 0 12px var(--red-012); } .extras-tab:hover, .extras-tab:focus-visible { color: rgba(255, 255, 255, .82); outline: none; } .extras-tab.is-active { color: var(--red); border-bottom-color: var(--red); } .extras-panel { display: flex; flex-direction: column; } .extras-panel[hidden] { display: none; } /* ── Grille et cartes de succès ──────────────────────────────────── */ .achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .achievement-card { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.25rem 1.5rem; background: var(--glass); border: 1px solid var(--glass-b); border-radius: 8px; min-height: 180px; } .achievement-card.is-locked { opacity: .55; } .achievement-card-header { display: flex; align-items: center; color: var(--text-dim); } .achievement-card-icon { font-size: 22px; color: var(--text-dim); } .achievement-card.is-unlocked .achievement-card-icon { color: var(--red); } .achievement-card-title { font-family: var(--font-heading); font-size: 17px; line-height: 1.3; color: rgba(255, 255, 255, .82); font-weight: 600; margin: 0; } .achievement-card.is-locked .achievement-card-title { color: rgba(255, 255, 255, .35); letter-spacing: .12em; } .achievement-card-desc { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .55); font-style: italic; margin: 0; } .achievement-card-state { margin-top: auto; align-self: flex-start; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; padding: .25rem .6rem; border: 1px solid var(--glass-b); border-radius: 4px; color: var(--text-dim); } .achievement-card.is-unlocked .achievement-card-state { border-color: var(--red-dim); color: var(--red); } .bonus-card { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.25rem 1.5rem; background: var(--glass); border: 1px solid var(--glass-b); border-radius: 8px; transition: border-color .2s, background .2s, transform .2s; min-height: 250px; } .bonus-card.is-unlocked { cursor: pointer; } .bonus-card.is-unlocked:hover, .bonus-card.is-unlocked:focus-visible { border-color: var(--red-dim); background: var(--red-006); transform: translateY(-2px); outline: none; } .bonus-card.is-locked { opacity: .55; } .bonus-card-header { display: flex; justify-content: space-between; align-items: center; color: var(--text-dim); } .bonus-card-icon { font-size: 18px; color: var(--text-dim); } .bonus-card.is-unlocked .bonus-card-icon { color: var(--red); } .bonus-card-type { font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); } .bonus-card-title { font-family: var(--font-heading); font-size: 18px; line-height: 1.3; color: rgba(255, 255, 255, .82); font-weight: 600; margin: 0; } .bonus-card.is-locked .bonus-card-title { color: rgba(255, 255, 255, .35); /* Légère obfuscation pour les titres verrouillés (sans coller un blur lourd) */ letter-spacing: .04em; } .bonus-card-teaser { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .55); font-style: italic; margin: 0; } .bonus-card-hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-dim); margin: 0; padding-top: .25rem; border-top: 1px dashed rgba(255, 255, 255, .07); } .bonus-card-state { margin-top: auto; align-self: flex-start; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; padding: .25rem .6rem; border: 1px solid var(--glass-b); border-radius: 4px; color: var(--text-dim); } .bonus-card.is-unlocked .bonus-card-state { border-color: var(--red-dim); color: var(--red); } .bonus-empty { text-align: center; padding: 3rem 1rem; color: var(--text-dim); font-style: italic; } /* ── Modal ── */ .bonus-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(7, 17, 26, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center; padding: 3rem 1rem; overflow-y: auto; } .bonus-modal.open { display: flex; } body.bonus-modal-open { overflow: hidden; } .bonus-modal-card { position: relative; width: 100%; max-width: 760px; background: linear-gradient(180deg, #0d1a25 0%, #07111a 100%); border: 1px solid var(--glass-b); border-radius: 10px; padding: 2.5rem 2rem 2rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); } .bonus-modal-close { position: absolute; top: .75rem; right: .75rem; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--glass-b); border-radius: 50%; color: var(--text-dim); cursor: pointer; transition: color .2s, border-color .2s; } .bonus-modal-close:hover, .bonus-modal-close:focus-visible { color: var(--red); border-color: var(--red-dim); outline: none; } .bonus-modal-title { font-family: var(--font-heading); font-size: clamp(20px, 3.4vw, 26px); color: rgba(255, 255, 255, .9); margin: 0 0 1.25rem 0; padding-right: 2.5rem; font-weight: 700; } .bonus-modal-body { color: var(--text-main); line-height: 1.75; } .bonus-loading, .bonus-error { color: var(--text-dim); font-style: italic; text-align: center; padding: 2rem 0; } /* Markdown rendu dans le modal */ .bonus-md h2 { font-family: var(--font-heading); font-size: 22px; color: rgba(255, 255, 255, .85); margin: 1.5rem 0 .75rem 0; font-weight: 700; } .bonus-md h2:first-child { margin-top: 0; } .bonus-md h3 { font-family: var(--font-heading); font-size: 17px; color: rgba(255, 255, 255, .7); letter-spacing: .04em; margin: 1.25rem 0 .5rem 0; font-weight: 600; } .bonus-md p { margin: 0 0 1rem 0; font-size: 17px; line-height: 1.75; color: var(--text-main); } .bonus-md blockquote { border-left: 2px solid var(--red-dim); padding-left: 1rem; margin: 1rem 0; color: var(--text-dim); font-style: italic; } .bonus-md ul { padding-left: 1.25rem; margin: 0 0 1rem 0; } .bonus-md li { font-size: 16px; line-height: 1.7; margin-bottom: .25rem; color: var(--text-main); } .bonus-md strong { color: rgba(255, 255, 255, .92); } .bonus-md em { color: rgba(255, 255, 255, .7); } .bonus-md table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem 0; font-size: 15px; } .bonus-md th { text-align: left; font-family: var(--font-heading); font-weight: 600; color: rgba(255, 255, 255, .85); padding: .55rem .75rem; border-bottom: 1px solid rgba(255, 255, 255, .18); letter-spacing: .03em; } .bonus-md td { padding: .5rem .75rem; border-bottom: 1px solid rgba(255, 255, 255, .06); color: var(--text-main); line-height: 1.55; vertical-align: top; } .bonus-md tr:last-child td { border-bottom: none; } .bonus-img { width: 100%; height: auto; display: block; border-radius: 6px; } .bonus-audio { width: 100%; } .bonus-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; } .bonus-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ══════════════════════════════════════════════════════════════════ RESPONSIVE ❶ — TABLETTE + MOBILE (max-width : 1024px) S'applique à tous les écrans jusqu'à 1024px de large. Les règles du bloc ❷ ci-dessous surchargent celles-ci pour ≤ 640px. ══════════════════════════════════════════════════════════════════ */ @media(max-width:1024px) { /* Portrait du personnage — masqué sur petit écran */ #portrait-panel { display: none !important; } /* Wrappers desktop neutralisés : la grille mobile est à une seule colonne, le portrait est caché, .scene-recap repasse en drawer fixe. display:contents évite que les wrappers (sticky/flex/grid) n'introduisent des lignes vides ou ne cassent le positionnement fixe. */ .left-col { display: contents; } .left-row { display: contents; } .middle-col { display: contents; } /* Titre desktop masqué : la .game-topbar-mobile fournit déjà série + titre + pause sur mobile. */ .recap-header { display: none; } /* Récap nav — panneau plein écran coulissant */ .scene-recap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; z-index: 300; background: var(--bg-deep); border-right: none; transform: translateX(-100%); transition: transform .28s cubic-bezier(.22, .61, .36, 1); overflow-y: auto; padding: 3.5rem 1rem 2rem; } .scene-recap.nav-open { transform: translateX(0); } /* Décor de scène : réservé au grand écran — masqué dans le tiroir mobile. */ .scene-decor { display: none !important; } /* Bouton fermeture (✕) — placé au coin haut-droit du drawer */ .topbar-btn.recap-close-btn { display: flex; position: absolute; top: .5rem; right: .5rem; } /* Backdrop masqué — panel plein écran, pas besoin */ .nav-backdrop { display: none !important; } /* Layout — une seule colonne */ .game-layout { grid-template-columns: 1fr !important; grid-template-areas: none !important; } /* Wrapper desktop neutralisé : les deux enfants (drawer + toast) sont en position:fixed sur mobile, donc le wrapper n'a aucun contenu en flux. display:contents évite une ligne vide (gap 1.8rem) dans la grille. */ .recap-col { display: contents; } .scene-recap { grid-column: 1; } /* Topbar fixe mobile */ .game-topbar-mobile { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: .75rem 1.25rem; margin-bottom: 0; background: linear-gradient(135deg, rgba(10, 28, 48, .72) 0%, rgba(14, 55, 70, .68) 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(26, 143, 160, .18); } /* Compensation topbar fixe (68px) + marges réduites */ #page-game { padding: 76px 0.5rem 4rem; } /* scrollIntoView laisse 80px en haut pour la topbar */ html { scroll-padding-top: 80px; } /* Marge supérieure sur la zone de jeu pour éviter que le premier titre soit masqué par la topbar fixe */ .game-layout { margin-top: 0.5rem; } /* Padding interne réduit sur la carte texte */ .scene-card { padding: 1.25rem 1rem 4rem; } /* Page de fin — CTA livre en colonne sur tablette/mobile */ .book-cta { flex-direction: column; align-items: center; gap: 1.5rem; } .book-cta-cover { width: 100%; max-width: 280px; } /* Zones tactiles minimum 48px (accessibilité tactile) */ .choice-btn { min-height: 52px; padding: .85rem 1rem; } .pause-btn { min-height: 52px; } .topbar-btn { min-width: 44px; min-height: 44px; } /* succ — 2 colonnes sur tablette */ .ach-list { grid-template-columns: repeat(2, 1fr); } } /* ══════════════════════════════════════════════════════════════════ RESPONSIVE ❷ — MOBILE UNIQUEMENT (max-width : 640px) Surcharge les règles du bloc ❶ pour les petits écrans. ══════════════════════════════════════════════════════════════════ */ @media(max-width:640px) { /* Topbar fixe — padding légèrement augmenté côté 640 */ #page-game { padding: 76px 1rem 4rem; } /* Page de fin — couverture réduite sur petit écran */ .book-cta { padding: 1.5rem 1.25rem; gap: 1.25rem; } .book-cta-cover { max-width: 220px; } /* Portrait inline dans les bulles de dialogue */ .portrait { width: 70px; } .portrait img { width: 70px; height: 70px; } .portrait-fallback { width: 70px; height: 70px; font-size: 15px; } .dlg-body { min-height: 70px; } /* Texte légèrement réduit sur très petits écrans */ .dlg-text { font-size: 15px; } /* succès — 1 colonne sur mobile */ .ach-list { grid-template-columns: 1fr; } /* ── Boutons de navigation : version mobile compacte ── Réduit la typo et l'interlettrage pour que les libellés comme « Retour à l'accueil » ou « Laisser un commentaire » tiennent sur une seule ligne, et garantit un centrage propre. */ .replay-btn, .credits-back, .cfg-credits-link, .cfg-action-btn { font-size: 13px; letter-spacing: .1em; padding: .85rem 1rem; } } /* ══════════════════════════════════════════════════════════════════ RESPONSIVE ❷·b — TABLETTE (641px → 1024px) Layout 2 colonnes : col1 sticky 40% (titre + récap plein largeur) | col2 60% (texte). Portrait fixé en bas-gauche du viewport ; toasts succès fixés en bas au-dessus du texte (zone col2). Téléphone/petit écran (≤640 px) garde le drawer mobile du bloc ❶. ══════════════════════════════════════════════════════════════════ */ @media (min-width: 641px) and (max-width: 1024px) { /* Layout 2 colonnes 40/60 (fr pour éviter l'overflow du gap) */ .game-layout { grid-template-columns: 2fr 3fr !important; gap: 1.5rem; } /* Col gauche sticky-top — neutralise display:contents */ .left-col { display: flex !important; flex-direction: column; gap: .75rem; position: sticky; top: 1.5rem; align-self: start; z-index: 5; min-width: 0; width: 100%; } .left-row { display: flex !important; flex-direction: column; gap: .75rem; min-width: 0; width: 100%; } .recap-col { display: flex !important; flex-direction: column; gap: .75rem; min-width: 0; width: 100%; } /* Middle-col en taille zéro (et non display:contents) : ses enfants sont en position:fixed donc hors flux ; un wrapper 0×0 empêche les bizarreries de display:contents + position:fixed sur certains moteurs. */ .middle-col { display: block !important; width: 0; height: 0; overflow: visible; margin: 0; padding: 0; gap: 0; } /* Portrait fixé en bas-gauche du viewport (zone col1) */ #portrait-panel { display: flex !important; position: fixed !important; bottom: 1rem; left: 1rem; width: auto; z-index: 100; min-height: 0; align-items: center; } /* Toasts : utilisent le placement global (fixé bas-droite 360 px max). Pas de surcharge spécifique tablette — voir #toast-container base. */ /* Titre + pause inline (remplace la topbar fixe) */ .recap-header { display: flex; } .game-topbar-mobile { display: none !important; } /* Récap inline — annule le mode drawer, force la largeur plein col */ .scene-recap { position: static; top: auto; left: auto; right: auto; bottom: auto; z-index: auto; background: transparent; transform: none; overflow-y: visible; padding: .5rem 0 0; width: 100% !important; min-width: 0; } .day-grid { width: 100% !important; min-width: 0; } .topbar-btn.recap-close-btn { display: none; } #page-game { padding: 0 1.5rem 5rem; } html { scroll-padding-top: 0; } } /* ══════════════════════════════════════════════════════════════════ RESPONSIVE ❸ — GRAND ÉCRAN UNIQUEMENT (min-width : 1025px) ══════════════════════════════════════════════════════════════════ */ @media(min-width:1025px) { /* Achievements — afficher la description en colonne sur desktop */ .ach-block .ach-item { flex-direction: column; align-items: flex-start; min-height: 115px; } .ach-block .ach-desc { display: block; font-size: 10px; color: var(--white-035); font-family: 'Times New Roman', Times, serif; font-style: italic; line-height: 1.4; margin-top: .15rem; } .ach-block .ach-list { gap: .75rem; grid-template-columns: repeat(3, 1fr); } } /* ── Utility classes (inline-style replacements) ── */ .slot-disabled { opacity: .35; } .credits-meta { font-size: 15px; color: rgba(255, 255, 255, .45); } .mt-section { margin-top: 48px; } .mt-lg { margin-top: 2.5rem; } .stat-hint { font-size: 14px; color: rgba(255, 255, 255, .6); } .btn-muted { border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .4); } /* ══════════════════════════════════════ TOAST ACHIEVEMENT ══════════════════════════════════════ */ /* Toasts toujours fixés en bas-droite du viewport, au-dessus du texte. Le phone (≤600 px) bascule en bandeau pleine largeur en bas — voir bloc responsive. */ #toast-container { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; pointer-events: none; position: fixed; bottom: 1rem; right: 1rem; left: auto; width: auto; max-width: 360px; z-index: 950; } .achievement-toast { display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; background: rgba(7, 17, 26, .97); border: 1px solid var(--red-040); border-left: 3px solid var(--red); color: var(--text-main); transform: translateY(-8px); opacity: 0; transition: transform .35s cubic-bezier(.22, .61, .36, 1), opacity .35s ease; max-width: 280px; box-shadow: 0 4px 20px rgba(0, 0, 0, .5); } .achievement-toast.toast-show { transform: translateY(0); opacity: 1; } .toast-icon { color: var(--red); font-size: 1.25rem; flex-shrink: 0; } .toast-body { display: flex; flex-direction: column; gap: .1rem; } .toast-lbl { font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); } .toast-title { font-family: var(--font-heading); font-size: .85rem; font-weight: 700; letter-spacing: .05em; color: #e8d8d0; } /* ══════════════════════════════════════ RETOUR.PHP — Formulaire de retour ══════════════════════════════════════ */ .retour-wrapper { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem 4rem; position: relative; z-index: 1; } .retour-card { background: rgba(11, 24, 34, .98); border: 1px solid var(--glass-b); border-top: 2px solid var(--red); width: 100%; max-width: 560px; padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .retour-form { display: flex; flex-direction: column; gap: 1.25rem; } .retour-field { display: flex; flex-direction: column; gap: .4rem; } .retour-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--white-035); } .retour-select, .retour-input, .retour-textarea { background: rgba(255, 255, 255, .04); border: 1px solid var(--white-010); color: var(--text-main); font-family: 'Times New Roman', serif; font-size: 16px; padding: .7rem .9rem; border-radius: 1px; width: 100%; transition: border-color .2s; outline: none; } .retour-select:focus, .retour-input:focus, .retour-textarea:focus { border-color: var(--red-040); } .retour-textarea { resize: vertical; min-height: 140px; line-height: 1.6; } .retour-select option { background: #0b1822; } .retour-submit { background: linear-gradient(135deg, var(--red-dim), var(--red)); border: none; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; padding: 1rem 2rem; border-radius: 1px; cursor: pointer; transition: all .25s; box-shadow: 0 4px 20px var(--red-035); display: flex; align-items: center; justify-content: center; gap: .5rem; } .retour-submit:hover { box-shadow: 0 6px 40px rgba(192, 0, 26, .55); transform: translateY(-1px); } .retour-notice { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--text-dim); text-align: center; } .retour-success { text-align: center; padding: 1.5rem 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .retour-success-icon { font-size: 2.5rem; color: var(--red); } .retour-success-title { font-family: var(--font-heading); font-size: 1.1rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-main); } .retour-success-desc { font-family: 'Times New Roman', serif; font-size: 15px; color: var(--text-dim); line-height: 1.6; } /* ══════════════════════════════════════ MAP.PHP — Graphe de navigation ══════════════════════════════════════ */ .map-wrapper { min-height: 100vh; padding: 3rem 1rem 4rem; position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; } .map-stats-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; } .map-stat-pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .7rem; border: 1px solid var(--white-010); color: var(--white-035); } .map-stat-pill strong { color: var(--text-main); } .map-filter-bar { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; } .map-filter-btn { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .65rem; border: 1px solid var(--white-010); color: var(--white-035); background: transparent; cursor: pointer; transition: all .2s; } .map-filter-btn:hover, .map-filter-btn.active { border-color: var(--red-040); color: var(--text-main); background: var(--red-006); } .map-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; } .map-table th { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--white-010); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } .map-table td { padding: .45rem .75rem; border-bottom: 1px solid rgba(255, 255, 255, .03); vertical-align: top; color: var(--text-main); line-height: 1.5; } .map-table tr:hover td { background: var(--glass); } .map-beat-id { color: var(--red-dim); font-size: 11px; } .map-beat-label { color: var(--text-main); font-size: 12px; } .map-beat-day { color: var(--text-dim); font-size: 10px; white-space: nowrap; } .map-transition { display: inline-block; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); padding: .1rem .4rem; margin: .1rem .15rem .1rem 0; white-space: nowrap; } .map-transition:hover { color: var(--text-main); border-color: var(--red-040); cursor: default; } .map-badge { display: inline-block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: .15rem .4rem; border-radius: 1px; margin-left: .3rem; } .map-badge-intro { background: rgba(26, 143, 160, .15); color: #1a8fa0; border: 1px solid rgba(26, 143, 160, .3); } .map-badge-ending { background: rgba(30, 90, 200, .15); color: #5080e0; border: 1px solid rgba(30, 90, 200, .3); } .map-badge-epi { background: rgba(160, 20, 140, .15); color: #c040b0; border: 1px solid rgba(160, 20, 140, .3); } .map-badge-orphan { background: rgba(192, 0, 26, .12); color: var(--red); border: 1px solid var(--red-040); } .map-coverage-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: 2rem; flex-wrap: wrap; } .map-cov-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } .map-cov-track { flex: 1; min-width: 120px; height: 4px; background: var(--white-007); border-radius: 2px; overflow: hidden; } .map-cov-fill { height: 100%; background: var(--red); border-radius: 2px; transition: width .4s ease; } .map-cov-pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-main); white-space: nowrap; } /* couverture narrative dans stats.php */ .coverage-section { margin-top: 2.5rem; } .coverage-beats { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; } .cov-beat-pill { font-family: var(--font-mono); font-size: 10px; padding: .25rem .55rem; border: 1px solid rgba(255, 255, 255, .07); color: var(--text-dim); } .cov-beat-pill.cov-reached { border-color: rgba(26, 143, 160, .3); color: #1a8fa0; } @media (max-width: 640px) { /* Mobile : toast en bandeau bas-gauche (pleine largeur) */ #toast-container { left: .75rem; right: .75rem; bottom: .75rem; max-width: calc(100vw - 1.5rem); } .achievement-toast { max-width: 260px; } .map-table th:nth-child(3), .map-table td:nth-child(3) { display: none; } } /* ══════════════════════════════════════ FEEDBACK.PHP — Cartes de retours ══════════════════════════════════════ */ #feedback-list { display: flex; flex-direction: column; gap: .75rem; } .fb-card { background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .07); border-left: 3px solid rgba(255, 255, 255, .12); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .65rem; } .fb-card[data-type="bug"] { border-left-color: var(--red-040); } .fb-card[data-type="suggestion"] { border-left-color: rgba(160, 20, 140, .4); } .fb-card[data-type="commentaire"] { border-left-color: rgba(26, 143, 160, .4); } .fb-card-header { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; } .fb-card-date { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--text-dim); } .fb-card-email { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); text-decoration: none; display: flex; align-items: center; gap: .2rem; } .fb-card-email:hover { color: var(--text-main); } .fb-card-msg { font-family: 'Times New Roman', serif; font-size: 16px; line-height: 1.65; color: var(--text-main); white-space: pre-wrap; } .fb-delete-form { margin-left: auto; } .fb-delete-btn { background: transparent; border: none; color: var(--text-dim); cursor: pointer; padding: .2rem; display: flex; align-items: center; transition: color .2s; } .fb-delete-btn:hover { color: var(--red); } .fb-delete-btn .material-symbols-outlined { font-size: 16px; } /* ══ PAGE 404 ══ */ .error-page { position: relative; z-index: 10; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px 80px; text-align: center; gap: 0; } .error-404-number { font-family: var(--font-heading); font-weight: 700; font-size: clamp(120px, 22vw, 240px); line-height: 1; color: var(--red); text-shadow: 0 0 60px var(--red-040), 0 0 120px var(--red-012); opacity: .18; user-select: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); pointer-events: none; letter-spacing: -.02em; } .error-header { margin-bottom: 40px; position: relative; } .error-header .h-title { font-size: clamp(36px, 6vw, 72px); } .error-body { font-family: 'Times New Roman', Times, serif; font-size: 18px; line-height: 2; color: var(--text-dim); font-style: italic; margin-bottom: 8px; position: relative; } .error-back { margin-top: 56px; position: relative; } /* ══════════════════════════════════════ PAGES DEV / OUTILS CRÉATEUR (utilitaires partagés entre dev/*.php, feedback / map / test-end et messages d'erreur de configuration) ══════════════════════════════════════ */ /* Erreur fatale standalone (config absente, session expirée, etc.) */ .fatal-error { font-family: var(--font-mono); padding: 2rem; color: var(--red); } /* Variante étroite de retour-card (formulaires de connexion) */ .retour-card-narrow { max-width: 380px; } /* Notice de retour en couleur d'erreur */ .retour-notice-error { color: var(--red); } .retour-notice-error.retour-notice-mb { margin-bottom: 1rem; } /* Bandeau "source distante" partagé entre map.php et feedback.php */ .source-banner { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; margin-bottom: .75rem; background: rgba(26, 143, 160, .08); border: 1px solid rgba(26, 143, 160, .25); font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, .55); letter-spacing: .05em; } .source-banner-icon { font-size: 14px; flex-shrink: 0; color: #1a8fa0; } .source-banner-url { opacity: .8; word-break: break-all; } /* Variantes colorées de map-stat-pill */ .map-stat-pill-red { border-color: var(--red-040); color: var(--red); } .map-stat-pill-teal { border-color: rgba(26, 143, 160, .3); color: #1a8fa0; } .map-stat-pill-green { border-color: rgba(40, 160, 80, .3); color: #28a050; } .map-stat-pill-muted { border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .4); } /* Variante alerte du filtre de carte (jamais vus) */ .map-filter-btn-warning { border-color: rgba(192, 0, 26, .4); color: rgba(192, 0, 26, .85); } /* Badge "publié" (visible côté public) */ .map-badge-published { background: rgba(40, 160, 80, .15); color: #28a050; border: 1px solid rgba(40, 160, 80, .3); } /* Badge "bug" (rouge) — pour les types de feedback */ .map-badge-bug { background: var(--red-012); color: var(--red); border: 1px solid rgba(192, 0, 26, .3); } /* Cellule du tableau map.php : message vide / fin (sans transition) */ .map-cell-empty { color: var(--text-dim); } .map-cell-deadend { color: var(--text-dim); font-size: 10px; letter-spacing: .05em; } /* Cellule de heatmap "couverture" — états statiques */ .map-coverage-cell-neutral { background: rgba(255, 255, 255, .02); color: rgba(255, 255, 255, .25); } .map-coverage-cell-zero { background: rgba(192, 0, 26, .08); color: rgba(192, 0, 26, .85); } /* Variante "chaude" : alpha injecté via --heat-a (style="--heat-a:0.24") */ .map-coverage-cell-heat { background: rgba(40, 160, 80, var(--heat-a, .08)); color: rgba(255, 255, 255, .85); } /* Hint discret dans un label retour (comments.php) */ .retour-label-hint { color: var(--text-dim); } /* Conteneur d'actions (publier / supprimer) poussé à droite dans l'en-tête d'une carte feedback. */ .fb-card-actions { margin-left: auto; display: flex; align-items: center; gap: .35rem; } .fb-card-email .material-symbols-outlined { font-size: 14px; vertical-align: middle; } /* Bandeau "Mode test" sur dev/end.php */ .test-warning { margin: 1rem 0 1.5rem; padding: .75rem 1rem; background: rgba(192, 0, 26, .08); border: 1px solid var(--red-035); font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, .7); letter-spacing: .05em; line-height: 1.6; } .test-warning-title { color: var(--red); letter-spacing: .15em; text-transform: uppercase; } .test-warning-soft { opacity: .7; } /* Récap des données reçues (dev/end.php) */ .test-recap { margin: 1rem 0; padding: 1rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--glass-b); font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, .55); letter-spacing: .04em; line-height: 1.7; } .test-recap-title { color: rgba(255, 255, 255, .4); text-transform: uppercase; letter-spacing: .18em; font-size: 9px; margin-bottom: .5rem; } .test-recap strong { color: rgba(255, 255, 255, .85); } /* Petit utilitaire : paragraphe vide / placeholder italique */ .text-empty-italic { opacity: .5; font-style: italic; } /* Largeur dynamique injectée en JS (stats.php) : on passe `style="--w:42%"` plutôt qu'un width inline */ .ending-bar-fill, .map-cov-fill { width: var(--w, 0%); } /* ══════════════════════════════════════ PAGE OPTIONS (game/options.php) ══════════════════════════════════════ */ .options-wrapper { max-width: 640px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; position: relative; z-index: 1; } .options-card { display: flex; flex-direction: column; gap: 2rem; } .options-section { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--glass-b); border-left: 2px solid var(--red); background: rgba(11, 24, 34, .55); } .options-section-title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 14px; letter-spacing: .25em; text-transform: uppercase; color: #fff; } .options-info { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--text-main); } .options-info em { color: var(--text-muted); font-style: italic; } .options-info-row { padding: .15rem 0; } .options-info-row strong { color: #fff; margin-right: .35rem; } .options-hint { margin: 0; font-family: 'Times New Roman', serif; font-size: 14px; line-height: 1.5; color: var(--text-muted); } .options-status { padding: .8rem 1rem; background: rgba(192, 0, 26, .08); border: 1px solid var(--red-dim); color: #fff; font-family: var(--font-mono); font-size: 13px; text-align: center; } /* ══════════════════════════════════════ COOKIE / LOCALSTORAGE CONSENT MODAL ══════════════════════════════════════ */ .cookie-consent-overlay { display: none; position: fixed; inset: 0; z-index: 1100; background: rgba(7, 17, 26, .9); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 1.25rem; overflow-y: auto; } .cookie-consent-overlay.open { display: flex; } body.cookie-consent-open { overflow: hidden; } .cookie-consent-modal { background: rgba(11, 24, 34, .98); border: 1px solid var(--glass-b); border-top: 2px solid var(--red); width: 100%; max-width: 540px; padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; max-height: calc(100vh - 2.5rem); overflow-y: auto; } .cookie-consent-title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 18px; letter-spacing: .2em; text-transform: uppercase; color: #fff; } .cookie-consent-body { font-family: 'Times New Roman', serif; font-size: 16px; line-height: 1.6; color: var(--text-main); display: flex; flex-direction: column; gap: .75rem; } .cookie-consent-body p { margin: 0; } .cookie-consent-body ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .35rem; } .cookie-consent-body strong { color: #fff; } .cookie-consent-btns { display: flex; justify-content: flex-end; gap: .75rem; } .cookie-consent-accept { display: inline-flex; align-items: center; gap: .4rem; background: linear-gradient(135deg, var(--red-dim), var(--red)); border: 1px solid var(--red-dim); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; padding: .7rem 1.4rem; border-radius: 1px; cursor: pointer; transition: filter .2s; } .cookie-consent-accept:hover, .cookie-consent-accept:focus-visible { filter: brightness(1.15); }