/* ==========================================================================
   Chroniques d'Éorzéa : feuille de style
   Inspirée de l'interface d'A Realm Reborn : fenêtres sombres, liserés dorés,
   lueur bleutée du cristal. Aucune ressource externe : tout est servi par le site.
   ========================================================================== */

/* ---------- Polices (auto-hébergées, licence OFL) ---------- */
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

/* ---------- Couleurs et réglages ---------- */
:root {
    --bg: #090c13;
    --bg-soft: #0f131c;
    --panel: #1b212c;
    --panel-2: #232a37;
    --panel-3: #2c3443;
    --line: rgba(201, 168, 106, .28);
    --line-strong: #6f5d3b;
    --gold: #c9a86a;
    --gold-bright: #f1deb0;
    --gold-dim: #8f7a4f;
    --text: #e9e4d8;
    --muted: #a3a9b5;
    --faint: #6e7684;
    --blue: #7cc4ff;
    --blue-deep: #2f6fb8;
    --hp: #6cc15e;
    --mp: #e25f9f;
    --xp: #e3b94d;
    --danger: #e2705c;
    --success: #7fcb86;
    --warning: #e6b450;
    --accent: var(--gold);
    --accent-2: var(--blue);

    --font-title: "Cinzel", "Trajan Pro", "Palatino Linotype", "Book Antiqua", serif;
    --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-story: "EB Garamond", Georgia, "Times New Roman", serif;

    --radius: 8px;
    --shadow: 0 0 0 1px #000, 0 14px 36px rgba(0, 0, 0, .55);
    --glow: 0 0 14px rgba(124, 196, 255, .35);

    --masthead: 3.1rem; /* hauteur du bandeau du haut (titre du site) */
}

/* Couleurs propres à chaque cité */
.theme-uldah { --accent: #e7b352; --accent-2: #c8553d; --tint: rgba(231, 179, 82, .13); }
.theme-gridania { --accent: #9ccf78; --accent-2: #e6cf62; --tint: rgba(124, 190, 100, .13); }
.theme-limsa { --accent: #6fbdf0; --accent-2: #e06a5c; --tint: rgba(90, 170, 235, .14); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        radial-gradient(1100px 520px at 50% -120px, rgba(58, 108, 178, .30), transparent 70%),
        radial-gradient(900px 500px at 100% 100%, rgba(150, 110, 50, .08), transparent 70%),
        linear-gradient(180deg, #0b0f18 0%, #090b11 100%);
    background-attachment: fixed;
}
/* Ciel étoilé discret */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .7;
    background-image:
        radial-gradient(1px 1px at 8% 14%, #fff 50%, transparent 52%),
        radial-gradient(1px 1px at 17% 62%, #cfe6ff 50%, transparent 52%),
        radial-gradient(1.5px 1.5px at 26% 30%, #fff 50%, transparent 52%),
        radial-gradient(1px 1px at 35% 78%, #fff 50%, transparent 52%),
        radial-gradient(1px 1px at 44% 9%, #cfe6ff 50%, transparent 52%),
        radial-gradient(1.5px 1.5px at 58% 42%, #fff 50%, transparent 52%),
        radial-gradient(1px 1px at 66% 86%, #fff 50%, transparent 52%),
        radial-gradient(1px 1px at 73% 20%, #ffe9c2 50%, transparent 52%),
        radial-gradient(1px 1px at 82% 58%, #fff 50%, transparent 52%),
        radial-gradient(1.5px 1.5px at 91% 12%, #cfe6ff 50%, transparent 52%),
        radial-gradient(1px 1px at 95% 74%, #fff 50%, transparent 52%),
        radial-gradient(1px 1px at 4% 90%, #fff 50%, transparent 52%);
}

h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 600; line-height: 1.2; margin: 0 0 .6em; letter-spacing: .03em; color: var(--gold-bright); }
h1 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 1em; }
a { color: var(--blue); text-decoration-color: rgba(124, 196, 255, .4); text-underline-offset: 3px; }
a:hover { color: #b6deff; text-decoration-color: currentColor; }
strong { font-weight: 650; color: #fff8e6; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em; background: rgba(255, 255, 255, .08); padding: .1em .35em; border-radius: 4px; }
hr, .rule { border: 0; height: 1px; margin: 1.4rem 0; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
img, svg { max-width: 100%; }
::selection { background: rgba(124, 196, 255, .35); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.icon { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--gold); color: #1a1205; padding: .6rem 1rem; }
.skip-link:focus { left: .5rem; top: .5rem; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.eyebrow { font-family: var(--font-title); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem; }
[hidden] { display: none !important; }

/* ---------- Barre du haut ----------
   Deux étages. Le bandeau (titre du site, compte) défile avec la page ; la barre de jeu
   (menu, résumé du personnage) reste collée en haut de l'écran. Chaque étage dispose ainsi
   de toute la largeur : rien ne déborde, même avec le lien « Maîtrise du jeu ».
   Les paliers d'adaptation aux écrans étroits sont à la fin du fichier. */
.topbar {
    position: sticky; top: 0; z-index: 40;
    background:
        radial-gradient(34rem 9rem at max(2rem, calc(50% - 36rem)) 0, rgba(124, 196, 255, .22), transparent 72%),
        linear-gradient(180deg, rgba(31, 37, 49, .98), rgba(16, 20, 28, .98));
    border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 1px 0 #000, 0 8px 24px rgba(0, 0, 0, .45);
    backdrop-filter: blur(6px);
}
/* Joueur connecté : seul le bandeau s'efface quand on fait défiler la page. */
.is-logged .topbar { top: calc(-1 * var(--masthead)); }
.topbar__inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: .55rem 1rem; display: flex; align-items: center; gap: 1rem; min-height: 3.6rem; }
.is-logged .topbar__inner { height: var(--masthead); min-height: 0; padding-top: 0; padding-bottom: 0; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: .75rem; flex: none; }
.brand { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; text-decoration: none; }
.brand__icon { flex: none; width: 1.75rem; height: 1.75rem; color: var(--blue); filter: drop-shadow(0 0 6px rgba(124, 196, 255, .8)); stroke-width: 1.3; }
.brand__name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-title); font-weight: 700; font-size: clamp(.84rem, 3.9vw, 1.2rem); letter-spacing: .1em;
    background: linear-gradient(180deg, #fff3cf, #c9a86a 70%, #9a7c45); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Barre de jeu : le menu à gauche, le résumé du personnage à droite */
.gamebar { position: relative; z-index: 1; background: linear-gradient(180deg, rgba(46, 53, 67, .97), rgba(23, 28, 37, .97)); }
.gamebar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none; opacity: .75; background: linear-gradient(90deg, transparent, var(--gold-dim) 15%, var(--gold-bright) 50%, var(--gold-dim) 85%, transparent); }
.gamebar__inner { position: relative; max-width: 1240px; margin: 0 auto; padding: .3rem 1rem; display: flex; align-items: center; gap: 1rem; min-height: 3.3rem; }
.nav { display: flex; align-items: center; gap: .15rem; }
.nav__link {
    position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: 6px;
    color: var(--muted); text-decoration: none; font-weight: 500; font-size: .98rem; white-space: nowrap;
    transition: color .15s, background-color .15s;
}
.nav__link:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.nav__link.is-active { color: var(--gold-bright); background: rgba(201, 168, 106, .1); }
.nav__link.is-active::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: -.42rem; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.nav-toggle { position: relative; display: none; align-items: center; gap: .45rem; padding: .45rem .7rem; border: 1px solid var(--line-strong); border-radius: 6px; background: none; color: var(--text); font: 600 .95rem var(--font-body); cursor: pointer; }
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-bright); }
.nav-toggle__dot { position: absolute; top: -.25rem; right: -.25rem; width: .65rem; height: .65rem; border-radius: 50%; background: #c9432f; box-shadow: 0 0 8px rgba(226, 80, 60, .8); }

/* Résumé du personnage : portrait (avec son niveau), jauges et gils */
.hud { margin-left: auto; display: flex; align-items: center; gap: .75rem; padding: .2rem .85rem .2rem .25rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.hud__avatar { position: relative; display: inline-flex; flex: none; text-decoration: none; }
.hud__avatar .medallion { width: 2.2rem; height: 2.2rem; border-width: 2px; transition: border-color .15s, box-shadow .15s; }
.hud__avatar:hover .medallion { border-color: var(--gold-bright); box-shadow: 0 0 0 1px #000, var(--glow); }
.hud__level { position: absolute; right: -.4rem; bottom: -.2rem; display: grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .22rem; border-radius: 999px; border: 1px solid #000; font: 700 .68rem/1 var(--font-body); color: #201603; background: linear-gradient(180deg, #f3dc9f, #b98f44); font-variant-numeric: tabular-nums; }
.hud__dot { position: absolute; top: -.15rem; right: -.3rem; width: .6rem; height: .6rem; border-radius: 50%; border: 1px solid #000; background: var(--blue); box-shadow: 0 0 7px var(--blue); }
.hud__who { display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; color: var(--text); }
.hud__name { font-family: var(--font-title); font-weight: 600; font-size: .92rem; color: var(--gold-bright); max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud__class { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.hud__bars { display: grid; gap: 3px; width: 8.5rem; }
.hud__bar { display: flex; align-items: center; gap: .35rem; }
.hud__tag { font-size: .62rem; font-weight: 700; letter-spacing: .05em; width: 1.2rem; }
.hud__tag--hp { color: var(--hp); }
.hud__tag--mp { color: var(--mp); }
.hud .bar { height: .78rem; flex: 1; }
.hud .bar__text { font-size: .62rem; }
.hud__gils { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--xp); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Menu du compte */
.menu { position: relative; }
.menu__button { list-style: none; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--text); font-size: .92rem; user-select: none; }
.menu__button::-webkit-details-marker { display: none; }
.menu__button:hover { border-color: var(--gold); }
.menu__chevron { width: .9em; height: .9em; transition: transform .15s; }
.menu[open] .menu__chevron { transform: rotate(180deg); }
.menu__panel { position: absolute; z-index: 5; right: 0; top: calc(100% + .45rem); min-width: 13rem; padding: .35rem; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); }
.menu__panel a, .menu__panel button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .55rem .7rem; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.menu__panel a:hover, .menu__panel button:hover { background: rgba(255, 255, 255, .08); }
.menu__panel form { margin: 0; }

/* ---------- Mise en page ---------- */
.page { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 1.6rem 1rem 3rem; }
.landing .page { max-width: none; padding: 0; }
.footer { border-top: 1px solid var(--line); padding: 1.3rem 1rem 1.6rem; text-align: center; color: var(--faint); font-size: .82rem; background: rgba(0, 0, 0, .3); }
.footer p { margin: .15rem 0; }

.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem 1.5rem; margin-bottom: 1.3rem; }
.page-header h1 { margin: 0; }
.page-header p { margin: .3rem 0 0; color: var(--muted); max-width: 46rem; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .9rem; font-size: .9rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.breadcrumb a:hover { color: var(--gold-bright); }
.breadcrumb .icon { width: 1em; height: 1em; }

.grid { display: grid; gap: 1.2rem; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.2rem; align-items: start; }
.stack > * + * { margin-top: 1.2rem; }
.page > section + section, .page > section + .stack, .page > .stack + .stack { margin-top: 1.8rem; }

/* ---------- Fenêtres ---------- */
.window {
    position: relative;
    background: linear-gradient(180deg, rgba(40, 47, 60, .96), rgba(24, 29, 38, .97));
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .07);
    padding: 1.3rem 1.4rem;
}
.window--narrow { max-width: 33rem; margin: 2.2rem auto; }
.window--flush { padding: 0; overflow: hidden; }
.window__title {
    display: flex; align-items: center; gap: .55rem; margin: -1.3rem -1.4rem 1.1rem; padding: .7rem 1.4rem;
    font-family: var(--font-title); font-size: 1rem; font-weight: 600; letter-spacing: .08em; color: var(--gold-bright);
    background: linear-gradient(180deg, rgba(201, 168, 106, .16), rgba(201, 168, 106, .03));
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
}
.window__title .icon { color: var(--accent); }
.window__title .badge { margin-left: auto; }
.window__heading { text-align: center; margin-bottom: .7rem; }
.window__heading::after { content: ""; display: block; height: 1px; margin: .7rem auto 0; max-width: 16rem; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.window > :last-child { margin-bottom: 0; }
.panel { background: rgba(0, 0, 0, .22); border: 1px solid var(--line); border-radius: 6px; padding: .9rem 1rem; }
.empty { text-align: center; color: var(--muted); padding: 1.6rem 1rem; font-style: italic; }
.empty .icon { display: block; width: 2rem; height: 2rem; margin: 0 auto .5rem; color: var(--gold-dim); }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .55rem 1.15rem; min-height: 2.5rem;
    font: 600 .98rem/1.2 var(--font-body); letter-spacing: .02em; color: #f4eedd; text-decoration: none; text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
    background: linear-gradient(180deg, #4b5362, #2b313c);
    border: 1px solid #8a7850; border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(0, 0, 0, .4);
    cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .05s, filter .15s;
}
.btn:hover { color: #fff; border-color: var(--gold-bright); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), var(--glow); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.4); }
.btn--primary { color: #201603; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); background: linear-gradient(180deg, #f3dc9f, #c39a4c 55%, #a37c35); border-color: #f1deb0; }
.btn--primary:hover { color: #140d00; filter: brightness(1.08); }
.btn--ghost { background: transparent; box-shadow: none; border-color: var(--line-strong); color: var(--text); }
.btn--danger { background: linear-gradient(180deg, #8d3a30, #5c211b); border-color: #d98a7c; }
.btn--small { padding: .32rem .8rem; min-height: 2rem; font-size: .88rem; }
.btn--large { padding: .8rem 1.7rem; font-size: 1.08rem; }
.btn--block { width: 100%; }
.btn .icon { width: 1.1em; height: 1.1em; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 0; }
.actions--center { justify-content: center; }
.actions--end { justify-content: flex-end; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(124, 196, 255, .4); text-underline-offset: 3px; }
.link-button:hover { color: #b6deff; }
.link-button--danger { color: var(--danger); text-decoration-color: rgba(226, 112, 92, .4); }
form.inline { display: inline; margin: 0; }

/* ---------- Formulaires ---------- */
.form { margin-top: 1.1rem; }
.field { margin-bottom: 1.05rem; }
.field > label, .label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .95rem; color: var(--gold-bright); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], select, textarea {
    width: 100%; padding: .6rem .75rem; font: inherit; color: var(--text);
    background: #10141b; border: 1px solid #4d4536; border-radius: 6px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), 0 0 0 3px rgba(124, 196, 255, .22); }
input::placeholder, textarea::placeholder { color: var(--faint); }
select { appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 1.05rem) 55%, calc(100% - .7rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; }
select option { background: #171c25; color: var(--text); }
textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }
input[type="number"] { font-variant-numeric: tabular-nums; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; }
.field__help { margin: .35rem 0 0; font-size: .86rem; color: var(--muted); }
.field__error { margin: .35rem 0 0; font-size: .9rem; color: #ff9d8c; font-weight: 600; }
.field--inline { display: flex; align-items: center; gap: .55rem; }
.field--inline label { margin: 0; font-weight: 500; color: var(--text); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1.1rem; }
.form-grid .field--wide { grid-column: 1 / -1; }
.qty { width: 4.4rem !important; text-align: center; padding: .35rem .4rem !important; }

.notice { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .95rem; margin: 0 0 1rem; border-radius: 6px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.notice .icon { margin-top: .15em; }
.notice--error { border-color: rgba(226, 112, 92, .6); background: rgba(226, 112, 92, .12); color: #ffd2c9; }
.notice--info { border-color: rgba(124, 196, 255, .45); background: rgba(124, 196, 255, .09); color: #d5ebff; }
.notice--success { border-color: rgba(127, 203, 134, .5); background: rgba(127, 203, 134, .1); color: #d6f5d9; }
.notice--warning { border-color: rgba(230, 180, 80, .55); background: rgba(230, 180, 80, .1); color: #ffe9bd; }

/* ---------- Étiquettes ---------- */
.badge { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-width: 1.35rem; padding: .1rem .5rem; border-radius: 999px; font: 700 .72rem/1.5 var(--font-body); letter-spacing: .04em; background: rgba(255, 255, 255, .1); color: var(--text); white-space: nowrap; }
.badge--alert { background: #c9432f; color: #fff; box-shadow: 0 0 8px rgba(226, 80, 60, .7); }
.badge--gold { background: rgba(201, 168, 106, .2); color: var(--gold-bright); border: 1px solid var(--line); }
.badge--blue { background: rgba(124, 196, 255, .16); color: #cfe8ff; border: 1px solid rgba(124, 196, 255, .35); }
.badge--green { background: rgba(127, 203, 134, .16); color: #cdf3d1; border: 1px solid rgba(127, 203, 134, .4); }
.badge--muted { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem; border-radius: 999px; font-size: .86rem; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--text); }
.chip .icon { width: 1em; height: 1em; color: var(--accent); }

/* ---------- Jauges ---------- */
.bar { position: relative; height: 1.15rem; border-radius: 999px; overflow: hidden; background: #0c0f15; border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .07); }
.bar__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.bar__fill::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .32), transparent); border-radius: 999px; }
.bar__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; font-variant-numeric: tabular-nums; }
.bar--hp .bar__fill, .bar--foe .bar__fill { background: linear-gradient(180deg, #8fdc7d, #3f9a39); }
.bar--foe .bar__fill { background: linear-gradient(180deg, #f08b76, #b2402f); }
.bar--mp .bar__fill { background: linear-gradient(180deg, #f58cc0, #b93a7c); }
.bar--xp .bar__fill { background: linear-gradient(180deg, #f6d57a, #b98b25); }
.bar--dur .bar__fill { background: linear-gradient(180deg, #9cc6ee, #4a7fb5); }
.gauge { display: grid; grid-template-columns: 2.2rem 1fr; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.gauge__label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; }
.gauge__label--hp { color: var(--hp); }
.gauge__label--mp { color: var(--mp); }
.gauge__label--xp { color: var(--xp); }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.table th { text-align: left; font: 600 .76rem var(--font-title); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: .55rem .7rem; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.table td { padding: .55rem .7rem; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: middle; }
.table tbody tr:hover { background: rgba(255, 255, 255, .035); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table a { font-weight: 600; }

/* ---------- Onglets ---------- */
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line-strong); margin-bottom: 1rem; flex-wrap: wrap; }
.tab { padding: .55rem 1.1rem; background: none; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; color: var(--muted); font: 600 .98rem var(--font-body); cursor: pointer; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .4rem; }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--gold-bright); border-color: var(--line-strong); background: linear-gradient(180deg, rgba(201, 168, 106, .14), transparent); border-bottom: 1px solid #1f2530; }

/* ---------- Lignes d'objet ---------- */
.items { list-style: none; padding: 0; margin: 0; }
.item { display: flex; align-items: center; gap: .8rem; padding: .6rem .2rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.item:last-child { border-bottom: 0; }
.item__icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 8px; color: var(--gold-bright); background: radial-gradient(circle at 30% 25%, #3a4558, #171c26 75%); border: 1px solid var(--line-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.item__icon .icon { width: 1.5rem; height: 1.5rem; }
.item__main { flex: 1; min-width: 0; }
.item__name { font-weight: 600; color: #fff8e6; }
.item__meta { font-size: .86rem; color: var(--muted); }
.item__desc { font-size: .88rem; color: var(--muted); font-style: italic; margin: .1rem 0 0; }
.item__actions { display: flex; align-items: center; gap: .4rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.item__price { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; color: var(--xp); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item.is-broken .item__name { color: var(--danger); }

.medallion { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: var(--gold-bright); background: radial-gradient(circle at 30% 25%, #44506a, #141924 72%); border: 2px solid var(--gold-dim); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, .15); }
.medallion .icon { width: 55%; height: 55%; }
.medallion { overflow: hidden; }
.medallion img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.medallion--portrait { width: 9.5rem; height: 9.5rem; border-width: 3px; box-shadow: 0 0 0 1px #000, 0 0 26px rgba(124, 196, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .15); }
.medallion--large { width: 5.2rem; height: 5.2rem; border-width: 3px; box-shadow: 0 0 0 1px #000, 0 0 22px rgba(124, 196, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .15); }
.medallion--small { width: 2.2rem; height: 2.2rem; border-width: 1px; }
.medallion--narrator { color: #d9c8ff; border-color: #8f7fc0; background: radial-gradient(circle at 30% 25%, #4b4270, #17142a 72%); }

/* ---------- Messages éphémères ---------- */
.toasts { position: fixed; z-index: 80; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; max-width: min(26rem, calc(100vw - 2rem)); }
.toast { padding: .75rem 1rem; border-radius: 8px; background: #232b39; border: 1px solid var(--line-strong); border-left: 4px solid var(--gold); box-shadow: var(--shadow); animation: toast-in .25s ease-out; cursor: pointer; }
.toast--success { border-left-color: var(--success); }
.toast--error { border-left-color: var(--danger); }
.toast--info { border-left-color: var(--blue); }
.toast.is-leaving { opacity: 0; transform: translateX(12px); transition: opacity .3s, transform .3s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Lancer de dé ---------- */
.dice-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(4, 6, 10, .72); backdrop-filter: blur(3px); cursor: pointer; animation: fade-in .15s ease-out; }
.dice-box { text-align: center; padding: 1.4rem 2.4rem 1.2rem; min-width: 17rem; background: linear-gradient(180deg, rgba(40, 47, 60, .98), rgba(20, 24, 32, .98)); border: 1px solid var(--gold); border-radius: 12px; box-shadow: var(--shadow), 0 0 40px rgba(124, 196, 255, .2); }
.dice-box__label { font-family: var(--font-title); letter-spacing: .08em; color: var(--gold-bright); margin: 0 0 .6rem; }
.dice-box__die { position: relative; width: 8.5rem; height: 8.5rem; margin: 0 auto; }
.dice-box__die svg { width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgba(124, 196, 255, .55)); }
.die__face { fill: #1d3b6b; stroke: #bfe2ff; stroke-width: 2; }
.die__inner { fill: #2c5aa0; stroke: #bfe2ff; stroke-width: 1.5; }
.die__edge { fill: none; stroke: #bfe2ff; stroke-width: 1.2; opacity: .7; }
.dice-box__value { position: absolute; inset: 0; display: grid; place-items: center; padding-top: .9rem; font: 700 2rem var(--font-title); color: #fff; text-shadow: 0 2px 6px #000; }
.dice-box__die.is-rolling svg { animation: die-spin .5s linear infinite; }
.dice-box__die.is-rolling .dice-box__value { opacity: .75; }
.dice-box__die.is-landed { animation: die-land .35s cubic-bezier(.2, 1.6, .4, 1); }
.dice-box__math { margin: .7rem 0 .2rem; font-size: 1.05rem; color: var(--text); min-height: 1.6em; font-variant-numeric: tabular-nums; }
.dice-box__outcome { margin: 0; min-height: 1.5em; font: 700 1.25rem var(--font-title); letter-spacing: .06em; }
.dice-box__outcome.is-good { color: var(--success); text-shadow: 0 0 14px rgba(127, 203, 134, .6); }
.dice-box__outcome.is-bad { color: var(--danger); text-shadow: 0 0 14px rgba(226, 112, 92, .5); }
.dice-box__hint { margin: .8rem 0 0; font-size: .78rem; color: var(--faint); }
@keyframes die-spin { to { transform: rotate(360deg); } }
@keyframes die-land { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Page d'accueil
   ========================================================================== */
.hero { position: relative; min-height: min(92vh, 56rem); display: grid; place-items: center; padding: 4rem 1.2rem 5rem; text-align: center; overflow: hidden; isolation: isolate; }
.hero__sky { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(70, 130, 220, .38), transparent 70%), linear-gradient(180deg, #060912 0%, #0c1426 55%, #0a0d15 100%); }
.hero__moon { position: absolute; top: 11%; right: 13%; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffb489, #c8452c 60%, #6d1c12); box-shadow: 0 0 34px 8px rgba(226, 90, 60, .45); opacity: .85; }
.hero__meteor { position: absolute; height: 2px; width: 9rem; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 220, 180, .9)); transform: rotate(-32deg); opacity: 0; animation: meteor 9s ease-in infinite; }
.hero__meteor--1 { top: 16%; left: 12%; }
.hero__meteor--2 { top: 30%; left: 68%; width: 6rem; animation-delay: 4.5s; }
@keyframes meteor { 0% { opacity: 0; translate: 6rem -4rem; } 6% { opacity: .9; } 14% { opacity: 0; translate: -7rem 4.5rem; } 100% { opacity: 0; translate: -7rem 4.5rem; } }
.hero__crystal { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(34vh, 17rem); translate: -50% -56%; opacity: .5; }
.hero__crystal::before { content: ""; position: absolute; inset: -45% -90%; background: radial-gradient(closest-side, rgba(120, 190, 255, .55), transparent 72%); z-index: -1; }
.crystal { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 26px rgba(120, 195, 255, .85)); animation: crystal-float 7s ease-in-out infinite; }
@keyframes crystal-float { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(8px); } }
.hero__content { max-width: 50rem; }
.hero__eyebrow { font-family: var(--font-title); font-size: .82rem; letter-spacing: .28em; text-transform: uppercase; color: #cfe6ff; text-shadow: 0 1px 8px #000; margin-bottom: 1rem; }
.hero__title {
    font-size: clamp(2.5rem, 8vw, 5.2rem); font-weight: 700; letter-spacing: .06em; line-height: 1.05; margin: 0 0 1.1rem;
    background: linear-gradient(180deg, #fffbe9 10%, #f0d898 45%, #b98f44 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 3px 14px rgba(0, 0, 0, .9));
}
.hero__tagline { font-family: var(--font-story); font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.5; color: #f0ebe0; text-shadow: 0 2px 10px #000; max-width: 40rem; margin: 0 auto 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.hero__scroll { position: absolute; bottom: 1.4rem; left: 50%; translate: -50% 0; color: var(--gold); animation: bob 2.2s ease-in-out infinite; }
.hero__scroll .icon { width: 2rem; height: 2rem; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

.section { max-width: 1180px; margin: 0 auto; padding: 4rem 1.2rem 1rem; }
.section__header { text-align: center; margin-bottom: 2.2rem; }
.section__title { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin: 0; }
.section__title::after { content: ""; display: block; height: 1px; margin: 1rem auto 0; max-width: 20rem; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.section--cta { padding-bottom: 4rem; }
.cta { text-align: center; }

.city-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
.city-card { position: relative; padding: 1.7rem 1.4rem 1.5rem; text-align: center; border-radius: 10px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, var(--tint), transparent 55%), linear-gradient(180deg, rgba(40, 47, 60, .96), rgba(22, 27, 36, .97)); box-shadow: var(--shadow); overflow: hidden; transition: transform .2s, border-color .2s; }
.city-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.city-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.city-card__emblem { display: grid; place-items: center; width: 4.6rem; height: 4.6rem; margin: 0 auto 1rem; border-radius: 50%; color: var(--accent); border: 2px solid var(--accent); background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .12), rgba(0, 0, 0, .35)); box-shadow: 0 0 24px var(--tint); }
.city-card__emblem .icon { width: 2.4rem; height: 2.4rem; stroke-width: 1.3; }
.city-card__name { font-size: 1.5rem; margin: 0 0 .2rem; color: #fff6dd; }
.city-card__title { font-family: var(--font-title); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.city-card__desc { font-family: var(--font-story); font-size: 1.1rem; color: #ddd7c8; }
.city-card .chips { justify-content: center; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; counter-reset: step; }
.step { position: relative; padding: 1.5rem 1.2rem 1.2rem; border-radius: 10px; border: 1px solid var(--line); background: rgba(20, 25, 34, .75); text-align: center; counter-increment: step; }
.step::before { content: counter(step); position: absolute; top: .6rem; left: .9rem; font: 700 1.1rem var(--font-title); color: var(--gold-dim); }
.step__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: 0 auto .9rem; border-radius: 50%; color: var(--blue); border: 1px solid rgba(124, 196, 255, .45); background: rgba(124, 196, 255, .08); box-shadow: 0 0 18px rgba(124, 196, 255, .18); }
.step__icon .icon { width: 1.6rem; height: 1.6rem; }
.step h3 { font-size: 1.05rem; }
.step p { margin: 0; color: var(--muted); font-size: .98rem; }

.auth-card__emblem { display: grid; place-items: center; margin: -.2rem auto .6rem; color: var(--blue); filter: drop-shadow(0 0 10px rgba(124, 196, 255, .8)); }
.auth-card__emblem .icon { width: 2.6rem; height: 2.6rem; stroke-width: 1.2; }

.error-page { text-align: center; }
.error-page__code { font: 700 4rem/1 var(--font-title); margin: 0 0 .4rem; color: var(--gold-dim); letter-spacing: .08em; }
.debug { margin-top: 1.4rem; text-align: left; }
.debug pre { overflow: auto; max-height: 22rem; padding: .8rem; font-size: .76rem; background: #0b0e14; border: 1px solid var(--line); border-radius: 6px; white-space: pre-wrap; word-break: break-word; }

/* ==========================================================================
   Création de personnage
   ========================================================================== */
.creation { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.2rem; align-items: start; }
.creation__step { display: flex; align-items: center; gap: .6rem; }
.creation__num { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; font: 700 .95rem var(--font-title); color: #201603; background: linear-gradient(180deg, #f3dc9f, #b98f44); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .7rem; }
.choice-group { margin-bottom: 1.1rem; }
.choice-group__title { display: flex; align-items: center; gap: .5rem; font: 600 .8rem var(--font-title); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 .55rem; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice__card { display: block; height: 100%; padding: .8rem .9rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.choice:hover .choice__card { border-color: var(--gold-dim); background: rgba(255, 255, 255, .04); }
.choice input:checked + .choice__card { border-color: var(--gold-bright); background: linear-gradient(180deg, rgba(201, 168, 106, .2), rgba(201, 168, 106, .05)); box-shadow: var(--glow); }
.choice input:focus-visible + .choice__card { outline: 2px solid var(--blue); outline-offset: 2px; }
.choice__head { display: flex; align-items: center; gap: .55rem; margin-bottom: .3rem; }
.choice__head .icon { width: 1.5rem; height: 1.5rem; color: var(--accent); }
.choice__name { font: 600 1.02rem var(--font-title); color: #fff6dd; letter-spacing: .03em; }
.choice__meta { display: block; margin-bottom: .3rem; font-size: .78rem; color: var(--accent); letter-spacing: .04em; }
.choice__desc { display: block; font-size: .88rem; color: var(--muted); margin: 0 0 .5rem; line-height: 1.4; }
.summary { position: sticky; top: 5rem; }
.summary__name { font: 600 1.25rem var(--font-title); color: var(--gold-bright); text-align: center; margin: .6rem 0 .1rem; word-break: break-word; }
.summary__line { text-align: center; color: var(--muted); font-size: .92rem; margin: 0 0 .8rem; min-height: 1.4em; }
.summary .medallion { margin: 0 auto; }

/* ==========================================================================
   Fiche de personnage
   ========================================================================== */
.sheet { display: grid; grid-template-columns: 20rem minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.identity { text-align: center; }
.identity .medallion { margin: 0 auto .7rem; }
.identity__name { font-size: 1.45rem; margin: 0; }
.identity__line { color: var(--muted); margin: .15rem 0 .9rem; }
.identity__city { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent); font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.stat { position: relative; text-align: center; padding: .6rem .3rem .5rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.stat.is-main { border-color: var(--gold-dim); background: linear-gradient(180deg, rgba(201, 168, 106, .14), rgba(0, 0, 0, .25)); }
.stat__abbr { font: 600 .72rem var(--font-title); letter-spacing: .16em; color: var(--gold); }
.stat__value { font: 700 1.6rem/1.1 var(--font-title); color: #fff; }
.stat__value small { font-size: .7rem; color: var(--success); font-family: var(--font-body); vertical-align: super; }
.stat__mod { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.stat__plus { position: absolute; top: .3rem; right: .3rem; width: 1.5rem; height: 1.5rem; padding: 0; min-height: 0; border-radius: 50%; }
.stat__plus .icon { width: .9rem; height: .9rem; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0; }
.fact { padding: .55rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.fact dt { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .3rem; }
.fact dd { margin: .1rem 0 0; font: 700 1.2rem var(--font-title); color: #fff; }
.fact dd small { font: 400 .78rem var(--font-body); color: var(--muted); }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.slot { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: 8px; border: 1px dashed var(--line-strong); background: rgba(0, 0, 0, .2); min-height: 3.7rem; }
.slot.is-filled { border-style: solid; }
.slot__label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.slot__name { font-weight: 600; color: #fff8e6; line-height: 1.25; }
.slot__empty { color: var(--faint); font-style: italic; font-size: .92rem; }
.slot .bar { height: .5rem; margin-top: .3rem; }
.slot .item__icon { width: 2.3rem; height: 2.3rem; }
.slot__body { flex: 1; min-width: 0; }
.prose { font-family: var(--font-story); font-size: 1.2rem; line-height: 1.7; color: #ebe6da; }
.prose p { margin: 0 0 .9em; }
.prose p:last-child { margin-bottom: 0; }
.prose em { color: #fff5da; }
.prose + h3, p + h3 { margin-top: 1.1rem; }
.window details.tool:not(.window) { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.notice code { word-break: break-all; }

/* Quêtes */
.quest { padding: .9rem 1rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, .22); margin-bottom: .7rem; }
.quest:last-child { margin-bottom: 0; }
.quest.is-ready { border-color: var(--success); box-shadow: 0 0 12px rgba(127, 203, 134, .15); }
.quest__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .7rem; margin-bottom: .3rem; }
.quest__title { font: 600 1.05rem var(--font-title); color: #fff6dd; margin: 0; }
.quest__giver { font-size: .88rem; color: var(--accent); }
.quest__desc { font-family: var(--font-story); font-size: 1.08rem; color: #ddd7c8; margin: 0 0 .5rem; }
.quest__objective { display: flex; align-items: center; gap: .4rem; font-size: .93rem; margin: 0 0 .35rem; }
.quest__rewards { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .88rem; color: var(--muted); margin: 0; }
.quest__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .65rem; }

/* ==========================================================================
   Cité
   ========================================================================== */
.city-banner { position: relative; overflow: hidden; padding: 2.1rem 1.6rem; margin-bottom: 1.3rem; border-radius: 10px; border: 1px solid var(--line-strong); background: radial-gradient(ellipse 60% 120% at 88% 50%, var(--tint), transparent 70%), linear-gradient(120deg, rgba(40, 47, 60, .97), rgba(20, 24, 32, .97)); box-shadow: var(--shadow); }
.city-banner::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent 70%); }
.city-banner__emblem { position: absolute; right: 1.5rem; top: 50%; translate: 0 -50%; width: 8.5rem; height: 8.5rem; color: var(--accent); opacity: .22; }
.city-banner__emblem .icon { width: 100%; height: 100%; stroke-width: .8; }
.city-banner h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin: 0 0 .1rem; color: #fff6dd; }
.city-banner__title { font-family: var(--font-title); letter-spacing: .2em; text-transform: uppercase; font-size: .82rem; color: var(--accent); margin: 0 0 .7rem; }
.city-banner__desc { font-family: var(--font-story); font-size: 1.2rem; max-width: 44rem; margin: 0; color: #e6e0d2; }
.places { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1rem; }
.place { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.2rem 1.1rem; border-radius: 10px; border: 1px solid var(--line-strong); text-decoration: none; color: var(--text); background: linear-gradient(180deg, rgba(40, 47, 60, .96), rgba(24, 29, 38, .97)); box-shadow: var(--shadow); transition: transform .15s, border-color .15s, box-shadow .15s; }
.place:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--text); box-shadow: var(--shadow), 0 0 18px var(--tint); }
.place__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: var(--accent); border: 1px solid var(--accent); background: rgba(0, 0, 0, .3); margin-bottom: .3rem; }
.place__icon .icon { width: 1.5rem; height: 1.5rem; }
.place__name { font: 600 1.15rem var(--font-title); color: #fff6dd; letter-spacing: .04em; }
.place__desc { font-size: .93rem; color: var(--muted); margin: 0; flex: 1; }
.place__hint { font-size: .86rem; color: var(--accent); font-weight: 600; display: flex; align-items: center; gap: .35rem; margin-top: .35rem; }
.place .badge { position: absolute; top: .9rem; right: .9rem; }
.npc { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.1rem; }
.npc__text { font-family: var(--font-story); font-size: 1.15rem; color: #e6e0d2; margin: 0; }
.npc__name { font: 600 1.1rem var(--font-title); color: var(--gold-bright); margin: 0 0 .15rem; }
.npc__name small { font: 400 .85rem var(--font-body); color: var(--accent); margin-left: .4rem; }
.zone { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.zone__main { flex: 1; min-width: 15rem; }
.zone__name { margin: 0 0 .2rem; }

/* ==========================================================================
   Expédition (combat)
   ========================================================================== */
.combat { display: grid; gap: 1.1rem; }
.combat__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; }
.combat__head h1 { margin: 0; font-size: 1.5rem; }
.foes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 24rem)); justify-content: center; gap: .9rem; }
.foe { text-align: center; padding: 1rem .9rem; border-radius: 10px; border: 1px solid #7a4035; background: radial-gradient(ellipse at 50% 0%, rgba(226, 112, 92, .16), transparent 70%), rgba(0, 0, 0, .3); }
.foe.is-dead { opacity: .4; filter: grayscale(1); }
.foe__icon { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto .5rem; border-radius: 50%; color: #ffb7a8; border: 2px solid #a3564a; background: radial-gradient(circle at 30% 25%, #5b2d27, #1d1210 75%); }
.foe__icon .icon { width: 2.1rem; height: 2.1rem; }
.foe__name { font: 600 1.1rem var(--font-title); color: #ffe6df; margin: 0; }
.foe__meta { font-size: .84rem; color: var(--muted); margin: 0 0 .5rem; }
.foe__desc { font-size: .88rem; font-style: italic; color: var(--muted); margin: .5rem 0 0; }
.foe .actions { justify-content: center; margin-top: .7rem; }
.combat__me { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.1rem; align-items: start; }
.combat__status { display: flex; gap: .9rem; align-items: center; }
.combat__status .gauge { margin-bottom: .3rem; }
.combat__gauges { flex: 1; }
.combat__options { display: grid; gap: .6rem; }
.log { max-height: 16rem; overflow-y: auto; padding: .7rem .9rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); font-size: .96rem; }
.log__turn { font: 600 .72rem var(--font-title); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dim); margin: .55rem 0 .2rem; }
.log__turn:first-child { margin-top: 0; }
.log__line { margin: 0 0 .15rem; padding-left: .7rem; border-left: 2px solid var(--faint); }
.log__line--good { border-color: var(--success); color: #d6f5d9; }
.log__line--bad { border-color: var(--danger); color: #ffd2c9; }
.log__line--miss { border-color: var(--faint); color: var(--muted); }
.log__line--info { border-color: var(--blue); }
.result { text-align: center; padding: 1.4rem 1.2rem; border-radius: 10px; border: 1px solid var(--gold); background: linear-gradient(180deg, rgba(201, 168, 106, .16), rgba(0, 0, 0, .2)); }
.result--lost { border-color: var(--danger); background: linear-gradient(180deg, rgba(226, 112, 92, .16), rgba(0, 0, 0, .2)); }
.result h2 { font-size: 1.6rem; margin-bottom: .4rem; }
.result__gains { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .8rem 0 0; padding: 0; list-style: none; }

/* ==========================================================================
   Aventures
   ========================================================================== */
.adv-list { display: grid; gap: .8rem; }
.adv-card { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.2rem; padding: 1rem 1.2rem; border-radius: 10px; border: 1px solid var(--line-strong); text-decoration: none; color: var(--text); background: linear-gradient(180deg, rgba(40, 47, 60, .96), rgba(24, 29, 38, .97)); box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
a.adv-card:hover { border-color: var(--gold-bright); color: var(--text); transform: translateY(-2px); }
.adv-card.is-unread { border-left: 4px solid var(--blue); }
.adv-card.is-closed { opacity: .7; }
.adv-card__main { flex: 1; min-width: 14rem; }
.adv-card__title { font: 600 1.2rem var(--font-title); color: #fff6dd; margin: 0 0 .15rem; }
.adv-card__meta { font-size: .88rem; color: var(--muted); margin: 0; }
.adv-card__excerpt { font-family: var(--font-story); font-size: 1.08rem; color: #ddd7c8; margin: .4rem 0 0; }
.adv-card__side { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.faces { display: flex; }
.faces .medallion { margin-left: -.45rem; }
.faces .medallion:first-child { margin-left: 0; }
.faces .medallion.is-invited { opacity: .45; border-style: dashed; }

.adv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.2rem; align-items: start; }
.adv-side { position: sticky; top: 4.8rem; display: grid; gap: 1rem; max-height: calc(100vh - 6rem); overflow-y: auto; padding-right: .15rem; }
.members { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.member { display: flex; align-items: center; gap: .6rem; }
.member__name { font-weight: 600; line-height: 1.2; }
.member__meta { font-size: .8rem; color: var(--muted); }
.member.is-invited { opacity: .6; }

.thread { display: grid; gap: 1rem; }
.post { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .9rem; padding: 1.1rem 1.2rem; border-radius: 10px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(38, 45, 57, .96), rgba(24, 29, 38, .97)); box-shadow: 0 0 0 1px #000, 0 8px 22px rgba(0, 0, 0, .4); animation: post-in .35s ease-out; }
@keyframes post-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.post { scroll-margin-top: 5rem; }
.post__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin-bottom: .45rem; }
.post__author { font: 600 1.08rem var(--font-title); color: var(--gold-bright); letter-spacing: .04em; }
.post__meta { font-size: .8rem; color: var(--faint); }
.post__tools { margin-left: auto; display: flex; gap: .8rem; font-size: .8rem; opacity: .55; transition: opacity .15s; }
.post:hover .post__tools, .post__tools:focus-within { opacity: 1; }
.post__meta .link-button { font-size: .8rem; }
.post__body { font-family: var(--font-story); font-size: 1.24rem; line-height: 1.72; color: #eee9dd; overflow-wrap: anywhere; }
.post__body p { margin: 0 0 .85em; }
.post__body p:last-child { margin-bottom: 0; }
.post__body em { color: #fff5da; }
.post--mine { border-color: #8a7850; }
.post--narration { display: block; text-align: center; border-color: #6d5fa0; background: linear-gradient(180deg, rgba(60, 52, 96, .5), rgba(24, 22, 40, .9)); }
.post--narration .post__head { justify-content: center; }
.post--narration .post__author { color: #d9c8ff; }
.post--narration .post__author::before, .post--narration .post__author::after { content: "❖"; margin: 0 .6rem; font-size: .7em; color: #8f7fc0; }
.post--narration .post__body { font-style: italic; color: #ece6ff; max-width: 46rem; margin: 0 auto; }
.post--narration .post__tools { margin: .5rem 0 0; justify-content: center; }
.post--system, .post--roll { display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; box-shadow: none; background: rgba(0, 0, 0, .3); border-color: var(--line); font-size: .98rem; }
.post--system { justify-content: center; text-align: center; color: var(--gold-bright); font-style: italic; border-style: dashed; }
.post--roll .icon { color: var(--blue); width: 1.5rem; height: 1.5rem; }
.post--roll .post__meta { margin-left: auto; }
.roll__total { display: inline-grid; place-items: center; min-width: 2rem; padding: 0 .4rem; border-radius: 6px; font: 700 1.05rem var(--font-title); color: #fff; background: var(--blue-deep); border: 1px solid #9fd0ff; }
.roll__outcome { font-weight: 700; }
.roll__outcome.is-good { color: var(--success); }
.roll__outcome.is-bad { color: var(--danger); }
.post--choice { display: block; border-color: var(--gold); background: linear-gradient(180deg, rgba(201, 168, 106, .14), rgba(24, 29, 38, .97)); }
.choice-box__kicker { display: flex; align-items: center; gap: .45rem; font: 600 .8rem var(--font-title); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem; }
.choice-box__kicker .post__tools { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.choice-box__options { display: grid; gap: .5rem; margin: .9rem 0 0; }
.choice-option { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; width: 100%; padding: .7rem .95rem; border-radius: 8px; text-align: left; font: inherit; color: var(--text); background: rgba(0, 0, 0, .3); border: 1px solid var(--line-strong); }
button.choice-option { cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
button.choice-option:hover { border-color: var(--gold-bright); box-shadow: var(--glow); background: rgba(201, 168, 106, .1); }
.choice-option__label { font-family: var(--font-story); font-size: 1.15rem; }
.choice-box__answers { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .35rem; font-size: .96rem; }
.choice-box__answers li { padding-left: .7rem; border-left: 2px solid var(--gold-dim); }

.composer { margin-top: 1.2rem; }
.composer textarea { min-height: 13rem; font-family: var(--font-story); font-size: 1.2rem; line-height: 1.65; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.toolbar__btn { min-width: 2.2rem; height: 2.1rem; padding: 0 .6rem; border-radius: 6px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .3); color: var(--text); font: 600 .95rem var(--font-story); cursor: pointer; }
.toolbar__btn:hover { border-color: var(--gold-bright); }
.toolbar__hint { margin-left: auto; font-size: .8rem; color: var(--faint); }
.composer__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .6rem; }
.composer__count { font-size: .82rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.waiting { display: flex; align-items: center; gap: .7rem; justify-content: center; text-align: center; margin-top: 1.2rem; padding: 1rem; border-radius: 10px; border: 1px dashed var(--line-strong); color: var(--muted); font-style: italic; }
.waiting .icon { color: var(--gold); animation: bob 2.4s ease-in-out infinite; }
details.tool > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; font: 600 .95rem var(--font-title); letter-spacing: .06em; color: var(--gold-bright); }
details.tool > summary::-webkit-details-marker { display: none; }
details.tool > summary::after { content: "+"; margin-left: auto; color: var(--gold); font-size: 1.2rem; line-height: 1; }
details.tool[open] > summary::after { content: "–"; }
details.tool[open] > summary { margin-bottom: .8rem; }
.tool .field { margin-bottom: .7rem; }
.tool .field > label { font-size: .86rem; }
.option-row { display: grid; grid-template-columns: 1fr; gap: .35rem; padding: .55rem; margin-bottom: .5rem; border-radius: 6px; border: 1px solid var(--line); background: rgba(0, 0, 0, .2); }
.option-row__test { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.check-list { display: grid; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.check { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, .22); cursor: pointer; }
.check:hover { border-color: var(--gold-dim); }
.check__text { line-height: 1.25; }
.check__meta { display: block; font-size: .82rem; color: var(--muted); }

/* Compagnons */
.companions { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem; }
.companion { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: 10px; border: 1px solid var(--line-strong); text-decoration: none; color: var(--text); background: linear-gradient(180deg, rgba(40, 47, 60, .96), rgba(24, 29, 38, .97)); transition: border-color .15s, transform .15s; }
.companion:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); }
.companion__name { font: 600 1.05rem var(--font-title); color: #fff6dd; }
.companion__meta { font-size: .86rem; color: var(--muted); }

/* ==========================================================================
   Maîtrise du jeu
   ========================================================================== */
.gm { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.gm__nav { position: sticky; top: 4.8rem; padding: .6rem; }
.gm__nav h2 { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dim); margin: .9rem .6rem .35rem; }
.gm__nav h2:first-child { margin-top: .3rem; }
.gm__nav a { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: 6px; color: var(--muted); text-decoration: none; font-weight: 500; }
.gm__nav a:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.gm__nav a.is-active { color: var(--gold-bright); background: rgba(201, 168, 106, .12); }
.gm__nav .badge { margin-left: auto; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.stat-card { padding: .9rem 1rem; border-radius: 10px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(40, 47, 60, .96), rgba(24, 29, 38, .97)); }
.stat-card__value { font: 700 1.9rem/1.1 var(--font-title); color: #fff; }
.stat-card__label { font-size: .86rem; color: var(--muted); }
.code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.02rem; letter-spacing: .08em; color: var(--gold-bright); user-select: all; }
.copy-box { display: block; width: 100%; padding: .7rem .8rem; border-radius: 6px; background: #0b0e14; border: 1px solid var(--gold); color: var(--gold-bright); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86rem; word-break: break-all; user-select: all; }

/* ==========================================================================
   Bulles d'aide (« ? »)
   La bulle se place sous l'élément qui la contient (.stat, .fact) et s'aligne
   à gauche, au centre ou à droite selon la colonne, pour ne jamais sortir de l'écran.
   ========================================================================== */
.hint__button { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; padding: 0; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(0, 0, 0, .4); color: var(--gold); font: 700 .74rem/1 var(--font-body); letter-spacing: 0; cursor: help; vertical-align: middle; transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s; }
.hint__button:hover, .hint__button:focus-visible, .hint.is-open .hint__button { color: #201603; background: var(--gold-bright); border-color: var(--gold-bright); box-shadow: var(--glow); }
.hint__bubble { display: none; position: absolute; z-index: 30; top: calc(100% + .45rem); left: 0; width: max-content; max-width: min(19rem, 82vw); padding: .7rem .85rem; text-align: left; font: 400 .9rem/1.45 var(--font-body); letter-spacing: 0; text-transform: none; white-space: normal; color: var(--text); background: #232b39; border: 1px solid var(--gold); border-radius: 8px; box-shadow: var(--shadow); }
.hint__title { display: block; margin-bottom: .25rem; font: 600 .95rem var(--font-title); letter-spacing: .05em; color: var(--gold-bright); }
.hint__note { display: block; margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--line); font-size: .85rem; color: #cfe8ff; }
.hint.is-open .hint__bubble, .hint__button:focus-visible + .hint__bubble { display: block; }
@media (hover: hover) {
    .hint:hover .hint__bubble { display: block; }
}
.stat .hint__button { position: absolute; top: .3rem; left: .3rem; }
.fact { position: relative; }
.fact dt .hint__button { margin-left: .15rem; }
.stat-grid > :nth-child(3n+2) .hint__bubble, .facts > :nth-child(3n+2) .hint__bubble { left: 50%; transform: translateX(-50%); }
.stat-grid > :nth-child(3n) .hint__bubble, .facts > :nth-child(3n) .hint__bubble { left: auto; right: 0; }

/* ==========================================================================
   Avatars
   ========================================================================== */
.avatar-edit { display: grid; justify-items: center; gap: .55rem; margin-bottom: .8rem; transition: opacity .2s; }
.avatar-edit .medallion { margin: 0; }
.avatar-edit .medallion--large { width: 7.5rem; height: 7.5rem; }
.avatar-edit__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .9rem; }
.avatar-edit__actions form { margin: 0; }
.avatar-edit__pick { cursor: pointer; }
.avatar-edit__pick:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.avatar-edit__help { margin: 0; font-size: .8rem; color: var(--faint); text-align: center; }
.avatar-edit.is-loading { opacity: .5; pointer-events: none; }
.member__face { display: inline-flex; text-decoration: none; }
.with-face { display: flex; align-items: center; gap: .6rem; }
.window__title .medallion { width: 1.9rem; height: 1.9rem; }

/* Quêtes : suite logique, avancement après un combat, quête jouée dans une aventure */
.quest__next { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.quest-progress { list-style: none; padding: 0; margin: 1rem auto 0; display: grid; gap: .35rem; max-width: 32rem; text-align: left; }
.quest-progress li { display: flex; align-items: center; gap: .55rem; padding: .45rem .75rem; border-radius: 6px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); font-size: .95rem; }
.quest-progress li.is-ready { border-color: var(--success); color: #d6f5d9; }
.quest-link .quest__title { margin-bottom: .15rem; }
.quest-link .quest__desc { font-size: 1rem; }

/* ==========================================================================
   Fiche de personnage : la carte du personnage, puis des blocs à dérouler
   ========================================================================== */
.fiche { display: grid; gap: 1.1rem; }
.fiche > * { min-width: 0; }
.fiche__hero {
    display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(15rem, 21rem); gap: 1.2rem 1.8rem; align-items: center; padding: 1.4rem 1.6rem;
    background: radial-gradient(ellipse 55% 140% at 0% 50%, var(--tint), transparent 70%), linear-gradient(180deg, rgba(40, 47, 60, .96), rgba(24, 29, 38, .97));
}
.fiche__hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, var(--accent), transparent 70%); }
.fiche__hero > * { margin-bottom: 0; }
.fiche__avatar .avatar-edit { margin: 0; }
.fiche__avatar .avatar-edit__help { display: none; } /* l'explication reste disponible au survol du bouton */
.fiche__identity .eyebrow { margin-bottom: .2rem; }
.fiche__name { font-size: clamp(1.5rem, 3.2vw, 2.05rem); margin: 0 0 .15rem; color: #fff6dd; overflow-wrap: anywhere; }
.fiche__line { margin: 0 0 .75rem; font-size: 1.04rem; color: var(--muted); }
.fiche__line strong { color: var(--accent); font-weight: 600; }
.fiche__gauges .gauge:last-of-type { margin-bottom: 0; }
.fiche__next { margin: .35rem 0 0; font-size: .8rem; color: var(--faint); text-align: right; }
.fiche__call { flex-wrap: wrap; align-items: center; margin: 0; }
.fiche__call > .icon { margin-top: 0; }
.fiche__call > div { flex: 1 1 14rem; min-width: 0; }
.fiche__call form { margin: 0; flex: none; }
.fiche .notice { margin: 0; }
.fold__body .notice { margin: 0 0 .8rem; }
a.chip { text-decoration: none; transition: border-color .15s, color .15s; }
a.chip:hover { border-color: var(--accent); color: #fff; }
.chip--gils { color: var(--xp); font-weight: 600; font-variant-numeric: tabular-nums; }
.chip--gils .icon { color: var(--xp); }

/* Blocs à dérouler : le bandeau résume le contenu, même replié */
.folds { display: grid; gap: .7rem; }
.folds > * { min-width: 0; }
.folds__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem 1rem; margin: 0; padding: 0 .2rem; }
.fold { padding: 0; }
.fold__head { list-style: none; display: flex; align-items: center; gap: .9rem; padding: .75rem 1.2rem; border-radius: var(--radius); cursor: pointer; user-select: none; transition: background-color .15s; }
.fold__head::-webkit-details-marker { display: none; }
.fold__head:hover { background: rgba(255, 255, 255, .04); }
.fold[open] > .fold__head { border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(180deg, rgba(201, 168, 106, .16), rgba(201, 168, 106, .03)); }
.fold__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--accent); border: 1px solid var(--line-strong); background: radial-gradient(circle at 30% 25%, #3a4558, #171c26 75%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.fold__icon .icon { width: 1.3rem; height: 1.3rem; }
.fold__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.fold__title { margin: 0; font-size: 1.06rem; letter-spacing: .08em; color: var(--gold-bright); }
.fold__info { font-size: .9rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.fold__badges .icon { width: .95em; height: .95em; }
.fold__chevron { flex: none; width: 1.2rem; height: 1.2rem; color: var(--gold); transition: transform .2s; }
.fold[open] > .fold__head .fold__chevron { transform: rotate(180deg); }
.fold__body { padding: 1.2rem 1.3rem 1.3rem; animation: fold-in .22s ease-out; }
.fold__body > :last-child { margin-bottom: 0; }
@keyframes fold-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fold__sub { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.4rem 0 .65rem; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.fold__sub:first-child { margin-top: 0; }
.fold__sub .icon { width: 1.2em; height: 1.2em; }
.fold__sub .badge { text-transform: none; letter-spacing: .04em; }
.fold__lead { margin: 0 0 1.1rem; }

/* Les six caractéristiques sur une seule ligne quand la place le permet (les bulles d'aide suivent la colonne) */
@media (min-width: 901px) {
    .stat-grid--wide { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .stat-grid--wide > :nth-child(6n+1) .hint__bubble, .stat-grid--wide > :nth-child(6n+2) .hint__bubble { left: 0; right: auto; transform: none; }
    .stat-grid--wide > :nth-child(6n+3) .hint__bubble, .stat-grid--wide > :nth-child(6n+4) .hint__bubble { left: 50%; right: auto; transform: translateX(-50%); }
    .stat-grid--wide > :nth-child(6n+5) .hint__bubble, .stat-grid--wide > :nth-child(6n) .hint__bubble { left: auto; right: 0; transform: none; }
}

/* Compétences */
.skills { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: .55rem; }
.skill { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .8rem; border-radius: 8px; border: 1px solid var(--gold-dim); background: linear-gradient(180deg, rgba(201, 168, 106, .1), rgba(0, 0, 0, .25)); }
.skill__icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 8px; color: var(--gold-bright); border: 1px solid var(--line-strong); background: radial-gradient(circle at 30% 25%, #3a4558, #171c26 75%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.skill__icon .icon { width: 1.35rem; height: 1.35rem; }
.skill__main { flex: 1; min-width: 0; }
.skill__name { font: 600 1rem var(--font-title); letter-spacing: .03em; color: #fff6dd; }
.skill__cost { margin-left: .3rem; font: 400 .78rem var(--font-body); letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.skill__effect { font-size: .87rem; color: var(--text); }
.skill__desc { margin: .15rem 0 0; font-size: .87rem; font-style: italic; color: var(--muted); }
.skill__side { flex: none; }
.skill__side .icon { width: .95em; height: .95em; }
/* Pas encore utilisable : niveau à atteindre, ou cristal de job à équiper */
.skill.is-level, .skill.is-crystal { border: 1px dashed var(--line-strong); background: rgba(0, 0, 0, .2); }
.skill.is-level .skill__icon, .skill.is-crystal .skill__icon { color: var(--faint); box-shadow: none; }
.skill.is-level .skill__name, .skill.is-crystal .skill__name { color: #c9c3b6; }
.skill.is-level .skill__effect, .skill.is-crystal .skill__effect { color: var(--muted); }

/* Équipement, inventaire, quêtes et portrait à l'intérieur des blocs */
.fold .slots { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.slot--crystal { border-color: rgba(124, 196, 255, .45); }
.slot--crystal .item__icon { color: var(--blue); }
.slot form { margin: 0; flex: none; }
.items--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 27rem), 1fr)); gap: .5rem; }
.items--grid .item, .items--grid .item:last-child { padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .22); }
.quests-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 27rem), 1fr)); gap: .7rem; align-items: start; }
.quests-grid .quest { margin: 0; }
.quests-grid + .field__help { margin-top: .8rem; }
.portrait { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 0 2.2rem; }
.portrait .fold__sub { margin-top: 0; }
.portrait .prose { font-size: 1.13rem; }

/* ==========================================================================
   Combat : choix de la cible et compétences
   ========================================================================== */
.combat__form { display: contents; }
.foe { position: relative; }
.foe__name { display: block; }
.foe__desc { display: block; }
.foe__cover { position: absolute; inset: -1px; border: 2px solid transparent; border-radius: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.foe__cover:hover { border-color: rgba(241, 222, 176, .5); }
.foe__pick:checked + .foe__cover { border-color: var(--gold-bright); box-shadow: 0 0 20px rgba(241, 222, 176, .22), inset 0 0 26px rgba(241, 222, 176, .07); }
.foe__pick:focus-visible + .foe__cover { outline: 2px solid var(--blue); outline-offset: 3px; }
.foe__aim { display: none; position: absolute; top: -.7rem; left: 50%; translate: -50% 0; align-items: center; gap: .3rem; margin: 0; padding: .1rem .65rem; border-radius: 999px; border: 1px solid #000; white-space: nowrap; font: 700 .68rem/1.5 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #201603; background: linear-gradient(180deg, #f3dc9f, #b98f44); }
.foe__aim .icon { width: 1em; height: 1em; }
.foe__pick:checked ~ .foe__aim { display: inline-flex; }
.combat__tip { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: -.2rem 0 0; font-size: .92rem; color: var(--muted); text-align: center; }
.combat__tip .icon { color: var(--accent); }
.combat__basic { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.combat__basic .btn--primary { flex: 1 1 12rem; }
.combat__heading { display: flex; align-items: center; gap: .45rem; margin: 1.1rem 0 .5rem; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.combat__heading .icon { width: 1.15em; height: 1.15em; }
.combat__options { display: flex; flex-wrap: wrap; gap: .45rem; }
.skill-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: .45rem; }
.skill-btn { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .42rem .6rem; text-align: left; font: inherit; color: var(--text); border-radius: 8px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(62, 70, 86, .75), rgba(28, 33, 43, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .05s; }
.skill-btn:hover:not([disabled]) { border-color: var(--gold-bright); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--glow); }
.skill-btn:active:not([disabled]) { transform: translateY(1px); }
.skill-btn[disabled] { opacity: .45; cursor: not-allowed; }
.skill-btn__icon { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 6px; color: var(--gold-bright); border: 1px solid var(--line); background: rgba(0, 0, 0, .35); }
.skill-btn__icon .icon { width: 1.15rem; height: 1.15rem; }
.skill-btn--area .skill-btn__icon { color: #ffb37a; }
.skill-btn--heal .skill-btn__icon { color: var(--hp); }
.skill-btn--guard .skill-btn__icon { color: var(--blue); }
.skill-btn__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.skill-btn__name { font-weight: 600; color: #fff8e6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-btn__effect { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-btn__cost { flex: none; font-size: .78rem; font-weight: 700; color: var(--mp); white-space: nowrap; }

/* Maîtrise du jeu : listes découpées en sections, actions sans retour */
.table .table__group th { padding-top: 1.2rem; font-size: .84rem; letter-spacing: .1em; color: var(--gold-bright); border-bottom: 1px solid var(--line-strong); }
.table tbody tr.table__group:hover { background: none; }
.table tbody tr.table__group:first-child th { padding-top: .4rem; }
.danger-zone { border-color: #7a4035; }
.danger-zone .window__title { background: linear-gradient(180deg, rgba(226, 112, 92, .18), rgba(226, 112, 92, .03)); }
.danger-zone .window__title .icon { color: #ffb7a8; }

/* ==========================================================================
   Équipement : on choisit un emplacement, ses pièces s'affichent dessous.
   (Sans JavaScript : chaque emplacement est une case à cocher invisible, que le CSS observe.)
   ========================================================================== */
.gear__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .6rem; }
.gear .slot { position: relative; min-height: 3.6rem; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.gear .slot:hover { border-color: var(--gold-dim); background: rgba(255, 255, 255, .04); }
.slot__label, .slot__name, .slot__empty { display: block; }
.slot .bar { display: block; }
.slot__spare { position: absolute; top: -.5rem; right: -.4rem; box-shadow: 0 0 0 1px #000; }
.gear__panel { display: none; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); animation: fold-in .2s ease-out; }
.gear__panel .fold__sub { margin-top: 0; }
#emplacement-weapon:checked ~ .gear__panels [data-slot="weapon"],
#emplacement-head:checked ~ .gear__panels [data-slot="head"],
#emplacement-body:checked ~ .gear__panels [data-slot="body"],
#emplacement-hands:checked ~ .gear__panels [data-slot="hands"],
#emplacement-feet:checked ~ .gear__panels [data-slot="feet"],
#emplacement-accessory:checked ~ .gear__panels [data-slot="accessory"],
#emplacement-crystal:checked ~ .gear__panels [data-slot="crystal"] { display: block; }
#emplacement-weapon:checked ~ .gear__slots [for="emplacement-weapon"],
#emplacement-head:checked ~ .gear__slots [for="emplacement-head"],
#emplacement-body:checked ~ .gear__slots [for="emplacement-body"],
#emplacement-hands:checked ~ .gear__slots [for="emplacement-hands"],
#emplacement-feet:checked ~ .gear__slots [for="emplacement-feet"],
#emplacement-accessory:checked ~ .gear__slots [for="emplacement-accessory"],
#emplacement-crystal:checked ~ .gear__slots [for="emplacement-crystal"] { border-style: solid; border-color: var(--gold-bright); background: linear-gradient(180deg, rgba(201, 168, 106, .2), rgba(201, 168, 106, .04)); box-shadow: var(--glow); }
#emplacement-weapon:focus-visible ~ .gear__slots [for="emplacement-weapon"],
#emplacement-head:focus-visible ~ .gear__slots [for="emplacement-head"],
#emplacement-body:focus-visible ~ .gear__slots [for="emplacement-body"],
#emplacement-hands:focus-visible ~ .gear__slots [for="emplacement-hands"],
#emplacement-feet:focus-visible ~ .gear__slots [for="emplacement-feet"],
#emplacement-accessory:focus-visible ~ .gear__slots [for="emplacement-accessory"],
#emplacement-crystal:focus-visible ~ .gear__slots [for="emplacement-crystal"] { outline: 2px solid var(--blue); outline-offset: 2px; }
.items--grid .item.is-worn { border-color: var(--gold-dim); background: linear-gradient(180deg, rgba(201, 168, 106, .12), rgba(0, 0, 0, .22)); }
.item__actions form { margin: 0; }
.arsenal__slot { display: flex; align-items: center; gap: .4rem; margin: .9rem 0 .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.arsenal__slot .icon { width: 1.15em; height: 1.15em; color: var(--accent); }
.chip--phoenix { color: #ffe2c4; border-color: rgba(255, 170, 90, .5); }
.chip--phoenix .icon { color: #ffb066; }
.chip--danger { color: #ffd2c9; border-color: rgba(226, 112, 92, .6); background: rgba(226, 112, 92, .12); }
.chip--danger .icon { color: var(--danger); }
.badge .icon { width: 1em; height: 1em; }

/* ==========================================================================
   Mes personnages, fantômes
   ========================================================================== */
.roster { display: grid; gap: .7rem; }
.roster__card { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; padding: .9rem 1.1rem; border-radius: 10px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(40, 47, 60, .96), rgba(24, 29, 38, .97)); box-shadow: var(--shadow); }
.roster__card.is-active { border-color: var(--accent); box-shadow: var(--shadow), 0 0 18px var(--tint); }
.roster__card.is-ghost { border-style: dashed; box-shadow: none; background: rgba(20, 22, 28, .7); }
.roster__main { flex: 1; min-width: 12rem; }
.roster__name { margin: 0; font-size: 1.15rem; color: #fff6dd; }
.roster__meta { margin: .1rem 0 0; font-size: .9rem; color: var(--muted); }
.roster__card form { margin: 0; }
.is-ghost .medallion, .is-fallen .medallion, .fiche--ghost .fiche__hero .medallion { filter: grayscale(1) brightness(.85); }
.is-ghost .roster__name, .companion.is-fallen .companion__name { color: #cfcabd; }
.companion.is-fallen { border-style: dashed; background: rgba(20, 22, 28, .6); }
.fiche--ghost .fiche__hero { background: linear-gradient(180deg, rgba(46, 49, 58, .96), rgba(22, 24, 30, .97)); }
.fiche--ghost .fiche__hero::before { background: linear-gradient(90deg, #6e7684, transparent 70%); }
.fiche__epitaph { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-family: var(--font-story); font-size: 1.12rem; line-height: 1.5; color: #d9d4c8; }
.fiche__epitaph .icon { flex: none; margin-top: .2em; color: var(--faint); }
.memorial { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.3rem; margin-bottom: 1.1rem; border-color: #4a4f5c; background: linear-gradient(180deg, rgba(50, 54, 64, .96), rgba(22, 24, 30, .97)); }
.memorial > * { margin-bottom: 0; }
.memorial__icon { flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: #a9adb8; border: 1px solid #5a5f6c; background: rgba(0, 0, 0, .35); }
.memorial__icon .icon { width: 1.8rem; height: 1.8rem; }
.memorial__text { flex: 1; min-width: 14rem; }
.memorial__text h2 { margin: 0 0 .2rem; color: #e6e1d6; }
.memorial__text p { margin: 0; color: var(--muted); }
.member__dead { color: var(--danger); font-weight: 600; }
.with-face + .with-face { margin-top: .55rem; }

/* ==========================================================================
   Combat : effets en cours, attaque spéciale des créatures, queue de phénix
   ========================================================================== */
.statuses { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin: .55rem 0 0; }
.combat__me .statuses { justify-content: flex-start; margin-top: .6rem; }
.status { display: inline-flex; align-items: center; gap: .3rem; padding: .06rem .55rem; border: 1px solid; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; cursor: help; }
.status b { font-weight: 700; opacity: .75; }
.status--good { color: #cdf3d1; border-color: rgba(127, 203, 134, .5); background: rgba(127, 203, 134, .12); }
.status--bad { color: #ffd2c9; border-color: rgba(226, 112, 92, .6); background: rgba(226, 112, 92, .14); }
.foe__ability { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .3rem; margin: .5rem 0 0; font-size: .8rem; color: #ffcf8a; cursor: help; }
.foe__ability .icon { width: 1em; height: 1em; }
.combat__phoenix { display: flex; align-items: flex-start; gap: .5rem; margin: .7rem 0 0; padding: .45rem .7rem; border-radius: 6px; font-size: .86rem; color: #ffe2c4; border: 1px solid rgba(255, 170, 90, .4); background: rgba(255, 170, 90, .08); }
.combat__phoenix .icon { flex: none; margin-top: .15em; color: #ffb066; }
.combat__phoenix.is-none { color: #ffd2c9; border-color: rgba(226, 112, 92, .6); background: rgba(226, 112, 92, .12); }
.combat__phoenix.is-none .icon { color: var(--danger); }
.combat__me .notice { margin: .8rem 0; }
.result--saved { border-color: #ffb066; background: linear-gradient(180deg, rgba(255, 170, 90, .18), rgba(0, 0, 0, .2)); }
.result .notice { max-width: 40rem; margin: .9rem auto 0; text-align: left; }

/* Quand le personnage tombe : l'écran s'assombrit, puis le destin se révèle (plume de phénix, ou fin de l'histoire) */
.fate { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 1.5rem; text-align: center; cursor: pointer; background: #050608; animation: fate-in 1.3s ease-out both; }
@keyframes fate-in { 0% { background: rgba(120, 12, 12, 0); } 30% { background: rgba(110, 10, 10, .78); } 100% { background: #050608; } }
.fate__box { max-width: 34rem; }
.fate__dark { margin: 0; font-family: var(--font-story); font-style: italic; font-size: 1.6rem; color: #b9b3a6; animation: fate-pulse 1.9s ease-in-out both; }
@keyframes fate-pulse { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: .35; } }
.fate__emblem, .fate__title, .fate__text, .fate__hint { display: none; }
.fate.is-revealed .fate__dark { display: none; }
.fate.is-revealed .fate__title, .fate.is-revealed .fate__text, .fate.is-revealed .fate__hint { display: block; animation: fate-reveal .9s ease-out both; }
.fate.is-revealed .fate__emblem { display: grid; animation: fate-reveal .9s ease-out both; }
.fate.is-revealed .fate__text { animation-delay: .25s; }
.fate.is-revealed .fate__hint { animation-delay: 1.2s; }
@keyframes fate-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fate__emblem { place-items: center; width: 7rem; height: 7rem; margin: 0 auto 1.3rem; border-radius: 50%; }
.fate__emblem .icon { width: 3.6rem; height: 3.6rem; stroke-width: 1.2; }
.fate--saved .fate__skull, .fate--dead .fate__feather { display: none; }
.fate--saved.is-revealed { background: radial-gradient(circle at 50% 42%, rgba(255, 150, 60, .38), #0a0705 62%); }
.fate--saved .fate__emblem { color: #ffe6b8; border: 2px solid #ffb066; box-shadow: 0 0 70px rgba(255, 140, 50, .75), inset 0 0 30px rgba(255, 160, 70, .4); }
.fate--saved .fate__feather { filter: drop-shadow(0 0 12px #ff9a3d); animation: feather-rise 1.5s ease-out both; }
@keyframes feather-rise { from { opacity: 0; transform: translateY(26px) rotate(-18deg) scale(.7); } to { opacity: 1; transform: none; } }
.fate--dead .fate__emblem { color: #9a9ca6; border: 2px solid #4a4d57; background: rgba(255, 255, 255, .03); }
.fate__title { margin: 0 0 .6rem; font: 700 clamp(1.5rem, 5vw, 2.3rem) var(--font-title); letter-spacing: .06em; }
.fate--saved .fate__title { color: #ffe1b0; text-shadow: 0 0 24px rgba(255, 150, 60, .7); }
.fate--dead .fate__title { color: #d7d2c6; }
.fate__text { margin: 0 0 1.4rem; font-family: var(--font-story); font-size: 1.25rem; line-height: 1.6; color: #e6e0d2; }
.fate__hint { margin: 0; font-size: .8rem; color: var(--faint); }

/* ==========================================================================
   Retouches : connexion, compagnons, nouvelle aventure, quêtes
   ========================================================================== */
.auth-card form + p { margin-top: 1.5rem; }
.companion__body { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.companion__badges { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.split > .composer { margin-top: 0; }
.quest.is-locked { border-style: dashed; }
.quest.is-locked .quest__title { color: #c9c3b6; }
.quests__tier { margin: 0 0 .9rem; }

/* ==========================================================================
   Visite guidée : le maître de guilde présente la cité au nouvel aventurier
   ========================================================================== */
.tour__head form { margin: 0; }
.tour__stage { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.tour__guide { text-align: center; }
.tour__guide .medallion { margin: 0 auto .8rem; }
.tour__name { margin: 0; font: 600 1.3rem var(--font-title); color: #fff6dd; }
.tour__role { margin: .2rem 0 0; font-size: .9rem; color: var(--muted); }
.tour__steps { list-style: none; display: grid; gap: 1rem; margin: 0; padding: 0; }
.tour__step { position: relative; padding: 1.1rem 1.3rem 1.2rem; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .28); outline: none; }
.tour__step::before { content: ""; position: absolute; top: 2.1rem; left: -.55rem; width: 1rem; height: 1rem; transform: rotate(45deg); border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); background: #171c26; }
.tour.is-js .tour__step { min-height: 14.5rem; animation: fold-in .25s ease-out; }
.tour.is-js .tour__step:not(.is-current) { display: none; }
.tour__label { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font: 600 1.05rem var(--font-title); letter-spacing: .04em; color: var(--gold-bright); }
.tour__label .icon { color: var(--accent); }
.tour__label small { flex: none; margin-left: auto; font: 600 .78rem var(--font-body); letter-spacing: 0; color: var(--faint); white-space: nowrap; }
.tour__text { font-family: var(--font-story); font-size: 1.24rem; line-height: 1.6; color: #efe9dc; }
.tour__text p { margin: 0 0 .7rem; }
.tour__text p:last-child { margin-bottom: 0; }
.tour__hint { display: flex; align-items: flex-start; gap: .5rem; margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
.tour__hint .icon { flex: none; margin-top: .15em; color: var(--accent); }
.tour__hint strong { color: var(--text); }
.tour__reward { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.1rem 0 0; }
.tour__nav { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1rem; }
.tour__nav [hidden] { display: inline-flex !important; visibility: hidden; }
.tour__count { font-size: .85rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.tour__map { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin: 1.1rem 0 0; padding: 0; }
.tour__place { display: flex; flex-direction: column; align-items: center; gap: .45rem; width: 100%; height: 100%; padding: .8rem .4rem; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--faint); font: 600 .84rem var(--font-body); text-align: center; cursor: pointer; transition: color .15s, border-color .15s, background-color .15s, box-shadow .15s; }
.tour__place .icon { width: 1.6rem; height: 1.6rem; }
.tour__place:hover { color: var(--text); border-color: var(--line-strong); }
.tour__place.is-seen { color: var(--text); border-color: var(--line-strong); }
.tour__place.is-seen .icon { color: var(--accent); }
.tour__place.is-current { color: #fff6dd; border-color: var(--gold-bright); background: linear-gradient(180deg, rgba(201, 168, 106, .2), rgba(201, 168, 106, .04)); box-shadow: var(--glow); }
.tour:not(.is-js) .tour__map { display: none; }

/* Maîtrise du jeu → Cités et dialogues */
a.tab { text-decoration: none; }
.original { margin-top: .4rem; font-size: .88rem; color: var(--muted); }
.original summary { cursor: pointer; color: var(--blue); }
.original p { margin: .4rem 0 0; padding: .5rem .7rem; border-left: 2px solid var(--line-strong); background: rgba(0, 0, 0, .2); white-space: pre-line; }
.field label .badge { margin-left: .4rem; vertical-align: middle; }

/* Pages d'information : mentions légales, confidentialité */
.legal { max-width: 50rem; margin: 0 auto; }
.legal h2 { margin: 1.6rem 0 .5rem; font-size: 1.15rem; color: var(--gold-bright); }
.legal h2:first-of-type { margin-top: .4rem; }
.legal p, .legal li { line-height: 1.6; }
.legal ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal li { margin-bottom: .3rem; }
.legal address { font-style: normal; white-space: pre-line; padding: .7rem .9rem; border-left: 2px solid var(--line-strong); background: rgba(0, 0, 0, .2); margin-bottom: 1rem; }
.legal__date { margin-top: 1.6rem; font-size: .85rem; color: var(--faint); }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; }

.footer a { color: var(--muted); }
.footer a:hover { color: var(--text); }
.city-guide { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 1.3rem 0 0; font-size: .92rem; color: var(--muted); }

/* ==========================================================================
   Fiche de personnage : davantage d'air entre les blocs et à l'intérieur
   ========================================================================== */
.fiche { gap: 1.7rem; }
.folds { gap: 1.25rem; }
.fold__head { padding: 1rem 1.4rem; gap: 1.1rem; }
.fold__body { padding: 1.6rem 1.6rem 1.7rem; }
.fold__sub { margin: 2rem 0 .9rem; }
.fold__lead { margin-bottom: 1.4rem; }
.fold__body > .field__help { margin-top: 1.2rem; }
.stat-grid { gap: .9rem; }
.stat { padding: 1rem .4rem .9rem; }
.stat__abbr { margin-bottom: .25rem; }
.stat__value { margin-bottom: .2rem; }
/* La valeur reste au centre de la case : le bonus d'équipement se pose à côté sans la décaler. */
.stat__number { position: relative; display: inline-block; }
.stat__value small { position: absolute; left: 100%; top: .15rem; margin-left: .25rem; vertical-align: baseline; white-space: nowrap; cursor: help; }
.facts { gap: .9rem; }
.fact { padding: .8rem 1rem; }
.skills { gap: .9rem; }
.skill { padding: .9rem 1rem; }
.items--grid { gap: .8rem; }
.items--grid .item, .items--grid .item:last-child { padding: .8rem .9rem; }
.gear__slots { gap: .85rem; }
.gear__panel { margin-top: 1.5rem; padding-top: 1.3rem; }
.arsenal__slot { margin: 1.4rem 0 .6rem; }

/* ==========================================================================
   Aventures : la plume reste à portée de main, collée en bas de l'écran
   ========================================================================== */
.dock { margin-top: 1.2rem; }
.dock.is-enhanced { position: sticky; bottom: .6rem; z-index: 25; }
.dock__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .6rem .7rem .6rem 1rem; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(17, 21, 29, .97); box-shadow: 0 -8px 26px rgba(0, 0, 0, .55), 0 0 0 1px #000; }
.dock.is-turn .dock__bar { border-color: var(--gold-bright); }
.dock__state { display: flex; align-items: center; gap: .55rem; min-width: 0; margin: 0; font-size: .95rem; color: var(--muted); }
.dock__state .icon { flex: none; color: var(--gold); }
.dock.is-turn .dock__state { font-weight: 600; color: #fff6dd; }
.dock__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-left: auto; }
.dock__actions .badge { margin-left: .15rem; }
.dock .icon--up { transform: rotate(180deg); }
.dock.is-enhanced .waiting { display: none; }
.dock.is-enhanced .composer { margin-top: 0; border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.dock.is-enhanced .composer > .window__title { display: none; }
.dock.is-enhanced .composer textarea { min-height: 8rem; height: 30vh; max-height: 44vh; }
.dock.is-writing .dock__bar { border-radius: 12px 12px 0 0; border-bottom-color: var(--line); }
.composer__buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }

/* ==========================================================================
   Maîtrise du jeu : listes rangées en sections, avec filtres
   ========================================================================== */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1rem; padding: 1rem 1.2rem; }
.filters__field { display: flex; flex-direction: column; gap: .25rem; min-width: 10.5rem; flex: 1 1 10.5rem; max-width: 16rem; }
.filters__field label { font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.filters__field select, .filters__field input { width: 100%; }
.filters__field--search { flex: 2 1 14rem; max-width: 22rem; }
.filters__actions { display: flex; align-items: center; gap: .9rem; padding-bottom: .15rem; }
.list-count { margin: 0 0 .6rem; font-size: .9rem; color: var(--muted); }
.table .table__group .badge { margin-left: .4rem; vertical-align: middle; }
.table tbody tr.is-off td { opacity: .55; }

/* ==========================================================================
   Titre du site : mention « Bêta » ; page d'accueil : bouton « Jouer », musique
   ========================================================================== */
/* Une petite étiquette posée de travers à côté du titre. Son texte se règle dans Maîtrise du jeu, Réglages. */
.beta {
    display: inline-block; flex: none;
    padding: .2em .55em .14em .7em;
    font-family: var(--font-title); font-weight: 700; font-size: .58rem; line-height: 1.2; letter-spacing: .17em; text-transform: uppercase; white-space: nowrap;
    color: var(--gold-bright); -webkit-text-fill-color: var(--gold-bright);
    background: linear-gradient(180deg, rgba(70, 56, 30, .94), rgba(36, 29, 16, .94));
    border: 1px solid var(--gold-dim); border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 0 10px rgba(201, 168, 106, .3);
    transform: rotate(-8deg);
}
.brand .beta { align-self: flex-start; margin: .12rem 0 0 -.25rem; }
/* Sur la page d'accueil, elle s'accroche au dernier mot du grand titre sans le décentrer. */
.hero__title-end { white-space: nowrap; }
.beta-anchor { position: relative; display: inline-block; width: 0; height: 0; vertical-align: top; }
.beta--hero { position: absolute; left: .55rem; top: .25rem; font-size: clamp(.66rem, 1.25vw, .9rem); letter-spacing: .2em; filter: none; }

/* Joueur connecté sur la page d'accueil : le bandeau reste en place, comme pour un visiteur */
.landing.is-logged .topbar { top: 0; }
.landing.is-logged .topbar__inner { height: auto; min-height: 3.6rem; padding-top: .55rem; padding-bottom: .55rem; }
.hero__play { min-width: 12.5rem; justify-content: center; }

/* Musique de la page d'accueil : un petit bouton rond, discret, en bas à gauche de l'écran */
.sound { position: fixed; z-index: 35; left: 1rem; bottom: 1rem; }
.sound[hidden] { display: none; }
.sound__button {
    position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%;
    color: var(--muted); background: rgba(13, 17, 26, .78); border: 1px solid var(--line-strong);
    box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    cursor: pointer; opacity: .8; transition: opacity .2s, color .2s, border-color .2s, box-shadow .2s;
}
.sound__button:hover, .sound__button:focus-visible { opacity: 1; color: var(--gold-bright); border-color: var(--gold); outline: none; }
.sound__button:focus-visible { box-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(124, 196, 255, .35); }
.sound__button .icon { display: block; width: 1.25rem; height: 1.25rem; }
.sound__on, .sound.is-playing .sound__off { display: none; }
.sound.is-playing .sound__on { display: block; }
.sound.is-playing .sound__button { color: var(--gold-bright); border-color: var(--gold-dim); box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0, 0, 0, .55), 0 0 12px rgba(201, 168, 106, .28); }
/* Tant que la musique joue, un mince anneau doré s'élargit doucement autour du bouton */
.sound.is-playing .sound__button::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(241, 222, 176, .55); pointer-events: none; animation: sound-ring 3s ease-out infinite; }
@keyframes sound-ring { 0% { opacity: .75; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }

/* Réglages du maître du jeu : choix de la musique, morceau en place et choix d'un fichier */
.music-choice { border: 0; padding: 0; min-width: 0; display: grid; gap: .45rem; }
.music-choice legend { padding: 0; }
.music-choice .check { align-items: flex-start; }
.music-choice .check input { margin-top: .2rem; flex: none; }
.music-choice .check:has(input:checked) { border-color: var(--gold-bright); background: linear-gradient(180deg, rgba(201, 168, 106, .16), rgba(201, 168, 106, .04)); }
.music-choice .check.is-disabled { opacity: .55; cursor: not-allowed; }
.music-choice .check__meta { margin-top: .15rem; }
.music-own { display: flex; align-items: center; gap: .5rem; margin: 1.8rem 0 .8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font: 600 .95rem var(--font-title); letter-spacing: .08em; color: var(--gold-bright); }
#musique { scroll-margin-top: 4.8rem; } /* après un envoi, la page revient sur ce bloc : son titre ne doit pas glisser sous la barre de jeu */
.music-now { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin: 0 0 1.2rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0, 0, 0, .22); }
.music-now__label { flex: 1 1 100%; margin: 0; color: var(--success); font-weight: 600; }
.music-now__label .icon { margin-right: .2rem; }
.music-now__player { flex: 1 1 16rem; max-width: 26rem; height: 2.4rem; }
.music-now form { margin: 0; }
.file-input { display: block; width: 100%; max-width: 30rem; padding: .5rem .6rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: rgba(0, 0, 0, .25); color: var(--text); font: inherit; font-size: .95rem; }
.file-input::file-selector-button { margin-right: .8rem; padding: .35rem .8rem; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel-3); color: var(--gold-bright); font: inherit; font-weight: 600; cursor: pointer; }
.file-input::file-selector-button:hover { border-color: var(--gold); }

/* ==========================================================================
   Adaptation aux petits écrans
   ========================================================================== */
/* Barre de jeu. La place qu'il lui faut dépend du joueur : lien « Maîtrise du jeu », nom de la cité,
   bourse, pastilles… Plutôt que de deviner, app.js mesure la ligne et, si elle déborde, l'allège par
   paliers (attribut data-fit) : 1 = sans le nom du personnage ; 2 = menu sans icônes ; 3 = sans le portrait. */
.gamebar__inner[data-fit="1"] .hud__who, .gamebar__inner[data-fit="2"] .hud__who, .gamebar__inner[data-fit="3"] .hud__who { display: none; }
.gamebar__inner[data-fit="3"] .hud__avatar { display: none; }
.gamebar__inner[data-fit="3"] .hud { padding-left: .7rem; }
@media (min-width: 1040px) {
    .gamebar__inner[data-fit="2"] .nav__link > .icon, .gamebar__inner[data-fit="3"] .nav__link > .icon { display: none; }
    .gamebar__inner[data-fit="2"] .nav__link, .gamebar__inner[data-fit="3"] .nav__link { padding: .5rem .65rem; }
    .gamebar__inner[data-fit="2"] .nav__link.is-active::after, .gamebar__inner[data-fit="3"] .nav__link.is-active::after { left: .65rem; right: .65rem; }
}
/* Le temps que la mesure se fasse (une fraction de seconde au chargement), on part prudemment sans le nom. */
@media (max-width: 1271px) {
    .gamebar__inner:not([data-fit]) .hud__who { display: none; }
}
@media (max-width: 1039px) {
    /* Le menu se replie derrière un bouton « Menu ». */
    .nav-toggle { display: inline-flex; }
    .nav { display: none; position: absolute; z-index: 3; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; padding: .5rem; background: #1a202b; border-bottom: 1px solid var(--line-strong); box-shadow: 0 16px 30px rgba(0, 0, 0, .6); }
    .nav.is-open { display: flex; }
    .nav__link { padding: .75rem .9rem; }
    .nav__link > .icon { display: inline-block; }
    .nav__link .badge { margin-left: auto; }
    .nav__link.is-active::after { display: none; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .split, .creation, .sheet, .adv-layout, .gm, .combat__me { grid-template-columns: minmax(0, 1fr); }
    .summary, .adv-side, .gm__nav { position: static; max-height: none; }
    .city-cards, .cols-3 { grid-template-columns: minmax(0, 1fr); }
    .cols-2 { grid-template-columns: minmax(0, 1fr); }
    .city-banner__emblem { width: 6rem; height: 6rem; opacity: .14; }
    .fiche__hero { grid-template-columns: auto minmax(0, 1fr); }
    .fiche__gauges { grid-column: 1 / -1; }
    .portrait { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
}
@media (max-width: 560px) {
    body { font-size: 1rem; }
    .page { padding: 1rem .7rem 2.5rem; }
    .window { padding: 1.05rem 1rem; }
    .window__title { margin: -1.05rem -1rem 1rem; padding: .65rem 1rem; }
    .topbar__inner, .gamebar__inner { padding-left: .7rem; padding-right: .7rem; }
    .gamebar__inner { gap: .6rem; }
    .menu__button span { display: none; }
    .hud { gap: .55rem; padding-right: .7rem; }
    .hud__bars { width: 5.6rem; }
    .steps, .slots { grid-template-columns: minmax(0, 1fr); }
    .stat-grid, .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .post { grid-template-columns: minmax(0, 1fr); padding: .9rem; }
    .post > .medallion { display: none; }
    .post__body { font-size: 1.14rem; }
    .item { flex-wrap: wrap; }
    .item__actions { width: 100%; justify-content: flex-start; padding-left: 3.4rem; }
    .is-guest .topbar__right .btn--ghost { display: none; }
    .is-guest .brand__name { white-space: normal; line-height: 1.15; font-size: .95rem; } /* le titre passe sur deux lignes à côté du bouton */
    .fiche__hero { grid-template-columns: minmax(0, 1fr); padding: 1.2rem 1rem; text-align: center; }
    .fiche__identity .chips { justify-content: center; }
    .fiche__next { text-align: center; }
    .fold { padding: 0; }
    .fold__head { gap: .65rem; padding: .7rem .8rem; flex-wrap: wrap; }
    .fold__icon { width: 2.1rem; height: 2.1rem; }
    .fold__info { white-space: normal; }
    .fold__badges { order: 5; width: 100%; justify-content: flex-start; padding-left: 2.75rem; }
    .fold__body { padding: 1rem .85rem 1.1rem; }
    .skill { flex-wrap: wrap; }
    .skill__side { width: 100%; padding-left: 3.15rem; }
    .fact dd { font-size: 1.02rem; }
}
@media (max-width: 380px) {
    .nav-toggle__label { display: none; }
    .hud__bars { width: 4.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Visite guidée sur petit écran : le maître de guilde passe au-dessus de sa bulle */
@media (max-width: 760px) {
    .tour__stage { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
    .tour__guide { display: flex; align-items: center; gap: .9rem; text-align: left; }
    .tour__guide .medallion { width: 5.2rem; height: 5.2rem; margin: 0; }
    .tour__step::before { top: -.55rem; left: 2rem; border: 0; border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); }
    .tour.is-js .tour__step { min-height: 0; }
    .tour__text { font-size: 1.14rem; }
    .tour__map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Aventures sur petit écran : la barre reste collée, mais la zone d'écriture ouverte reprend sa place en fin de récit */
@media (max-width: 760px) {
    .dock.is-enhanced { bottom: .3rem; }
    .dock.is-writing { position: static; }
    .dock__bar { padding: .5rem .6rem; }
    .dock__state { flex: 1 1 100%; font-size: .9rem; }
    .dock__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .dock.is-enhanced .composer textarea { height: auto; max-height: none; min-height: 11rem; }
}

/* Petit écran : dans le bandeau, le titre passe sur deux lignes s'il manque de place à côté de la mention ; sur la page d'accueil, le grand bouton « Jouer » suffit */
@media (max-width: 560px) {
    .is-logged .brand__name { white-space: normal; line-height: 1.15; font-size: .95rem; }
    .topbar__play { display: none; }
    .beta--hero { left: .3rem; top: .3rem; }
    .sound { left: .7rem; bottom: .7rem; }
}
/* Très petits téléphones : le grand titre rétrécit un peu pour laisser sa place à la mention */
@media (max-width: 350px) {
    .hero__title { font-size: 2.25rem; }
    .beta--hero { left: .25rem; font-size: .6rem; }
}