/* ============================================================
   FFHysteria — Thème principal v2 (parti pris FF assumé)
   Fonts locales (Cinzel, Spectral, OFL). Aucune dépendance externe.
   ============================================================ */

@font-face {
    font-family: 'Cinzel';
    src: url('../assets/fonts/Cinzel-Regular.ttf') format('truetype');
    font-weight: 500; font-display: swap;
}
@font-face {
    font-family: 'Cinzel';
    src: url('../assets/fonts/Cinzel-Bold.ttf') format('truetype');
    font-weight: 700; font-display: swap;
}
@font-face {
    font-family: 'Spectral';
    src: url('../assets/fonts/Spectral-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Spectral';
    src: url('../assets/fonts/Spectral-Italic.ttf') format('truetype');
    font-weight: 400; font-style: italic; font-display: swap;
}

:root {
    /* Palette CLAIRE v3.1 — look "magazine web moderne" : fond gris clair, cartes blanches, accent bleu, typo sans-serif */
    --bg-deep:        #eef1f4;   /* fond de page : gris clair froid */
    --bg-night:       #e3e8ee;
    --bg-panel:       #ffffff;   /* cartes / panneaux */
    --bg-panel-hi:    #ffffff;
    --bg-panel-lo:    #f5f7f9;

    --gold:           #b1271d;   /* or discret — réservé aux petites étiquettes "catégorie" (saveur FF) */
    --gold-bright:    #dd3f33;
    --gold-soft:      #9b2419;
    --gold-deep:      #6e1611;
    --gold-glow:      0 0 0 1px rgba(177, 39, 29, .25);

    --crystal-blue:   #c0392b;   /* accent / liens : bleu cristal */
    --crystal-purple: #7048b8;
    --crystal-rose:   #c84d7d;
    --crystal-jade:   #168a5f;

    --text:           #232830;   /* encre principale (gris très foncé froid) */
    --text-soft:      #5a626d;
    --text-mute:      #93999f;
    --danger:         #c0392b;
    --success:        #168a4d;

    --border:         rgba(30, 41, 59, .12);
    --border-strong:  rgba(30, 41, 59, .26);

    --shadow-soft:    0 1px 3px rgba(20, 30, 45, .08), 0 4px 12px rgba(20, 30, 45, .05);
    --shadow-deep:    0 10px 34px rgba(20, 30, 45, .14);
    --shadow-gold:    0 0 0 1px rgba(177, 39, 29, .22), 0 6px 20px rgba(20, 30, 45, .1);

    --font-title: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Roboto, Arial, sans-serif;
    --font-body:  -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Roboto, Arial, sans-serif;
    --font-ui:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono:  ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', Menlo, monospace;

    --radius-s: 2px;
    --radius-m: 2px;
    --radius-l: 3px;
    --max-w: 1240px;
}

/* --- Reset doux ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg-deep);
    line-height: 1.65;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* === Fond stellaire et nébuleuse animée === */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    background: var(--bg-deep);
}
/* Thème clair : on désactive l'ancien fond stellaire/nébuleuse + les météores */
body::after { display: none !important; }
.meteor-layer { display: none !important; }
body::after {
    content: '';
    position: fixed;
    inset: -10%;
    z-index: -2;
    pointer-events: none;
    background-image:
        radial-gradient(1.2px 1.2px at 17% 23%, rgba(255,255,255,.85), transparent 50%),
        radial-gradient(1px 1px at 42% 71%,    rgba(255,255,255,.6), transparent 50%),
        radial-gradient(1.4px 1.4px at 73% 35%, rgba(255,235,180,.7), transparent 50%),
        radial-gradient(1px 1px at 88% 88%,    rgba(255,255,255,.55), transparent 50%),
        radial-gradient(1px 1px at 11% 78%,    rgba(180,140,255,.5), transparent 50%),
        radial-gradient(2.5px 2.5px at 55% 12%, rgba(216,54,43,.6), transparent 50%),
        radial-gradient(1px 1px at 30% 50%,    rgba(127,212,255,.5), transparent 50%),
        radial-gradient(1px 1px at 60% 80%,    rgba(255,255,255,.5), transparent 50%),
        radial-gradient(1.4px 1.4px at 80% 18%, rgba(255,255,255,.7), transparent 50%);
    background-size: 100% 100%;
    animation: starshift 180s linear infinite, twinkle 3.5s ease-in-out infinite;
    opacity: .85;
}
@keyframes starshift { from { transform: translateY(0); } to { transform: translateY(-8%); } }
@keyframes twinkle   { 0%, 100% { opacity: .85; } 50% { opacity: .55; } }

/* Couche météores discrets */
.meteor-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.meteor-layer::before, .meteor-layer::after {
    content: '';
    position: absolute;
    width: 200px; height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(255,235,180,.8), transparent);
    transform: rotate(-25deg);
    animation: meteor 12s linear infinite;
    top: -20px;
}
.meteor-layer::after {
    top: 40%;
    animation-delay: 7s;
    animation-duration: 18s;
    width: 280px;
    background: linear-gradient(90deg, transparent, rgba(180,140,255,.6), transparent);
}
@keyframes meteor {
    0%   { transform: translate(-200px, -50px) rotate(-25deg); opacity: 0; }
    8%   { opacity: 1; }
    25%  { opacity: 1; }
    40%  { transform: translate(110vw, 60vh) rotate(-25deg); opacity: 0; }
    100% { opacity: 0; }
}

/* --- Typographie ---------------------------------------- */
h1,h2,h3,h4,h5 {
    font-family: var(--font-title);
    color: var(--gold);
    font-weight: 700;
    letter-spacing: .03em;
    margin: 0 0 .65em;
    line-height: 1.2;
}
h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: .04em; }
h2 {
    font-size: clamp(1.5rem, 3.2vw, 2.2rem);
    position: relative;
    padding-bottom: .4em;
    margin-bottom: 1em;
}
h2::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 80px; height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
}
h2.center::after { left: 50%; transform: translateX(-50%); width: 120px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--gold-soft); }
h4 {
    font-size: 1rem;
    color: var(--crystal-blue);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 700;
    font-family: var(--font-title);
}

p { margin: 0 0 1.1em; }
a { color: var(--crystal-blue); text-decoration: none; transition: color .15s, text-shadow .15s; }
a:hover { color: var(--gold-bright); text-shadow: 0 0 8px rgba(216,54,43,.4); }
strong { color: var(--gold-soft); font-weight: 700; }
em { color: var(--crystal-purple); font-style: italic; }
hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
    margin: 3rem 0;
    position: relative;
}
hr::before {
    content: '◆';
    position: absolute;
    top: -.6em; left: 50%;
    transform: translateX(-50%);
    background: var(--bg-deep);
    color: var(--gold);
    padding: 0 .8em;
    font-size: .8em;
}

ul, ol { padding-left: 1.5em; margin: 0 0 1.2em; }
li { margin: .4em 0; }
ul li::marker { color: var(--gold-soft); }
code {
    font-family: var(--font-mono);
    font-size: .9em;
    background: var(--bg-panel-lo);
    color: var(--gold-soft);
    padding: .15em .4em;
    border-radius: 3px;
    border: 1px solid var(--border);
}

/* --- Container ------------------------------------------ */
.wrap {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.4rem;
}

/* ===== En-tête / barre de navigation — refonte v3.2 (logo centré + nav centrée) ===== */
.site-header { background: #ffffff; }
/* Bandeau logo (défile avec la page) */
.site-header-top {
    background: #ffffff;
    border-bottom: 1px solid rgba(30,41,59,.06);
}
.site-header-top .wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.4rem .9rem;
}
.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}
.brand .crystal-icon { width: 30px; height: 30px; opacity: .9; }
.brand .brand-text {
    display: inline-flex; align-items: baseline; gap: .35rem; line-height: 1;
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: .05em;
    color: var(--text);
    text-transform: uppercase;
}
.brand .brand-text > span { white-space: nowrap; }
.brand em { font-style: normal; color: var(--crystal-blue); }
.brand .brand-sub {
    font-family: var(--font-ui);
    font-size: .62rem;
    letter-spacing: .16em;
    color: var(--text-mute);
    text-transform: uppercase;
    font-weight: 600;
    align-self: center;
    margin-left: .2rem;
    padding-left: .65rem;
    border-left: 1px solid var(--border);
}

/* Barre de menu (collante) */
.site-header-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fbfcfd;
    border-top: 2px solid var(--crystal-blue);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(20,30,45,.06);
}
.site-header-nav .wrap {
    display: flex;
    justify-content: center;
    padding: 0 1.4rem;
}

.nav-toggle {
    display: none;
    position: absolute;
    right: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 1px solid var(--border-strong);
    width: 40px; height: 38px;
    border-radius: var(--radius-s);
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 20px; height: 2px;
    background: var(--text-soft);
    margin: 5px auto;
    transition: transform .25s, opacity .25s;
}

.main-nav {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
}
.main-nav a {
    display: flex;
    align-items: center;
    min-height: 42px;
    color: var(--text-soft);
    padding: 0 1rem;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: var(--font-ui);
    font-weight: 700;
    transition: color .15s, box-shadow .15s, background .15s;
    text-decoration: none;
    position: relative;
}
.main-nav a:hover { color: var(--crystal-blue); background: rgba(192,57,43,.05); }
.main-nav a.active {
    color: var(--crystal-blue);
    box-shadow: inset 0 -3px 0 var(--crystal-blue);
}

.nav-dropdown { position: relative; display: flex; }
.nav-dropdown > a::after { content: ' ▾'; font-size: .7em; opacity: .65; margin-left: .25em; }
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid var(--border-strong);
    border-top: 2px solid var(--crystal-blue);
    border-radius: 0 0 var(--radius-m) var(--radius-m);
    padding: .4rem;
    min-width: 300px;
    display: none;
    box-shadow: var(--shadow-deep);
    max-height: 72vh;
    overflow-y: auto;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .6rem;
    color: var(--text);
    border-radius: var(--radius-s);
    font-size: .85rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
    box-shadow: none;
    min-height: 0;
}
.nav-dropdown-menu a:hover { background: rgba(192,57,43,.08); color: var(--crystal-blue); box-shadow: none; }
.nav-dropdown-menu a small {
    display: block;
    color: var(--text-mute);
    font-size: .7rem;
    margin-top: 1px;
    font-weight: 400;
}
/* vignette du jeu (jaquette) à gauche de l'intitulé — dimensions IDENTIQUES pour toutes */
.nav-game-thumb {
    flex: none;
    width: 46px; height: 30px;
    object-fit: cover; object-position: top center;
    border-radius: 2px;
    border: 1px solid var(--border-strong);
    background: var(--bg-panel-lo);
    display: block;
}
.nav-game-thumb--ph {
    display: flex; align-items: center; justify-content: center;
    background: var(--g, linear-gradient(135deg,#3a1410,#c0392b));
    color: rgba(255,255,255,.92);
    font-family: var(--font-title); font-weight: 800; font-size: .62rem;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    object-fit: initial;
}
.nav-game-txt { display: block; min-width: 0; }
.nav-dropdown-menu a:hover .nav-game-thumb { border-color: var(--crystal-blue); }

/* === Cadre cristal — pseudo-pattern coin ornement === */
.frame-ornate {
    position: relative;
    border: 1px solid var(--border-strong);
    background:
      linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-lo) 100%);
    box-shadow: var(--shadow-gold);
}
.frame-ornate::before, .frame-ornate::after,
.frame-ornate > .corn-tl, .frame-ornate > .corn-tr,
.frame-ornate > .corn-bl, .frame-ornate > .corn-br {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border: 1.5px solid var(--gold);
    pointer-events: none;
}
.frame-ornate::before  { top: -2px;    left: -2px;    border-right: 0; border-bottom: 0; }
.frame-ornate::after   { top: -2px;    right: -2px;   border-left: 0;  border-bottom: 0; }
.frame-ornate > .corn-bl { bottom: -2px; left: -2px;  border-right: 0; border-top: 0; }
.frame-ornate > .corn-br { bottom: -2px; right: -2px; border-left: 0;  border-top: 0; }


/* === Hero === */
.hero {
    padding: 5rem 0 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 10%, rgba(216,54,43,.10), transparent 55%),
        radial-gradient(ellipse at 30% 90%, rgba(180,140,255,.10), transparent 55%);
    z-index: -1;
}
.hero h1 {
    font-size: clamp(2.6rem, 8vw, 5.5rem);
    margin-bottom: .25em;
    background: linear-gradient(180deg, #ffdcd6 0%, var(--gold) 45%, var(--gold-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: .06em;
    text-shadow: 0 0 50px rgba(216,54,43,.18);
    line-height: 1.05;
}
.hero h1 em {
    font-style: italic;
    background: linear-gradient(180deg, #ffdcd6 0%, #b48cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero .tagline {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--text-soft);
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    max-width: 760px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
}
.hero .ornament {
    width: 220px; height: 22px;
    margin: 0 auto 1.5rem;
    background-image:
        linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%),
        radial-gradient(circle, var(--gold) 2px, transparent 2px);
    background-size: 100% 1px, 8px 8px;
    background-position: center center, center center;
    background-repeat: no-repeat;
    position: relative;
}
.hero .ornament::before, .hero .ornament::after {
    content: '◆';
    position: absolute;
    top: 50%; transform: translateY(-50%);
    color: var(--gold);
    font-size: 1.1em;
}
.hero .ornament::before { left: calc(50% - 110px); }
.hero .ornament::after  { left: calc(50% + 95px); }

/* === Game grid === */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.6rem;
    margin: 2.5rem 0 4rem;
}
.game-card {
    position: relative;
    display: block;
    border-radius: var(--radius-l);
    overflow: hidden;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s;
    color: var(--text);
    min-height: 280px;
}
.game-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: var(--radius-l);
    box-shadow: inset 0 0 0 1px rgba(216,54,43,.05);
    transition: box-shadow .3s;
}
.game-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-deep), 0 0 40px rgba(216,54,43,.15);
    color: var(--text);
}
.game-card:hover::before {
    box-shadow: inset 0 0 0 1px rgba(216,54,43,.4), 0 0 0 1px rgba(216,54,43,.4);
}
.game-card .card-art {
    height: 170px;
    position: relative;
    overflow: hidden;
}
.game-card .card-art::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--card-gradient, linear-gradient(135deg, #e9edf2, #f8fafc));
}
/* Quand une vraie cover est présente, le gradient passe en simple voile */
.game-card .card-art.has-cover::before {
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 100%);
    mix-blend-mode: normal;
}
.game-card .card-art::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 30% 35%, rgba(255,255,255,.3), transparent 45%),
        radial-gradient(circle at 70% 75%, rgba(0,0,0,.45), transparent 55%),
        radial-gradient(2px 2px at 22% 60%, rgba(255,255,255,.7), transparent 60%),
        radial-gradient(1.5px 1.5px at 78% 30%, rgba(255,255,255,.6), transparent 60%),
        radial-gradient(1px 1px at 50% 80%, rgba(255,255,255,.5), transparent 60%);
    mix-blend-mode: screen;
    opacity: .8;
}
.game-card .card-roman {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-title);
    font-size: 4rem;
    font-weight: 700;
    color: rgba(255,255,255,.92);
    letter-spacing: .06em;
    text-shadow: 0 4px 22px rgba(0,0,0,.6), 0 0 40px rgba(255,255,255,.3);
    pointer-events: none;
    z-index: 3;
    transition: transform .3s;
}
.game-card:hover .card-roman {
    transform: translate(-50%, -50%) scale(1.08);
}
.game-card .card-art-frame {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255,255,255,.18);
    z-index: 2;
    pointer-events: none;
}
.game-card .card-art-frame::before, .game-card .card-art-frame::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    border: 1.5px solid rgba(255,235,180,.6);
}
.game-card .card-art-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.game-card .card-art-frame::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.game-card .card-body {
    padding: 1.2rem 1.3rem 1.4rem;
    position: relative;
    z-index: 5;
}
.game-card .card-body h3 {
    margin: 0 0 .25em;
    color: var(--gold);
    font-size: 1.2rem;
    font-family: var(--font-title);
}
.game-card .card-body .card-subtitle {
    color: var(--text-mute);
    font-size: .82rem;
    font-style: italic;
    margin-bottom: .7em;
    font-family: var(--font-body);
}
.game-card .card-body p {
    color: var(--text-soft);
    font-size: .92rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.55;
}
.game-card .card-meta {
    margin-top: .9rem;
    font-size: .72rem;
    color: var(--gold-soft);
    letter-spacing: .15em;
    text-transform: uppercase;
    font-family: var(--font-title);
    border-top: 1px solid var(--border);
    padding-top: .7rem;
}

/* === Page jeu === */
.game-hero {
    position: relative;
    padding: 4.5rem 0 2rem;
    text-align: center;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.6rem;
}
.game-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--game-gradient, linear-gradient(180deg, var(--bg-panel), var(--bg-deep)));
    opacity: .5;
    z-index: -1;
}
.game-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.2), transparent 60%),
        radial-gradient(ellipse at 50% 100%, var(--bg-deep) 0%, transparent 60%);
    z-index: -1;
    pointer-events: none;
}
.game-hero .game-title {
    margin: 0 0 .25em;
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    text-shadow: 0 0 40px rgba(0,0,0,.8);
}
.game-hero .game-subtitle {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--gold-bright);
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.game-hero .game-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem .7rem;
    font-size: .78rem;
    color: var(--gold-soft);
    letter-spacing: .14em;
    text-transform: uppercase;
    justify-content: center;
    font-family: var(--font-title);
    margin-bottom: 1.5rem;
}
.game-hero .game-meta span {
    padding: .35rem .8rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-panel-lo);
}

/* ===== Page jeu : layout 2 colonnes (menu de sections à gauche + contenu) ===== */
.game-layout {
    display: flex;
    align-items: flex-start;
    gap: 2.2rem;
    padding-top: 1.8rem;
}
.game-content { flex: 1 1 auto; min-width: 0; }
/* Sidebar de sections (on conserve la classe .tabs pour la compat du JS d'onglets) */
.tabs.game-sidebar {
    flex: 0 0 234px;
    position: sticky;
    top: 52px;
    align-self: flex-start;
    /* 03/09/2026 : la liste debordait en silence — sur FF X, huit onglets etaient
       invisibles (dont Blitzball) sans le moindre indice qu'on pouvait defiler.
       On gagne de la hauteur, on rend l'ascenseur visible et on pose un degrade
       en pied de cadre pour que le debordement se voie. */
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    position: sticky;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-soft);
    scrollbar-width: thin;
}
.game-sidebar .tabs-inner {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    padding: .35rem .4rem .9rem;
    white-space: normal;
}
/* Ascenseur visible : sans lui, rien ne dit que la liste continue. */
.game-sidebar::-webkit-scrollbar { width: 9px; }
.game-sidebar::-webkit-scrollbar-track { background: var(--bg-panel-lo); border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.game-sidebar::-webkit-scrollbar-thumb { background: var(--border-strong, #c3ccd8); border-radius: 5px; border: 2px solid var(--bg-panel-lo); }
.game-sidebar:hover::-webkit-scrollbar-thumb { background: var(--crystal-blue); }
.game-sidebar { scrollbar-width: thin; scrollbar-color: var(--border-strong, #c3ccd8) var(--bg-panel-lo); }
/* Degrade de pied : il s'efface des qu'on atteint le bas (voir js/main.js). */
.game-sidebar { position: relative; }
.game-sidebar-fond {
    position: sticky; bottom: 0; height: 26px; margin-top: -26px; pointer-events: none;
    background: linear-gradient(to top, var(--bg-panel) 15%, rgba(255,255,255,0));
    transition: opacity .18s; opacity: 1;
}
.game-sidebar.est-en-bas .game-sidebar-fond { opacity: 0; }
.game-sidebar-title {
    font-family: var(--font-ui);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 800;
    color: var(--text-mute);
    padding: .55rem .7rem .55rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .35rem;
}
.tab-btn {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .88rem;
    padding: .5rem .7rem;
    border-radius: var(--radius-s);
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
    position: relative;
}
.tab-btn::before {
    content: "";
    flex: none;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--border-strong);
    transition: background .15s, transform .15s;
}
.tab-btn:hover { color: var(--text); background: var(--bg-panel-lo); }
.tab-btn:hover::before { background: var(--crystal-blue); }
.tab-btn.active {
    color: #fff;
    background: var(--crystal-blue);
    border-left-color: transparent;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(192,57,43,.22);
}
.tab-btn.active::before { background: rgba(255,255,255,.9); transform: scale(1.4); }

.tab-panel { display: none; padding: 0 0 1rem; }
.tab-panel.active { display: block; animation: fade-up .35s ease; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
    .game-layout { display: block; padding-top: 1.2rem; }
    .tabs.game-sidebar { position: static; max-height: none; flex: none; margin-bottom: 1.4rem; }
    .game-sidebar .tabs-inner { display: none; }   /* tablette/mobile : on bascule sur le <select> généré en JS */
    .game-sidebar-title { display: none; }
}

/* === Boîtes / panels === */
.panel {
    position: relative;
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-lo) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    padding: 1.6rem 1.7rem;
    margin: 0 0 1.6rem;
    box-shadow: var(--shadow-soft);
}
.panel.bordered-gold {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-gold);
}

/* Callouts (tip, secret, warning) */
.callout {
    position: relative;
    border-left: 3px solid var(--gold);
    background: rgba(216,54,43,.06);
    padding: 1rem 1.2rem 1rem 1.4rem;
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    margin: 1.4rem 0;
}
.callout::before {
    content: '◆';
    position: absolute;
    left: -8px; top: 14px;
    color: var(--gold);
    font-size: .8rem;
    background: var(--bg-deep);
    padding: 2px 4px;
    line-height: 1;
}
.callout.tip       { border-color: var(--crystal-blue); background: rgba(127,212,255,.07); }
.callout.tip::before, .callout.tip strong { color: var(--crystal-blue); }
.callout.secret    { border-color: var(--crystal-purple); background: rgba(180,140,255,.08); }
.callout.secret::before, .callout.secret strong { color: var(--crystal-purple); }
.callout.warning   { border-color: var(--danger); background: rgba(232,90,90,.08); }
.callout.warning::before, .callout.warning strong { color: var(--danger); }
.callout p:last-child { margin-bottom: 0; }
.callout .callout-title {
    display: block;
    font-family: var(--font-title);
    font-size: 1rem;
    color: var(--gold);
    margin-bottom: .35rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}
.callout.tip    .callout-title { color: var(--crystal-blue); }
.callout.secret .callout-title { color: var(--crystal-purple); }
.callout.warning .callout-title { color: var(--danger); }

/* Table des matières (soluces longues) */
.toc {
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-lo) 100%);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-m);
    padding: 1rem 1.4rem;
    margin: 0 0 2rem;
    box-shadow: var(--shadow-soft);
}
.toc summary {
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--gold);
    cursor: pointer;
    list-style: none;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .95rem;
    padding: .35rem 0;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::before {
    content: '▸';
    color: var(--gold-soft);
    margin-right: .5em;
    display: inline-block;
    transition: transform .2s;
}
.toc[open] summary::before { transform: rotate(90deg); }
.toc .toc-count { color: var(--text-mute); font-weight: 400; font-size: .85em; letter-spacing: .04em; text-transform: none; }
.toc-list {
    columns: 2;
    column-gap: 2rem;
    list-style: decimal-leading-zero inside;
    padding: 1rem 0 .2rem;
    margin: 0;
    font-size: .92rem;
}
.toc-list li {
    margin: .25em 0;
    color: var(--gold-deep);
    break-inside: avoid;
}
.toc-list li::marker { color: var(--gold-deep); font-family: var(--font-mono); font-size: .75em; }
.toc-list a { color: var(--text-soft); }
.toc-list a:hover { color: var(--gold); }
@media (max-width: 720px) {
    .toc-list { columns: 1; }
}

/* Galerie d'image dans un chapitre de soluce */
.chapter-gallery {
    margin: 0 0 1.2rem;
    border-radius: var(--radius-m);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}
.chapter-gallery.multi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 4px;
    background: var(--border-strong);
    border: 0;
    padding: 0;
}
.chapter-gallery figure {
    margin: 0;
    background: var(--bg-panel-lo);
    overflow: hidden;
    position: relative;
}
.chapter-gallery img {
    display: block;
    width: 100%;
    /* Même correctif que `.chapter-img` : `height: 100%` sur un parent sans hauteur déclarée vaut
       `auto`, et `max-height` rétrécissait donc la largeur au lieu de recadrer. */
    height: 320px;
    object-fit: cover;
    transition: transform .35s;
}
.chapter-gallery.multi img { height: 200px; }
@media (max-width: 560px) {
    .chapter-gallery img { height: 220px; }
    .chapter-gallery.multi img { height: 160px; }
}
.chapter-gallery figure:hover img { transform: scale(1.03); }

.chapter-intro {
    font-style: normal;
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1.7;
    border-left: 3px solid var(--crystal-blue);
    background: var(--bg-panel-lo);
    padding: .9rem 1.1rem;
    margin-bottom: 1.6rem;
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.chapter-back {
    margin: 1rem 0 0;
    text-align: right;
    font-size: .8rem;
}
.chapter-back a { color: var(--text-mute); letter-spacing: .05em; }
.chapter-back a:hover { color: var(--gold-soft); }

/* Images intercalées dans le flux du chapitre */
.chapter-img {
    margin: 1.4rem 0;
    border-radius: var(--radius-m);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    background: var(--bg-panel-lo);
}
/* ⚑ HAUTEUR FIXE, PAS PLAFONNÉE — corrigé le 15/09/2026.
   Avant : `height: auto; max-height: 380px`. Quand la hauteur naturelle dépassait le plafond, le
   navigateur préservait le ratio en RÉTRÉCISSANT LA LARGEUR : une capture 960×479 s'affichait en
   762×380 dans un cadre de 800 px, laissant 38 px de vide ; une 478×223 restait à sa taille
   native, 322 px de vide. La feuille disait `width: 100%` et paraissait donc juste — seule la
   mesure au navigateur montrait le trou.
   Hauteur fixe : la boîte impose ses deux dimensions, et `object-fit: cover` recadre enfin en haut
   et en bas au lieu de laisser l'image flotter dans son cadre. */
.chapter-img img { display: block; width: 100%; height: 380px; object-fit: cover; object-position: center center; }
/* Les cartes gardent `contain` : `map-route-mihen.jpg` fait 1235×3200, la rogner l'amputerait. */
.chapter-img.is-map img { height: auto; max-height: none; object-fit: contain; }
/* Les images flottantes font ~360 px de large : 380 px de haut les rendrait presque carrées. */
.chapter-img.align-left img,
.chapter-img.align-right img { height: 200px; }
@media (max-width: 560px) {
    .chapter-img img { height: 220px; }
    .chapter-img.align-left img,
    .chapter-img.align-right img { height: 150px; }
}
/* Legendes d'image — refondues le 24/08/2026.
   Avant : police de TITRE avec letter-spacing elargi et un border-top net. Convenable pour trois
   mots, illisible pour une phrase de deux lignes. Et les legendes des images en PAIRE n'avaient
   aucun style du tout (0 occurrence dans cette feuille) alors que 6 270 venaient d'etre activees.
   Une seule regle desormais, pour les deux cas. */
.chapter-img figcaption,
.chapter-pair figcaption,
.chapter-gallery figcaption {
    padding: .6rem .85rem .7rem;
    font-family: var(--font-body);
    font-size: .82rem;
    line-height: 1.5;
    color: var(--text-soft);
    letter-spacing: 0;
    text-align: left;
    /* un degrade discret depuis le bas de l'image, plutot qu'un trait qui coupe */
    background: linear-gradient(to bottom, transparent, var(--bg-panel-lo) 55%);
    border-top: none;
}
/* Le premier mot porte souvent le nom du sujet : on lui donne un peu de presence sans crier. */
.chapter-img figcaption strong,
.chapter-pair figcaption strong,
.chapter-gallery figcaption strong { color: var(--text); font-weight: 600; }

/* Les images en paire sont plus petites : legende un cran plus compacte. */
.chapter-pair figcaption { padding: .5rem .7rem .6rem; font-size: .78rem; line-height: 1.45; }

@media (max-width: 560px) {
    .chapter-img figcaption,
    .chapter-pair figcaption,
    .chapter-gallery figcaption { font-size: .8rem; padding: .55rem .75rem .65rem; }
}
.chapter-img.align-full { /* 100% width */ }
.chapter-img.align-left {
    float: left;
    width: 45%;
    margin: .4rem 1.4rem 1rem 0;
    max-width: 360px;
}
.chapter-img.align-right {
    float: right;
    width: 45%;
    margin: .4rem 0 1rem 1.4rem;
    max-width: 360px;
}

/* Paire d'images côte à côte façon FFFury */
.chapter-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 1.4rem 0;
}
.chapter-pair figure {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--bg-panel-lo);
    box-shadow: var(--shadow-soft);
}
.chapter-pair img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform .3s;
}
.chapter-pair figure:hover img { transform: scale(1.04); }
@media (max-width: 540px) {
    .chapter-pair { grid-template-columns: 1fr; }
    .chapter-pair img { height: 220px; }
}

/* === Boss-card v2 : détails dépliables type FFFury === */
.boss-card {
    border: 1px solid var(--border-strong);
    border-left: 4px solid var(--danger);
    background: linear-gradient(180deg, rgba(232,90,90,.06), rgba(232,90,90,.02));
    border-radius: var(--radius-m);
    margin: 1.4rem 0;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.boss-card[open] {
    box-shadow: var(--shadow-deep), 0 0 18px rgba(232,90,90,.18);
}

/* Summary cliquable */
.boss-card > .boss-name {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.2rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .15s;
}
.boss-card > .boss-name::-webkit-details-marker { display: none; }
.boss-card > .boss-name:hover { background: rgba(232,90,90,.08); }

.boss-name-text {
    font-family: var(--font-title);
    font-size: 1.15rem;
    color: var(--danger);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    flex: 1;
}
.boss-tag {
    color: var(--gold-soft);
    font-size: .72em;
    letter-spacing: .18em;
    margin-left: .35em;
    font-weight: 500;
}
.boss-loc {
    font-family: var(--font-title);
    font-size: .75rem;
    color: var(--gold-soft);
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: .25em .7em;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-panel-lo);
}
.boss-toggle {
    color: var(--gold);
    font-size: 1rem;
    transition: transform .25s;
}
.boss-card[open] .boss-toggle { transform: rotate(180deg); }

/* Body */
.boss-body {
    padding: 1.1rem 1.3rem 1.3rem;
    border-top: 1px solid var(--border);
    background: var(--bg-panel-lo);
}

.boss-img {
    margin: 0 0 1.2rem;
    border-radius: var(--radius-s);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-deep);
    text-align: center;
}
/* Revenu en arrière le 15/09/2026 : voir le bloc « REMPLIR LE CADRE » en fin de feuille.
   Un portrait de créature de 99×127 px n'est pas une capture de scène. */
.boss-img img { display: block; max-width: 100%; height: auto; max-height: 280px; object-fit: contain; margin: 0 auto; }
/* Carte de zone (plan détaillé, ex: maps annotées des zones FFX) — pas de crop, cliquable */
.boss-map { margin: 0 0 1.2rem; }
.boss-map img { max-height: none; object-fit: contain; cursor: zoom-in; transition: filter .15s; }
.boss-map img:hover { filter: brightness(1.07); }
.boss-map figcaption { font-size: .72rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: .12em; text-align: center; padding: .4rem 0 .2rem; }

.boss-section-title {
    font-family: var(--font-title);
    font-size: .82rem;
    color: var(--gold-soft);
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 1.1rem 0 .5rem;
    padding-bottom: .3em;
    border-bottom: 1px solid var(--border);
}

/* Grille de cellules clé/valeur (stats, élémentaires, statuts) */
.boss-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    overflow: hidden;
}
.boss-grid--5 { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.bg-cell {
    background: var(--bg-deep);
    padding: .5rem .7rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-height: 50px;
}
.bg-key {
    font-family: var(--font-title);
    font-size: .7rem;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.bg-val {
    color: var(--gold);
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.3;
}
.bg-cell.bg-immune { background: rgba(110,110,160,.15); }
.bg-cell.bg-immune .bg-val { color: var(--text-mute); }
.bg-cell.bg-weak   { background: rgba(232,90,90,.18); }
.bg-cell.bg-weak   .bg-val { color: var(--danger); }
.bg-cell.bg-absorb { background: rgba(94,229,164,.15); }
.bg-cell.bg-absorb .bg-val { color: var(--success); }

/* Cellules d'acquisition (GFs FF8 : missable / disc / lieu / méthode) */
.boss-grid--acq { margin-bottom: .8rem; }
.bg-cell.bg-miss { background: rgba(232,160,40,.20); border-left: 3px solid #e8a028; }
.bg-cell.bg-miss .bg-val { color: #f0b040; font-weight: 600; }
.bg-cell--wide  { grid-column: 1 / -1; }
.bg-cell--wide .bg-val { font-size: .98rem; }

/* Tableau (récompenses, attaques) */
.boss-table {
    width: 100%;
    border-collapse: collapse;
    margin: .5rem 0 .8rem;
    font-size: .9rem;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    overflow: hidden;
}
.boss-table th, .boss-table td {
    padding: .55rem .8rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.boss-table th {
    font-family: var(--font-title);
    font-size: .72rem;
    color: var(--gold-soft);
    text-transform: uppercase;
    letter-spacing: .1em;
    background: rgba(216,54,43,.05);
    width: 30%;
}
.boss-table.boss-attacks th { width: auto; }
.boss-table tr:last-child th, .boss-table tr:last-child td { border-bottom: 0; }
.boss-table strong { color: var(--gold); }

.boss-remark {
    margin: 1rem 0 .6rem;
    padding: .7rem .9rem;
    background: rgba(180,140,255,.06);
    border-left: 3px solid var(--crystal-purple);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    color: var(--text-soft);
    font-style: italic;
}
.boss-strat { color: var(--text); margin-top: .6em; line-height: 1.6; }

/* Prose orpheline remise au jour le 19/08/2026 : obtention / effet / gestalt /
   competences sur les fiches, notes sur les cartes « a ne pas manquer ». */
.boss-prose { margin: .3rem 0 .6rem; display: grid; gap: .55rem; }
.boss-prose-item {
    padding: .6rem .8rem;
    background: rgba(255,255,255,.035);
    border-left: 3px solid var(--gold, #d9b45a);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    color: var(--text-soft);
    line-height: 1.6;
}
.boss-prose-item p:last-child { margin-bottom: 0; }
.boss-prose-key {
    display: inline-block;
    margin-right: .45em;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold, #d9b45a);
    font-weight: 700;
}
.albhed-line.albhed-notes .albhed-text { color: var(--text-soft); }

.boss-strat p:last-child { margin-bottom: 0; }

@media (max-width: 540px) {
    .boss-card > .boss-name { padding: .7rem .9rem; flex-wrap: wrap; }
    .boss-name-text { font-size: 1rem; }
    .boss-loc { font-size: .68rem; }
    .boss-grid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); }
    .boss-table { font-size: .82rem; }
    .boss-table th, .boss-table td { padding: .45rem .5rem; }
}
.chapter h3 + .chapter-img { margin-top: .3rem; }
.chapter ul + .chapter-img,
.chapter p + .chapter-img,
.chapter .callout + .chapter-img { margin-top: 1rem; }
/* Empêche un float orphelin de déborder sur le retour-haut */
.chapter::after { content: ''; display: block; clear: both; }
.chapter-h4 {
    margin-top: 1.6rem;
    margin-bottom: .6rem;
    color: var(--gold-soft);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-family: var(--font-title);
    border-bottom: 1px dashed var(--border);
    padding-bottom: .3em;
}

@media (max-width: 720px) {
    .chapter-img.align-left, .chapter-img.align-right {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 1rem 0;
    }
}

/* Grille de chapitres dans le tab Soluce / Défis */
.chap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .8rem;
    margin: 1rem 0 2rem;
}
.chap-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.1rem;
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-lo) 100%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-m);
    color: var(--text-soft);
    text-decoration: none;
    transition: all .2s;
    box-shadow: var(--shadow-soft);
}
.chap-card:hover {
    color: var(--gold-bright);
    border-color: var(--border-strong);
    border-left-color: var(--gold-bright);
    box-shadow: var(--shadow-deep), 0 0 22px rgba(216,54,43,.18);
    transform: translateX(2px);
}
.chap-card--side { border-left-color: var(--crystal-purple); }
.chap-card--side:hover { border-left-color: var(--crystal-rose); }
.chap-card-num {
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--gold);
    background: var(--bg-deep);
    border: 1px solid var(--gold);
    border-radius: 4px;
    padding: .2em .5em;
    min-width: 2.4em;
    text-align: center;
    font-size: .8rem;
    flex-shrink: 0;
    letter-spacing: .04em;
}
.chap-card--side .chap-card-num {
    border-color: var(--crystal-purple);
    color: var(--crystal-purple);
}
/* Vignette de carte de chapitre (11/09/2026) : chaque carte porte la PREMIÈRE image de
   son propre chapitre — règle d'or « il ne doit manquer aucune image ». */
.chap-card-thumb {
    flex-shrink: 0; width: 72px; height: 48px; border-radius: 4px; overflow: hidden;
    border: 1px solid var(--border); background: var(--bg-deep); line-height: 0;
}
.chap-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chap-card:hover .chap-card-thumb { border-color: var(--gold); }
@media (max-width: 560px) { .chap-card-thumb { width: 56px; height: 38px; } }
/* Pastille de disque (FF VIII, FF IX) : l'information existe, elle ne doit simplement
   pas s'écrire en toutes lettres au milieu du titre. 11/09/2026. */
.chap-card-cd {
    display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    padding: .1em .45em; margin-right: .35em; vertical-align: .08em;
    border: 1px solid var(--border-strong); border-radius: 3px;
    color: var(--text-mute, #7a8290); background: var(--bg-deep);
}
.chap-card-title {
    flex: 1;
    font-size: .96rem;
    line-height: 1.4;
}
.chap-card-arrow {
    color: var(--gold-deep);
    font-size: 1.2em;
    transition: transform .2s, color .2s;
    flex-shrink: 0;
}
.chap-card:hover .chap-card-arrow {
    color: var(--gold);
    transform: translateX(4px);
}

/* === Page chapitre : layout 2 colonnes avec sommaire collant === */
.chapter-layout {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2.4rem;
    padding-top: 1.5rem;
}
.chapter-main {
    flex: 0 1 800px;
    min-width: 0;
    max-width: 800px;
    font-size: 1.02rem;
}
/* Lisibilité du texte de soluce : colonne pas trop large + rythme typo soigné */
.chapter-main > p,
.chapter-main .chapter p,
.chapter-main .chapter > p { color: var(--text); line-height: 1.78; margin: 0 0 1.1em; font-size: 1.02rem !important; }
.chapter-main h3, .chapter-main .chapter-sub { margin-top: 1.8em; }
.chapter-main .chapter-img, .chapter-main .chapter-pair, .chapter-main .chapter-gallery { margin: 1.4rem 0; }
.chapter-main .boss-card { margin: 1.6rem 0; }
.chapter-main .callout { margin: 1.4rem 0; }
.chapter-toc {
    flex: 0 0 270px;
    width: 270px;
    min-width: 0;
    max-width: 270px;
    position: sticky;
    top: 50px;
    align-self: flex-start;
    max-height: calc(100vh - 70px);
    display: flex;
}
.chapter-toc-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-lo) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.chapter-toc-head {
    padding: .8rem 1rem .7rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.chapter-toc-title {
    font-family: var(--font-title);
    color: var(--gold);
    font-size: .98rem;
    letter-spacing: .03em;
}
.chapter-toc-count {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-mute);
}
.chapter-toc-switch {
    display: flex;
    border-bottom: 1px solid var(--border);
}
.chapter-toc-switch a {
    flex: 1;
    text-align: center;
    padding: .5rem .3rem;
    font-family: var(--font-title);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-mute);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s, background .2s;
}
.chapter-toc-switch a:hover { color: var(--text); }
.chapter-toc-switch a.is-active {
    color: var(--gold);
    border-bottom-color: var(--gold-soft);
    background: rgba(216, 54, 43, .05);
}
.chapter-toc-list {
    list-style: none;
    margin: 0;
    padding: .3rem;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.chapter-toc-list::-webkit-scrollbar { width: 8px; }
.chapter-toc-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.chapter-toc-list li { margin: 1px 0; }
.chapter-toc-list a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .42rem .3rem .34rem;
    border-radius: var(--radius-s);
    border-left: 2px solid transparent;
    color: var(--text-soft);
    text-decoration: none;
    font-size: .82rem;
    line-height: 1.25;
    transition: background .15s, color .15s, border-color .15s;
}
.chapter-toc-list .ct-num {
    flex: none;
    width: 1.65rem;
    text-align: center;
    font-family: var(--font-title);
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-mute);
    background: var(--bg-panel-lo);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: .14rem 0;
}
.chapter-toc-list .ct-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chapter-toc-list a:hover {
    background: rgba(216, 54, 43, .06);
    color: var(--text);
}
.chapter-toc-list a:hover .ct-num { color: var(--text-soft); border-color: var(--border-strong); }
.chapter-toc-list li.is-current a {
    background: rgba(216, 54, 43, .14);
    border-left-color: var(--gold-soft);
    color: var(--gold);
}
.chapter-toc-list li.is-current .ct-num {
    color: #fff;
    background: var(--gold-soft);
    border-color: var(--gold-soft);
}
.chapter-toc-list li.is-current .ct-label { font-weight: 600; }

@media (max-width: 1024px) {
    .chapter-layout { display: block; padding-top: 1.5rem; }
    .chapter-toc { display: none; }
}

/* Navigation préc / suiv en bas de chaque chapitre */
.chap-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .8rem;
    margin: 3rem 0 1rem;
    align-items: stretch;
}
.chap-nav-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 1.2rem;
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-lo) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    color: var(--text-soft);
    text-decoration: none;
    transition: all .2s;
    box-shadow: var(--shadow-soft);
    min-height: 70px;
}
.chap-nav-link:hover {
    color: var(--gold);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-deep), 0 0 18px rgba(216,54,43,.15);
}
.chap-nav-link.next { text-align: right; align-items: flex-end; }
.chap-nav-link.toc {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    padding: 0 1.2rem;
}
.chap-nav-link.disabled {
    opacity: .55;
    background: var(--bg-deep);
}
.chap-nav-dir {
    font-family: var(--font-title);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gold-soft);
    margin-bottom: .25em;
}
.chap-nav-link:hover .chap-nav-dir { color: var(--gold-bright); }
.chap-nav-title {
    font-size: .94rem;
    line-height: 1.35;
    color: inherit;
}
/* Navigation chapitres — tablette */
@media (max-width: 860px) {
    .chap-nav-title { font-size: .86rem; }
}

/* Navigation chapitres — mobile */
@media (max-width: 600px) {
    .chap-nav {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: .4rem;
        margin: 2rem 0 1rem;
    }
    /* TOC en premier (ligne du haut, pleine largeur) */
    .chap-nav-link.prev { grid-column: 1; grid-row: 2; }
    .chap-nav-link.toc  { grid-column: 1 / -1; grid-row: 1; min-height: 40px; padding: .5rem 1rem; }
    .chap-nav-link.next { grid-column: 2; grid-row: 2; }

    .chap-nav-link {
        min-height: 58px;
        padding: .6rem .8rem;
    }
    .chap-nav-link.next { align-items: flex-end; }
    .chap-nav-dir {
        font-size: .62rem;
        margin-bottom: .12em;
    }
    .chap-nav-title {
        font-size: .78rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
    }
}

/* Compensation scroll-margin pour les ancres internes
   (le sticky header + tabs mangent ~120px en haut) */
.chapter, .tab-panel,
.tip-item, .callout[id], .fiche[id] {
    scroll-margin-top: 130px;
}

/* === Bestiaire en grille de vignettes === */
.bestiary-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.4rem;
}
.bestiary-filter {
    background: linear-gradient(180deg, var(--bg-panel-hi), var(--bg-panel));
    border: 1px solid var(--border);
    color: var(--text-soft);
    font-family: var(--font-title);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .82rem;
    padding: .55rem 1.1rem;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: all .15s;
}
.bestiary-filter:hover { color: var(--gold); border-color: var(--border-strong); }
.bestiary-filter.active {
    color: var(--gold-bright);
    border-color: var(--gold);
    background: linear-gradient(180deg, rgba(216,54,43,.18), rgba(216,54,43,.06));
    box-shadow: 0 0 12px rgba(216,54,43,.25);
}

.bestiary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 14px;
}
.bestiary-cell {
    background: var(--bg-panel-lo);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    overflow: hidden;
    cursor: pointer;
    transition: all .2s;
    position: relative;
}
.bestiary-cell:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-soft), 0 0 14px rgba(216,54,43,.15);
}
.bestiary-cell.open {
    grid-column: 1 / -1;
    cursor: auto;
}
.bestiary-cell .best-thumb {
    height: 130px;
    background-size: cover;
    background-position: center top;
    background-color: var(--bg-deep);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.bestiary-cell .best-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(8,13,26,.7) 100%);
}
.bestiary-cell .best-thumb-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-title);
    font-size: 2.5rem;
    color: var(--text-mute);
    opacity: .4;
}
.bestiary-cell .best-thumb-name {
    padding: .6rem .8rem .15rem;
    color: var(--gold);
    font-family: var(--font-title);
    font-size: .95rem;
    line-height: 1.2;
}
.bestiary-cell .best-thumb-where {
    padding: 0 .8rem .7rem;
    color: var(--text-mute);
    font-size: .75rem;
    letter-spacing: .04em;
    line-height: 1.3;
    min-height: 1.7em;
}
.bestiary-cell.open .best-thumb,
.bestiary-cell.open .best-thumb-name,
.bestiary-cell.open .best-thumb-where {
    display: none;
}
.bestiary-cell .best-detail { display: none; padding: 0; }
.bestiary-cell.open .best-detail {
    display: block;
    padding: .5rem;
}
/* Bouton fermer dans le detail ouvert */


.bestiary-cell.open .best-detail .boss-card {
    margin: 0;
}
.bestiary-cell.hidden { display: none; }
@media (max-width: 480px) {
    .bestiary-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Astuces : item structuré */
.tip-item {
    padding: .9rem 0;
    border-bottom: 1px dashed var(--border);
}
.tip-item:last-child { border-bottom: 0; }
.tip-item .tip-title {
    margin: 0 0 .35em;
    color: var(--gold);
    font-family: var(--font-title);
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: 0;
}
.tip-item .tip-body { color: var(--text-soft); line-height: 1.65; }
.tip-item .tip-body p:last-child { margin-bottom: 0; }

/* Astuces & secrets avec vignette thématique */
.tip-item.has-img,
.callout.secret.has-img {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.tip-img,
.secret-img {
    flex: 0 0 110px;
    width: 110px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-s, 4px);
    border: 1px solid var(--border);
    background: var(--bg-deep);
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.tip-content,
.secret-content { flex: 1 1 auto; min-width: 0; }
.callout.secret.has-img .secret-content > p:last-child { margin-bottom: 0; }
@media (max-width: 540px) {
    .tip-item.has-img,
    .callout.secret.has-img {
        flex-direction: column;
    }
    .tip-img,
    .secret-img {
        flex: 0 0 auto;
        width: 100%;
        height: 140px;
    }
}

/* Soluce — chapitres numérotés en romain */
.walkthrough { counter-reset: chapter; }
.chapter {
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-lo) 100%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-m);
    padding: 1.5rem 1.8rem 1.6rem;
    margin: 0 0 1.4rem;
    position: relative;
    box-shadow: var(--shadow-soft);
}
.chapter h3 {
    counter-increment: chapter;
    margin: 0 0 .8em;
    color: var(--gold);
    display: flex;
    align-items: baseline;
    gap: .8rem;
    padding-bottom: .5em;
    border-bottom: 1px dashed var(--border);
    font-size: 1.3rem;
}
.chapter h3::before {
    content: counter(chapter, upper-roman);
    font-family: var(--font-title);
    font-weight: 700;
    font-size: .85em;
    color: var(--gold);
    background: var(--bg-deep);
    border: 1px solid var(--gold);
    padding: .15em .5em;
    border-radius: 4px;
    min-width: 2.4em;
    text-align: center;
    letter-spacing: .05em;
    box-shadow: 0 0 12px rgba(216,54,43,.2);
}
.chapter p { color: var(--text-soft); }
.chapter ul { margin-bottom: .5em; }

/* Fiches (perso, monstre) */
.fiche-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.1rem;
}
.fiche {
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-lo) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    padding: 1.1rem 1.2rem;
    transition: border-color .2s, transform .2s;
}
.fiche:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.fiche h4 {
    margin: 0 0 .35em;
    color: var(--gold);
    font-family: var(--font-title);
    font-size: 1.1rem;
    text-transform: none;
    letter-spacing: .02em;
}
.fiche .role {
    color: var(--crystal-blue);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-bottom: .6em;
    display: block;
    font-family: var(--font-title);
}
.fiche p { color: var(--text-soft); font-size: .92rem; margin: 0; line-height: 1.55; }

/* Carte personnage / boss avec photo */
.fiche.perso-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.fiche.perso-card .perso-photo {
    width: 100%;
    aspect-ratio: 1.1 / 1;
    background-size: cover;
    background-position: center top;
    background-color: var(--bg-panel-lo);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.fiche.perso-card .perso-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(8,13,26,.7) 100%);
}
.fiche.perso-card .perso-body { padding: 1rem 1.15rem 1.1rem; }
.fiche.perso-card h4 { margin-top: 0; }

/* Carte perso avec galerie d'images cliquable */
.fiche.perso-card.has-gallery .perso-photo { cursor: zoom-in; transition: filter .2s; }
.fiche.perso-card.has-gallery .perso-photo:hover { filter: brightness(1.1); }
.perso-gal-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .32em;
    padding: .22em .5em .22em .42em;
    background: rgba(8, 13, 26, .8);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    font-family: var(--font-title);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    color: var(--gold);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    pointer-events: none;
}
.perso-gal-badge svg { display: block; flex: none; }

/* Tableau */
.table-recap {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: .94rem;
    overflow-x: auto;
    display: block;
}
.table-recap thead {
    background: linear-gradient(180deg, rgba(216,54,43,.12), rgba(216,54,43,.04));
}
.table-recap th, .table-recap td {
    text-align: left;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--border);
}
.table-recap th {
    color: var(--gold-soft);
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem;
}
.table-recap tr:hover td { background: rgba(216,54,43,.04); }

/* Breadcrumbs */
.crumbs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem .15rem;
    font-size: .72rem;
    color: var(--text-mute);
    margin: 1rem 0 .8rem;
    letter-spacing: .06em;
    font-family: var(--font-ui);
    text-transform: uppercase;
    font-weight: 700;
    padding: .34rem .6rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
}
.crumbs a {
    color: var(--crystal-blue);
    text-decoration: none;
    padding: .12rem .3rem;
    border-radius: var(--radius-s);
    transition: background .15s, color .15s;
}
.crumbs a:hover { color: var(--crystal-blue); background: rgba(192,57,43,.1); }
.crumbs span:not(.sep) { color: var(--text-soft); padding: .12rem .3rem; }
.crumbs .sep { color: var(--text-mute); margin: 0; opacity: .6; }

/* Boutons */
.btn {
    display: inline-block;
    background: linear-gradient(180deg, var(--bg-panel-hi), var(--bg-panel));
    color: var(--gold);
    border: 1px solid var(--border-strong);
    padding: .75rem 1.5rem;
    border-radius: var(--radius-s);
    font-family: var(--font-title);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s;
    box-shadow: 0 2px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
    position: relative;
    overflow: hidden;
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(216,54,43,.18) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .55s;
}
.btn:hover {
    color: var(--gold-bright);
    border-color: var(--gold);
    box-shadow: 0 0 24px rgba(216,54,43,.35), 0 2px 12px rgba(0,0,0,.4);
}
.btn:hover::before { transform: translateX(100%); }

/* Footer */
.site-footer {
    margin-top: 5rem;
    padding: 2.6rem 0 2rem;
    border-top: 2px solid #d8362b;
    text-align: center;
    color: var(--text-mute);
    font-size: .87rem;
    background: linear-gradient(180deg, transparent, rgba(216,54,43,.045));
    position: relative;
}
.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 200px; height: 2px;
    background: linear-gradient(90deg, transparent, #d8362b, transparent);
}
.site-footer .footer-crystal {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    opacity: 1;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.18));
    animation: none;
}
.site-footer p { margin: .35em 0; line-height: 1.7; }
.site-footer p strong { color: var(--text); font-family: var(--font-title); letter-spacing: .02em; }
.site-footer .credits { font-size: .76rem; color: var(--text-mute); margin-top: 1.3rem; }
.site-footer a { color: var(--crystal-blue); }

/* Galerie d'images */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.gallery figure {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--bg-panel-lo);
    transition: transform .25s, border-color .25s;
}
.gallery figure:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.gallery img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: var(--bg-panel-lo);
}
.gallery figcaption {
    padding: .55rem .8rem;
    font-size: .78rem;
    color: var(--text-mute);
    border-top: 1px solid var(--border);
    font-family: var(--font-title);
    letter-spacing: .03em;
}

/* Inputs (admin) */
.input-text {
    width: 100%;
    padding: .75rem 1rem;
    background: var(--bg-deep);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius-s);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color .15s, box-shadow .15s;
}
.input-text:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(216,54,43,.15);
}
label.field { display: block; text-align: left; margin-bottom: .9rem; }
label.field span { display: block; margin-bottom: .35rem; color: var(--text-soft); font-size: .9rem; }

/* === Responsive === */
@media (max-width: 880px) {
    .site-header { position: sticky; top: 0; z-index: 50; }
    .site-header-top .wrap { justify-content: flex-start; padding-right: 3.6rem; }
    .brand .brand-text { font-size: 1.2rem; }
    .site-header-nav { position: static; border: 0; box-shadow: none; background: transparent; padding: 0; }
    .site-header-nav .wrap { padding: 0; }
    .nav-toggle { display: block; }
    .main-nav {
        display: none;
        position: fixed;
        top: 58px; left: 0; right: 0;
        flex-direction: column;
        justify-content: flex-start;
        background: #ffffff;
        border-bottom: 1px solid var(--border);
        padding: .6rem 1rem 1rem;
        gap: 0;
        max-height: calc(100vh - 58px);
        overflow-y: auto;
        box-shadow: var(--shadow-deep);
    }
    .main-nav.open { display: flex; }
    .main-nav a { width: 100%; padding: .85rem 1rem; font-size: 1rem; }
    .nav-dropdown { width: 100%; }
    .nav-dropdown-menu {
        position: static;
        display: block;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 1rem;
        max-height: none;
    }
    .nav-dropdown-menu a { padding: .55rem 1rem; font-size: .9rem; }

    .tabs { top: 60px; }
    .tabs-inner { padding: .45rem .65rem; }
    .tab-btn { padding: .45rem .8rem; font-size: .78rem; }

    .game-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
    .game-card .card-art { height: 130px; }
    .game-card .card-roman { font-size: 3rem; }

    .panel, .chapter { padding: 1.1rem 1.2rem; }
    .hero { padding: 3rem 0 2.5rem; }
    .game-hero { padding: 3rem 0 1.5rem; }
}

@media (max-width: 480px) {
    body { font-size: 16px; }
    .game-grid { grid-template-columns: 1fr; }
    .brand .brand-sub { display: none; }
    .panel, .chapter { padding: .95rem 1.05rem; }
    .chapter h3 { font-size: 1.1rem; }
}

@media print {
    body::before, body::after, .site-header, .tabs, .site-footer, .nav-toggle, .meteor-layer { display: none; }
    body { background: white; color: black; }
    .panel, .chapter { box-shadow: none; border: 1px solid #ccc; }
    h1, h2, h3 { color: black; }
}

/* Accessibilité */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--bg-panel-hi); border-radius: 6px; border: 2px solid var(--bg-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* === Lightbox === */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.96);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    backdrop-filter: blur(8px);
}
.lightbox.open { display: flex; }
.lightbox img {
    max-width: min(96vw, 1400px);
    max-height: 88vh;
    object-fit: contain;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-m);
    box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 60px rgba(216,54,43,.18);
    background: #000;
}
.lightbox button {
    position: absolute;
    background: rgba(15,23,41,.85);
    color: var(--gold);
    border: 1px solid var(--border-strong);
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, color .15s, border-color .15s;
}
.lightbox button:hover {
    color: var(--gold-bright);
    border-color: var(--gold);
    transform: scale(1.06);
}
.lightbox-close { top: 1.4rem; right: 1.4rem; font-size: 2.2rem; }
.lightbox-prev  { left: 1.4rem;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 1.4rem; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-caption {
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15,23,41,.9);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-s);
    padding: .5rem 1.2rem;
    font-family: var(--font-title);
    font-size: .85rem;
    letter-spacing: .04em;
    max-width: 80vw;
    text-align: center;
}
@media (max-width: 720px) {
    .lightbox button { width: 44px; height: 44px; font-size: 1.6rem; }
    .lightbox-close { top: .8rem; right: .8rem; }
    .lightbox-prev  { left: .6rem; }
    .lightbox-next  { right: .6rem; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* === Auto-links (perso/mob/lieu/aeon mentionnés dans les chapitres) === */
.auto-link {
    color: var(--gold);
    border-bottom: 1px dotted var(--gold-deep);
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, text-shadow .15s ease;
}
.auto-link:hover,
.auto-link:focus {
    color: var(--gold-bright);
    border-bottom-color: var(--gold);
    text-shadow: 0 0 6px rgba(216, 54, 43, .3);
    outline: none;
}
/* Donne un peu d'air au-dessus des cibles quand on scrolle (sticky tabs ~130px) */
.perso-card[id^="perso-"],
.bestiary-cell[id^="mob-"],
.bestiary-cell[id^="lieu-"],
.aeon-card-wrap[id^="aeon-"] {
    scroll-margin-top: 140px;
}
/* Highlight bref à l'arrivée sur la cible */
:target.perso-card,
:target.bestiary-cell,
:target.aeon-card-wrap {
    box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(216, 54, 43, .35);
    transition: box-shadow .4s ease;
}

/* --- Loupe sur vignette bestiaire pour ouvrir lightbox slider --- */
.best-thumb { position: relative; }
.best-thumb-zoom {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(216, 54, 43, .6);
    background: rgba(12, 8, 18, .82);
    color: var(--gold, #b1271d);
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, background .18s ease;
    z-index: 4;
}
.bestiary-cell:hover .best-thumb-zoom,
.best-thumb-zoom:focus-visible {
    opacity: 1;
    transform: translateY(0);
}
.best-thumb-zoom:hover {
    background: rgba(40, 28, 14, .95);
    border-color: var(--gold, #b1271d);
}
.best-thumb-zoom svg { display: block; }
@media (hover: none) {
    .best-thumb-zoom { opacity: .85; transform: none; }
}
.bestiary-cell .boss-img img { cursor: zoom-in; }
.bestiary-cell .boss-img { position: relative; }
.bestiary-cell .boss-img::after {
    content: "🔍";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(12, 8, 18, .75);
    color: var(--gold, #b1271d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}
.bestiary-cell .boss-img:hover::after { opacity: 1; }

/* ============================================================
   Mini-jeux, Collectibles, Armes Célestes, Trophées — v0.38
   ============================================================ */

/* Variables manquantes */
:root {
    --accent-gold: var(--gold);
    --accent-warn: var(--danger);
}

/* === Mini-jeux === */
.mg-card {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-bottom: 1.8rem;
    padding: 1.4rem;
}
.mg-img {
    flex: 0 0 auto;
    margin: 0;
    width: 240px;
    max-width: 100%;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.mg-img img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}
.mg-body { flex: 1 1 320px; min-width: 0; }
.mg-title {
    font-family: var(--font-title);
    color: var(--gold);
    font-size: 1.25rem;
    margin: 0 0 .3rem;
}
.mg-subtitle { color: var(--text-soft); font-size: .9rem; margin: 0 0 .7rem; }
.mg-meta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: .9rem; }
.mg-diff { color: var(--gold-soft); font-size: 1rem; letter-spacing: .1em; }
.mg-reward {
    font-size: .82rem;
    color: var(--crystal-jade);
    background: rgba(130, 224, 194, .1);
    border: 1px solid rgba(130, 224, 194, .3);
    border-radius: 20px;
    padding: .2rem .7rem;
}
.mg-desc { color: var(--text-soft); margin-bottom: 1rem; }
.mg-steps-title { font-size: 1rem; color: var(--gold-soft); margin: 1rem 0 .5rem; }
.mg-steps { margin: 0; padding-left: 1.4rem; color: var(--text); }
.mg-steps li { margin-bottom: .45rem; line-height: 1.65; }

/* === Amorces Al Bhed === */
.primer-table { width: 100%; border-collapse: collapse; }
.primer-header,
.primer-row {
    display: grid;
    grid-template-columns: 2.4rem 1fr 3fr 2.8rem;
    gap: .4rem;
    align-items: baseline;
    padding: .45rem .5rem;
    border-bottom: 1px solid rgba(216,54,43,.1);
    font-size: .88rem;
}
.primer-header {
    font-family: var(--font-title);
    font-size: .78rem;
    color: var(--gold-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--border);
}
.primer-row:hover { background: rgba(216,54,43,.04); }
.primer-num { font-family: var(--font-title); color: var(--gold-soft); font-weight: 700; }
.primer-zone { color: var(--crystal-blue); font-weight: 600; }
.primer-detail { color: var(--text-soft); }
.primer-chap { color: var(--text-mute); text-align: center; }
.primer-missable .primer-zone { color: var(--danger); }
.primer-warn {
    display: block;
    color: var(--danger);
    font-size: .8rem;
    margin-top: .3rem;
}

/* === Guide Al Bhed (onglet dédié) === */
.albhed-intro { margin-bottom: 1.6rem; }
.albhed-intro p { color: var(--text-soft); margin: 0; }
.albhed-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid var(--border);
    font-size: .82rem;
    color: var(--text-mute);
}
.albhed-legend strong { color: var(--gold); }
.albhed-legend-miss { color: var(--danger); }
.albhed-legend-miss strong { color: var(--danger); }
.albhed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 1rem;
}
.albhed-card {
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-lo) 100%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold-soft);
    border-radius: var(--radius-m);
    padding: .9rem 1.05rem 1rem;
    scroll-margin-top: 130px;
}
.albhed-card.is-missable { border-left-color: var(--danger); }
.albhed-map {
    margin: -.9rem -1.05rem .75rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel-lo);
    overflow: hidden;
}
.albhed-map img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: cover;
    object-position: center;
    cursor: zoom-in;
    transition: filter .2s;
}
.albhed-map img:hover { filter: brightness(1.08); }
.albhed-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .55rem;
}
.albhed-num {
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--gold-soft);
    font-size: .95rem;
}
.albhed-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: .9rem;
    font-weight: 700;
    color: var(--gold);
    background: rgba(216, 54, 43, .08);
    text-transform: uppercase;
}
.albhed-zone {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-title);
    color: var(--crystal-blue);
    font-size: 1rem;
    line-height: 1.2;
}
.albhed-chap {
    flex: none;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-mute);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: .18em .55em;
}
.albhed-badge-miss {
    flex: none;
    font-family: var(--font-title);
    font-size: .64rem;
    letter-spacing: .12em;
    color: #1a1208;
    background: var(--danger);
    border-radius: 3px;
    padding: .22em .6em;
    font-weight: 700;
}
.albhed-line {
    display: flex;
    gap: .55rem;
    margin: .3rem 0 0;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--text-soft);
}
.albhed-tag {
    flex: none;
    font-family: var(--font-title);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gold-soft);
    padding-top: .28em;
    width: 2.6rem;
}
.albhed-where .albhed-text { flex: 1; }
.albhed-where .albhed-text strong { color: var(--text); }
.albhed-when { color: var(--text-mute); }
.albhed-note {
    margin: .6rem 0 0;
    padding: .45rem .65rem;
    border-radius: var(--radius-s);
    font-size: .82rem;
    line-height: 1.45;
    background: rgba(216, 54, 43, .06);
    color: var(--text-soft);
}
.albhed-note.is-warn {
    background: rgba(239, 91, 91, .12);
    color: #f3b6b6;
}
@media (max-width: 720px) {
    .albhed-grid { grid-template-columns: 1fr; }
    .albhed-line { flex-direction: column; gap: .15rem; }
    .albhed-tag { padding-top: 0; width: auto; }
}

/* === Carte interactive (Spira) === */
.spira-map-wrap { margin-top: 1rem; }
.spira-map {
    position: relative;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--bg-deep);
    box-shadow: var(--shadow-soft);
    line-height: 0; /* évite le gap inline sous l'image */
}
.spira-map-img { display: block; width: 100%; height: auto; }
.map-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 24px; height: 24px;
    padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
    z-index: 2;
}
.map-marker-dot {
    display: block; width: 14px; height: 14px; margin: 5px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 0 10px rgba(0,0,0,.6);
    transition: transform .15s, box-shadow .15s;
}
.map-marker:hover .map-marker-dot,
.map-marker:focus-visible .map-marker-dot { transform: scale(1.45); }
.map-marker.is-active .map-marker-dot { transform: scale(1.55); box-shadow: 0 0 0 3px var(--gold-soft), 0 0 14px rgba(216,54,43,.5); }
.map-marker--lieu      .map-marker-dot { background: var(--gold); }
.map-marker--temple    .map-marker-dot { background: var(--crystal-purple); }
.map-marker--boss      .map-marker-dot { background: var(--danger); }
.map-marker--chimere   .map-marker-dot { background: var(--crystal-blue); }
.map-marker--superboss .map-marker-dot { background: #c11e57; }
.map-marker--secret    .map-marker-dot { background: var(--success); }
.map-marker-label {
    position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%);
    white-space: nowrap; font-family: var(--font-title); font-size: .72rem; letter-spacing: .02em;
    background: rgba(40,34,28,.92); color: #fff; padding: .15em .55em; border-radius: var(--radius-s);
    border: 1px solid var(--border); pointer-events: none; opacity: 0; transition: opacity .12s;
}
.map-marker:hover .map-marker-label,
.map-marker:focus-visible .map-marker-label { opacity: 1; }
.map-popover {
    position: absolute; z-index: 5; width: min(280px, 78%);
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-lo) 100%);
    border: 1px solid var(--border-strong); border-radius: var(--radius-m);
    box-shadow: var(--shadow-deep); overflow: hidden;
}
/* `.spira-map` porte line-height:0 (gap inline sous l'image de carte) et la bulle en
   hérite : le lien « Voir la fiche », inline-block sans interligne propre, s'écrasait à
   0 px de haut — invisible et incliquable sur les 16 cartes. 11/09/2026. */
.map-popover { line-height: 1.5; }
.map-popover[hidden] { display: none; }
.map-pop-close { position: absolute; top: 0; right: 4px; background: none; border: 0; color: var(--text-soft); font-size: 1.4rem; line-height: 1.2; cursor: pointer; z-index: 2; text-shadow: 0 1px 3px #000; }
.map-pop-close:hover { color: var(--gold); }
.map-pop-img { width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; display: none; }
.map-pop-img.has-img { display: block; }
.map-pop-body { padding: .65rem .8rem .8rem; }
.map-pop-name { margin: 0 0 .25rem; color: var(--gold); font-family: var(--font-title); font-size: 1.02rem; padding-right: 1.2rem; }
.map-pop-desc { margin: 0; color: var(--text-soft); font-size: .85rem; line-height: 1.5; }
.map-pop-link { display: inline-block; margin-top: .55rem; font-size: .8rem; color: var(--crystal-blue); }
.map-pop-link[hidden] { display: none; }
.map-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: .85rem; }
.map-legend .mk-leg, .mk-leg { font-size: .78rem; color: var(--text-soft); display: inline-flex; align-items: center; }
.mk-leg::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: .42em; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.mk-leg--lieu::before { background: var(--gold); }
.mk-leg--temple::before { background: var(--crystal-purple); }
.mk-leg--boss::before { background: var(--danger); }
.mk-leg--secret::before { background: var(--success); }
@media (max-width: 600px) {
    /* Cible tactile et point visible sont dissocies : sur une carte de ~343 px, un point de 16 px
       represente 5 % de la largeur et 26 marqueurs deviennent une grappe illisible.
       Le bouton reste large (tapable), le point retrecit (lisible). Corrige le 19/08/2026. */
    .map-marker { width: 30px; height: 30px; }
    .map-marker-dot {
        width: 9px; height: 9px; margin: 10.5px;
        border-width: 1.5px;
        box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 5px rgba(0,0,0,.5);
    }
    .map-marker:hover .map-marker-dot,
    .map-marker:focus-visible .map-marker-dot { transform: scale(1.6); }
    .map-marker.is-active .map-marker-dot { transform: scale(1.8); }
    .map-popover { width: min(240px, 86%); }
}

/* === Carte interactive : zoom / deplacement au doigt (telephone) — 19/08/2026 ===
   Sur un ecran de ~343 px, 4 % d'ecart entre deux points ne font que 13 px : les
   marqueurs se chevauchent en grappes illisibles (345 paires de points concernees).
   Le JS cree la couche .map-zoom-layer UNIQUEMENT sous 720 px et y applique un
   translate/scale ; les marqueurs recoivent un scale(1/s) inverse pour garder leur
   taille a l'ecran. Sur ordinateur, ni la couche ni ces classes n'existent : le
   rendu est strictement inchange. */
@media (max-width: 720px) {
    /* pan-y : on laisse la page defiler verticalement tant que la carte est entiere,
       et on prend la main sur tous les gestes des qu'elle est agrandie. */
    .spira-map.is-zoomable { touch-action: pan-y; }
    .spira-map.is-zoomed   { touch-action: none; }
    .map-zoom-layer {
        position: relative;
        transform-origin: 0 0;
        will-change: transform;
    }
    /* En haut a droite et en ligne : la carte fait souvent moins de 200 px de haut,
       une colonne de boutons la mangerait, et le bas est reserve au bandeau d'info. */
    .map-zoom-ctrls {
        position: absolute; right: 7px; top: 7px; z-index: 6;
        display: flex; flex-direction: row; gap: 5px; line-height: 1;
    }
    .map-zoom-ctrls button {
        width: 32px; height: 32px; padding: 0;
        font-family: var(--font-title); font-size: 1.05rem; line-height: 1;
        color: var(--gold); background: rgba(18, 15, 12, .84);
        border: 1px solid var(--border-strong); border-radius: var(--radius-s);
        box-shadow: 0 1px 5px rgba(0, 0, 0, .55);
        cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .map-zoom-ctrls button:active { background: rgba(70, 58, 42, .95); color: #fff; }
    /* Carte zoomable : la bulle devient un bandeau ancre en bas du cadre, toujours
       lisible et jamais hors ecran, quelle que soit la zone regardee. */
    .map-popover.map-pop-sheet {
        left: 6px; right: 6px; bottom: 6px; top: auto;
        width: auto; max-width: none; transform: none;
    }
    .map-pop-sheet .map-pop-img { aspect-ratio: 21 / 9; }
    .map-pop-sheet .map-pop-body { padding: .55rem .7rem .65rem; }
}

/* === Onglets complétion / endgame (Arène, Superbosses, Overdrives, Sphérier, Blitzball, Équipement, Missables) === */
.x-h3 {
    font-family: var(--font-title);
    color: var(--gold);
    font-size: 1.18rem;
    margin: 2.2rem 0 .35rem;
    letter-spacing: .02em;
}
.x-h3:first-of-type { margin-top: .5rem; }
.x-sub { color: var(--text-soft); font-size: .92rem; margin: 0 0 1rem; }
.x-boss-grid { display: flex; flex-direction: column; gap: 1rem; }
.x-boss-item { scroll-margin-top: 130px; }
.x-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; align-items: center; }
.x-jump-label { font-family: var(--font-title); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-mute); margin-right: .25rem; }
.x-jump a { font-size: .78rem; padding: .24em .65em; border: 1px solid var(--border); border-radius: 3px; color: var(--text-soft); text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.x-jump a:hover { border-color: var(--border-strong); color: var(--gold); background: rgba(216,54,43,.06); }
.x-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1rem;
}
.x-card {
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-lo) 100%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold-soft);
    border-radius: var(--radius-m);
    padding: .95rem 1.1rem 1.05rem;
}
.x-card--portrait { display: flex; gap: 1rem; }
.x-card--portrait .x-card-main { flex: 1; min-width: 0; }
.x-card-photo {
    flex: 0 0 86px;
    align-self: flex-start;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center top;
    background-color: var(--bg-panel-lo);
    border-radius: var(--radius-s);
    border: 1px solid var(--border);
}
@media (max-width: 600px) {
    .x-card--portrait { flex-direction: column; gap: .7rem; }
    .x-card-photo { flex: none; width: 100%; aspect-ratio: 16 / 7; background-position: center 28%; }
}
.x-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .7rem; margin-bottom: .5rem; }
.x-card-title { font-family: var(--font-title); color: var(--crystal-blue); font-size: 1.05rem; }
.x-card-tag {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--gold-soft); border: 1px solid var(--border); border-radius: 3px; padding: .2em .6em;
}
.x-card-note { color: var(--text-soft); font-size: .9rem; line-height: 1.55; margin: .5rem 0 0; }
.x-card-body { color: var(--text-soft); font-size: .94rem; line-height: 1.62; }
.x-card-body p { margin: .45rem 0; }
.x-mini-table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .9rem; }
.x-mini-table th {
    text-align: left; vertical-align: top; white-space: normal; width: 30%; min-width: 9rem;
    color: var(--gold-soft); font-family: var(--font-title); font-weight: 600;
    padding: .42rem 1.1rem .42rem 0; border-bottom: 1px solid rgba(216,54,43,.12); line-height: 1.35;
}
.x-mini-table td { color: var(--text-soft); padding: .42rem 0; border-bottom: 1px solid rgba(216,54,43,.12); line-height: 1.5; }
.x-mini-table tr:last-child th, .x-mini-table tr:last-child td { border-bottom: 0; }
.x-ability-list { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--text); }
.x-ability-list li { margin: .28rem 0; }
/* Cartes "fiche perso" en pleine largeur (Overdrives, Sphérier) — beaucoup d'horizontal */
.x-cards--full { display: flex; flex-direction: column; gap: 1rem; }
.x-cards--full .x-card { padding: 1.05rem 1.3rem 1.2rem; }
.x-cards--full .x-card--portrait { gap: 1.3rem; }
.x-cards--full .x-card--portrait .x-card-photo { flex: 0 0 104px; }
.x-card-grids { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .8rem; }
.x-grid-fig { margin: 0; max-width: 380px; }
.x-grid-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-s); cursor: zoom-in; transition: filter .15s; }
.x-grid-fig img:hover { filter: brightness(1.1); }
.x-grid-fig figcaption { font-size: .74rem; color: var(--text-mute); margin-top: .25rem; text-align: center; }

/* Tableaux génériques (zone | … | …) */
.x-table { width: 100%; margin: 0 0 .5rem; }
.x-row {
    display: grid;
    gap: .6rem 1rem;
    align-items: baseline;
    padding: .55rem .6rem;
    border-bottom: 1px solid rgba(216,54,43,.1);
    font-size: .9rem;
    color: var(--text-soft);
}
.x-row--head {
    font-family: var(--font-title); font-size: .74rem; color: var(--gold-soft);
    text-transform: uppercase; letter-spacing: .07em;
    border-bottom: 1px solid var(--border);
}
.x-row:hover:not(.x-row--head) { background: rgba(216,54,43,.04); }
.x-c-zone  { color: var(--crystal-blue); font-weight: 600; }
.x-c-boss  { color: var(--gold); }
.x-c-reward { color: var(--gold-soft); }
.x-c-mons  { font-size: .84rem; }
.x-note-inline { display: block; color: var(--text-mute); font-size: .8rem; margin-top: .2rem; }
.x-zone-thumb { display: block; width: 100%; max-width: 200px; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--border); margin-bottom: .45rem; cursor: zoom-in; transition: filter .15s; }
.x-zone-thumb:hover { filter: brightness(1.1); }
.x-recruit-thumb { display: inline-block; width: 32px; height: 32px; object-fit: cover; object-position: top; border-radius: 50%; border: 1px solid var(--border); vertical-align: middle; margin-right: .5rem; }
.x-strat-panel { line-height: 1.7; }
.x-strat-panel h4 { color: var(--gold); font-family: var(--font-title); margin: 1.2rem 0 .4rem; }
.x-strat-panel h4:first-child { margin-top: 0; }
.x-strat-panel ol, .x-strat-panel ul { margin: .4rem 0 .8rem 1.2rem; color: var(--text-soft); }
.x-strat-panel li { margin: .3rem 0; }
/* grilles de colonnes selon le type de table */
.x-table--areas   .x-row { grid-template-columns: 1.2fr 2fr 1fr 1.4fr; }
.x-table--species .x-row { grid-template-columns: 1.2fr 1.8fr 1fr 1.4fr; }
.x-table--modes   .x-row { grid-template-columns: 1.1fr 1.3fr 2fr; }
.x-table--spheres .x-row { grid-template-columns: 1.1fr 1.6fr 1.8fr; }
.x-table--recruits .x-row { grid-template-columns: 1fr 2fr 1.6fr; }
.x-table--tech    .x-row { grid-template-columns: 1.2fr 2.6fr; }
.x-table--prizes  .x-row { grid-template-columns: 1.4fr 2.4fr; }
.x-table--abilities .x-row { grid-template-columns: 1.3fr 1.4fr 2fr; }

/* === Liste compacte des cartes (FF8 Cartes & Modif-Cartes) === */
.x-table--cards   .x-row { grid-template-columns: 2.2fr .9fr .9fr 2.3fr 2.3fr; padding: .5rem .55rem; align-items: center; min-height: 44px; }
.x-table--cards   .x-row > span { align-self: center; }
.x-table--cards   .x-row > span:nth-child(4),
.x-table--cards   .x-row > span:nth-child(5) { align-self: center; }
.x-table--cardmod .x-row { grid-template-columns: 1.1fr 1.8fr 1.5fr 1.5fr 1.5fr; padding: .4rem .55rem; align-items: center; }
.x-table--cards .x-c-zone { display: flex; align-items: center; gap: .6rem; color: var(--text); font-weight: 600; }
.tt-vignette {
    width: 40px; height: 40px; flex: 0 0 40px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--bg-deep);
}
/* Wrapper cliquable autour d'une vignette : ouvre le lightbox global */
.tt-card-zoom {
    display: inline-flex; flex: 0 0 40px;
    cursor: zoom-in;
    border-radius: var(--radius-s);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
.tt-card-zoom:hover, .tt-card-zoom:focus-visible {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px var(--gold);
    outline: none;
}
.tt-card-zoom:hover .tt-vignette { border-color: var(--gold); }
.tt-vignette--ph {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-title); color: var(--text-mute); font-size: 1.05rem;
}
.tt-name  { font-weight: 600; color: var(--gold); }
.tt-vals  { font-family: var(--font-mono); color: var(--text); letter-spacing: .04em; font-size: .92rem; }
.tt-elem  { font-size: .82rem; color: var(--text-mute); }
.tt-where { color: var(--text-soft); font-size: .85rem; line-height: 1.35; word-break: break-word; }
.tt-mod   { color: var(--gold-soft); font-size: .82rem; line-height: 1.35; word-break: break-word; }

/* Élément coloré */
.tt-elem--feu     { color: #d9532b; font-weight: 600; }
.tt-elem--glace   { color: #4ec1d6; font-weight: 600; }
.tt-elem--foudre  { color: #f0c537; font-weight: 600; }
.tt-elem--terre   { color: #a08157; font-weight: 600; }
.tt-elem--eau     { color: #3e85c7; font-weight: 600; }
.tt-elem--vent    { color: #93c47d; font-weight: 600; }
.tt-elem--poison  { color: #8e7ec3; font-weight: 600; }
.tt-elem--sacre   { color: #f6d785; font-weight: 600; }

@media (max-width: 860px) {
    .x-cards { grid-template-columns: 1fr; }
    .x-table .x-row { grid-template-columns: 1fr !important; gap: .15rem; padding: .7rem .5rem; }
    .x-table .x-row--head { display: none; }
    .x-c-zone { font-size: 1rem; }
    .x-mini-table th { white-space: normal; }
    .x-table--cards .x-c-zone { align-items: flex-start; }
    .tt-where, .tt-mod, .tt-name { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* === Sphères de Jecht === */
.jecht-table { width: 100%; }
.jecht-header,
.jecht-row {
    display: grid;
    grid-template-columns: 2.4rem 1.8fr 2.2fr 2.2fr;
    gap: .4rem;
    align-items: baseline;
    padding: .45rem .5rem;
    border-bottom: 1px solid rgba(216,54,43,.1);
    font-size: .88rem;
}
.jecht-header {
    font-family: var(--font-title);
    font-size: .78rem;
    color: var(--gold-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--border);
}
.jecht-row:hover { background: rgba(216,54,43,.04); }
.jecht-num { font-family: var(--font-title); color: var(--gold-soft); font-weight: 700; }
.jecht-zone { color: var(--crystal-blue); }
.jecht-detail { color: var(--text-soft); }

/* === Armes Célestes === */
.cw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.4rem;
}
.cw-card {
    display: flex;
    gap: 1.2rem;
    padding: 1.2rem;
    align-items: flex-start;
}
.cw-portrait {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-size: cover;
    background-position: center top;
    border: 2px solid var(--border-strong);
}
.cw-info { flex: 1; min-width: 0; }
.cw-name {
    font-family: var(--font-title);
    color: var(--gold);
    font-size: 1.05rem;
    margin: 0 0 .3rem;
}
.cw-char { color: var(--text-soft); font-size: .85rem; font-weight: 400; }
.cw-loc { color: var(--text-soft); font-size: .83rem; margin: 0 0 .6rem; }
.cw-items { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .7rem; }
.cw-item {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .82rem;
}
.cw-item-icon { font-size: 1rem; flex: 0 0 auto; margin-top: .05rem; }
.cw-item div { display: flex; flex-direction: column; gap: .1rem; }
.cw-item strong { color: var(--gold-soft); }
.cw-item span { color: var(--text-soft); }
.cw-ability {
    font-size: .82rem;
    color: var(--crystal-jade);
    background: rgba(130,224,194,.07);
    border-left: 2px solid var(--crystal-jade);
    padding: .35rem .7rem;
    border-radius: 0 4px 4px 0;
    margin: .5rem 0 .4rem;
}
.cw-tip { font-size: .82rem; color: var(--text-soft); font-style: italic; margin: 0; }

/* === Trophées === */
.trophy-group-title { margin: 1.6rem 0 .7rem; }
/* Refonte 03/09/2026 : les colonnes etroites transformaient chaque trophee en colonne de
   texte italique illisible (7 250 px de page sur FF X). Une ligne pleine largeur par trophee,
   l icone officielle du rang a gauche, et les longues conditions repliees. */
.trophy-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.trophy-item {
    display: flex; align-items: flex-start; gap: .85rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .85rem 1rem;
    background: var(--bg-panel);
    border-left-width: 3px;
}
.trophy-icone { flex: none; width: 44px; height: 44px; object-fit: contain; margin-top: .1rem; }
/* Icone propre au trophee : la pastille du rang se pose dans le coin bas-droit. */
.trophy-visuel { position: relative; flex: none; display: block; width: 44px; height: 44px; margin-top: .1rem; }
.trophy-visuel .trophy-icone { width: 44px; height: 44px; margin-top: 0; border-radius: 4px; }
.trophy-rang { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.trophy-corps { min-width: 0; flex: 1 1 auto; }
.trophy-detail { margin: .35rem 0 0; }
.trophy-detail > summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .35em;
    font-family: var(--font-ui); font-size: .74rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--crystal-blue);
    padding: .18em .6em; border: 1px solid var(--border); border-radius: var(--radius-m);
    background: var(--bg-panel-lo);
}
.trophy-detail > summary::-webkit-details-marker { display: none; }
.trophy-detail > summary::before { content: ▸; font-size: .9em; }
.trophy-detail[open] > summary::before { content: ▾; }
.trophy-detail > summary:hover { background: var(--crystal-blue); color: #fff; border-color: var(--crystal-blue); }
.trophy-detail .trophy-cond { margin-top: .5rem; }
.trophy-platine { border-left-color: #b9f2ff; }
.trophy-or      { border-left-color: var(--gold); }
.trophy-argent  { border-left-color: #c0c8d8; }
.trophy-bronze  { border-left-color: #c97b3c; }
.trophy-header { margin-bottom: .35rem; }
.trophy-title { font-weight: 700; color: var(--gold-soft); font-size: .95rem; }
.trophy-desc { color: var(--text); font-size: .88rem; margin: .3rem 0 .2rem; }
.trophy-cond { color: var(--text-soft); font-size: .83rem; line-height: 1.6; margin: 0; }

/* === Responsive === */
@media (max-width: 640px) {
    .mg-card { flex-direction: column; }
    .mg-img { width: 100%; }
    .primer-header, .primer-row { grid-template-columns: 2rem 1fr 2fr 2rem; }
    .jecht-header, .jecht-row { grid-template-columns: 2rem 1fr 2fr; }
    .jecht-row .jecht-unlock { grid-column: 1 / -1; padding-top: .2rem; }
}
/* Sous 480 px, la grille devient une fiche : chaque valeur sur sa ligne, pleine largeur. */
@media (max-width: 480px) {
    .jecht-header { display: none; }
    .jecht-row {
        grid-template-columns: 1fr;
        gap: .15rem;
        padding: .7rem .6rem;
        border-bottom: 1px solid var(--border);
    }
    .jecht-row > span { grid-column: 1 / -1; }
    .jecht-row .jecht-num {
        display: inline-block; min-width: 1.6em;
        font-weight: 800; color: var(--crystal-blue);
    }
    .jecht-row .jecht-zone { font-weight: 700; }
    .cw-grid { grid-template-columns: 1fr; }
    .trophy-list { grid-template-columns: 1fr; }
    .trophy-icone { width: 34px; height: 34px; }
    .trophy-visuel, .trophy-visuel .trophy-icone { width: 34px; height: 34px; }
    .trophy-rang { width: 15px; height: 15px; }
}

/* ============================================================
   Navigation onglets — responsive mobile (select) v0.38.2
   ============================================================ */

/* Select mobile — caché par défaut */
.tabs-select-wrap { display: none; padding: .6rem 1rem; }
.tabs-select {
    width: 100%;
    background: var(--bg-panel-hi);
    color: var(--gold-soft);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: .65rem 1rem;
    font-family: var(--font-title);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .06em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%237d6418' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 10px;
    padding-right: 2.5rem;
}
.tabs-select:focus { outline: 2px solid var(--gold); outline-offset: 2px; }

/* (anciens overrides horizontaux des onglets retirés — le style est dans le bloc .game-sidebar / .tab-btn plus haut) */

@media (max-width: 900px) {
    /* Tablette/mobile : on masque le menu latéral en liste, on affiche le <select> généré en JS */
    .game-sidebar .tabs-inner { display: none; }
    .tabs-select-wrap { display: block; padding: .55rem .75rem; }
}

/* ── Titres de sections dans les chapitres ──────────────────────── */
.chapter-sub {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--gold);
    text-transform: uppercase;
    margin: 1.6rem 0 .5rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid rgba(216,54,43,.2);
}

/* ── Tables d'ennemis dans les chapitres ────────────────────────── */
.encounters-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    margin: .8rem 0 1rem;
}
.encounters-table thead tr {
    background: rgba(216,54,43,.12);
}
.encounters-table th {
    padding: .4rem .6rem;
    text-align: left;
    color: var(--gold-soft);
    font-weight: 600;
    letter-spacing: .05em;
    border-bottom: 1px solid rgba(216,54,43,.25);
}
.encounters-table td {
    padding: .35rem .6rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    color: var(--text-soft);
    vertical-align: top;
}
.encounters-table tr.warn-row td {
    background: rgba(220,60,60,.08);
    color: #e8a0a0;
}
.encounters-table tr.warn-row td strong { color: #ff9999; }
@media (max-width: 600px) {
    .encounters-table, .encounters-table tbody, .encounters-table tr, .encounters-table td {
        display: block; width: 100%;
    }
    .encounters-table thead { display: none; }
    .encounters-table td { border-bottom: none; padding: .2rem .4rem; }
    .encounters-table tr { border: 1px solid rgba(255,255,255,.08); margin-bottom: .5rem; border-radius: 4px; }
}

/* ============================================================

/* ┌─ COUCHE 1 sur 3 — TABLEAUX DE FICHE EMPILÉS SOUS 540 px ─────────────────────────────┐
   │ ⚑ NE PAS ÉCRIRE ICI. Une COUCHE 2 plus bas (« Responsive Tables Fix v0.39.1 »)        │
   │   redéclare `.boss-table`, `.boss-table tbody tr` et `.boss-table tbody td::before`,  │
   │   et c'est ELLE qui gagne. Puis une COUCHE 3, en fin de feuille, traite les attaques. │
   │                                                                                       │
   │ Cette couche n'est pas morte pour autant : mesure du 16/09/2026, elle porte           │
   │ **22 déclarations que la couche 2 n'a pas** — dont `margin-right: .8rem` sur           │
   │ l'étiquette, et l'alignement à droite de la colonne de valeur des tableaux            │
   │ clé/valeur (`tr:not(.boss-attacks tr) td:nth-child(2)`). La supprimer décalerait      │
   │ chaque fiche du site. Les trois couches se COMPLÈTENT ; seule la dernière s'édite.    │
   └───────────────────────────────────────────────────────────────────────────────────────┘ */
/* Sur très petit écran (<540px) : transformer la table en cards verticales */
@media (max-width: 540px) {
    .boss-table {
        width: 100%;
        display: block !important;
        border: none !important;
        border-collapse: separate;
        border-spacing: 0;
        margin: .5rem 0 1rem !important;
    }
    
    .boss-table thead {
        display: none !important;
    }
    
    .boss-table tbody {
        display: block;
    }
    
    .boss-table tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius-s);
        margin-bottom: .8rem;
        background: var(--bg-deep);
        overflow: hidden;
    }
    
    .boss-table tbody tr:last-child {
        margin-bottom: 0;
    }
    
    .boss-table th,
    .boss-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: .6rem .8rem !important;
        border-bottom: 1px solid rgba(216, 54, 43, .15) !important;
        width: 100% !important;
        text-align: left !important;
        vertical-align: top;
    }
    
    .boss-table tbody td:last-child,
    .boss-table tbody th:last-child {
        border-bottom: none !important;
    }
    
    .boss-table tbody td::before {
        content: attr(data-label);
        font-family: var(--font-title);
        font-size: .72rem;
        color: var(--gold-soft);
        text-transform: uppercase;
        letter-spacing: .1em;
        flex: 0 0 auto;
        font-weight: 700;
        margin-right: .8rem;
        white-space: nowrap;
    }
    
    /* 16/09/2026 — etiquetage par POSITION supprime : il mentait des qu'une colonne
       vide etait retiree par le PHP (la valeur des Cibles s'affichait sous « TYPE »).
       C'est `data-label`, pose par le PHP, qui fait foi. */
    
    .boss-attacks tbody td {
        word-break: break-word;
    }
    
    /* Récompenses / récompenses & extraction table */
    .boss-table tr:not(.boss-attacks tr) td:nth-child(2) {
        flex: 1 1 auto;
        text-align: right;
        word-break: break-word;
    }
    
    .boss-table strong {
        display: block;
        margin-top: .2rem;
    }
}

/* Sur écran moyen (541-720px) : tableau reste horizontal mais réduit un peu */
@media (max-width: 720px) {
    .boss-table {
        font-size: .8rem !important;
    }
    
    .boss-table th,
    .boss-table td {
        padding: .4rem .6rem !important;
    }
    
    .boss-attacks tbody td {
        word-break: break-word;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Sur écran grand (>720px) : tableau normal horizontal avec scroll si nécessaire */
@media (min-width: 721px) {
    .boss-table {
        display: table !important;
    }
    
    .boss-table thead {
        display: table-header-group !important;
    }
    
    .boss-table tbody {
        display: table-row-group !important;
    }
    
    .boss-table tbody tr {
        display: table-row !important;
    }
}

/* Wrapper autour des tableaux pour scroll horizontal sur petit écran */
.boss-card .boss-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.boss-table {
    min-width: 100%;
}

/* ============================================================
   Responsive Tables Fix v0.39.1 — Tableaux boss/attaques sur mobile
   AMÉLIORATION : meilleure gestion du responsive
   ------------------------------------------------------------
   ⚑ COUCHE 2 sur 3. C'est celle qui GAGNE sur `.boss-table tbody tr` et
     `.boss-table tbody td::before` (`min-width: 90px` sur l'étiquette, notamment).
     La couche 1, plus haut, garde 22 déclarations qu'on ne retrouve pas ici : elles servent
     encore, il ne faut pas la supprimer.
     La COUCHE 3, en fin de feuille (16/09/2026), compacte les tableaux d'ATTAQUES et doit rester
     APRÈS celle-ci — sinon le `min-width: 90px` ci-dessous rend chaque attribut à la ligne.
   ============================================================ */

/* Sur très petit écran (<540px) : transformer la table en cards verticales */
@media (max-width: 540px) {
    .boss-table {
        width: 100% !important;
        display: block !important;
        border: none !important;
        border-collapse: separate;
        border-spacing: 0;
        margin: .8rem 0 1.2rem !important;
        font-size: .82rem;
    }
    
    .boss-table thead {
        display: none !important;
    }
    
    .boss-table tbody {
        display: block;
    }
    
    .boss-table tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius-s);
        margin-bottom: .8rem;
        background: var(--bg-panel-lo);
        overflow: hidden;
        padding: 0;
    }
    
    .boss-table tbody tr:last-child {
        margin-bottom: 0;
    }
    
    .boss-table th {
        display: none !important;
    }
    
    .boss-table tbody td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: .65rem .75rem !important;
        border-bottom: 1px solid rgba(216, 54, 43, .12) !important;
        width: 100% !important;
        text-align: left !important;
        vertical-align: top;
        gap: .5rem;
        min-height: 2rem;
    }
    
    .boss-table tbody td:last-child {
        border-bottom: none !important;
    }
    
    .boss-table tbody td::before {
        content: attr(data-label);
        font-family: var(--font-title);
        font-size: .7rem;
        color: var(--gold-soft);
        text-transform: uppercase;
        letter-spacing: .08em;
        flex: 0 0 auto;
        font-weight: 700;
        white-space: nowrap;
        min-width: 90px;
    }
    
    /* 16/09/2026 — etiquetage par POSITION supprime : il mentait des qu'une colonne
       vide etait retiree par le PHP (la valeur des Cibles s'affichait sous « TYPE »).
       C'est `data-label`, pose par le PHP, qui fait foi. */
    
    .boss-attacks tbody td {
        word-break: break-word;
    }
    
    .boss-table tbody td strong {
        display: block;
        margin-top: .15rem;
    }
    
    /* Assurer que le texte des TD occupe la place restante */
    .boss-table tbody td > *:not(::before) {
        flex: 1 1 auto;
        text-align: right;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Sur écran moyen (541-720px) : tableau reste horizontal mais réduit */
@media (max-width: 720px) and (min-width: 541px) {
    .boss-table {
        font-size: .85rem !important;
    }
    
    .boss-table th,
    .boss-table td {
        padding: .5rem .65rem !important;
    }
    
    .boss-attacks tbody td {
        word-break: break-word;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Sur petit padding, mieux gérer les colonnes étroites */
    .boss-table tbody td:first-child {
        min-width: 100px;
    }
}

/* Sur écran grand (>720px) : tableau normal horizontal */
@media (min-width: 721px) {
    .boss-table {
        display: table !important;
    }
    
    .boss-table thead {
        display: table-header-group !important;
    }
    
    .boss-table tbody {
        display: table-row-group !important;
    }
    
    .boss-table tbody tr {
        display: table-row !important;
        border: none !important;
        margin-bottom: 0 !important;
    }
    
    .boss-table tbody td,
    .boss-table tbody th {
        display: table-cell !important;
        border-bottom: 1px solid var(--border) !important;
    }
    
    /* Retirer le ::before sur écran large */
    .boss-table tbody td::before {
        content: none !important;
        display: none !important;
    }
}

/* Wrapper autour des tableaux pour scroll horizontal sur petit écran */
.boss-card .boss-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.boss-table {
    min-width: 100%;
}


/* ── Liste étapes numérotées pour les Cloîtres ─────────────────── */
.cloitre-steps {
    list-style: none;
    counter-reset: cloitre-step;
    padding: 0;
    margin: .8rem 0;
}
.cloitre-steps li {
    counter-increment: cloitre-step;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .5rem 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    font-size: .88rem;
    color: var(--text-soft);
    line-height: 1.5;
}
.cloitre-steps li::before {
    content: counter(cloitre-step);
    min-width: 1.6rem;
    height: 1.6rem;
    background: rgba(216,54,43,.15);
    border: 1px solid rgba(216,54,43,.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-size: .72rem;
    color: var(--gold);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: .1rem;
}
.cloitre-steps li strong { color: var(--text-main); }

/* ================================================================
   ACCUEIL — refonte v3.1 (style magazine web : "À la une" en grille + feed + sidebar)
   ================================================================ */
/* Bandeau "À la une" : 1 grande carte + 4 petites, comme la une d'un site d'actu */
.home-une { background: var(--bg-panel); border-bottom: 1px solid var(--border); padding: 1.8rem 0 2rem; }
.home-une-title, .home-feed-title {
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text);
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--crystal-blue);
    display: inline-block;
}
.home-une-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.feat-card {
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
    background: var(--bg-night);
    aspect-ratio: 16 / 10;
}
.feat-card--big { grid-column: span 2; aspect-ratio: 32 / 10; }
.feat-card-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .4s; }
.feat-card:hover .feat-card-img { transform: scale(1.05); }
.feat-card-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: .8rem .95rem;
    background: linear-gradient(180deg, rgba(12,18,28,0) 30%, rgba(12,18,28,.4) 60%, rgba(8,12,20,.9) 100%);
}
.feat-card-cat, .feat-card-tag {
    align-self: flex-start;
    font-family: var(--font-ui);
    font-size: .6rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    color: #fff;
    background: var(--crystal-blue);
    padding: .2em .55em;
    margin-bottom: .4rem;
}
.feat-card-title {
    font-family: var(--font-title); font-weight: 800; color: #fff;
    line-height: 1.18; font-size: 1.05rem;
    text-shadow: 0 1px 6px rgba(0,0,0,.55);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feat-card--big .feat-card-title { font-size: 1.55rem; }
.feat-card-excerpt {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    color: rgba(255,255,255,.85); font-size: .82rem; line-height: 1.4; margin-top: .3rem;
}

/* Layout 2 colonnes (feed + sidebar) */
.home-layout {
    display: flex;
    gap: 2.2rem;
    align-items: flex-start;
    padding: 2rem 1.4rem 3rem;
}
.home-main { flex: 1 1 auto; min-width: 0; }
.home-sidebar { flex: 0 0 270px; }

/* Feed : grille de tuiles verticales (image en haut, libellé + titre + meta dessous) — façon "dernières actus" */
.game-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.game-tile {
    display: block; text-decoration: none;
    background: var(--bg-panel); border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.game-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-deep); border-color: var(--border-strong); }
.game-tile-img {
    aspect-ratio: 16 / 9;
    background: var(--card-gradient, linear-gradient(135deg, #e9edf2, #f8fafc));
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
}
.game-tile-roman { font-family: var(--font-title); font-size: 2.2rem; color: rgba(255,255,255,.85); text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.game-tile-body { padding: .75rem .85rem .9rem; }
.game-tile-cat { display: block; font-family: var(--font-ui); font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--crystal-blue); font-weight: 800; margin-bottom: .3rem; }
.game-tile-title { font-family: var(--font-title); font-size: .98rem; line-height: 1.3; margin: 0 0 .3rem; color: var(--text); font-weight: 700; }
.game-tile:hover .game-tile-title { color: var(--crystal-blue); }
.game-tile-meta { display: block; color: var(--text-mute); font-size: .78rem; }
@media (max-width: 760px) { .game-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .game-grid-3 { grid-template-columns: 1fr; } }

/* Liste de "cartes d'article" (ancien — conservé pour d'autres pages) */
.article-list { display: flex; flex-direction: column; gap: 1.1rem; }
.article-card {
    display: flex;
    gap: 1.2rem;
    text-decoration: none;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.article-card:hover { transform: translateX(2px); box-shadow: var(--shadow-deep); border-color: var(--border-strong); }
.article-card-thumb {
    flex: 0 0 200px;
    align-self: stretch;
    min-height: 140px;
    background: var(--card-gradient, linear-gradient(135deg, #e9edf2, #f8fafc));
    background-size: cover;
    background-position: center;
    display: flex; align-items: center; justify-content: center;
}
.article-card-roman {
    font-family: var(--font-title);
    font-size: 2.4rem;
    color: rgba(255,255,255,.85);
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.article-card-body { flex: 1 1 auto; min-width: 0; padding: 1rem 1.2rem 1.1rem; display: flex; flex-direction: column; }
.article-card-tag {
    font-family: var(--font-title);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gold-soft);
    margin-bottom: .4rem;
}
.article-card-title { font-family: var(--font-title); font-size: 1.25rem; margin: 0 0 .15rem; color: var(--text); }
.article-card:hover .article-card-title { color: var(--gold-soft); }
.article-card-sub { color: var(--crystal-blue); font-size: .82rem; font-style: italic; margin: 0 0 .5rem; }
.article-card-excerpt { color: var(--text-soft); font-size: .92rem; line-height: 1.55; margin: 0; flex: 1; }
.article-card-cta { color: var(--crystal-blue); font-weight: 600; font-size: .85rem; margin-top: .7rem; }

/* Sidebar / widgets */
.widget {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    padding: 1rem 1.1rem 1.1rem;
    margin-bottom: 1.3rem;
    box-shadow: var(--shadow-soft);
}
.widget-title {
    font-family: var(--font-title);
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gold-soft);
    margin: 0 0 .6rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
}
.widget-item {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    text-decoration: none;
    color: var(--text-soft);
    font-size: .88rem;
    line-height: 1.4;
    padding: .42rem .3rem;
    border-radius: var(--radius-s);
    transition: background .12s, color .12s;
}
.widget-item:hover { background: rgba(154,122,28,.08); color: var(--text); }
.widget-item-em { flex: none; font-size: 1rem; line-height: 1.3; }
.widget-note { color: var(--text-mute); font-size: .8rem; line-height: 1.5; }
.widget-note p { margin: 0; }

@media (max-width: 980px) {
    .home-layout { display: block; }
    .home-sidebar { flex: none; margin-top: 1.8rem; }
}
@media (max-width: 760px) {
    /* sur mobile : la 1re carte (--big) reprend la taille des autres (plus de bandeau large 32:10) */
    .home-une-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 8px; }
    .feat-card, .feat-card--big { grid-row: auto; grid-column: auto; aspect-ratio: 16 / 10; min-height: 0; }
    .feat-card--big .feat-card-title { font-size: 1.05rem; }
    .feat-card--big .feat-card-excerpt { display: none; }
}
@media (max-width: 440px) {
    .home-une-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .article-card { flex-direction: column; }
    .article-card-thumb { flex: none; width: 100%; aspect-ratio: 16 / 7; min-height: 0; }
}

/* ================================================================
   OVERRIDES THÈME CLAIR — neutralise les anciens styles "sombres" hérités
   (en-tête de page, boutons, etc.) — v3.2
   ================================================================ */
.hero { padding: 1.8rem 1.4rem 1.7rem !important; text-align: center; background: #fff; border-bottom: 1px solid var(--border); overflow: visible; }
.hero::before { display: none !important; }
.hero h1 { font-family: var(--font-title); font-size: clamp(1.6rem, 3.6vw, 2.3rem) !important; font-weight: 800; color: var(--text) !important; margin: 0 0 .35rem !important; background: none !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; letter-spacing: .01em; line-height: 1.15; }
.hero h1 em { background: none !important; -webkit-text-fill-color: var(--crystal-blue) !important; color: var(--crystal-blue); font-style: normal; }
.hero .tagline { font-family: var(--font-body); font-style: normal !important; color: var(--text-soft) !important; font-size: 1rem !important; max-width: 740px; margin: 0 auto 1.1rem !important; line-height: 1.6; }
.hero-meteor, .hero .ornament { display: none !important; }

.btn { display: inline-block; position: relative; background: var(--crystal-blue) !important; color: #fff !important; border: 1px solid var(--crystal-blue) !important; padding: .6rem 1.3rem; border-radius: var(--radius-s); font-family: var(--font-ui); letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; font-weight: 700; box-shadow: 0 1px 4px rgba(20,30,45,.15) !important; text-decoration: none; overflow: hidden; cursor: pointer; transition: background .15s, box-shadow .15s; }
.btn:hover { background: #9b2419 !important; box-shadow: 0 2px 10px rgba(192,57,43,.3) !important; color: #fff !important; }
.btn::before, .btn::after, .btn:hover::before, .btn:hover::after { display: none !important; content: none !important; }

/* Le hero "jeu" / "chapitre" : bandeau plus clair (l'ancien était un dégradé sombre du jeu) */
.game-hero, .chapter-hero { background: #fff !important; border-bottom: 1px solid var(--border); padding: 1.6rem 0 1.4rem !important; }
.game-hero::before, .chapter-hero::before { opacity: .12 !important; }
.game-hero .game-title, .game-hero .game-subtitle, .game-hero .game-meta, .chapter-hero .game-title, .chapter-hero .game-subtitle { color: var(--text) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; }
.game-hero .game-meta span { color: var(--text-soft) !important; }
.game-hero .game-subtitle, .chapter-hero .game-subtitle { color: var(--text-mute) !important; }

/* Les vieilles cartes de jeu (page "tous les jeux" si encore utilisées) — neutraliser les ombres sombres */
.game-card { box-shadow: var(--shadow-soft); }
.game-card:hover { box-shadow: var(--shadow-deep); }

/* === Lisibilité contenu de soluce / textes longs (v3.3) === */
.chapter p, .chapter-main p { color: var(--text); }
.chapter ul, .chapter ol, .chapter-main ul, .chapter-main ol { margin: .6em 0 1em; line-height: 1.75; }
.chapter li, .chapter-main li { margin-bottom: .35em; }
/* Sous-titres dans les chapitres : épurés, pas de majuscules tape-à-l'œil */
.chapter h3, .chapter-sub, .chapter-main h3 {
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    padding-bottom: .35rem;
    margin: 1.9em 0 .8em;
}
/* Tableaux d'ennemis / récap dans la soluce : nets, lisibles */
.encounters-table, .table-recap {
    width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .92rem;
    background: var(--bg-panel); border: 1px solid var(--border);
}
.encounters-table th, .table-recap th { background: var(--bg-panel-lo); color: var(--text); text-align: left; font-weight: 700; }
.encounters-table th, .encounters-table td, .table-recap th, .table-recap td { padding: .55rem .7rem; border-bottom: 1px solid var(--border); }
.encounters-table tr:last-child td, .table-recap tr:last-child td { border-bottom: 0; }

/* === Filet de sécurité thème clair : étiquettes/badges lisibles (jamais sombre-sur-sombre) === */
.boss-tag { background: var(--bg-panel-lo) !important; color: var(--gold-soft) !important; }
.game-hero .game-meta span, .chapter-hero .game-meta span { background: var(--bg-panel-lo) !important; color: var(--text-soft) !important; }
/* Le lightbox reste sombre (visionneuse d'image) mais ses textes/boutons en clair */
.lightbox-caption { color: #fff !important; }
.lightbox button { color: #fff !important; }

/* === Sommaire de soluce : table des matières propre (2 colonnes, zébrures, n° en pastille) v3.5 === */
.chap-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    margin: 1.1rem 0 2rem !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    overflow: hidden;
    background: var(--bg-panel);
}
.chap-card {
    display: flex !important;
    align-items: center !important;
    gap: .65rem !important;
    padding: .5rem .75rem !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text) !important;
    transform: none !important;
    transition: background .12s, color .12s !important;
}
/* zébrure par LIGNE (2 colonnes) : lignes 1,3,5… (items 1-2, 5-6, 9-10…) teintées */
.chap-card:nth-of-type(4n+1), .chap-card:nth-of-type(4n+2) { background: var(--bg-panel-lo) !important; }
/* la colonne de gauche garde un filet à droite */
.chap-card:nth-of-type(odd) { border-right: 1px solid var(--border) !important; }
.chap-card:hover { background: rgba(192,57,43,.09) !important; color: var(--crystal-blue) !important; box-shadow: none !important; transform: none !important; }
.chap-card--side, .chap-card--side:hover { border-left: 0 !important; }
/* 03/09/2026 : avec un nombre IMPAIR de chapitres, la moitie droite de la derniere ligne
   restait vide dans le cadre borde — on voyait une case vide (releve sur ff7, ff10-2,
   ff13-lr). La derniere carte occupe donc les deux colonnes. */
.chap-grid > .chap-card:last-of-type:nth-of-type(odd) {
    grid-column: 1 / -1;
    border-right: 0 !important;
}
/* Le filet du bas de la derniere ligne doublait la bordure du cadre. */
.chap-grid > .chap-card:last-of-type,
.chap-grid > .chap-card:nth-last-of-type(2):nth-of-type(odd) { border-bottom: 0 !important; }
.chap-card-num {
    background: var(--crystal-blue) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 3px !important;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: .68rem;
    min-width: 1.85em; max-width: none;
    padding: .2em .3em !important;
    text-align: center;
    flex: none;
    line-height: 1.2;
}
.chap-card--side .chap-card-num { background: var(--crystal-purple) !important; }
.chap-card-title { font-size: .88rem !important; color: inherit !important; line-height: 1.35; flex: 1; }
.chap-card-arrow { color: var(--crystal-blue) !important; font-size: 1em !important; opacity: 0; transition: opacity .12s; flex: none; }
.chap-card:hover .chap-card-arrow { opacity: 1; transform: none !important; }
@media (max-width: 620px) {
    .chap-grid { grid-template-columns: 1fr !important; }
    .chap-card:nth-of-type(odd) { border-right: 0 !important; }
    .chap-card:nth-of-type(2n+1) { background: var(--bg-panel-lo) !important; }
    .chap-card:nth-of-type(2n)   { background: transparent !important; }
}

/* En-tête de fiche jeu : un peu plus aéré, titre net */
.game-hero { padding: 1.8rem 1.4rem 1.6rem !important; text-align: left; }
.game-hero .game-title { font-size: clamp(1.6rem, 4vw, 2.4rem) !important; font-weight: 800; font-family: var(--font-title); line-height: 1.1; }
.game-hero .game-subtitle { font-style: italic; font-size: 1rem !important; }
.game-hero .game-meta { gap: .5rem; flex-wrap: wrap; }
.game-hero .game-meta span { font-size: .72rem; padding: .25em .6em; }

/* === Tableaux plus lisibles : en-tête teinté + zébrures + survol (v3.4) === */
/* Tableaux "grille" .x-table (.x-row + .x-row--head) */
.x-table { border: 1px solid var(--border); background: var(--bg-panel); }
.x-row--head { background: var(--bg-night) !important; border-bottom: 2px solid var(--border-strong) !important; }
.x-table .x-row:not(.x-row--head):nth-of-type(2n) { background: var(--bg-panel-lo); }
.x-table .x-row:not(.x-row--head):hover { background: rgba(192,57,43,.07) !important; }
.x-table .x-row:last-child { border-bottom: 0 !important; }

/* Vrais tableaux HTML */
.boss-table, .encounters-table, .table-recap {
    width: 100%; border-collapse: collapse; border: 1px solid var(--border);
    background: var(--bg-panel); margin: 1.1rem 0; font-size: .92rem; display: table;
}
.boss-table th, .encounters-table th, .table-recap th, .boss-table thead th, .boss-attacks thead th {
    background: var(--bg-night); color: var(--text); font-weight: 700; text-align: left;
}
.boss-table th, .boss-table td, .encounters-table th, .encounters-table td, .table-recap th, .table-recap td {
    padding: .5rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top;
}
.boss-table tbody tr:nth-of-type(2n), .encounters-table tbody tr:nth-of-type(2n),
.table-recap tbody tr:nth-of-type(2n) { background: var(--bg-panel-lo); }
.boss-table tbody tr:hover, .encounters-table tbody tr:hover, .table-recap tbody tr:hover { background: rgba(192,57,43,.06); }
.boss-table tbody tr:last-child td, .boss-table tbody tr:last-child th { border-bottom: 0; }
/* mini-tables (techniques d'Overdrive, etc.) */
.x-mini-table tr:nth-of-type(2n) { background: var(--bg-panel-lo); }
.x-mini-table tr:hover { background: rgba(192,57,43,.06); }
/* la "boss-grid" (stats en cellules) : alterner aussi */
.boss-grid .bg-cell:nth-of-type(2n) { background: var(--bg-panel-lo); }

/* ================================================================
   EN-TÊTE DE PAGE JEU / CHAPITRE — bandeau clair avec la jaquette du jeu en grand filigrane v3.7
   ================================================================ */
.game-hero {
    position: relative !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
}
.game-hero::before { display: none !important; }
/* La jaquette : grande, à droite, en filigrane (faible opacité), fondue vers le blanc côté texte */
.game-hero-bg {
    position: absolute; top: 0; bottom: 0; right: 0; left: 30%;
    background-image: var(--ghero-img, none);
    background-size: cover; background-position: center right;
    opacity: .16;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
}
.game-hero:not(.has-bg) .game-hero-bg {
    left: 0; opacity: 1;
    background: var(--game-gradient, linear-gradient(120deg,#e9edf3,#f7fafc));
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.18), transparent);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.18), transparent);
}
/* Un filet de couleur du jeu, très discret, en haut du bandeau */
.game-hero-veil { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--game-gradient, var(--crystal-blue)); }
.game-hero-inner { position: relative; z-index: 2; padding: 1.5rem 1.6rem 1.9rem; }
/* Sur le bandeau (fond blanc), le fil d'Ariane prend un fond légèrement teinté pour ressortir */
.game-hero .crumbs { background: var(--bg-panel-lo); border-color: var(--border-strong); }
.game-hero-content { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; margin-top: 1.1rem; }
.game-hero-cover { flex: none; }
.game-hero-cover img { display: block; width: 160px; max-width: 32vw; border-radius: var(--radius-s); box-shadow: var(--shadow-deep); border: 1px solid var(--border); }
.game-hero-text { flex: 1 1 320px; min-width: 0; }
.game-hero-eyebrow {
    display: inline-flex; align-items: center; gap: .45em;
    color: #fff; font-family: var(--font-ui); font-size: .66rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .14em;
    margin-bottom: .55rem; padding: .32em .7em .32em .6em;
    background: var(--crystal-blue);
    border-radius: var(--radius-m);
    box-shadow: 0 2px 8px rgba(192,57,43,.25);
}
.game-hero-eyebrow::before { content: "▸"; font-size: .85em; opacity: .85; }
.game-hero .game-title, .game-hero h1.game-title {
    color: var(--text) !important; -webkit-text-fill-color: currentColor !important;
    font-family: var(--font-title) !important; font-weight: 800 !important;
    font-size: clamp(1.6rem, 4.2vw, 2.5rem) !important; line-height: 1.12 !important;
    margin: 0 0 .3rem !important; text-shadow: none !important;
    background: none !important; letter-spacing: .01em !important; text-align: left !important;
}
.game-hero .game-subtitle { color: var(--text-soft) !important; -webkit-text-fill-color: currentColor !important; font-style: italic !important; font-size: 1.05rem !important; margin: 0 0 .9rem !important; text-align: left !important; }
.game-hero .game-meta { display: flex !important; flex-wrap: wrap; gap: .45rem; margin: 0 !important; justify-content: flex-start !important; padding-top: .15rem; border-top: 1px solid var(--border); padding-top: .9rem; margin-top: .2rem !important; }
.game-hero .game-meta span { background: var(--bg-panel-lo) !important; color: var(--text-soft) !important; border: 1px solid var(--border) !important; border-radius: 3px !important; padding: .25em .6em !important; font-size: .72rem !important; font-family: var(--font-ui); backdrop-filter: none; }
.game-hero-summary { color: var(--text-soft) !important; -webkit-text-fill-color: currentColor !important; font-size: .93rem !important; line-height: 1.65 !important; max-width: 64ch; margin: .9rem 0 0 !important; }
@media (max-width: 600px) {
    .game-hero-bg { left: 12%; opacity: .1; }
    .game-hero-cover img { width: 95px; }
    .game-hero-content { gap: 1rem; align-items: flex-start; }
    .game-hero-summary { display: none; }
}

/* === Navigation chapitre — v5 : 2 cartes préc/suiv strictement identiques + barre "Sommaire" pleine largeur === */
.chap-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: .55rem !important;
    margin: 2.8rem 0 1.2rem !important;
}
.chap-nav-row {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 50 / 50 → les deux cartes font EXACTEMENT la même taille */
    gap: .55rem;
}
.ctn-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 3.5rem;                /* hauteur identique garantie */
    padding: .6rem .8rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.ctn-link:hover {
    border-color: var(--crystal-blue);
    background: var(--bg-panel-lo);
    box-shadow: 0 2px 12px rgba(192,57,43,.1);
}
.ctn-link.disabled { opacity: .5; pointer-events: none; background: var(--bg-panel-lo); cursor: default; }
/* Ordre naturel : pour « Précédent » la flèche est à gauche du texte (HTML order),
   pour « Suivant » la flèche est à droite du texte (HTML order). Pas de row-reverse. */
.ctn-body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; flex: 1; }
.ctn-next .ctn-body { align-items: flex-end; text-align: right; }
.ctn-dir {
    font-family: var(--font-ui);
    font-size: .58rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .15em;
    color: var(--crystal-blue);
    line-height: 1;
}
.ctn-link.disabled .ctn-dir { color: var(--text-mute); }
.ctn-title {
    display: block;
    max-width: 100%;
    font-size: .85rem; font-weight: 600;
    line-height: 1.3; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctn-num {
    display: inline-block;
    font-family: var(--font-title);
    font-size: .62rem; font-weight: 700;
    color: var(--text-mute);
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: 0 .32em;
    margin-right: .42em;
    position: relative; top: -.06em;
}
.ctn-arrow {
    flex: none;
    width: 1.75rem; height: 1.75rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    color: var(--crystal-blue);
    font-size: 1.3rem; line-height: 1;
    padding-bottom: .1em;
    transition: background .15s, color .15s, border-color .15s;
}
.ctn-link:hover .ctn-arrow { background: var(--crystal-blue); border-color: var(--crystal-blue); color: #fff; }
.ctn-link.disabled .ctn-arrow { color: var(--text-mute); }
/* === « Suivant » mis en avant (02/09/2026) : carte pleine a l'accent du site, pour inciter
   a poursuivre la lecture — « Précédent » garde sa forme discrete. Le cas desactive (dernier
   chapitre) n'est pas concerne. === */
.ctn-link.ctn-next:not(.disabled) {
    background: linear-gradient(135deg, var(--crystal-blue) 0%, var(--gold-deep) 130%);
    border-color: var(--crystal-blue);
    box-shadow: 0 2px 10px rgba(192,57,43,.28);
}
.ctn-link.ctn-next:not(.disabled) .ctn-dir { color: rgba(255,255,255,.85); }
.ctn-link.ctn-next:not(.disabled) .ctn-title { color: #fff; }
.ctn-link.ctn-next:not(.disabled) .ctn-num {
    color: #fff; background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.35);
}
.ctn-link.ctn-next:not(.disabled) .ctn-arrow {
    background: #fff; border-color: #fff; color: var(--crystal-blue);
}
.ctn-link.ctn-next:not(.disabled):hover {
    background: linear-gradient(135deg, var(--gold-bright) 0%, var(--crystal-blue) 130%);
    border-color: var(--gold-bright);
    box-shadow: 0 4px 16px rgba(192,57,43,.4);
}

/* Barre "Voir tout le sommaire" — pleine largeur, fine, sous les deux cartes */
.chap-nav-toc {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .8rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    color: var(--crystal-blue);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.chap-nav-toc:hover { border-color: var(--crystal-blue); background: var(--bg-panel-lo); }
.chap-nav-toc .ctn-ico { font-size: 1rem; line-height: 1; }
.chap-nav-toc .ctn-toc-label {
    flex: 1; min-width: 0;
    font-family: var(--font-ui);
    font-size: .67rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .13em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chap-nav-toc .ctn-count {
    flex: none;
    font-family: var(--font-title);
    font-size: .62rem; font-weight: 600;
    color: var(--text-mute);
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: .08rem .4rem;
    letter-spacing: .04em;
}
@media (max-width: 540px) {
    .chap-nav-row { grid-template-columns: 1fr; }
}

/* === Auto-liens (perso/monstre/lieu/chimère cités) — discret, façon lien web === */
.auto-link {
    color: var(--crystal-blue) !important;
    border-bottom: 1px solid rgba(192,57,43,.35) !important;
    text-decoration: none !important;
    text-shadow: none !important;
}
.auto-link:hover, .auto-link:focus { color: #9b2419 !important; border-bottom-color: var(--crystal-blue) !important; background: rgba(192,57,43,.08); }

/* === Loader : couvre UNIQUEMENT la zone de contenu (.game-content / .chapter-main),
   pas tout le site — c'est le rendu du gros contenu qui est lent, pas l'entête.
   Jaquette + couleurs du jeu (--ff-c0/c1/c2). N'apparaît que si le chargement dépasse ~220 ms. === */
.game-content:has(> #ff-loading),
.chapter-main:has(> #ff-loading) { position: relative; min-height: 52vh; }
#ff-loading {
    position: absolute; inset: 0; z-index: 30;
    display: flex; align-items: flex-start; justify-content: center;   /* la jaquette + l'anneau en HAUT du contenu */
    background:
        radial-gradient(110% 60% at 50% 0%, color-mix(in srgb, var(--ff-c1, var(--crystal-blue)) 10%, transparent), transparent 65%),
        var(--bg-deep);
    opacity: 0;
    animation: ff-loading-show .28s ease .2s forwards, ff-loading-hide .5s ease 12s forwards;
}
#ff-loading .ff-loading-box {
    display: flex; flex-direction: column; align-items: center;
    gap: .9rem;
    padding: 1.8rem 1.4rem 1.4rem;   /* léger décalage du haut, pas collé au bord */
}
#ff-loading .ff-loading-cover {
    width: 96px; max-width: 28vw; height: auto;
    border-radius: var(--radius-m);
    border: 1px solid color-mix(in srgb, var(--ff-c1, var(--crystal-blue)) 55%, var(--border));
    box-shadow: 0 6px 24px color-mix(in srgb, var(--ff-c0, #000) 35%, transparent), var(--shadow-deep);
    animation: ff-loading-bob 2.4s ease-in-out infinite;
}
#ff-loading .ff-loading-spin {
    width: 46px; height: 46px;
    border-radius: 50%;
    /* anneau fin, arc tournant aux couleurs du jeu (c2 → c1 → c0 puis trou) */
    background: conic-gradient(from 0deg,
        var(--ff-c0, #1a2440) 0deg,
        var(--ff-c1, var(--gold-soft)) 130deg,
        var(--ff-c2, var(--crystal-blue)) 250deg,
        transparent 250deg, transparent 360deg);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 5px));
    animation: ff-loading-spin .85s linear infinite;
}
#ff-loading .ff-loading-txt {
    font-family: var(--font-ui);
    font-size: .78rem; font-weight: 700;
    letter-spacing: .06em;
    color: var(--text-soft);
    text-align: center;
}
@keyframes ff-loading-spin { to { transform: rotate(360deg); } }
@keyframes ff-loading-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes ff-loading-show { to { opacity: 1; } }
@keyframes ff-loading-hide { to { opacity: 0; visibility: hidden; } }
html.ff-ready #ff-loading { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    #ff-loading .ff-loading-spin { animation-duration: 1.6s; }
    #ff-loading .ff-loading-cover { animation: none; }
}
/* Fallback navigateurs sans color-mix() : on retombe sur des valeurs neutres */
@supports not (background: color-mix(in srgb, red, blue)) {
    #ff-loading { background: var(--bg-deep); }
    #ff-loading .ff-loading-cover { border-color: var(--border-strong); box-shadow: var(--shadow-deep); }
}

/* === Fiche boss — en-tête (summary) : nom + localisation EMPILÉS (plus de colonne écrasée) === */
.boss-card > .boss-name {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas: "bn-name bn-toggle" "bn-loc bn-toggle";
    align-items: center;
    gap: .2rem .9rem !important;
}
.boss-card > .boss-name > .boss-name-text { grid-area: bn-name; flex: none !important; }
.boss-card > .boss-name > .boss-loc       { grid-area: bn-loc; justify-self: start; align-self: center; max-width: 100%; }
.boss-card > .boss-name > .boss-toggle    { grid-area: bn-toggle; }
.boss-name-text {
    font-size: 1.02rem !important;
    letter-spacing: .035em !important;
    line-height: 1.22 !important;
}
.boss-tag { letter-spacing: .12em !important; }
.boss-loc {
    text-transform: none !important;
    font-family: var(--font-ui) !important;
    font-size: .73rem !important;
    letter-spacing: .005em !important;
    font-weight: 600 !important;
    color: var(--text-soft) !important;
    background: var(--bg-panel-lo) !important;
    border-color: var(--border) !important;
    line-height: 1.3 !important;
    padding: .26em .55em !important;
}

/* === En-tête du site — refonte v4.3 : bandeau "logotype" NOIR & ROUGE === */
.site-header { background: transparent; }
.site-header-top {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(62% 130% at 85% -15%, rgba(216,54,43,.30), transparent 60%),
        radial-gradient(50% 130% at 6% 118%, rgba(216,54,43,.18), transparent 62%),
        linear-gradient(180deg, #1d1b1f 0%, #131114 55%, #0b0a0c 100%);
    border-bottom: 1px solid #2b2226;
    box-shadow: inset 0 -1px 0 rgba(216,54,43,.4);
}
/* artwork FF X (HD Remaster) détouré (fond blanc → transparent), en filigrane faible — texture colorée sur le bandeau noir */
.site-header-top::before {
    content: ""; position: absolute; pointer-events: none;
    inset: 0;
    background: url(../assets/img/header-art.png) right center / 82% auto no-repeat;
    opacity: .2;
}
/* halo rouge diffus à gauche */
.site-header-top::after {
    content: ""; position: absolute; pointer-events: none;
    left: -8%; top: 0; bottom: 0; width: 42%;
    background: radial-gradient(58% 78% at 0% 50%, rgba(216,54,43,.16), transparent 72%);
}
.site-header-top .wrap {
    position: relative; z-index: 2;
    min-height: 132px;
    display: flex !important; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .4rem;
    padding: 1.4rem 1.4rem 1.2rem !important;
}
.brand {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
}
.brand .brand-row { display: inline-flex; align-items: center; gap: .7rem; }
.brand .crystal-icon {
    width: 38px !important; height: 38px !important; opacity: 1 !important;
    filter: drop-shadow(0 2px 7px rgba(0,0,0,.4));
    transition: transform .3s ease;
}
.brand:hover .crystal-icon { transform: rotate(-6deg) scale(1.1); }
/* le titre = logotype : serif, large, espacé — encre claire sur fond noir, "Hysteria" en rouge */
.brand .brand-name {
    font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: clamp(1.7rem, 4.4vw, 2.5rem);
    letter-spacing: .14em;
    line-height: 1;
    color: #f3ece9;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0,0,0,.65), 0 0 22px rgba(216,54,43,.16);
}
.brand .brand-name em { font-style: normal; color: #e4473b; transition: color .2s, text-shadow .2s; }
.brand:hover .brand-name { color: #ffffff; }
.brand:hover .brand-name em { color: #ff5e4e; text-shadow: 0 0 16px rgba(255,94,78,.5); }
/* baseline + filet rouge sous le titre */
.brand .brand-sub {
    font-family: var(--font-ui);
    font-size: .58rem;
    letter-spacing: .3em;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    font-weight: 600;
    border: 0 !important; margin: 0 !important;
    padding: 0 0 0 .3em !important;
    text-align: center;
}
.brand .brand-sub::before {
    content: ""; display: block;
    width: 56px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, #d8362b, transparent);
    margin: 0 auto .32rem;
}
/* barre de menu — épurée, "posée" sous le bandeau noir (fin liseré rouge en haut pour la lier) */
.site-header-nav {
    position: sticky; top: 0; z-index: 50;
    background: #ffffff !important;
    border-top: 2px solid #d8362b !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 4px 14px rgba(20,30,45,.08) !important;
}
.site-header-nav .wrap { display: flex; justify-content: center; padding: 0 1.4rem; }
.main-nav { gap: .1rem; }   /* le reste (display:flex / centrage) vient de la règle de base ; en mobile c'est .main-nav{display:none} qui gagne */
.main-nav a {
    display: flex; align-items: center; position: relative;
    min-height: 44px;
    padding: 0 1.05rem !important;
    font-family: var(--font-ui);
    font-size: .73rem !important;
    font-weight: 700;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    color: var(--text-soft) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none;
    transition: color .15s, background .15s;
    overflow: hidden;
}
.main-nav a::before {   /* soulignement animé (le ::after du dropdown garde son ▾) */
    content: ""; position: absolute; left: 1.05rem; right: 1.05rem; bottom: 0;
    height: 2px; border-radius: 2px; background: var(--crystal-blue);
    transform: scaleX(0); transform-origin: 50% 100%;
    transition: transform .2s ease, opacity .2s ease;
    opacity: .55; pointer-events: none;
}
.main-nav a:hover { color: var(--crystal-blue) !important; background: rgba(192,57,43,.04) !important; }
.main-nav a:hover::before { transform: scaleX(.5); }
.main-nav a.active { color: var(--crystal-blue) !important; background: rgba(192,57,43,.05) !important; }
.main-nav a.active::before { transform: scaleX(1); opacity: 1; }
.nav-dropdown > a::after { opacity: .6; }
@media (max-width: 880px) {
    /* l'entête redevient compact + le menu repasse en mode hamburger (cf. règles .main-nav du bloc Responsive plus haut) */
    .site-header-top .wrap { min-height: 0 !important; padding: .8rem 3.4rem .8rem 1.2rem !important; align-items: flex-start; gap: 0; }
    .site-header-top::before, .site-header-top::after { display: none !important; }
    .brand { align-items: flex-start; gap: .12rem; }
    .brand .brand-row { gap: .5rem; }
    .brand .crystal-icon { width: 30px !important; height: 30px !important; }
    .brand .brand-name { font-size: 1.3rem !important; letter-spacing: .08em !important; }
    .brand .brand-sub { display: none; }
    /* la barre de menu redevient invisible (le menu est dans l'overlay hamburger) */
    .site-header-nav { position: static !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
    .site-header-nav .wrap { padding: 0 !important; display: block; }
    /* --- Menu hamburger : panneau propre, liens en pleine largeur avec séparateurs --- */
    .main-nav { padding: 0 !important; gap: 0 !important; border-top: 1px solid var(--border); }
    .main-nav a::before { display: none; }
    .main-nav > a, .nav-dropdown > a {
        display: flex; align-items: center; width: 100%;
        padding: .9rem 1.3rem !important; min-height: 0 !important;
        font-size: .92rem !important; letter-spacing: .05em !important; text-transform: uppercase;
        background: transparent !important; box-shadow: none !important;
        border-bottom: 1px solid var(--border);
    }
    .main-nav > a:last-child { border-bottom: 0; }
    .main-nav a:hover, .main-nav a.active { background: rgba(192,57,43,.07) !important; color: var(--crystal-blue) !important; }
    .main-nav a.active { box-shadow: inset 3px 0 0 var(--crystal-blue) !important; }
    /* sous-menu "Saga" : empilé sous son intitulé, et REPLIÉ par défaut — on tape "Saga" pour le dérouler */
    .nav-dropdown { width: 100%; flex-direction: column; border-bottom: 1px solid var(--border); }
    .nav-dropdown > a { border-bottom: 1px solid var(--border); cursor: pointer; }
    .nav-dropdown > a.active { color: var(--text-soft) !important; background: transparent !important; box-shadow: none !important; }  /* "Saga" = bouton de pli, pas une page sélectionnée */
    .nav-dropdown > a::after { content: ' ▾'; margin-left: auto !important; opacity: .6; font-size: .8em; transition: transform .2s; }
    .nav-dropdown.open > a { background: rgba(192,57,43,.05) !important; color: var(--crystal-blue) !important; }
    .nav-dropdown.open > a::after { transform: rotate(180deg); opacity: .8; }
    .nav-dropdown-menu {
        position: static !important; display: none !important;
        background: var(--bg-panel-lo); border: 0 !important; box-shadow: none !important;
        padding: .25rem 0 .35rem !important; max-height: none !important; min-width: 0 !important;
        transform: none !important;
    }
    .nav-dropdown.open .nav-dropdown-menu { display: block !important; }
    .nav-dropdown-menu a {
        display: flex !important; align-items: center; gap: .65rem; width: 100%;
        padding: .5rem 1.3rem !important;
        font-size: .9rem !important; text-transform: none !important; letter-spacing: 0 !important;
        font-weight: 600 !important; color: var(--text) !important; box-shadow: none !important;
        border-radius: 0 !important;
    }
    .nav-dropdown-menu a + a { border-top: 1px solid rgba(0,0,0,.05); }
    .nav-dropdown-menu a:hover { background: rgba(192,57,43,.08) !important; color: var(--crystal-blue) !important; }
    .nav-dropdown-menu a small { display: block; font-size: .68rem !important; color: var(--text-mute); margin-top: 1px; font-weight: 400; }
    .nav-game-thumb { width: 46px; height: 30px; flex: none; }
}
@media (max-width: 600px) {
    .crumbs { font-size: .64rem; padding: .28rem .5rem; letter-spacing: .03em; }
    .crumbs a, .crumbs span:not(.sep) { padding: .06rem .18rem; }
    .crumbs .sep { margin: 0; }
    .disc-title { font-size: 1.2rem; }
    .reaction { font-size: 1.25rem; padding: .35rem .6rem .35rem .48rem; }
}
@supports not (background: color-mix(in srgb, red, blue)) {
    .site-header-top { background: linear-gradient(180deg, #1d1b1f 0%, #131114 55%, #0b0a0c 100%); }
}

/* === Système de commentaires (« Qu'en pensez-vous ? ») === */
.discussion {
    margin: 2.8rem 0 1rem;
    padding: 1.8rem 0 0;
    border-top: 1px solid var(--border);
}
.disc-head { text-align: center; margin-bottom: 1.2rem; }
.disc-title {
    font-family: var(--font-title); font-size: 1.45rem; font-weight: 800;
    margin: 0 0 .3rem; color: var(--text);
    display: inline-flex; align-items: center; gap: .5rem;
}
.disc-title::before { content: "💬"; font-size: .85em; filter: saturate(.9); }
.disc-sub { font-size: .82rem; color: var(--text-mute); }
.disc-sub .disc-count { font-weight: 800; color: var(--crystal-blue); }
.disc-sub .disc-label { color: var(--text-soft); }

/* réactions — pastilles plus marquées, une seule par personne */
.reactions { display: flex; justify-content: center; gap: .55rem; flex-wrap: wrap; margin: 0 0 1.6rem; }
.reaction {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--bg-panel); border: 1.5px solid var(--border); border-radius: 999px;
    padding: .4rem .8rem .4rem .6rem; cursor: pointer;
    font-size: 1.45rem; line-height: 1;
    box-shadow: 0 1px 3px rgba(20,30,45,.06);
    transition: transform .12s ease, border-color .15s, background .15s, box-shadow .15s, filter .15s, opacity .15s;
}
.reaction:hover { transform: translateY(-2px); border-color: var(--crystal-blue); box-shadow: 0 4px 12px rgba(192,57,43,.18); }
.reaction.is-on {
    border-color: var(--crystal-blue);
    background: rgba(192,57,43,.1);
    box-shadow: 0 2px 10px rgba(192,57,43,.2);
    cursor: pointer;
}
/* quand l'utilisateur a déjà voté : les autres réactions s'estompent */
.reactions.has-vote .reaction:not(.is-on) { filter: grayscale(.6); opacity: .5; }
.reactions.has-vote .reaction:not(.is-on):hover { filter: grayscale(.25); opacity: .8; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(20,30,45,.1); }
.reaction-emo { line-height: 1; }
.reaction-n { font-family: var(--font-ui); font-size: .76rem; font-weight: 800; color: var(--text-soft); min-width: .8em; text-align: center; }
.reaction.is-on .reaction-n { color: var(--crystal-blue); }
.reaction-n[hidden] { display: none; }

.disc-flash { text-align: center; font-size: .85rem; font-weight: 600; padding: .55rem .9rem; border-radius: var(--radius-m); margin: 0 0 1.1rem; }
.disc-flash--ok  { background: rgba(22,138,95,.1); color: #137a52; border: 1px solid rgba(22,138,95,.25); }
.disc-flash--err { background: rgba(232,90,90,.1); color: #b03a3a; border: 1px solid rgba(232,90,90,.28); }

/* formulaire — dans une carte pour mieux ressortir */
.comment-form {
    margin-bottom: 1.8rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-soft);
    padding: 1rem 1.1rem 1.1rem;
}
.cf-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.cf-reply-banner {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    font-size: .78rem; color: var(--text-soft);
    background: rgba(192,57,43,.07); border: 1px solid rgba(192,57,43,.2);
    border-radius: var(--radius-s); padding: .35rem .7rem; margin-bottom: .55rem;
}
.cf-reply-banner[hidden] { display: none !important; }   /* le .display:flex de la classe écrasait [hidden] sans le !important */
.cf-reply-banner strong { color: var(--crystal-blue); }
.cf-cancel-reply { background: none; border: 0; color: var(--text-mute); cursor: pointer; font-size: .74rem; text-decoration: underline; padding: 0 .15rem; }
.comment-form textarea {
    display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 70px;
    font-family: var(--font-body); font-size: .94rem; line-height: 1.5;
    padding: .7rem .85rem; border: 1px solid var(--border-strong); border-radius: var(--radius-m);
    background: var(--bg-panel-lo); color: var(--text);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.comment-form textarea::placeholder, .cf-name::placeholder { color: var(--text-mute); }
.comment-form textarea:focus { outline: none; background: var(--bg-panel); border-color: var(--crystal-blue); box-shadow: 0 0 0 3px rgba(192,57,43,.13); }
.cf-row { display: flex; gap: .65rem; margin-top: .65rem; flex-wrap: wrap; align-items: stretch; }
.cf-name {
    flex: 1; min-width: 180px; box-sizing: border-box;
    font-family: var(--font-body); font-size: .9rem;
    padding: .55rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-m);
    background: var(--bg-panel-lo); color: var(--text);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.cf-name:focus { outline: none; background: var(--bg-panel); border-color: var(--crystal-blue); box-shadow: 0 0 0 3px rgba(192,57,43,.13); }
.cf-submit { flex: none; padding-left: 1.6rem; padding-right: 1.6rem; }

/* liste */
.comment-list, .comment-replies { list-style: none; margin: 0; padding: 0; }
.comment-replies { margin: .9rem 0 .2rem; padding-left: 1.25rem; border-left: 2px solid var(--border); }
.comment { display: flex; gap: .8rem; padding: 1rem .2rem; }
.comment-list > .comment + .comment, .comment-replies > .comment + .comment { border-top: 1px solid var(--border); }
.comment-replies .comment { padding: .8rem .2rem; }
.comment-av {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-title); font-weight: 800; font-size: 1rem;
    color: #fff;
    background: linear-gradient(150deg, hsl(var(--av-h, 210) 48% 56%), hsl(calc(var(--av-h, 210) + 24) 46% 44%));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px 3px rgba(20,30,45,.12);
}
.comment-replies .comment-av { width: 30px; height: 30px; font-size: .82rem; }
.comment-main { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin-bottom: .25rem; }
.comment-name { font-family: var(--font-ui); font-weight: 800; font-size: .9rem; color: var(--text); }
.comment-time { font-size: .72rem; color: var(--text-mute); }
.comment-del { font-size: .68rem; color: var(--danger); text-decoration: none; margin-left: auto; }
.comment-del:hover { text-decoration: underline; }
.comment-body { font-size: .93rem; line-height: 1.55; color: var(--text-soft); overflow-wrap: anywhere; }
.comment-removed { color: var(--text-mute); }
.comment-reply {
    background: none; border: 0; color: var(--crystal-blue);
    font-family: var(--font-ui); font-weight: 700; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .07em; cursor: pointer; padding: .4rem 0 0;
}
.comment-reply:hover { text-decoration: underline; }
.disc-empty { text-align: center; color: var(--text-mute); font-size: .92rem; padding: 1.2rem 0; }
@media (max-width: 560px) {
    .comment-replies { padding-left: .7rem; }
    .comment-av { width: 32px; height: 32px; font-size: .88rem; }
    .cf-name { min-width: 0; }
    .reaction { font-size: 1.3rem; padding: .35rem .65rem .35rem .5rem; }
}

/* === Lightbox : clic sur l'image agrandie → bascule "taille réelle" (scrollable) === */
.lightbox img { cursor: zoom-in; }
.lightbox.img-zoomed { overflow: auto; align-items: safe center; justify-content: safe center; }
.lightbox.img-zoomed img { max-width: none !important; max-height: none !important; cursor: zoom-out; box-shadow: none; }
.lightbox.img-zoomed .lightbox-caption { display: none; }

/* === Intros d'onglet (.albhed-intro) : aération des titres / paragraphes / listes === */
.albhed-intro p { margin: 0 0 .9rem; }
.albhed-intro p:last-child { margin-bottom: 0; }
.albhed-intro h3, .albhed-intro h4 { font-family: var(--font-title); color: var(--gold-soft); margin: 1.5rem 0 .45rem; font-size: 1.05rem; line-height: 1.3; }
.albhed-intro h3:first-child, .albhed-intro h4:first-child { margin-top: .2rem; }
.albhed-intro ul, .albhed-intro ol { margin: .35rem 0 1rem 1.3rem; color: var(--text-soft); }
.albhed-intro li { margin: .3rem 0; }
.albhed-intro figure { margin: 0 0 1.15rem; }
.x-h3:first-of-type { margin-top: 1.6rem !important; }

/* === Bandeaux d'illustration en tête d'onglet (.section-banners) — ex. présentation === */
.section-banners { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .8rem; margin: 0 0 1.5rem; }
.section-banners--solo { grid-template-columns: 1fr; }
.section-banner { margin: 0; border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.section-banner img { display: block; width: 100%; height: auto; }
/* 03/09/2026 : un bandeau seul etait recadre en bande 5,8:1 et agrandi jusqu'a x2,89
   (une source de 320 px etiree sur 924). On garde desormais l'image entiere et nette,
   sans jamais l'agrandir au-dela de sa taille naturelle, et on comble le cadre avec une
   copie floutee d'elle-meme — meme principe que les illustrations de bloc. */
.section-banners--solo .section-banner {
    position: relative; overflow: hidden;
    background: var(--bg-panel-lo);
    display: flex; align-items: center; justify-content: center;
    min-height: 150px;
}
.section-banners--solo .section-banner::before {
    content: ""; position: absolute; inset: -6%;
    background-image: var(--illus-fond); background-size: cover; background-position: center;
    filter: blur(22px) saturate(.75) brightness(.9); transform: scale(1.06);
}
.section-banners--solo .section-banner img {
    position: relative; width: auto; max-width: 100%;
    max-height: 300px; height: auto; object-fit: contain;
}
@media (max-width: 560px) {
    .section-banners--solo .section-banner { min-height: 110px; }
    .section-banners--solo .section-banner img { max-height: 190px; }
}

/* === Bandeau d'illustration inline (avant un <h4> de sous-section) — ex. étapes 1..5 de l'onglet Arène FF VII === */
.section-banner-inline { margin: 1.4rem 0 .9rem; border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.section-banner-inline img { display: block; width: 100%; height: 140px; object-fit: cover; object-position: center center; }
@media (max-width: 560px) { .section-banner-inline img { height: 100px; } }

.jecht-thumb { width: 64px; height: 40px; object-fit: cover; border-radius: 2px; border: 1px solid var(--border); vertical-align: middle; margin-right: .5rem; cursor: zoom-in; }

/* === Lisibilité : on supprime le « texte rouge sur fond rosé » → fonds neutres / badges contrastés === */
/* Fiches boss : carte sur fond blanc neutre — le liseré rouge à gauche suffit à signaler « boss » */
.boss-card { background: var(--bg-panel) !important; }
.boss-card > .boss-name { background: var(--bg-panel-lo); }
.boss-card > .boss-name:hover { background: #e9edf1; }
.boss-name-text { color: #b03434 !important; }       /* rouge profond, lisible sur fond clair */
.boss-card[open] { box-shadow: 0 0 0 1px rgba(176,52,52,.45), var(--shadow-deep) !important; }
/* Grille de stats élémentaires : cellules en badges pleins, texte blanc (au lieu de texte coloré sur fond pâle) */
.boss-grid .bg-cell.bg-weak,   .bg-cell.bg-weak   { background: #c0392b !important; }
.bg-cell.bg-weak   .bg-key, .bg-cell.bg-weak   .bg-val { color: #fff !important; }
.boss-grid .bg-cell.bg-absorb, .bg-cell.bg-absorb { background: #2e7d54 !important; }
.bg-cell.bg-absorb .bg-key, .bg-cell.bg-absorb .bg-val { color: #fff !important; }
.boss-grid .bg-cell.bg-immune, .bg-cell.bg-immune { background: #5c6470 !important; }
.bg-cell.bg-immune .bg-key, .bg-cell.bg-immune .bg-val { color: #fff !important; }
/* Callout « warning » : titre/icône en rouge profond (le fond reste très pâle pour distinguer du tip) */
.callout.warning .callout-title, .callout.warning::before, .callout.warning strong { color: #b03434 !important; }

/* === Sommaires d'onglet (.toc / .toc-list) : numéros « jolis » comme la liste des chapitres (pastille bleue) === */
.toc-list { columns: 2; column-gap: 2rem; list-style: none !important; counter-reset: toc; padding: .9rem 0 .2rem; margin: 0; font-size: .9rem; }
.toc-list li { counter-increment: toc; margin: 0 0 1px; break-inside: avoid; color: var(--text-soft); }
.toc-list li::marker { content: none; }
.toc-list a { display: flex; align-items: center; gap: .55rem; padding: .28rem .35rem; border-radius: var(--radius-s); color: var(--text-soft); text-decoration: none; line-height: 1.3; }
.toc-list a::before {
    content: counter(toc, decimal-leading-zero);
    flex: none; min-width: 1.7rem; text-align: center;
    font-family: var(--font-ui); font-size: .64rem; font-weight: 800; letter-spacing: .02em;
    color: #fff; background: var(--crystal-blue);
    border-radius: var(--radius-s); padding: .16rem 0;
}
.toc-list a:hover { background: rgba(192,57,43,.07); color: var(--crystal-blue); }
@media (max-width: 720px) { .toc-list { columns: 1; } }

/* === TOC d'onglet (astuces / secrets) : même habillage que la liste des chapitres (.chap-grid / .chap-card) === */
.toc-chap-grid { margin-top: .85rem; }
.toc .chap-card-arrow { font-size: .95em !important; }

/* === Bandeaux d'onglet : strip mince (« un bandeau, pas un rectangle énorme ») === */
.section-banners { grid-template-columns: 1fr 1fr !important; }
.section-banners--solo { grid-template-columns: 1fr !important; }
.section-banner { aspect-ratio: auto !important; }
.section-banner:first-child { grid-column: 1 / -1; }
.section-banner img {
    width: 100% !important;
    height: 160px !important;
    max-height: 160px !important;
    object-fit: cover;
    object-position: center 35%;
}
/* 03/09/2026 : la bande de 160 px reste (« un bandeau, pas un rectangle enorme »), mais on
   n'etire plus une petite source pour la remplir — 29 bandeaux etaient agrandis jusqu'a
   x2,89, dont une source de 320 px tiree sur 924. L'image garde sa largeur naturelle,
   centree, et le cadre est comble par une copie floutee d'elle-meme. */
.section-banner--petite img {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto;
    position: relative;
}
.section-banners:not(.section-banners--solo) .section-banner:not(:first-child) img { height: 120px !important; max-height: 120px !important; }
@media (max-width: 560px) {
    .section-banners { grid-template-columns: 1fr !important; }
    .section-banner img,
    .section-banners:not(.section-banners--solo) .section-banner:not(:first-child) img { height: 100px !important; max-height: 100px !important; }
}

/* === Grilles d'images (ex. sphérier Standard / Expert) — aperçu côte à côte, clic = zoom === */
.grid-imgs { margin: .6rem 0 1.7rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; align-items: start; }
.grid-img-full { margin: 0; }
/* Cadre de proportion constante : sans lui, une seule image portrait deforme toute la
   galerie (cas eikon-shiva.jpg, 800x950, sur l'onglet Competences & Forge de FF16).
   `contain` plutot que `cover` : on ne rogne rien, on centre. FF12 et FF13 sont deja
   en 16/9, leurs galeries sont inchangees. Ajoute le 19/08/2026. */
.grid-img-full img { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-soft); background: var(--bg-panel-lo); cursor: zoom-in; }
.grid-img-full figcaption { margin-top: .35rem; font-size: .8rem; color: var(--text-soft); text-align: center; }
.grid-img-hint { color: var(--text-mute); font-size: .9em; }

/* === Anti « rouge sur fond rose » — filet de sécurité : aucun fond rosé dans les cartes boss / vignettes / fiches missables, et le rouge est toujours profond/lisible === */
.boss-card, .boss-card > .boss-name, .boss-card .boss-body,
.bestiary-cell, .bestiary-cell.open, .bestiary-cell .best-detail,
.albhed-card, .albhed-card.is-missable {
    background-color: var(--bg-panel) !important;
    background-image: none !important;
    --danger: #b03434;          /* tout color: var(--danger) à l'intérieur devient ce rouge profond, lisible */
}
.boss-card > .boss-name { background-color: var(--bg-panel-lo) !important; }
.boss-card .boss-name-text, .primer-missable .primer-zone, .albhed-legend-miss, .albhed-legend-miss strong { color: #b03434 !important; }

/* === DERNIER PASSAGE anti rouge-sur-rose / rouge-texte-noir — règles agressives === */
/* Une fiche de boss n'a JAMAIS de fond rosé : fond blanc, en-tête gris clair. */
details.boss-card { background-color: #ffffff !important; background-image: none !important; }
details.boss-card > summary.boss-name { background-color: var(--bg-panel-lo) !important; background-image: none !important; }
details.boss-card > summary.boss-name:hover { background-color: #e9edf1 !important; }
.bestiary-cell, .bestiary-cell.open, .bestiary-cell .best-detail { background-color: #ffffff !important; background-image: none !important; }
/* Cellules élémentaires : badge plein, TOUT le contenu en blanc (texte, sous-éléments). */
.bg-cell.bg-weak   { background: #b53636 !important; }
.bg-cell.bg-weak,   .bg-cell.bg-weak *   { color: #ffffff !important; }
.bg-cell.bg-absorb { background: #2e7d54 !important; }
.bg-cell.bg-absorb, .bg-cell.bg-absorb * { color: #ffffff !important; }
.bg-cell.bg-immune { background: #5c6470 !important; }
.bg-cell.bg-immune, .bg-cell.bg-immune * { color: #ffffff !important; }
/* Badge « À NE PAS RATER » : rouge profond, texte blanc. */
.albhed-badge-miss { background: #b53636 !important; }
.albhed-badge-miss, .albhed-badge-miss * { color: #ffffff !important; }
/* Callout « attention » : fond quasi blanc, titre/icône en rouge profond, corps en gris foncé. */
.callout.warning { background: #fdf0f0 !important; border-color: #c0392b !important; }
.callout.warning .callout-title, .callout.warning::before, .callout.warning strong { color: #a02828 !important; }
.callout.warning p, .callout.warning li, .callout.warning { color: var(--text) !important; }

/* === Callout « attention » (⚠) : corps en GRAS FONCÉ (jamais rouge) sur fond quasi-blanc — seul le titre/l'icône gardent l'accent rouge === */
.callout.warning { background: #fdf1f0 !important; border-color: #c0392b !important; }
.callout.warning, .callout.warning p, .callout.warning li, .callout.warning strong, .callout.warning b, .callout.warning em { color: var(--text) !important; }
.callout.warning strong, .callout.warning b { font-weight: 700; }
.callout.warning .callout-title { color: #a02424 !important; }
.callout.warning::before { color: #c0392b !important; }
.callout.warning a, .callout.warning a:hover { color: var(--crystal-blue) !important; }

/* === Note « ⚠ deadline » des fiches missables : c'était du texte rose clair (#f3b6b6, hérité du thème sombre) sur fond rosé → illisible. Maintenant : texte foncé sur fond quasi-blanc + accent rouge à gauche. === */
.albhed-note.is-warn {
    background: #fdf1f0 !important;
    color: var(--text) !important;
    border: 1px solid rgba(192,57,43,.22);
    border-left: 3px solid #c0392b;
    font-weight: 500;
}
.albhed-note.is-warn strong, .albhed-note.is-warn b { color: #a02424; }
.albhed-note.is-warn a { color: var(--crystal-blue); }

/* === Tableau de rencontres, ligne « danger » (.encounters-table tr.warn-row) : encore du texte rose clair (#e8a0a0 / #ff9999, thème sombre) sur fond rosé → fond quasi-blanc + texte foncé + accent rouge === */
.encounters-table tr.warn-row td { background: #fdf1f0 !important; color: var(--text) !important; border-left-color: #c0392b !important; }
.encounters-table tr.warn-row td strong, .encounters-table tr.warn-row td b { color: #a02424 !important; }

/* === Onglet « Bande-son / OST » === */
/* --- Carte « lecteur OST » : entête colorée aux couleurs du jeu + player YouTube intégré + bas de carte --- */
.ost-mediacard { margin: 0 0 1.8rem; border: 1px solid var(--border-strong); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-soft); background: var(--bg-panel); }
.ost-mediacard-head { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; background: var(--ost-grad, linear-gradient(135deg,#3a1410,#c0392b,#ff7e60)); color: #fff; }
.ost-mediacard-ico { font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.ost-mediacard-titles { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ost-mediacard-title { font-family: var(--font-title); font-weight: 800; font-size: 1.02rem; line-height: 1.25; text-shadow: 0 1px 3px rgba(0,0,0,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ost-mediacard-meta { font-family: var(--font-ui); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; opacity: .9; margin-top: .12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ost-mediacard-link { flex: none; font-family: var(--font-ui); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #fff; text-decoration: none; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-s); padding: .3rem .55rem; }
.ost-mediacard-link:hover { background: rgba(0,0,0,.38); }
.ost-player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.ost-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ost-mediacard-foot { margin: 0; padding: .5rem .9rem .6rem; font-size: .76rem; line-height: 1.5; color: var(--text-mute); background: var(--bg-panel-lo); border-top: 1px solid var(--border); }
.ost-mediacard-foot strong { color: var(--crystal-blue); }
/* (ancien) bandeau-notice — conservé pour compat */
.ost-notice { font-size: .82rem; color: var(--text-soft); background: var(--bg-panel-lo); border: 1px solid var(--border); border-radius: var(--radius-m); padding: .55rem .8rem; margin: 0 0 1rem; line-height: 1.5; }
.ost-notice strong, .ost-notice a { color: var(--crystal-blue); }
.ost-disc-title { font-family: var(--font-title); color: var(--gold-soft); margin: 1.5rem 0 .5rem; font-size: 1.02rem; }
.ost-tracklist { list-style: none; margin: 0 0 1rem; padding: 0; }
.ost-track { display: flex; align-items: baseline; gap: .7rem; padding: .4rem .45rem; border-radius: var(--radius-s); font-size: .9rem; }
.ost-track:hover { background: var(--bg-panel-lo); }
.ost-track + .ost-track { border-top: 1px solid var(--border); }
.ost-track-num { flex: none; width: 1.9rem; text-align: right; font-family: var(--font-mono); font-size: .78rem; color: var(--text-mute); }
.ost-track-title { flex: 1; min-width: 0; color: var(--text); }
.ost-track-sub { color: var(--text-mute); font-size: .85em; }
.ost-track-comp { flex: none; font-size: .74rem; color: var(--text-soft); white-space: nowrap; }
.ost-track-dur { flex: none; font-family: var(--font-mono); font-size: .78rem; color: var(--text-mute); width: 2.7rem; text-align: right; }
.ost-track-yt { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: #c0392b; color: #fff; font-size: .62rem; line-height: 1; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: background .12s, transform .12s; }
.ost-track-yt:hover { background: #8f2a20; transform: scale(1.12); }
.ost-track-yt.is-off { background: var(--bg-deep); color: var(--text-mute); box-shadow: none; }
/* --- Scène OST : lecteur à gauche + mini-playlist déroulante à droite (la liste ne rallonge plus la page) --- */
.ost-stage { margin: 0 0 1.6rem; }
.ost-stage .ost-mediacard { margin: 0; }
.ost-stage.has-both { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 32%, 340px); gap: 1rem; align-items: start; }
.ost-sidelist { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-m); background: var(--bg-panel); box-shadow: var(--shadow-soft); overflow: hidden; max-height: clamp(280px, 44vh, 440px); }
.ost-stage:not(.has-both) .ost-sidelist { max-height: 600px; }
.ost-sidelist-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .7rem; font-family: var(--font-ui); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--ost-grad, linear-gradient(135deg,#3a1410,#c0392b,#ff7e60)); }
.ost-sidelist-head .ost-sidelist-hint { opacity: .82; font-weight: 700; white-space: nowrap; }
.ost-sidelist-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .2rem .3rem .4rem; }
.ost-disc-sep { position: sticky; top: 0; z-index: 1; margin: .2rem 0 .1rem; padding: .25rem .5rem; font-family: var(--font-title); font-size: .8rem; font-weight: 800; color: var(--gold-soft); background: var(--bg-panel); border-bottom: 1px solid var(--border); }
.ost-tracklist--side { margin: 0; }
.ost-tracklist--side .ost-track { font-size: .82rem; gap: .45rem; padding: .32rem .35rem; align-items: center; }
.ost-tracklist--side .ost-track + .ost-track { border-top-color: var(--border); }
.ost-tracklist--side .ost-track-num { width: 1.5rem; font-size: .7rem; }
.ost-tracklist--side .ost-track-sub, .ost-tracklist--side .ost-track-comp { display: none; }
/* 07/09/2026 : la note de piste est masquee dans la playlist laterale — elle y occupait une
   douzaine de lignes par titre et tronquait le nom de la chanson. Demande du proprietaire :
   une ligne simple par piste, avec le seul titre francais. La note reste dans les donnees. */
.ost-tracklist--side .ost-track-note { display: none; }
.ost-tracklist--side .ost-track-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ost-tracklist--side .ost-track-dur { width: 2.1rem; font-size: .68rem; }
.ost-tracklist--side .ost-track-yt { width: 1.35rem; height: 1.35rem; font-size: .55rem; }
.ost-track.is-playing { background: rgba(192,57,43,.1); }
.ost-track.is-playing .ost-track-title { color: #b03434; font-weight: 700; }
.ost-track.is-playing .ost-track-yt { background: #8f2a20; }
@media (max-width: 900px) { .ost-stage.has-both { grid-template-columns: 1fr; } .ost-stage.has-both .ost-sidelist { max-height: 320px; } }
@media (max-width: 560px) { .ost-track-comp { display: none; } .ost-player { aspect-ratio: auto; height: 200px; } }

/* === Articles (page d'accueil "À la une" : .feat-card déjà stylé) + liste + page article === */
.article-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; margin: 1.2rem 0; }
.article-card { display: flex; flex-direction: column; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-soft); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .12s; }
.article-card:hover { border-color: var(--crystal-blue); box-shadow: 0 4px 16px rgba(192,57,43,.12); transform: translateY(-2px); }
.article-card-img { aspect-ratio: 16 / 9; background: var(--bg-panel-lo) center/cover no-repeat; }
.article-card-body { padding: .8rem .95rem 1rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.article-card-meta { font-family: var(--font-ui); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--crystal-blue); display: flex; gap: .5rem; align-items: center; }
.article-card-meta .ac-date { color: var(--text-mute); font-weight: 600; letter-spacing: .04em; }
.article-card-title { font-family: var(--font-title); font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--text); margin: .1rem 0 0; }
.article-card-excerpt { font-size: .86rem; color: var(--text-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article-card-more { margin-top: auto; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--crystal-blue); padding-top: .5rem; }
/* page d'un article — image puis bandeau-titre sur fond blanc (toujours lisible) */
.article-hero { border-radius: var(--radius-m) var(--radius-m) 0 0; overflow: hidden; border: 1px solid var(--border); border-bottom: 0; box-shadow: var(--shadow-soft); }
/* width:100% explicite : avec une largeur auto, le max-height se TRANSFERE en largeur via
   l aspect-ratio (340 x 21/9 = 793 px) et l image laissait une bande vide a droite de la
   carte (signale le 02/09/2026). */
.article-hero-img { width: 100%; aspect-ratio: 21 / 9; max-height: 340px; background: var(--bg-panel-lo) center/cover no-repeat; }
.article-head { background: var(--bg-panel); border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: 0 0 var(--radius-m) var(--radius-m); padding: 1.1rem 1.4rem 1.3rem; margin-bottom: 1.6rem; box-shadow: var(--shadow-soft); }
.article-full > .article-head:first-child { border-radius: var(--radius-m); border-top-width: 3px; }
.article-head-meta { display: block; font-family: var(--font-ui); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-soft); }
.article-head-meta .ah-dot { margin: 0 .45em; color: var(--text-mute); }
.article-head-title { font-family: var(--font-title); font-size: clamp(1.45rem, 3.4vw, 2.1rem); font-weight: 800; line-height: 1.2; color: var(--text); margin: .35rem 0 0; }
.article-head-byline { margin: .6rem 0 0; font-family: var(--font-ui); font-size: .82rem; color: var(--text-mute); }
.article-head-byline time { color: var(--text-soft); }
.article-author { font-weight: 800; color: var(--gold-soft); }
.article-body { font-size: 1rem; line-height: 1.7; color: var(--text-soft); }
.article-body h2, .article-body h3 { font-family: var(--font-title); color: var(--text); margin: 1.6rem 0 .5rem; }
.article-body p { margin: 0 0 1rem; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius-m); border: 1px solid var(--border); }
@media (max-width: 560px) { .article-hero-img { aspect-ratio: 16/9; } .article-list { grid-template-columns: 1fr; } .article-head { padding: .9rem 1rem 1rem; } }

/* === Page d'accueil : entête de la section "À la une" (titre + lien "tous les articles") === */
.home-une-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.home-une-all { font-family: var(--font-ui); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--crystal-blue); text-decoration: none; }
.home-une-all:hover { text-decoration: underline; }

/* accessibilité / SEO : texte réservé aux lecteurs d'écran & moteurs (ex. <h1> de l'accueil) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* === Page « À propos » : carte auteur === */
.about-author { border-left: 3px solid #d8362b; }
.author-card { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.author-avatar { flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 30% 22%, #ff8064, #c0392b 55%, #7a1410); border: 3px solid #fff; box-shadow: 0 3px 12px rgba(192,57,43,.32); }
.author-avatar img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.author-meta { flex: 1; min-width: 220px; }
.author-name { font-family: var(--font-title); font-size: 1.5rem; margin: 0 0 .1rem; color: var(--text); }
.author-role { font-family: var(--font-ui); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-soft); margin: 0 0 .7rem; }
.author-meta > p { margin: 0; line-height: 1.7; color: var(--text-soft); }
@media (max-width: 520px) { .author-card { justify-content: center; text-align: center; } .author-meta { text-align: left; } }

/* === Entrée de menu « Connexion » / « Admin » (icône cristal FF à gauche) === */
.main-nav a.nav-account { display: inline-flex; align-items: center; gap: .42em; }
.main-nav a.nav-account .nav-account-ico { width: 15px; height: 15px; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
@media (min-width: 881px) { .main-nav a.nav-account { margin-left: .25rem; padding-left: .9rem; border-left: 1px solid var(--border); } }
@media (max-width: 880px) {
    .main-nav a.nav-account { display: flex !important; gap: .55em; }
    .main-nav a.nav-account .nav-account-ico { width: 18px; height: 18px; }
}
.login-panel { max-width: 460px; margin: 0 auto; }

/* === Admin : tables génériques + formulaire d'article === */
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table thead th { background: var(--bg-panel-lo); text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); padding: .6rem .8rem; border-bottom: 1px solid var(--border); }
.admin-table tbody td { padding: .55rem .8rem; border-top: 1px solid var(--border); vertical-align: top; }
.admin-table tbody tr:hover { background: var(--bg-panel-lo); }
.btn.btn-sm { font-size: .74rem; padding: .3rem .6rem; }
.btn.btn-danger { background: #c0392b; border-color: #a82a22; color: #fff; }
.btn.btn-danger:hover { background: #a82a22; }
.art-status { display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: .15em .55em; border-radius: var(--radius-s); }
.art-status--pub   { background: rgba(46,125,84,.16);  color: #2e7d54; }
.art-status--draft { background: rgba(177,39,29,.18); color: var(--gold-soft); }
.art-form { display: flex; flex-direction: column; gap: 1rem; }
.art-label { display: block; font-size: .82rem; font-weight: 600; color: var(--text-soft); }
.art-label > input, .art-label > textarea, .art-label > select { font-weight: 400; }
.art-label code { font-weight: 400; color: var(--text-mute); }
.art-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }

/* === Garde-fou anti-débordement horizontal + panneaux rétractables (grille/flex) === */
html, body { overflow-x: clip; }
.panel { min-width: 0; }

/* === Tags d'articles + barre d'admin === */
.tag-chip { display: inline-flex; align-items: center; gap: .35em; font-family: var(--font-ui); font-size: .74rem; font-weight: 700; line-height: 1; padding: .32em .6em; border-radius: 999px; background: var(--bg-panel-lo); border: 1px solid var(--border); color: var(--text-soft); text-decoration: none; }
a.tag-chip:hover { border-color: var(--crystal-blue); color: var(--crystal-blue); }
.tag-chip.is-active { background: var(--crystal-blue); border-color: var(--crystal-blue); color: #fff; }
.tag-chip-n { font-size: .66rem; opacity: .7; }
.tag-chip.is-active .tag-chip-n { opacity: .85; }
.tag-chip--sm { font-size: .64rem; padding: .22em .5em; }
.tag-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.5rem; }
.article-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .35rem 0 0; }
.article-head-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .7rem 0 0; }

.admin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; background: rgba(216,54,43,.07); border: 1px solid rgba(216,54,43,.25); border-radius: var(--radius-m); padding: .55rem .8rem; margin: 0 0 1.3rem; }
.admin-bar-tag { font-family: var(--font-ui); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #c0392b; }

/* carte article : wrapper pour pouvoir poser un bouton "Éditer" admin par-dessus (anchors imbriquées interdites) */
.article-card-wrap { position: relative; display: flex; }
.article-card-wrap > .article-card { flex: 1; min-width: 0; }
.article-card-edit { position: absolute; top: .5rem; right: .5rem; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(216,54,43,.92); color: #fff; text-decoration: none; font-size: .85rem; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.article-card-edit:hover { background: #a82a22; }

/* === Admin article-edit : champ "tags à chips" + autocomplétion === */
.ff-tagbox { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; position:relative; min-height:2.6rem; padding:.4rem .5rem; background:var(--bg-panel-lo); border:1px solid var(--border-strong); border-radius:var(--radius-s); cursor:text; }
.ff-tagbox:focus-within { border-color:var(--crystal-blue); }
.ff-chip { display:inline-flex; align-items:center; gap:.3em; font-family:var(--font-ui); font-size:.74rem; font-weight:700; line-height:1; padding:.3em .2em .3em .58em; border-radius:999px; background:var(--crystal-blue); color:#fff; }
.ff-chip-x { border:0; background:rgba(255,255,255,.25); color:#fff; width:1.15em; height:1.15em; border-radius:50%; font-size:.95em; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.ff-chip-x:hover { background:rgba(0,0,0,.35); }
.ff-tagbox-input { flex:1; min-width:110px; border:0; outline:0; background:transparent; color:var(--text); font-size:.92rem; padding:.2rem .15rem; }
.ff-tagbox-menu { position:absolute; left:0; right:0; top:calc(100% + 3px); z-index:20; background:var(--bg-panel); border:1px solid var(--border-strong); border-radius:var(--radius-s); box-shadow:var(--shadow-deep); max-height:220px; overflow-y:auto; padding:.2rem; }
.ff-tagbox-menu[hidden] { display:none; }
.ff-tagbox-item { display:block; width:100%; text-align:left; border:0; background:transparent; color:var(--text); font-size:.88rem; padding:.42rem .55rem; border-radius:var(--radius-s); cursor:pointer; }
.ff-tagbox-item.is-active, .ff-tagbox-item:hover { background:rgba(192,57,43,.1); color:var(--crystal-blue); }
/* éditeur riche Quill (intégration thème clair) */
.ql-toolbar.ql-snow { border:1px solid var(--border-strong) !important; border-bottom:0 !important; border-radius:var(--radius-s) var(--radius-s) 0 0; background:var(--bg-panel-lo); }
.ql-container.ql-snow { border:1px solid var(--border-strong) !important; border-radius:0 0 var(--radius-s) var(--radius-s); background:#fff; font-family:var(--font-body); }
#ff-quill .ql-editor { min-height:320px; font-size:1rem; line-height:1.65; color:var(--text); }
#ff-quill .ql-editor.ql-blank::before { color:var(--text-mute); font-style:normal; }

/* === Admin dashboard : "Top pages" en liste flex (libellé tronqué proprement, ne déborde jamais le panneau) === */
.stat-pages { list-style:none; margin:.8rem 0 0; padding:0; }
.stat-pages-row { display:flex; align-items:center; gap:.7rem; padding:.5rem .55rem; border-radius:var(--radius-s); position:relative; min-width:0; }
.stat-pages-row::before { content:""; position:absolute; left:0; top:0; bottom:0; width:var(--bar,0%); background:rgba(192,57,43,.09); border-radius:var(--radius-s); z-index:0; pointer-events:none; }
.stat-pages-row + .stat-pages-row { border-top:1px solid var(--border); }
.stat-pages-row > * { position:relative; z-index:1; }
.sp-label { flex:1; min-width:0; overflow:hidden; }
.sp-label > a { display:block; color:var(--crystal-blue); font-weight:600; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; }
.sp-label > a:hover { text-decoration:underline; }
.sp-path { display:block; font-size:.68rem; color:var(--text-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-num { flex:none; text-align:right; min-width:3.3rem; }
.sp-num strong { display:block; font-size:1rem; color:var(--text); line-height:1.1; }
.sp-num small { font-size:.58rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-mute); }

/* === Pastille d'orbe Matéria (FF VII, onglet Matérias — couleur par famille) === */
.materia-orb { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: .55em; vertical-align: -2px; background: radial-gradient(circle at 32% 30%, #ffffff 0, var(--m1, #fff) 28%, var(--m2, #888) 78%, rgba(0,0,0,.55) 100%); box-shadow: 0 1px 2px rgba(0,0,0,.35), inset -2px -2px 4px rgba(0,0,0,.25), inset 2px 2px 3px rgba(255,255,255,.35); flex: none; }
.x-h3 .materia-orb { width: 16px; height: 16px; margin-right: .5em; vertical-align: -3px; }

/* === Tableau Matérias (4 colonnes) — compactage : 1 matéria par ligne ===
   `minmax(0, Xfr)` force la proportion : sans ce min:0, une cellule au contenu long
   (ex. AP en nowrap) faisait gonfler la colonne ligne-par-ligne → en-tête désaligné.
   Avec min:0, toutes les lignes ont strictement les mêmes largeurs de colonnes. */
.x-table--spheres .x-row:has(> *:nth-child(4)) {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2.3fr) minmax(0, 0.9fr) minmax(0, 1.8fr);
    gap: .55rem; padding: .35rem .6rem; align-items: start;
}
.x-table--spheres .x-row:has(> *:nth-child(4)) > span { font-size: .82rem; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.x-table--spheres .x-row.x-row--head:has(> *:nth-child(4)) > span { font-size: .68rem; }
.x-table--spheres .x-row:has(> *:nth-child(4)) .x-c-zone { font-weight: 700; color: var(--text); }
.x-table--spheres .x-row:has(> *:nth-child(4)) > span:nth-child(3) { font-family: var(--font-mono); font-size: .78rem; color: var(--gold-soft); text-align: right; white-space: normal; }
@media (max-width: 880px) {
    .x-table--spheres .x-row:has(> *:nth-child(4)) { grid-template-columns: 1fr !important; gap: .2rem; padding: .55rem .5rem; }
    .x-table--spheres .x-row:has(> *:nth-child(4)) > span:nth-child(3) { text-align: left; }
}

/* === Barre de recherche d'onglet (matérias FF VII, réutilisable) === */
.x-search-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    margin: 1rem 0 .9rem; padding: .65rem .85rem;
    background: var(--bg-panel-lo); border: 1px solid var(--border); border-radius: var(--radius-m);
    position: sticky; top: 64px; z-index: 5;
}
.x-search-label { font-size: .82rem; font-weight: 700; color: var(--text-soft); white-space: nowrap; }
.x-search-input {
    flex: 1; min-width: 12rem;
    padding: .42rem .7rem;
    border: 1px solid var(--border); border-radius: var(--radius-s);
    font: inherit; font-size: .9rem;
    background: #fff; color: var(--text);
}
.x-search-input:focus { outline: 2px solid var(--crystal-blue); outline-offset: 1px; border-color: var(--crystal-blue); }
.x-search-clear {
    border: none; background: transparent; color: var(--text-mute);
    font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .35rem;
}
.x-search-clear:hover { color: var(--crystal-blue); }
.x-search-count { font-size: .78rem; color: var(--text-mute); font-family: var(--font-mono); white-space: nowrap; }
.materia-row.is-hidden { display: none !important; }
.materia-cat.is-hidden { display: none; }
.x-search-empty { text-align: center; font-style: italic; color: var(--text-mute); padding: 1.2rem; }
@media (max-width: 720px) { .x-search-bar { position: static; } }

/* Barre de recherche dédiée à l'OST (intégrée dans le panneau latéral) */
.ost-search-bar {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .7rem; border-bottom: 1px solid var(--border);
    background: var(--bg-panel-lo);
}
.ost-search-bar .x-search-input { font-size: .85rem; padding: .35rem .55rem; }
.ost-search-bar .x-search-count { font-size: .72rem; }
.ost-track.is-hidden { display: none !important; }
.ost-disc-sep.is-hidden { display: none; }
.ost-tracklist.is-hidden { display: none; }

/* =========================================================================
 *  MINI-PLAYER PERSISTANT v0.73  +  bouton « j'aime » sur les pistes OST
 *  ----------------------------------------------------------------------
 *  Le mini-player vit dans <footer> (cf. includes/footer.php) → survit aux
 *  navigations « turbo » (cf. js/main.js → turbolinks-light).
 * ========================================================================= */

/* Espace réservé en bas de page quand le mini-player est affiché (sinon il masque le footer) */
body.has-ff-mp { padding-bottom: 88px; }
@media (max-width: 640px) { body.has-ff-mp { padding-bottom: 78px; } }

/* Indicateur léger pendant une nav « turbo » */
.ff-turbo-loading body::after {
    content: ""; position: fixed; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: ff-turbo-bar 1.1s linear infinite; z-index: 9999; pointer-events: none;
}
@keyframes ff-turbo-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ---- Mini-player layout ----
   Layout demandé par user : tout sur UNE ligne (cover | titre | ⏮▶⏭ | 👍 | ×),
   et la barre de progression sur une 2ᵉ ligne pleine largeur en dessous.
   Desktop : carte FLOTTANTE en haut à droite. Mobile : full-width bottom. */
.ff-mp {
    position: fixed; top: 88px; right: 16px; bottom: auto; left: auto; z-index: 60;
    width: min(420px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto auto auto;
    grid-template-areas:
        "cover meta controls like close"
        "progress progress progress progress progress";
    align-items: center;
    gap: .35rem .55rem;
    padding: .55rem .7rem .65rem;
    background: #1a1d24;
    color: #f3f5f8;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.25);
    font-family: var(--font-ui, system-ui, sans-serif);
    font-size: .9rem;
}
.ff-mp[hidden] { display: none; }
.ff-mp { cursor: grab; user-select: none; }
.ff-mp.is-dragging { cursor: grabbing; opacity: .92; box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.30); }
.ff-mp button, .ff-mp a, .ff-mp .ff-mp-progress { cursor: pointer; }
.ff-mp .ff-mp-progress { cursor: pointer; }
.ff-mp .ff-mp-cover    { grid-area: cover; width: 52px; height: 52px; }
.ff-mp .ff-mp-meta     { grid-area: meta; }
.ff-mp .ff-mp-controls { grid-area: controls; gap: .1rem; }
.ff-mp .ff-mp-like     { grid-area: like; }
.ff-mp .ff-mp-close    { grid-area: close; }
.ff-mp .ff-mp-progress { grid-area: progress; padding: .1rem 0 0; }

.ff-mp-cover {
    position: relative; display: block; width: 56px; height: 56px;
    border-radius: 6px; overflow: hidden; flex: none;
    background: #2a2e37 center/cover no-repeat;
    text-decoration: none; color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.ff-mp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-mp-cover-fallback {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #888;
}
.ff-mp-cover img[src=""], .ff-mp-cover img:not([src]) { display: none; }

.ff-mp-meta { min-width: 0; line-height: 1.25; }
.ff-mp-title { font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-mp-sub   { font-size: .78rem; color: #a8b0bc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ff-mp-controls { display: flex; align-items: center; gap: .25rem; }
.ff-mp-btn {
    background: transparent; border: 0; color: #f3f5f8;
    font-size: 1.05rem; line-height: 1; cursor: pointer;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, transform .12s, color .12s;
}
.ff-mp-btn:hover { background: rgba(255,255,255,.08); }
.ff-mp-btn:focus-visible { outline: 2px solid var(--gold, #b1271d); outline-offset: 2px; }
.ff-mp-btn--play {
    width: 40px; height: 40px;
    background: #fff; color: #1a1d24;
    font-size: 1.1rem;
}
.ff-mp-btn--play:hover { background: #ffe9c8; transform: scale(1.05); }
.ff-mp-btn--play.is-loading {
    background: #f3f5f8; color: #1a1d24;
    animation: ff-mp-spin 1s linear infinite;
    cursor: progress; pointer-events: none;
}
@keyframes ff-mp-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

.ff-mp-progress {
    display: grid; grid-template-rows: 1fr auto; align-items: center;
    gap: .2rem; cursor: pointer; min-width: 0; padding: 0 .25rem;
}
.ff-mp-progress:focus-visible { outline: 2px solid var(--gold, #b1271d); outline-offset: 2px; border-radius: 4px; }
.ff-mp-bar {
    position: relative; height: 4px; background: rgba(255,255,255,.15); border-radius: 99px; overflow: hidden;
}
.ff-mp-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #ffb56b, var(--gold, #b1271d));
    width: 0%; transition: width .15s linear;
}
.ff-mp-time { font-size: .72rem; color: #a8b0bc; font-family: var(--font-mono, monospace); white-space: nowrap; }

.ff-mp-like {
    background: transparent; border: 1px solid rgba(255,255,255,.18); color: #f3f5f8;
    border-radius: 99px; padding: .28rem .6rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .82rem; transition: background .12s, color .12s, border-color .12s, transform .12s;
}
.ff-mp-like:hover { background: rgba(255,255,255,.08); }
.ff-mp-like.is-liked {
    background: rgba(255, 195, 89, .18);
    border-color: rgba(255, 195, 89, .55);
    color: #ffd478;
}
.ff-mp-like.is-liked .ff-mp-like-ico { filter: drop-shadow(0 0 4px rgba(255,195,89,.55)); }
.ff-mp-like-count { font-variant-numeric: tabular-nums; min-width: 1ch; }

.ff-mp-close {
    background: transparent; border: 0; color: #a8b0bc; cursor: pointer;
    font-size: 1.4rem; line-height: 1; padding: .1rem .35rem;
}
.ff-mp-close:hover { color: #fff; }

/* iframe YouTube cachée mais bien chargée (impossible de simplement display:none → safari coupe l'audio) */
.ff-mp-yt {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);
    pointer-events: none;
}
.ff-mp-yt iframe { width: 320px; height: 180px; border: 0; }

/* Mode mobile : barre full-width COLLÉE EN BAS — même structure 1 ligne + progression dessous */
@media (max-width: 720px) {
    .ff-mp {
        top: auto; right: 0; bottom: 0; left: 0;
        width: auto;
        border-radius: 0;
        border: 0;
        border-top: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 -6px 18px rgba(0,0,0,.30);
        grid-template-columns: 44px minmax(0, 1fr) auto auto;
        grid-template-areas:
            "cover meta controls like"
            "progress progress progress progress";
        gap: .35rem .45rem;
        padding: .45rem .65rem .55rem;
    }
    .ff-mp .ff-mp-cover    { width: 44px; height: 44px; }
    .ff-mp .ff-mp-close    { display: none; }
    .ff-mp .ff-mp-like     { padding: .22rem .45rem; font-size: .76rem; }
    .ff-mp-btn { width: 28px; height: 28px; font-size: .95rem; }
    .ff-mp-btn--play { width: 32px; height: 32px; font-size: 1rem; }
    .ff-mp .ff-mp-time { font-size: .66rem; }
}

/* ---- Bouton « j'aime » sur les pistes de la playlist OST ---- */
.ost-track-like {
    flex: none; display: inline-flex; align-items: center; gap: .25rem;
    background: transparent; border: 1px solid var(--border);
    color: var(--text-mute); cursor: pointer;
    border-radius: 99px; padding: .14rem .42rem;
    font-size: .72rem; line-height: 1.15;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.ost-track-like:hover { background: var(--bg-panel-lo); color: var(--gold-soft); border-color: var(--border-strong); }
.ost-track-like.is-liked {
    background: rgba(177, 39, 29, .08);
    border-color: rgba(177, 39, 29, .35);
    color: var(--gold);
}
.ost-track-like.is-liked .ost-track-like-ico { filter: drop-shadow(0 0 3px rgba(216, 54, 43, .35)); }
.ost-track-like.is-busy { opacity: .55; pointer-events: none; }
.ost-track-like.pulse { animation: ff-like-pulse .26s ease-out; }
@keyframes ff-like-pulse {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
.ost-track-like-ico { font-size: .82rem; }
.ost-track-like-count { font-variant-numeric: tabular-nums; min-width: 1ch; text-align: right; }

/* Version side-list : encore plus compacte */
.ost-tracklist--side .ost-track-like { padding: .08rem .32rem; font-size: .68rem; }
.ost-tracklist--side .ost-track-like-ico { font-size: .72rem; }
@media (max-width: 560px) {
    .ost-track-like { padding: .1rem .32rem; font-size: .68rem; }
}

/* ---- Pochette « play » à la place du gros lecteur YouTube (cf. render-game-extras) ---- */
.ost-player--cover {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-m, 8px);
    overflow: hidden;
    background: #1a1d24;
}
.ost-player-cover {
    width: 100%; height: 100%; object-fit: cover; display: block;
    /* 03/09/2026 : la jaquette source fait 256 a 330 px de large et s'affiche en 612 —
       l'agrandissement (jusqu'a x2,55) etait visible. Ce n'est qu'un fond derriere le
       bouton de lecture : un flou leger le rend volontaire. La mise a l'echelle evite
       la frange claire que le flou cree sur les bords. */
    filter: brightness(.7) saturate(1.1) blur(2px);
    transform: scale(1.06);
}
.ost-player-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 1rem;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 100%);
}
.ost-player-play {
    width: 88px; height: 88px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .92); color: #1a1d24;
    font-size: 2.4rem; line-height: 1;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35), 0 0 0 4px rgba(255, 255, 255, .14);
    transition: transform .15s, box-shadow .15s, background .15s;
}
.ost-player-play:hover { transform: scale(1.05); background: #fff; }
.ost-player-now {
    color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6);
    font-family: var(--font-title, serif); font-size: 1.05rem;
    padding: 0 1rem; text-align: center;
}
@media (max-width: 560px) {
    .ost-player-play { width: 64px; height: 64px; font-size: 1.7rem; }
    .ost-player-now  { font-size: .9rem; }
}

/* === QA responsive (audit skill, 2026-06) : éviter les débordements mobile === */
@media (max-width: 560px) {
  .x-mini-table th { min-width: 0; width: 40%; padding-right: .5rem; word-break: break-word; }
  .x-mini-table td { word-break: break-word; }
  .x-table--cards .x-c-zone, .x-c-zone { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}

/* ══════════ ADDITIF 19/08/2026 — Association (Junction) FF8, règles Triple Triad, fiches perso ══════════ */
.x-table--ttrules   .x-row { grid-template-columns: 1.1fr .9fr 2.2fr 2.2fr; }
.x-table--ttregions .x-row { grid-template-columns: 1fr 1.6fr 2.4fr; }
.x-table--junction  .x-row { grid-template-columns: 1.2fr 1.2fr 2.6fr; }
.x-table--junction2 .x-row { grid-template-columns: 1.2fr 3fr; }
.x-verdict { display: inline-block; font-style: normal; font-family: var(--font-title); font-size: .7rem;
    text-transform: uppercase; letter-spacing: .06em; padding: .12rem .45rem; border-radius: var(--radius-s);
    border: 1px solid var(--border); margin-right: .35rem; white-space: nowrap; }
.x-verdict--ok  { color: #7fd6a0; border-color: rgba(127,214,160,.45); background: rgba(127,214,160,.08); }
.x-verdict--mid { color: var(--gold-soft); border-color: rgba(212,175,55,.4); background: rgba(212,175,55,.07); }
.x-verdict--ko  { color: #ef8a80; border-color: rgba(239,138,128,.45); background: rgba(239,138,128,.08); }
.jn-val { color: var(--gold); font-weight: 700; }
.x-warn { border-left: 3px solid var(--gold); padding: .6rem .9rem; background: rgba(212,175,55,.07);
    border-radius: var(--radius-s); margin: 1rem 0; }

/* Fiche technique dans les cartes personnage */
.perso-sheet { margin-top: .85rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.perso-sheet-badge { font-family: var(--font-title); font-size: .72rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--crystal-blue); margin: 0 0 .55rem; }
.perso-sheet-dl { display: grid; grid-template-columns: minmax(88px, 150px) 1fr; gap: .35rem .9rem; margin: 0; }
/* 03/09/2026 : sur FF VIII les cartes sont plus etroites que sur les autres jeux, et la
   colonne de droite tombait a 94 px — 237 a 474 caracteres y descendaient en rubans d'un
   mot de large. Sous 340 px de carte, l'intitule passe AU-DESSUS de sa valeur. */
.perso-card { container-type: inline-size; }
@container (max-width: 340px) {
    .perso-sheet-dl { grid-template-columns: 1fr; gap: .1rem .9rem; }
    .perso-sheet-dl dt { margin-top: .45rem; }
    .perso-sheet-dl dt:first-child { margin-top: 0; }
}
/* Garde-fou pour les navigateurs sans requetes de conteneur : jamais moins de 150 px
   pour le texte, quitte a reduire la colonne des intitules. */
@supports not (container-type: inline-size) {
    .perso-sheet-dl { grid-template-columns: minmax(72px, 110px) minmax(150px, 1fr); }
}
.perso-sheet-dl dt { font-family: var(--font-title); font-size: .74rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--gold-soft); margin: 0; }
.perso-sheet-dl dd { margin: 0; font-size: .87rem; color: var(--text-soft); line-height: 1.55; }
.perso-sheet-sub { display: block; color: var(--text-mute); font-size: .82rem; margin-top: .2rem; }
.perso-sheet-ult { display: block; color: var(--gold); font-size: .84rem; margin-top: .25rem; }
@media (max-width: 700px) {
    .perso-sheet-dl { grid-template-columns: 1fr; gap: .1rem; }
    .perso-sheet-dl dd { margin-bottom: .5rem; }
}


/* Note de piste de la bande-son. La classe existait depuis le 19/08/2026 mais n'avait aucune
   regle : le style etait pose en inline. On le sort ici, l'inline restant en repli. */
.ost-track-note {
    display: block;
    opacity: .72;
    font-style: italic;
    line-height: 1.45;
    margin-top: .18rem;
    /* 03/09/2026 : heritait d'un `nowrap` et se coupait en plein mot sur mobile
       (« Presque sept minutes en quatre mouv »). */
    white-space: normal;
    overflow-wrap: anywhere;
}


/* ------------------------------------------------------------------
   Cibles tactiles de la bande-son (ajoute le 24/08/2026).
   Mesure reelle en 390x844 : « j'aime » 37x18 px, lien YouTube 22x22 px — sous le minimum
   d'accessibilite (24 px). On etend la zone tapable par un pseudo-element, SANS toucher a la
   taille visible : la liste garde exactement la meme allure, seul le doigt gagne de la place.
   Meme principe que les marqueurs de carte, ou cible tactile et point visible sont dissocies.
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
    .ost-track-like,
    .ost-track-yt { position: relative; }

    .ost-track-like::after,
    .ost-track-yt::after {
        content: "";
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: max(100%, 44px);
        height: 44px;
        /* la zone deborde le bouton : elle ne doit ni se voir ni gener le defilement */
        background: transparent;
    }
    /* Les pistes restent assez espacees pour que deux zones de 44 px ne se recouvrent pas. */
    .ost-track { min-height: 46px; }
}


/* ------------------------------------------------------------------
   Cibles tactiles : loupes de vignette, marqueurs de carte, liens de renvoi (24/08/2026).
   Mesures en 360x800 : .best-thumb-zoom et .map-marker font 30x30, .auto-link 278x23.
   Au-dessus du minimum d'accessibilite (24 px) mais sous le confort (44 px). On etend la zone
   tapable par un pseudo-element, l'apparence ne bouge pas — meme principe que les boutons OST.
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
    /* `.map-marker` est deja `position: absolute` (carte interactive) : lui imposer
       `position: relative` ici le sortait du positionnement absolu et faisait retomber TOUS les
       points dans le flux normal — la carte de chaque jeu affichait ses marqueurs completement
       decales sous 720 px. Un element absolu est deja un contexte de positionnement pour son
       ::after : la regle n'etait pas seulement inutile, elle cassait la carte. Corrige le 31/08/2026. */
    .best-thumb-zoom { position: relative; }

    .best-thumb-zoom::after,
    .map-marker::after {
        content: "";
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 44px; height: 44px;
        background: transparent;
        /* sous le contenu visible du bouton, pour ne masquer ni la loupe ni la pastille */
        z-index: -1;
    }
    /* Les liens de renvoi sont larges mais bas : on gagne en hauteur tapable sans deplacer le
       texte, via un interligne plus genereux plutot qu'une marge qui decalerait la mise en page. */
    .auto-link { padding-block: .28rem; }
}


/* ------------------------------------------------------------------
   Galerie de fin de jeu — 2 lignes de 3 images (ajoutee le 24/08/2026).
   La galerie generique utilise `auto-fit, minmax(220px, 1fr)`, ce qui donne 4 colonnes sur la
   largeur d'un article : on ne pourrait pas obtenir 2 lignes de 3. Cette variante fixe 3 colonnes,
   2 sur tablette, 1 sur telephone.
   ------------------------------------------------------------------ */
.chapter-gallery.fin {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1.6rem;
}
.chapter-gallery.fin img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; }
.chapter-gallery.fin figcaption {
    padding: .5rem .7rem;
    font-size: .78rem;
    color: var(--text-mute);
    text-align: center;
    line-height: 1.35;
}
@media (max-width: 900px) { .chapter-gallery.fin { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .chapter-gallery.fin { grid-template-columns: 1fr; } }

/* Masquage des legendes — 24/08/2026.
   Le moteur n emet plus aucun <figcaption> tant que FF_LEGENDES_VISIBLES vaut false
   (includes/helpers.php). Cette regle ne concerne donc que les 17 legendes ecrites
   EN DUR dans le HTML des donnees (ff9.php, extras/ff10/*, extras/ff8/*), qu aucune
   constante PHP ne peut atteindre. Le texte reste dans les donnees, seul l affichage
   est coupe. Pour tout restaurer : passer FF_LEGENDES_VISIBLES a true ET retirer ce bloc. */
figcaption { display: none; }

/* Plans de zone — 24/08/2026.
   Une capture de gameplay supporte le recadrage en bandeau (`object-fit: cover`, 380px).
   Une CARTE, non : recadree, elle perd la moitie de son information. Les figures marquees
   `is-map` par ff_img_kind() s affichent donc ENTIERES, reduites a la place disponible,
   et s agrandissent au clic via le lightbox deja branche sur `.chapter-img img`. */
.chapter-img.is-map {
    background: var(--bg-panel-lo);
    text-align: center;
    overflow: visible;
}
.chapter-img.is-map img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    margin: 0 auto;
    cursor: zoom-in;
}
@media (max-width: 720px) {
    .chapter-img.is-map img { max-height: 62vh; }
}

/* Cartouche des fiches SANS visuel — 25/08/2026.
   Le bestiaire affichait deja un `.best-thumb-placeholder` ; les mini-jeux et les personnages
   laissaient un blanc. Une absence d image est assumee (le wiki ne publie rien pour ces fiches)
   mais elle doit se VOIR comme telle, pas ressembler a un bug de chargement. */
.mg-img-vide,
.perso-photo-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel-lo);
    border: 1px dashed var(--border);
    min-height: 120px;
}
.mg-img-vide .best-thumb-placeholder,
.perso-photo-vide .best-thumb-placeholder {
    font-size: 1.8rem;
    opacity: .38;
}

/* Encart MECANIQUE — 25/08/2026.
   Demande du proprietaire : les systemes propres a chaque jeu (Cloitres des epreuves de FFX,
   Gambits de FFXII, Failles Temporelles de FFXIII-2, Condition de Choc du Remake...) doivent
   apparaitre DANS la soluce, la ou le joueur les rencontre, avec plan et astuces, dans une mise
   en forme distincte du texte courant — et qui tienne aussi bien pour trois lignes que pour une
   explication longue. */
.mecanique {
    margin: 1.6rem 0;
    padding: 1.1rem 1.2rem 1.2rem;
    border-radius: var(--radius-m);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent, #c8a24a);
    background: var(--bg-panel-lo);
    box-shadow: var(--shadow-soft);
}
.mecanique-titre {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .6rem;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--text);
}
.mecanique-ico { font-size: 1.25rem; line-height: 1; }
.mecanique-corps { font-size: .93rem; line-height: 1.75; color: var(--text-soft); }
.mecanique-corps p:last-child { margin-bottom: 0; }
.mecanique-etapes {
    margin: .8rem 0 0;
    padding-left: 1.35rem;
    font-size: .93rem;
    line-height: 1.7;
    color: var(--text-soft);
}
.mecanique-etapes li { margin-bottom: .4rem; }
.mecanique-etapes li::marker { color: var(--accent, #c8a24a); font-weight: 600; }
.mecanique .mecanique-plan { margin: 1rem 0 0; }
@media (max-width: 720px) {
    .mecanique { padding: .9rem 1rem 1rem; }
    .mecanique-titre { font-size: .95rem; }
}

/* Variantes de couleur de l encart `mecanique` — 25/08/2026.
   « pour ce genre d astuce sur un lieu specifique encadre mettre des couleurs differentes
     visuellement histoire que ca ressorte ». Cle `variant` cote donnees ; `systeme` par defaut.
   Le liseré gauche, la teinte de fond et la couleur des numeros d etape changent ensemble, pour
   que la nature de l encart se lise d un coup d oeil sans avoir a lire le titre. */
.mecanique--enigme   { border-left-color:#8b6ad6; background:color-mix(in srgb,#8b6ad6 7%,var(--bg-panel-lo)); }
.mecanique--enigme   .mecanique-etapes li::marker { color:#8b6ad6; }
.mecanique--tresor   { border-left-color:#d6a83a; background:color-mix(in srgb,#d6a83a 8%,var(--bg-panel-lo)); }
.mecanique--tresor   .mecanique-etapes li::marker { color:#d6a83a; }
.mecanique--combat   { border-left-color:#d05a4e; background:color-mix(in srgb,#d05a4e 7%,var(--bg-panel-lo)); }
.mecanique--combat   .mecanique-etapes li::marker { color:#d05a4e; }
.mecanique--collecte { border-left-color:#4fa86a; background:color-mix(in srgb,#4fa86a 7%,var(--bg-panel-lo)); }
.mecanique--collecte .mecanique-etapes li::marker { color:#4fa86a; }
.mecanique--systeme  { border-left-color:#4a90c2; background:color-mix(in srgb,#4a90c2 7%,var(--bg-panel-lo)); }
.mecanique--systeme  .mecanique-etapes li::marker { color:#4a90c2; }
.mecanique--piege    { border-left-color:#c2564a; background:color-mix(in srgb,#c2564a 9%,var(--bg-panel-lo)); }
.mecanique--piege    .mecanique-etapes li::marker { color:#c2564a; }
/* Repli pour les navigateurs sans color-mix() : le lisere suffit a distinguer les encarts. */
@supports not (background: color-mix(in srgb, red 5%, blue)) {
    .mecanique--enigme, .mecanique--tresor, .mecanique--combat,
    .mecanique--collecte, .mecanique--systeme, .mecanique--piege { background: var(--bg-panel-lo); }
}


/* ===== Onglet Équipements (armes & protections ordinaires) ===== */
.x-table--gear  .x-row { grid-template-columns: 1.5fr 1.6fr 1.6fr; align-items: start; }
.x-table--autoab .x-row { grid-template-columns: 1.3fr .9fr 2fr 1.4fr; align-items: start; }
.x-table--shops .x-row { grid-template-columns: 1.2fr 1.4fr 2.2fr; align-items: start; }
.eq-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.2rem; }
.eq-nav-link {
    display: inline-block; padding: .3rem .75rem; border-radius: 999px;
    border: 1px solid rgba(216,54,43,.35); background: rgba(216,54,43,.06);
    font-size: .86rem; text-decoration: none; color: inherit;
}
.eq-nav-link:hover { background: rgba(216,54,43,.16); }
.eq-nav-link--alt { border-style: dashed; }
.eq-perso { margin: 0 0 2.2rem; scroll-margin-top: 5rem; }
.eq-perso-head { display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0 .6rem; }
.eq-perso-photo {
    width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%;
    background-size: cover; background-position: center top;
    border: 2px solid rgba(216,54,43,.4);
}
.eq-perso-id strong { display: block; font-size: 1.15rem; }
.eq-perso-types { font-size: .85rem; opacity: .75; }
.eq-h4 { margin: 1rem 0 .4rem; font-size: .98rem; letter-spacing: .02em; }
.eq-count {
    display: inline-block; margin-left: .4rem; padding: 0 .45rem;
    border-radius: 999px; background: rgba(216,54,43,.12); font-size: .8rem; font-weight: 600;
}
.eq-row { scroll-margin-top: 5rem; }
.eq-row:target { background: rgba(216,54,43,.10); box-shadow: inset 3px 0 0 rgba(216,54,43,.8); }
.x-table--autoab .x-row:target { background: rgba(216,54,43,.10); box-shadow: inset 3px 0 0 rgba(216,54,43,.8); }
.x-table--autoab .x-row { scroll-margin-top: 5rem; }
.eq-name { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.eq-thumb {
    /* inline-block ajoute le 03/09/2026 : dans une cellule non-flex (tableau des
       auto-capacites) un <span> sans display ignore sa largeur et se reduit a un trait. */
    display: inline-block; vertical-align: middle; margin-right: .5em;
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 6px;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    background-color: #fff; border: 1px solid rgba(0,0,0,.15);
}
.x-card-photo-legende { color: var(--text-soft); font-size: .82em; font-style: italic; margin: 0 0 .5rem; }
.eq-caps .x-ability-list { margin: 0; padding-left: 1.1rem; }
.eq-caps .x-ability-list li { margin: 0 0 .12rem; }
.eq-caps a { text-decoration: none; border-bottom: 1px dotted currentColor; }
.eq-vide { opacity: .5; }
@media (max-width: 780px) {
    .x-table--gear .x-row,
    .x-table--autoab .x-row,
    .x-table--shops .x-row { grid-template-columns: 1fr; gap: .25rem; }
}


/* ------------------------------------------------------------------
   Vignette de bestiaire sans visuel (31/08/2026).
   Un « ? » nu se lisait comme une image qui n'a pas charge. Quand le wiki ne publie
   rien pour un ennemi, la case le DIT : silhouette discrete + mention explicite, et
   l'infobulle porte la raison exacte enregistree dans la fiche.
   ------------------------------------------------------------------ */
.bestiary-cell .best-thumb--sans {
    background-image:
        repeating-linear-gradient(135deg,
            rgba(255,255,255,.028) 0 8px, transparent 8px 16px);
}
.bestiary-cell .best-thumb-vide {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .3rem; text-align: center; padding: .4rem;
}
.bestiary-cell .best-thumb-vide-ico {
    font-size: 1.6rem; line-height: 1; opacity: .3; filter: grayscale(1);
}
.bestiary-cell .best-thumb-vide-txt {
    font-size: .62rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-mute); opacity: .75;
}
@media (max-width: 600px) {
    .bestiary-cell .best-thumb-vide-ico { font-size: 1.3rem; }
    .bestiary-cell .best-thumb-vide-txt { font-size: .56rem; }
}

/* Fiche PERSONNAGE sans portrait — 10/09/2026.
   render-game.php pose le meme balisage que le bestiaire (.best-thumb-vide + -ico + -txt) dans
   .perso-photo-vide, mais les regles ci-dessus etaient toutes prefixees par `.bestiary-cell` :
   la seule fiche du site concernee (Ysay, FF XVI — le wiki ne publie aucun portrait) sortait
   donc avec l'icone collee au texte, sans capitales, sans mise en gris. Un style qui ne
   s'affiche qu'une fois sur tout le site n'avait jamais ete regarde. */
.perso-photo-vide .best-thumb-vide {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .35rem; text-align: center; padding: .5rem;
}
.perso-photo-vide .best-thumb-vide-ico {
    font-size: 1.9rem; line-height: 1; opacity: .3; filter: grayscale(1);
}
.perso-photo-vide .best-thumb-vide-txt {
    font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-mute); opacity: .75;
}


/* Noms de capacites publies par la source, sous le tableau des manoeuvres (31/08/2026). */
.boss-capacites-src {
    margin: .5rem 0 0; font-size: .82rem; color: var(--text-soft);
    padding: .45rem .6rem; border-left: 2px solid var(--border);
    background: rgba(255,255,255,.02); border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

/* =========================================================================
 *  LOADER PLEIN ECRAN DES NAVIGATIONS  (clic sur un lien / le menu)
 *  ----------------------------------------------------------------------
 *  Les pages de jeu pesent ~3 Mo : entre le clic et l'affichage il se passe
 *  un temps visible. Cet ecran gris translucide le couvre. Il n'apparait
 *  qu'apres 180 ms (cf. js/main.js) : une navigation rapide ne clignote pas.
 *  A ne pas confondre avec #ff-loading, qui couvre le PREMIER chargement
 *  d'une page de jeu et vit, lui, dans la zone de contenu.
 * ========================================================================= */
#ff-nav-loader {
    position: fixed; inset: 0; z-index: 9998;
    display: flex; align-items: center; justify-content: center;
    /* Le site est en theme CLAIR (--bg-deep #eef1f4) : un voile noir y ecrase tout.
       Gris neutre, assez dense pour dire « attends », assez clair pour qu'on voie
       encore la page dessous. */
    background: rgba(90, 98, 109, .44);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
html.ff-nav-loading #ff-nav-loader {
    opacity: 1; visibility: visible;
    transition: opacity .18s ease, visibility 0s linear 0s;
}
#ff-nav-loader .ff-nav-loader-box {
    display: flex; flex-direction: column; align-items: center; gap: .9rem;
    padding: 1.6rem 2.2rem;
    border-radius: var(--radius-m);
    /* Carte OPAQUE : translucide, elle se noyait dans le voile gris et le mot « chargement »
       devenait illisible. Meme facture que les cartes du site (fond blanc, ombre profonde). */
    background: var(--bg-panel);
    border: 1px solid var(--border-strong);
    box-shadow: 0 18px 48px rgba(20, 30, 45, .28), var(--shadow-gold);
    transform: translateY(6px) scale(.97);
    transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
html.ff-nav-loading #ff-nav-loader .ff-nav-loader-box { transform: none; }
/* meme anneau que le loader de premier chargement, pour l'unite visuelle */
#ff-nav-loader .ff-nav-loader-spin {
    width: 46px; height: 46px; border-radius: 50%;
    background: conic-gradient(from 0deg,
        var(--bg-deep) 0deg, var(--gold-soft) 130deg, var(--crystal-blue) 250deg,
        transparent 250deg, transparent 360deg);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 5px));
    animation: ff-loading-spin .85s linear infinite;
}
#ff-nav-loader .ff-nav-loader-txt {
    font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
    #ff-nav-loader { -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; }
    #ff-nav-loader .ff-nav-loader-box { transform: none; transition: none; }
    #ff-nav-loader .ff-nav-loader-spin { animation-duration: 1.8s; }
}
@supports not (background: color-mix(in srgb, red, blue)) {
    #ff-nav-loader .ff-nav-loader-box { background: #fff; }
}

/* =========================================================================
 *  MENU DU JEU SUR LES PAGES DE CHAPITRE  (01/09/2026)
 *  ----------------------------------------------------------------------
 *  Une soluce ouverte sur un chapitre n'offrait aucun moyen d'atteindre le
 *  bestiaire, la carte ou les astuces du meme jeu : il fallait revenir a la
 *  fiche. Deux rendus, parce que .chapter-toc disparait sous 1024 px :
 *   · .chapter-gamenav       carte dans la barre laterale (>= 1025 px) ;
 *   · .chapter-nav-mob       bloc replie en tete du contenu (<= 1024 px).
 * ========================================================================= */
.chapter-gamenav {
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-lo) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-soft);
    padding: .45rem .45rem .5rem;
    margin-bottom: .8rem;
}
.chapter-gamenav-title {
    font-family: var(--font-title); color: var(--gold);
    font-size: .82rem; letter-spacing: .03em;
    padding: .15rem .55rem .5rem;
}
.chapter-gamenav-list {
    display: flex; flex-direction: column; gap: 1px;
    /* Plafond volontairement bas : sur cette page le sommaire des CHAPITRES prime, et un menu
       de 21 entrees le repoussait sous la ligne de flottaison. Au-dela, on fait defiler. */
    max-height: 30vh; overflow-y: auto;
}
.chapter-gamenav-list::-webkit-scrollbar { width: 8px; }
.chapter-gamenav-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
/* .tab-btn est deja style globalement : en <a> il faut juste oter le soulignement */
.chapter-gamenav-list .tab-btn { text-decoration: none; padding: .42rem .65rem; font-size: .85rem; }

/* La barre laterale ne doit plus deborder : elle porte maintenant DEUX cartes */
.chapter-toc { max-height: calc(100vh - 70px); }
.chapter-toc { flex-direction: column; }

.chapter-nav-mob { display: none; }
@media (max-width: 1024px) {
    .chapter-nav-mob {
        display: block;
        margin: 0 0 1.4rem;
        background: var(--bg-panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-m);
        box-shadow: var(--shadow-soft);
        overflow: hidden;
    }
    .chapter-nav-mob > summary {
        cursor: pointer; list-style: none;
        padding: .75rem .95rem;
        display: flex; flex-direction: column; gap: .1rem;
    }
    .chapter-nav-mob > summary::-webkit-details-marker { display: none; }
    .chapter-nav-mob > summary::after {
        content: "▾"; position: absolute; right: 1.1rem; margin-top: .15rem;
        color: var(--text-mute); transition: transform .18s;
    }
    .chapter-nav-mob[open] > summary::after { transform: rotate(180deg); }
    .chapter-nav-mob > summary { position: relative; }
    .cnm-jeu { font-family: var(--font-title); color: var(--gold); font-size: .95rem; }
    .cnm-cur { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-mute); }
    .cnm-body { border-top: 1px solid var(--border); padding: .6rem .7rem .8rem; }
    .cnm-sec {
        font-size: .66rem; text-transform: uppercase; letter-spacing: .14em;
        color: var(--text-mute); padding: .55rem .3rem .35rem;
    }
    .cnm-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
    .cnm-tabs a {
        display: inline-block; text-decoration: none;
        font-family: var(--font-ui); font-size: .8rem; font-weight: 600;
        color: var(--text-soft); background: var(--bg-panel-lo);
        border: 1px solid var(--border); border-radius: 999px;
        padding: .3rem .7rem;
    }
    .cnm-tabs a:hover, .cnm-tabs a:focus { color: var(--crystal-blue); border-color: var(--border-strong); }
    .cnm-chaps { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
    .cnm-chaps li { margin: 1px 0; }
    .cnm-chaps a {
        display: flex; align-items: baseline; gap: .55rem;
        text-decoration: none; color: var(--text-soft);
        font-size: .84rem; padding: .38rem .5rem; border-radius: var(--radius-s);
    }
    .cnm-chaps a span {
        min-width: 1.6rem; text-align: right;
        font-variant-numeric: tabular-nums; color: var(--text-mute); font-size: .76rem;
    }
    .cnm-chaps a:hover { background: var(--bg-panel-lo); color: var(--text); }
    .cnm-chaps li.is-current a { background: var(--bg-panel-lo); color: var(--crystal-blue); font-weight: 700; }
    .cnm-chaps li.is-current a span { color: var(--crystal-blue); }
}


/* =========================================================================
 *  BANDEAU DE BOSS MIS EN AVANT (02/09/2026)
 *  ----------------------------------------------------------------------
 *  Les rectangles « BOSS » se fondaient dans la page (fond quasi blanc,
 *  simple filet rouge a gauche). Le bandeau passe en pleine couleur
 *  d'accent — meme famille que le bouton « Suivant » des soluces — sur
 *  TOUTES les cartes .boss-card du site (soluce, bestiaire, superboss…).
 *  Les !important repondent au « filet de securite theme clair » qui
 *  imposait deja des couleurs aux badges (.boss-tag, ligne ~3573).
 * ========================================================================= */
.boss-card {
    border-left: 4px solid var(--gold-deep);
}
/* La ligne ~4383 impose « background-image: none !important » sur le meme selecteur (un
   ancien filet de securite du theme clair) : on surcharge a specificite egale, plus bas dans
   le fichier, avec !important aussi. */
details.boss-card > summary.boss-name {
    background-color: var(--crystal-blue) !important;
    background-image: linear-gradient(135deg, var(--crystal-blue) 0%, var(--gold-deep) 140%) !important;
}
details.boss-card > summary.boss-name:hover {
    background-color: var(--gold-bright) !important;
    background-image: linear-gradient(135deg, var(--gold-bright) 0%, var(--crystal-blue) 140%) !important;
}
.boss-card > .boss-name .boss-name-text,
.boss-card > .boss-name .boss-name-text a { color: #fff !important; }
.boss-card > .boss-name .boss-name-text a { border-bottom-color: rgba(255,255,255,.45) !important; background: none !important; }
.boss-card > .boss-name .boss-tag { background: rgba(0,0,0,.22) !important; color: #fff !important; padding: .1em .5em; border-radius: 3px; }
.boss-card > .boss-name .boss-loc {
    background: rgba(0,0,0,.18) !important; border-color: rgba(255,255,255,.35) !important;
    color: #fff !important;
}
.boss-card > .boss-name .boss-loc a { color: #fff !important; border-bottom-color: rgba(255,255,255,.45) !important; background: none !important; }
.boss-card > .boss-name .boss-toggle { color: #fff; }


/* === Badges CD : une couleur par disque (FF7/FF8/FF9), poses par js/main.js === */
.cd-badge {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: .68em; font-weight: 800;
    letter-spacing: .08em;
    padding: .14em .5em;
    border-radius: 999px;
    color: #fff;
    vertical-align: .12em;
    margin-right: .35em;
    white-space: nowrap;
}
.cd-badge.cd-1 { background: #2563ae; }        /* bleu */
.cd-badge.cd-2 { background: #177a4a; }        /* vert */
.cd-badge.cd-3 { background: #b06510; }        /* ambre */
.cd-badge.cd-4 { background: #6d3fb4; }        /* violet */
/* dans le bouton « Suivant » (fond rouge), un lisere blanc les detache */
.ctn-link.ctn-next:not(.disabled) .cd-badge { box-shadow: 0 0 0 1px rgba(255,255,255,.55); }


/* === Galerie par jeu (02/09/2026) === */
.gal-filtres { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.gal-filtre {
    background: var(--bg-panel); color: var(--text-soft);
    border: 1px solid var(--border); border-radius: 999px;
    padding: .28rem .85rem; font: 600 .8rem var(--font-ui); cursor: pointer;
    transition: all .15s;
}
.gal-filtre:hover { border-color: var(--crystal-blue); color: var(--crystal-blue); }
.gal-filtre.active { background: var(--crystal-blue); border-color: var(--crystal-blue); color: #fff; }
.gal-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.gal-item { margin: 0; border-radius: var(--radius-s); overflow: hidden;
    background: var(--bg-panel-lo); border: 1px solid var(--border); aspect-ratio: 4 / 3; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .2s; }
.gal-item:hover img { transform: scale(1.05); }
.gal-item.gal-cache { display: none; }
@media (max-width: 560px) { .gal-grille { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } }

/* === Vrais logos des jeux (hero + tuiles saga) — 02/09/2026 === */
.sr-texte { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.game-hero-logo { margin: .2rem 0 1rem; }
.game-hero-logo img {
    display: block; width: auto; max-width: 100%; max-height: 170px;
    filter: drop-shadow(0 3px 14px rgba(25, 32, 50, .18));
}
.game-tile-img.has-logo {
    position: relative;
    background-color: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 14px solid #fff;
    background-clip: padding-box;
    background-origin: padding-box;
}
.game-tile-img.has-logo::after {
    content: ""; position: absolute; left: -14px; right: -14px; bottom: -14px; height: 3px;
    background: var(--card-gradient, var(--crystal-blue));
}
@media (max-width: 600px) {
    .game-hero-logo img { max-height: 100px; }
    .game-hero-logo { margin-bottom: .7rem; }
}
.game-hero-logo.logo-portrait img { max-height: 230px; }
@media (max-width: 600px) { .game-hero-logo.logo-portrait img { max-height: 150px; } }

/* Illustration de famille de collectibles (02/09/2026) */
.fam-illustration { margin: 0 0 1.1rem; }
/* 03/09/2026 : le recadrage cover a 260 px transformait toute image portrait ou carree en
   bande illisible (une carte perdait son code, un render devenait un aplat). On garde donc les
   proportions et on centre sur un fond neutre — l image reste entiere, quelle que soit sa forme. */
.fam-illustration {
    position: relative; overflow: hidden;
    border-radius: var(--radius-s); border: 1px solid var(--border); box-shadow: var(--shadow-soft);
    background: var(--bg-panel-lo);
}
/* Une image carree ou petite laissait deux bandes vides sur les cotes (« ça fait moche »,
   03/09/2026). On remplit la largeur avec une copie floutee de l'image elle-meme, et l'image
   reste posee dessus, entiere et centree : plein cadre sans jamais rogner. */
.fam-illustration::before {
    content: ""; position: absolute; inset: -6%;
    background-image: var(--illus-fond); background-size: cover; background-position: center;
    filter: blur(22px) saturate(.75) brightness(.9); transform: scale(1.06);
}
.fam-illustration img {
    position: relative; display: block; margin: 0 auto;
    max-width: 100%; height: auto; width: auto; max-height: 320px;
    object-fit: contain;
}
.fam-illustration figcaption { font-size: .78rem; color: var(--text-mute); margin-top: .35rem; font-style: italic; }
/* Logo du jeu dans le menu lateral des pages chapitre (02/09/2026) */
.chapter-gamenav-logo { display: flex; justify-content: center; padding: .15rem 0 .3rem; }
.chapter-gamenav-logo img { display: block; max-height: 52px; max-width: 88%; width: auto; }

/* Illustrations des callouts (secrets transversaux) — 02/09/2026 */
.callout .callout-illus { float: right; margin: 0 0 .5rem 1rem; width: 110px; }
.callout .callout-illus img { display: block; width: 100%; border-radius: var(--radius-s); border: 1px solid var(--border); background: #fff; }
.callout .callout-illus--double { width: 110px; display: flex; flex-direction: column; gap: .4rem; }
.callout { overflow: hidden; }
@media (max-width: 600px) { .callout .callout-illus { width: 84px; margin-left: .7rem; } }

/* Rangee d'illustrations des sections systeme (02/09/2026) */
.sys-illus { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .9rem; margin: 0 0 1.3rem; }
.sys-illus-item { margin: 0; }
.sys-illus-item {
    position: relative; overflow: hidden;
    border-radius: var(--radius-s); border: 1px solid var(--border); box-shadow: var(--shadow-soft);
    background: var(--bg-panel-lo);
}
.sys-illus-item::before {
    content: ""; position: absolute; inset: -6%;
    background-image: var(--illus-fond); background-size: cover; background-position: center;
    filter: blur(20px) saturate(.75) brightness(.9); transform: scale(1.06);
}
/* Hauteur commune : une rangee de deux ou trois images s'aligne au cordeau, quelles que
   soient leurs proportions d'origine. */
.sys-illus-item img {
    position: relative; display: block; margin: 0 auto;
    height: auto; max-height: 220px; width: auto; max-width: 100%; object-fit: contain;
}
/* Seule dans sa rangee, l'illustration dispose de toute la largeur : on la laisse
   respirer plutot que de la noyer dans le fond floute. */
.sys-illus-item:only-child img { height: auto; max-height: 330px; }
@media (max-width: 600px) { .sys-illus-item:only-child img { max-height: 200px; } }
@media (max-width: 600px) { .sys-illus-item img { max-height: 170px; } .fam-illustration img { max-height: 190px; } }
.sys-illus-item figcaption { font-size: .78rem; color: var(--text-mute); margin-top: .35rem; font-style: italic; }

/* === Filtre par personnage (onglet Équipements) + sommaire d'onglet — 03/09/2026 === */
.eq-nav-link.is-active { background: var(--crystal-blue); color: #fff; border-color: var(--crystal-blue); }
.eq-perso[hidden] { display: none !important; }

.tab-sommaire { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.3rem; padding: .7rem .8rem; background: var(--bg-panel-lo); border: 1px solid var(--border); border-radius: var(--radius-s); }
.tab-sommaire-lien {
    display: inline-block; padding: .3em .75em; font-family: var(--font-ui); font-size: .78rem; font-weight: 600;
    color: var(--text-soft); text-decoration: none; background: var(--bg-panel);
    border: 1px solid var(--border); border-radius: var(--radius-m); transition: all .15s;
}
.tab-sommaire-lien:hover { background: var(--crystal-blue); color: #fff; border-color: var(--crystal-blue); }
@media (max-width: 600px) { .tab-sommaire { padding: .55rem .6rem; } .tab-sommaire-lien { font-size: .72rem; } }

/* === Jamais d'agrandissement — 03/09/2026 ==========================================
   Un recensement sur les seize jeux a trouve 63 fichiers reellement etires a l'affichage,
   jusqu'a x3,77 (une capture de 230 px montree sur 868). La cause n'etait pas les images
   mais le `width: 100%` de leurs cadres. `max-content` sur une image vaut sa largeur
   naturelle : elle remplit son cadre quand elle le peut, et reste nette sinon.
   Le cadre est comble par le fond neutre ou par la copie floutee deja en place. */
.chapter-img img,
.albhed-map img,
.fam-illustration img,
.sys-illus-item img,
.miss-card img,
.tip-img img,
.secret-img img {
    max-width: max-content;
    margin-left: auto;
    margin-right: auto;
}
/* Les figures concernees centrent donc leur image au lieu de la coller a gauche. */
.chapter-img, .albhed-map, .miss-card { text-align: center; }


/* ─── Retour en haut de page (07/09/2026) ─────────────────────────────────────
   Les pages de soluce depassent souvent dix ecrans. Bouton en bas a DROITE : le
   lecteur audio, lui, flotte en HAUT a droite (top:88px), il n'y a donc pas de
   chevauchement. z-index 55 = sous le lecteur (60) et sous le voile de nav (9998). */
.ff-haut {
    position: fixed; right: 20px; bottom: 20px; z-index: 55;
    width: 44px; height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; line-height: 1; font-weight: 700;
    color: #fff; background: var(--gold, #c0392b);
    border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.22);
    cursor: pointer;
    opacity: 0; transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.ff-haut[hidden] { display: none; }
.ff-haut.is-visible { opacity: .92; transform: translateY(0); }
.ff-haut:hover, .ff-haut:focus-visible { opacity: 1; background: var(--gold-bright, #e74c3c); }
.ff-haut:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
    .ff-haut { right: 12px; bottom: 12px; width: 40px; height: 40px; font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ff-haut { transition: none; }
}

/* ─── Recherche par listing (07/09/2026) ──────────────────────────────────────
   Posee par JS au-dessus de chaque liste d'au moins 8 elements. `ff-nomatch` est
   volontairement distincte de `.hidden` (filtre par categorie du bestiaire) : un
   element reste masque si l'un OU l'autre s'applique, ce qui est le comportement
   attendu quand on combine un filtre de categorie et une recherche. */
.ff-lsearch {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    margin: 0 0 .7rem; padding: .45rem .6rem;
    background: var(--bg-panel, #fff);
    border: 1px solid var(--border, #e2e5ea); border-radius: 10px;
}
.ff-lsearch-lab { display: flex; align-items: center; gap: .45rem; flex: 1 1 220px; min-width: 0; }
.ff-lsearch-lab > span { opacity: .55; font-size: .95rem; line-height: 1; }
.ff-lsearch input {
    flex: 1 1 auto; min-width: 0;
    padding: .35rem .5rem; font: inherit; font-size: .9rem;
    color: inherit; background: transparent;
    border: 0; border-bottom: 1px solid transparent; border-radius: 0;
    outline: none;
}
.ff-lsearch input:focus { border-bottom-color: var(--gold, #c0392b); }
.ff-lsearch input::-webkit-search-cancel-button { cursor: pointer; }
.ff-lsearch-count { font-size: .8rem; color: var(--text-mute, #7a8290); white-space: nowrap; }
.ff-lsearch-vide {
    margin: 0 0 .7rem; padding: .6rem .7rem;
    font-size: .9rem; color: var(--text-mute, #7a8290);
    background: var(--bg-panel, #fff);
    border: 1px dashed var(--border, #e2e5ea); border-radius: 10px;
}
.ff-lsearch-vide[hidden] { display: none; }
.ff-nomatch { display: none !important; }
/* === Entête collant au défilement (bureau) — 07/09/2026 ====================
   La barre de menu était DÉJÀ en position:sticky (cf. .site-header-nav plus
   haut), mais son bloc conteneur est le <header>, qui ne fait que sa propre
   hauteur : elle n'avait nulle part où coller et s'en allait avec le bandeau.
   On rend donc le <header> LUI-MÊME collant, avec un décalage négatif égal à
   la hauteur du bandeau noir : le bandeau s'échappe vers le haut, la barre de
   menu reste. La hauteur est mesurée en JS (--ff-hdr-haut) car elle dépend de
   la police, du zoom et de la largeur ; 160px n'est qu'un repli.
   Le site supposait déjà ce menu collé : sommaire de chapitre à top:50px,
   liste d'onglets à top:52px, recherche de listing à top:64px. */
@media (min-width: 881px) {
    .site-header {
        position: sticky;
        top: calc(0px - var(--ff-hdr-haut, 160px));
        z-index: 70;   /* au-dessus du lecteur audio (60), sous la visionneuse (100) */
    }
}

/* === Recherche globale du site (la loupe du menu) — 07/09/2026 =============
   Le bouton existe en deux exemplaires : un dans la barre de menu (bureau), un
   dans le bandeau à côté du hamburger (mobile, où la barre de menu est repliée).
   Un seul des deux est visible à la fois — une loupe cachée dans le hamburger
   ne serait trouvée par personne. */
.ff-loupe-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 44px; padding: 0 .95rem;
    background: transparent; border: 0; cursor: pointer;
    font: inherit; font-family: var(--font-ui); font-size: .82rem;
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-soft);
    transition: color .18s, background .18s;
}
.ff-loupe-btn:hover { color: var(--crystal-blue); background: rgba(192,57,43,.05); }
.ff-loupe-btn svg { flex: 0 0 auto; }
.ff-loupe-btn--mob {
    display: none;
    position: absolute; right: calc(1.4rem + 48px); top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 38px; padding: 0; min-height: 0;
    align-items: center; justify-content: center;
    border: 1px solid var(--border-strong); border-radius: var(--radius-s);
    color: rgba(255,255,255,.8);
}
.ff-loupe-btn--mob:hover { color: #fff; background: rgba(255,255,255,.08); }

/* Le panneau. Volontairement posé en haut de l'écran plutôt qu'au centre :
   on tape, on lit la liste qui descend, sans que le regard ait à sauter. */
.ff-rech {
    position: fixed; inset: 0; z-index: 9990;
    background: rgba(18,17,20,.55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 8vh 1rem 1rem;
}
.ff-rech[hidden] { display: none; }
.ff-rech-boite {
    width: min(680px, 100%);
    max-height: 78vh; display: flex; flex-direction: column;
    background: var(--bg-panel); border: 1px solid var(--border-strong);
    border-radius: var(--radius-m); box-shadow: 0 24px 60px rgba(0,0,0,.35);
    overflow: hidden;
}
.ff-rech-haut {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem .85rem; border-bottom: 1px solid var(--border);
}
.ff-rech-haut > svg { flex: 0 0 auto; color: var(--text-soft); }
.ff-rech-champ {
    flex: 1; min-width: 0;
    border: 0; background: transparent; outline: none;
    font: inherit; font-size: 1.05rem; color: var(--text);
}
.ff-rech-champ::-webkit-search-cancel-button { display: none; }
.ff-rech-fermer {
    flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border); border-radius: var(--radius-s);
    color: var(--text-soft); cursor: pointer; font-size: .9rem; line-height: 1;
}
.ff-rech-fermer:hover { color: var(--crystal-blue); border-color: var(--border-strong); }
.ff-rech-etat {
    padding: .5rem .95rem; font-size: .78rem; color: var(--text-soft);
    border-bottom: 1px solid var(--border); background: var(--bg-panel-lo);
}
.ff-rech-etat[hidden] { display: none; }
.ff-rech-liste { list-style: none; margin: 0; padding: .3rem; overflow-y: auto; }
.ff-rech-liste li { margin: 0; }
.ff-rech-liste a {
    display: flex; align-items: baseline; gap: .6rem;
    padding: .5rem .65rem; border-radius: var(--radius-s);
    text-decoration: none; color: var(--text);
}
.ff-rech-liste a:hover, .ff-rech-liste li.sel a {
    background: rgba(192,57,43,.08); color: var(--crystal-blue);
}
.ff-rech-nom { flex: 1; min-width: 0; font-weight: 600; }
.ff-rech-nom mark { background: rgba(192,57,43,.18); color: inherit; padding: 0 .1em; border-radius: 2px; }
.ff-rech-meta { flex: 0 0 auto; font-size: .72rem; color: var(--text-soft); white-space: nowrap; }
.ff-rech-type {
    display: inline-block; padding: .05rem .38rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg-panel-lo);
    font-size: .68rem; letter-spacing: .02em;
}

@media (max-width: 880px) {
    .main-nav .ff-loupe-btn { display: none; }
    .ff-loupe-btn--mob { display: inline-flex; }
    .ff-rech { padding: 0; }
    .ff-rech-boite { width: 100%; max-height: 100%; height: 100%; border-radius: 0; border: 0; }
    .ff-rech-liste { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ff-loupe-btn, .ff-rech-liste a { transition: none; }
}

/* === Sommaire du dossier, sous la présentation d'un jeu — 07/09/2026 ========
   La liste des onglets vit dans une barre latérale qui devient un menu déroulant
   sur écran étroit. Qui ne remarque pas ce menu ne sait pas où aller : on redonne
   donc ici la liste complète des sections, en clair. */
.jeu-sommaire {
    margin: 2rem 0 .4rem; padding: 1rem 1.1rem;
    background: var(--bg-panel-lo);
    border: 1px solid var(--border); border-left: 3px solid var(--crystal-blue);
    border-radius: var(--radius-m);
}
.jeu-sommaire-titre {
    margin: 0 0 .8rem; font-family: var(--font-title);
    font-size: .95rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-soft);
}
.jeu-sommaire-liste {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .35rem .8rem;
}
.jeu-sommaire-liste li { margin: 0; }
.jeu-sommaire-liste a {
    display: block; padding: .38rem .55rem;
    border-radius: var(--radius-s);
    color: var(--text); text-decoration: none;
    font-size: .92rem; line-height: 1.3;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.jeu-sommaire-liste a::before { content: "› "; color: var(--crystal-blue); font-weight: 700; }
.jeu-sommaire-liste a:hover {
    background: rgba(192,57,43,.07); color: var(--crystal-blue); border-color: var(--border);
}
@media (max-width: 600px) {
    .jeu-sommaire { padding: .8rem .85rem; }
    .jeu-sommaire-liste { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .jeu-sommaire-liste a { transition: none; } }
/* « Soluce » ressort du sommaire : c'est la section la plus visitée. 07/09/2026 */
/* Rubrique grisée dans le sommaire « Tout le dossier » : même registre que .tab-btn.is-vide
   de la barre latérale — non cliquable, effacée, l'infobulle dit pourquoi. 11/09/2026. */
.jeu-sommaire-vide > span { color: var(--text-mute, #7a8290); opacity: .55; cursor: default; }
.jeu-sommaire-vide > span::after { content: ' —'; opacity: .6; }
.jeu-sommaire-fort a { font-weight: 800; color: var(--crystal-blue); }
.jeu-sommaire-fort a::before { content: "▸ "; }

/* === Sphérier interactif — 07/09/2026 =======================================
   Demandé par le propriétaire : naviguer le sphérier sur la page. On rend
   navigables les PLANCHES RÉELLES du jeu (déplacement, zoom, changement de vue)
   plutôt que de redessiner une grille de ~800 nœuds dont les positions ne sont
   documentées nulle part — les inventer aurait produit une belle image fausse. */
.sph { margin: 0 0 2rem; }
.sph-barre { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .6rem; }
.sph-groupe { display: flex; flex-wrap: wrap; gap: .3rem; }
.sph-groupe--outils { margin-left: auto; align-items: center; }
.sph-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .7rem; min-height: 34px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-s);
    font: inherit; font-size: .84rem; color: var(--text); cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.sph-btn:hover { border-color: var(--border-strong); color: var(--crystal-blue); }
.sph-btn.is-on { background: var(--crystal-blue); border-color: var(--crystal-blue); color: #fff; font-weight: 700; }
.sph-btn.is-on .sph-vignette { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.sph-vignette {
    width: 22px; height: 22px; border-radius: 50%;
    background-size: cover; background-position: center top;
    border: 1px solid var(--border); flex: 0 0 auto;
}
.sph-niveau { font-size: .8rem; color: var(--text-soft); min-width: 3.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.sph-aide { margin: 0 0 .5rem; font-size: .78rem; color: var(--text-soft); font-style: italic; }

.sph-scene {
    position: relative; overflow: hidden;
    height: min(70vh, 620px);
    background: var(--bg-panel-lo);
    border: 1px solid var(--border); border-radius: var(--radius-m);
    cursor: grab; touch-action: none;
}
.sph-scene.is-drag { cursor: grabbing; }
.sph-scene:focus-visible { outline: 2px solid var(--crystal-blue); outline-offset: 2px; }
.sph-img {
    position: absolute; top: 0; left: 0;
    transform-origin: 0 0;
    max-width: none; max-height: none;
    user-select: none; -webkit-user-drag: none;
    image-rendering: auto;
}
.sph-etiquette {
    position: absolute; left: 10px; bottom: 10px; z-index: 2;
    padding: .28rem .6rem; border-radius: var(--radius-s);
    background: rgba(18,17,20,.78); color: #fff;
    font-size: .78rem; letter-spacing: .02em; pointer-events: none;
}

.sph-fiche {
    margin-top: .9rem; padding: .9rem 1rem;
    background: var(--bg-panel-lo); border: 1px solid var(--border);
    border-left: 3px solid var(--crystal-blue); border-radius: var(--radius-m);
}
.sph-fiche[hidden] { display: none; }
.sph-fiche-titre { margin: 0 0 .5rem; font-size: 1.02rem; }
.sph-fiche-role { font-weight: 400; font-size: .82rem; color: var(--text-soft); }
.sph-fiche-corps { font-size: .93rem; }
.sph-fiche-note { margin: .6rem 0 0; font-size: .88rem; color: var(--text-soft); }
.sph-avert { margin: .7rem 0 0; font-size: .76rem; color: var(--text-mute, var(--text-soft)); font-style: italic; }

@media (max-width: 700px) {
    .sph-scene { height: 58vh; }
    .sph-groupe--outils { margin-left: 0; }
    .sph-btn { font-size: .78rem; padding: .34rem .55rem; }
    .sph-vignette { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .sph-btn { transition: none; } }

/* Plein écran du sphérier — 07/09/2026. Demandé : « ça ouvre en grand le
   sphérier comme dans le jeu ». On utilise l'API Fullscreen quand elle existe,
   et une classe de repli qui couvre la fenêtre sinon (iOS la refuse encore). */
.sph.est-plein {
    position: fixed; inset: 0; z-index: 9995;
    margin: 0; padding: .6rem .8rem;
    background: var(--bg-deep, #101014);
    display: flex; flex-direction: column;
    overflow: auto;
}
.sph.est-plein .sph-scene { flex: 1 1 auto; height: auto; min-height: 0; }
.sph.est-plein .sph-aide,
.sph.est-plein .sph-avert { flex: 0 0 auto; }
.sph.est-plein .sph-fiches { flex: 0 0 auto; max-height: 32vh; overflow: auto; }
.sph-btn.sph-plein[aria-pressed="true"] { background: var(--crystal-blue); border-color: var(--crystal-blue); color: #fff; }
body.sph-verrou { overflow: hidden; }
/* === Carte cliquable du sphérier — 07/09/2026 ==============================
   Un calque SVG posé EXACTEMENT sur la planche du jeu : 82 compétences et
   7 positions de départ, chacune cliquable. Le calque et l'image partagent le
   même conteneur (.sph-plan), donc la même transformation : un repère ne peut
   pas se décaler de sa boule, quel que soit le zoom. */
.sph-plan { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.sph-plan .sph-img { position: static; transform: none; display: block; }
.sph-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.sph-pt { cursor: pointer; }
.sph-pt-zone {
    fill: rgba(80, 140, 255, 0);
    stroke: rgba(80, 140, 255, 0);
    stroke-width: 2;
    transition: fill .12s, stroke .12s;
}
.sph-pt:hover .sph-pt-zone,
.sph-pt:focus .sph-pt-zone { fill: rgba(70, 130, 255, .22); stroke: rgba(40, 100, 235, .95); }
.sph-pt:focus { outline: none; }
.sph-pt.est-choisi .sph-pt-zone { fill: rgba(216, 54, 43, .28); stroke: rgba(216, 54, 43, 1); }
/* résultat de recherche : bien visible sans masquer le dessin dessous */
.sph-pt.est-trouve .sph-pt-zone {
    fill: rgba(255, 214, 0, .40); stroke: rgba(200, 140, 0, 1); stroke-width: 3;
}
/* On ne délave PAS les repères non trouvés : cela blanchissait les étiquettes de la
   planche et donnait l'impression d'un bug. La mise en évidence des résultats
   suffit à les faire ressortir. 07/09/2026 */
.sph-pt--perso .sph-pt-zone { rx: 6; }

/* la bulle qui suit le clic */
.sph-bulle {
    position: absolute; z-index: 5; max-width: 300px;
    padding: .6rem .75rem;
    background: rgba(18,17,20,.95); color: #f4efec;
    border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-s);
    box-shadow: 0 10px 28px rgba(0,0,0,.4);
    font-size: .86rem; line-height: 1.4;
    /* La bulle NE DOIT PAS intercepter les clics : ouverte, elle recouvrait les
       repères voisins et « Lulu » devenait inatteignable juste après « Couvrir ».
       Elle se ferme au clic ailleurs, à Échap, ou en ouvrant un autre repère. */
    pointer-events: none;
}
.sph-bulle[hidden] { display: none; }
.sph-bulle-nom { display: block; font-weight: 800; font-size: .98rem; margin-bottom: .2rem; }
.sph-bulle-type { display: inline-block; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
    color: #ffd86b; margin-bottom: .35rem; }
.sph-bulle-txt { color: rgba(244,239,236,.86); }
.sph-bulle-fermer {
    position: absolute; top: 4px; right: 6px; width: 20px; height: 20px; padding: 0;
    background: transparent; border: 0; color: rgba(255,255,255,.65); cursor: pointer; font-size: .9rem;
}
.sph-bulle-fermer:hover { color: #fff; }

/* la barre de recherche de la carte */
.sph-chercher { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.sph-chercher-lab { font-size: .8rem; font-weight: 700; color: var(--text-soft); }
.sph-chercher-champ {
    flex: 1; min-width: 12rem; max-width: 26rem;
    padding: .4rem .7rem;
    border: 1px solid var(--border); border-radius: var(--radius-s);
    font: inherit; font-size: .9rem; background: var(--bg-panel); color: var(--text);
}
.sph-chercher-champ:focus { outline: 2px solid var(--crystal-blue); outline-offset: 1px; }
.sph-chercher-cpt { font-size: .78rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .sph-pt-zone { transition: none; } }

/* Panneau de détail sous la carte : la même fiche, mais qui reste lisible et
   sélectionnable, sans jamais recouvrir la planche. 07/09/2026 */
.sph-detail {
    margin-top: .7rem; padding: .8rem 1rem;
    background: var(--bg-panel-lo); border: 1px solid var(--border);
    border-left: 3px solid var(--crystal-blue); border-radius: var(--radius-m);
}
.sph-detail[hidden] { display: none; }
.sph-detail-type { display: inline-block; font-size: .7rem; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-soft); }
.sph-detail-nom { display: block; font-family: var(--font-title); font-size: 1.15rem; margin: .1rem 0 .3rem; }
.sph-detail-txt { font-size: .9rem; color: var(--text-soft); margin: 0; }

.sph-detail-lien { display: inline-block; margin-top: .5rem; font-size: .85rem; }

/* le coût en PM, à droite de la description */
.sph-pm { display: inline-block; margin-left: .5rem; padding: .05rem .4rem;
    border-radius: 999px; background: rgba(80,140,255,.18); color: #9ec6ff;
    font-size: .72rem; font-weight: 700; }
.sph-detail-txt .sph-pm { background: rgba(40,90,200,.12); color: var(--crystal-blue); }

/* Les 1 646 sphères cliquables — 07/09/2026. Discrètes au repos, elles
   s'éclairent au survol et à la recherche. Le contour pointillé signale une
   lecture de pictogramme incertaine : on ne déguise pas un doute en fait. */
.sph-sp .sph-pt-zone { stroke-width: 2; }
.sph-sp:hover .sph-pt-zone, .sph-sp:focus .sph-pt-zone { fill: rgba(70,130,255,.30); stroke: rgba(30,90,225,1); }
.sph-sp--ind .sph-pt-zone { stroke-dasharray: 3 3; }
.sph-sp.est-trouve .sph-pt-zone { fill: rgba(255,214,0,.55); stroke: rgba(190,130,0,1); stroke-width: 3; }
.sph-sp.est-choisi .sph-pt-zone { fill: rgba(216,54,43,.42); stroke: rgba(216,54,43,1); }

.sph-val { display: inline-block; margin-right: .4rem; padding: .05rem .4rem;
    border-radius: 999px; background: rgba(255,200,0,.20); color: #ffd86b; font-weight: 800; }
.sph-detail-txt .sph-val { background: rgba(200,140,0,.14); color: #a06a00; }

/* Une image de 118 px étirée sur 860 px devient une bouillie : 782 vignettes de
   bestiaire sur 3 153 étaient dans ce cas (10/09/2026). Sous 300 px de large,
   on l'affiche à sa taille réelle, centrée sur le fond du panneau. */
.boss-img--petite {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-deep);
    padding: 1rem 0;
}
.boss-img--petite img {
    width: auto;
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    image-rendering: auto;
}
/* Légende de l'image d'en-tête d'article, et illustrations insérées dans le
   corps du texte (ajoutées le 10/09/2026). Une image sans légende passe pour
   hors sujet ; la légende dit pourquoi elle est là. */
/* La légende d'en-tête est DANS le cadre .article-hero (bordures latérales,
   overflow: hidden). Avec padding: 0 et margin-top, son texte touchait les deux
   bordures et flottait sur un fond transparent : aucune séparation avec l'image,
   et un alignement à droite qui passait pour une erreur de mise en page.
   Refaite le 10/09/2026 sur le même patron que les légendes de figure — une seule
   apparence de légende dans un article. */
.article-hero-legende {
    margin: 0;
    padding: .75rem 1.1rem .8rem;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--text-soft);
    font-style: italic;
    text-align: left;
    text-wrap: pretty;
    background: var(--bg-panel-lo);
    border-top: 1px solid var(--border);
}
.article-hero-legende strong { color: var(--text); font-weight: 600; font-style: normal; }
@media (max-width: 560px) {
    .article-hero-legende {
        padding: .65rem .85rem .7rem;
        font-size: .78rem;
        line-height: 1.55;
    }
}
/* Les figures d'article reprennent le CADRE des soluces (.chapter-img) — même bordure,
   même ombre, même rayon. Mais PAS leur légende : celle de .chapter-img est masquée
   depuis le 24/08/2026 par la règle générale `figcaption { display: none }`, donc son
   style n'a jamais été vu à l'écran. Copié tel quel ici, il donnait une bande blanche
   collée sous l'image, sans séparation, texte au ras du bord droit — et un dégradé
   `transparent → --bg-panel-lo` posé sur une figure déjà en --bg-panel-lo, c'est-à-dire
   invisible. Refait le 10/09/2026 après signalement du propriétaire. */
.article-body figure.article-img {
    margin: 1.6rem 0;
    border-radius: var(--radius-m);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    background: var(--bg-panel-lo);
}
.article-body figure.article-img img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
    border: none;
    border-radius: 0;
}
.article-body figure.article-img figcaption {
    padding: .75rem 1.1rem .8rem;
    font-family: var(--font-body);
    font-size: .8rem;
    line-height: 1.6;
    /* italique, comme .article-hero-legende : les deux légendes d'un article parlent
       enfin la même langue visuelle. */
    font-style: italic;
    color: var(--text-soft);
    letter-spacing: 0;
    text-align: left;
    /* évite le mot orphelin seul sur la dernière ligne (« Revelation. ») */
    text-wrap: pretty;
    background: var(--bg-panel-lo);
    /* la légende se détache de l'image au lieu d'y être collée */
    border-top: 1px solid var(--border);
}
/* Le sujet nommé en tête de légende garde sa présence, et sort de l'italique. */
.article-body figure.article-img figcaption strong {
    color: var(--text);
    font-weight: 600;
    font-style: normal;
}
@media (max-width: 560px) {
    .article-body figure.article-img figcaption {
        padding: .65rem .85rem .7rem;
        font-size: .78rem;
        line-height: 1.55;
    }
}
/* ═══════════════════════════════════════════════════════════════════════════
   LÉGENDES MASQUÉES PARTOUT — décision du propriétaire, 10/09/2026 :
   « sur les articles comme sur les soluces de jeux merci de masquer les
   légendes sous les images ».

   Le site masque déjà les 6 270 légendes des dossiers de jeu depuis le
   24/08/2026 (`figcaption { display: none }`). J'avais ouvert trois exceptions
   pour les articles — figures, bandeaux, légende d'en-tête — elles sont
   refermées : une seule apparence sur tout le site.

   RIEN N'EST PERDU : les textes de légende restent en base et dans les données,
   et l'attribut `alt` continue de décrire chaque image pour les lecteurs
   d'écran et les moteurs. Pour les réafficher, il suffit de repasser les trois
   règles ci-dessous à `display: block`.
   ═══════════════════════════════════════════════════════════════════════════ */
.article-body figure.article-img figcaption,
.article-body .article-bandeau figcaption,
.article-hero-legende { display: none; }
/* ═══════════════════════════════════════════════════════════════════════════
   BANDEAU D'IMAGES D'ARTICLE — 2, 3 ou 4 visuels sur une même ligne.
   Demandé par le propriétaire le 10/09/2026 : « il ne faut pas hésiter à mettre
   un bandeau de 2, 3 ou 4 images sur la même ligne dans les articles afin de
   bien tout alimenter à fond et que ça soit joli ».
   Les légendes gardent la langue visuelle des autres légendes d'article
   (fond de panneau, filet de séparation, italique), un cran plus compact.
   ═══════════════════════════════════════════════════════════════════════════ */
.article-body .article-bandeau {
    display: grid;
    gap: 10px;
    margin: 1.6rem 0;
}
.article-body .article-bandeau--2 { grid-template-columns: repeat(2, 1fr); }
.article-body .article-bandeau--3 { grid-template-columns: repeat(3, 1fr); }
.article-body .article-bandeau--4 { grid-template-columns: repeat(4, 1fr); }
.article-body .article-bandeau figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--bg-panel-lo);
    box-shadow: var(--shadow-soft);
}
.article-body .article-bandeau img {
    display: block;
    width: 100%;
    /* 16/9, le format réel des visuels officiels (1920x1080). En 16/10, le
       recadrage `cover` rognait les côtés et coupait le filigrane du site en bas
       à droite — ainsi que les logos de l'éditeur sur les planches promo
       (constaté le 10/09/2026). */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: none;
    border-radius: 0;
}
.article-body .article-bandeau figcaption {
    /* Le `display` est décidé plus bas, dans le bloc « LÉGENDES MASQUÉES PARTOUT ».
       Historique utile : la règle générale `figcaption { display: none }` masque
       toutes les légendes du site, et styler une légende ne suffit donc pas à
       l'afficher — au premier jet, le bandeau sortait sans aucune légende. */
    flex: 1;
    padding: .55rem .7rem .6rem;
    font-family: var(--font-body);
    font-size: .74rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--text-soft);
    text-align: left;
    text-wrap: pretty;
    background: var(--bg-panel-lo);
    border-top: 1px solid var(--border);
}
.article-body .article-bandeau figcaption strong { color: var(--text); font-weight: 600; font-style: normal; }
/* Écran étroit : 3 et 4 colonnes retombent à 2, puis tout s'empile. Quatre
   vignettes de 80 px de large ne montreraient plus rien. */
@media (max-width: 900px) {
    .article-body .article-bandeau--3,
    .article-body .article-bandeau--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .article-body .article-bandeau--2,
    .article-body .article-bandeau--3,
    .article-body .article-bandeau--4 { grid-template-columns: 1fr; }
    .article-body .article-bandeau figcaption { font-size: .76rem; padding: .6rem .8rem .65rem; }
}

/* Un visuel EN HAUTEUR (photo produit, statuette, jaquette) : recadré à 380 px de
   haut en `cover`, on n'en verrait qu'une tranche horizontale. On l'affiche entier,
   posé sur un fond sombre qui tient le cadre. */
.article-body figure.article-img--portrait img {
    object-fit: contain;
    max-height: 540px;
    background: #14171c;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLEIN CADRE — décision du propriétaire, 10/09/2026 :
   « il ne faut pas réduire les images, il faudrait qu'elle fasse toute la
   largeur mais garder la même hauteur que actuellement, en gros garder la
   largeur mais tronquer en hauteur, car là avec le flou derrière c'est moche ».

   Ce qui existait avant, et pourquoi : le 03/09, un recadrage `cover` à 260 px
   transformait les images portrait ou carrées en bandes illisibles ; on est donc
   passé à `contain` + une copie floutée de l'image pour combler le cadre. Le
   remède s'est révélé plus laid que le mal.

   Désormais : l'image REMPLIT son cadre en largeur et le cadre garde sa hauteur
   — donc recadrage vertical (`object-fit: cover`), et plus de fond flouté.
   Les hauteurs sont exactement celles d'avant.
   ═══════════════════════════════════════════════════════════════════════════ */

/* le fond flouté n'a plus d'objet : l'image couvre tout le cadre */
.section-banners--solo .section-banner::before,
.fam-illustration::before,
.sys-illus-item::before { content: none; }

/* et la garde « jamais d'agrandissement » doit céder ici, sinon une image plus
   étroite que son cadre ne le remplirait pas — c'était toute la cause du flou. */
.section-banners--solo .section-banner img,
.fam-illustration img,
.sys-illus-item img {
    max-width: none;
    width: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
}
.section-banners--solo .section-banner img { height: 300px; max-height: none; }
.fam-illustration img                      { height: 320px; max-height: none; }
.sys-illus-item img                        { height: 220px; max-height: none; }
.sys-illus-item:only-child img             { height: 330px; max-height: none; }

@media (max-width: 600px) {
    .section-banners--solo .section-banner img { height: 190px; }
    .fam-illustration img                      { height: 190px; }
    .sys-illus-item img                        { height: 170px; }
    .sys-illus-item:only-child img             { height: 200px; }
}

/* Mention unique sous un tableau d'attaques, quand toutes les lignes portaient la
   même note (10/09/2026). Discrète : c'est une précaution de méthode, pas une
   information de jeu. */
.boss-attacks-note {
    margin: .5rem 0 0;
    font-family: var(--font-body);
    font-size: .78rem;
    line-height: 1.55;
    font-style: italic;
    color: var(--text-mute);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIÈGE ANTI-SPAM DU FORMULAIRE DE COMMENTAIRES — à ne jamais laisser visible.
   `includes/comments.php` pose <input name="website" class="cf-hp"> : un champ
   destiné aux robots, qu'un humain ne doit ni voir ni remplir. Or AUCUNE règle
   ne le masquait : il s'affichait comme une boîte de saisie sans étiquette,
   juste sous le contenu de l'onglet. Le propriétaire a cru y taper une
   recherche — « j'ai essayé d'écrire un nom de musique pour filtrer mais rien
   ne se passe » (10/09/2026), alors que le vrai champ de recherche est plus
   haut et fonctionne.
   On le sort du flux au lieu de le passer en `display: none` : certains robots
   ignorent les champs en `display: none`, ce qui affaiblirait le piège.
   ═══════════════════════════════════════════════════════════════════════════ */
.cf-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONGLET TRAILERS (10/09/2026) — lecteur, sélecteur, filtres.
   Registre visuel repris des autres panneaux : cadre sobre, filet de séparation,
   pas de fioriture. Le lecteur garde son rapport 16/9 quelle que soit la largeur.
   ═══════════════════════════════════════════════════════════════════════════ */
.trailers-intro { margin: 0 0 1.1rem; color: var(--text-soft); font-size: .94rem; line-height: 1.6; }

.trailer-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #05070a;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}
.trailer-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.trailer-filtres { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1.1rem 0 .8rem; }
.trailer-filtre-groupe { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.trailer-filtre-label {
    font-family: var(--font-ui); font-size: .66rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .12em; color: var(--text-mute);
    margin-right: .15rem;
}
.trailer-filtre {
    font-family: var(--font-ui); font-size: .76rem; font-weight: 600;
    padding: .3em .8em; color: var(--text-soft); background: var(--bg-panel);
    border: 1px solid var(--border); border-radius: var(--radius-m);
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.trailer-filtre:hover { background: var(--bg-panel-lo); }
.trailer-filtre.is-actif { background: var(--crystal-blue); color: #fff; border-color: var(--crystal-blue); }

.trailer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.trailer-item[hidden] { display: none; }
.trailer-choix {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: .7rem .9rem;
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-m); transition: background .15s, border-color .15s;
}
.trailer-choix:hover { background: var(--bg-panel-lo); border-color: var(--crystal-blue); }
.trailer-item.is-actif .trailer-choix { border-left: 3px solid var(--crystal-blue); background: var(--bg-panel-lo); }
.trailer-titre { display: block; font-family: var(--font-title); font-size: 1rem; font-weight: 700; color: var(--text); }
.trailer-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; font-family: var(--font-ui); font-size: .72rem; }
.trailer-meta > span {
    padding: .12em .55em; border-radius: var(--radius-m);
    background: var(--bg-panel-lo); border: 1px solid var(--border); color: var(--text-mute);
}
.trailer-annee  { font-weight: 700; }
.trailer-lang   { color: var(--crystal-blue) !important; font-weight: 700; }
.trailer-vide   { margin: .8rem 0 0; font-style: italic; color: var(--text-mute); font-size: .86rem; }

@media (max-width: 560px) {
    .trailer-filtres { gap: .7rem; }
    .trailer-titre { font-size: .94rem; }
    .trailer-meta { font-size: .68rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONGLET NEWS D'UN JEU (10/09/2026) — les articles du site sur ce jeu.
   Même gabarit de carte que les tuiles de l'accueil : image en bandeau 16/9,
   catégorie, date, titre, chapô.
   ═══════════════════════════════════════════════════════════════════════════ */
.game-news-intro { margin: 0 0 1.2rem; color: var(--text-soft); font-size: .94rem; }
.game-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.game-news-card {
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: border-color .15s, transform .15s;
}
.game-news-card:hover { border-color: var(--crystal-blue); transform: translateY(-2px); }
.game-news-img {
    aspect-ratio: 16 / 9;
    background-size: cover; background-position: center;
    background-color: var(--bg-panel-lo);
}
.game-news-body { padding: .75rem .9rem 1rem; }
.game-news-meta {
    display: flex; gap: .5rem; align-items: baseline;
    font-family: var(--font-ui); font-size: .66rem;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-mute); margin-bottom: .35rem;
}
.game-news-cat { color: var(--crystal-blue); font-weight: 800; }
.game-news-titre {
    margin: 0 0 .35rem; font-family: var(--font-title);
    font-size: 1.02rem; line-height: 1.25; color: var(--text);
}
.game-news-chapo { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--text-soft); }

@media (max-width: 560px) {
    .game-news-grid { grid-template-columns: 1fr; }
}

/* Onglets d'un jeu ANNONCÉ mais pas encore sorti : l'ossature est montrée, les
   rubriques qui n'ouvriront qu'à la sortie sont grisées et non cliquables
   (décision du propriétaire, 10/09/2026). */
.tab-btn.is-vide {
    opacity: .38;
    cursor: not-allowed;
    pointer-events: none;
    font-style: italic;
}
.tab-btn.is-vide::after {
    content: " · à la sortie";
    font-style: normal;
    font-size: .82em;
    letter-spacing: .04em;
}

/* ============================================================================
 * COMPTES MEMBRES (11/09/2026)
 * Inscription, connexion, « Mon compte », et ce que les comptes changent dans
 * les commentaires. Tout est local : aucun courriel, aucune notification,
 * aucun service extérieur n'intervient dans ces écrans.
 * ========================================================================= */

/* ---- pages d'authentification ------------------------------------------- */
.auth-wrap { max-width: 520px; margin: 2.4rem auto 3.5rem; }
.auth-panel { text-align: center; }
.auth-ico { width: 48px; height: auto; margin-bottom: .7rem; opacity: .85; }
.auth-title { margin: 0 0 .4rem; font-size: 1.5rem; }
.auth-sub { color: var(--text-soft); font-size: .92rem; margin: 0 0 1.5rem; line-height: 1.55; }
.auth-form { text-align: left; }
.auth-form--large { max-width: 100%; }

.auth-msg {
    text-align: left; font-size: .88rem; line-height: 1.5;
    border-radius: var(--radius-s); padding: .6rem .85rem; margin: 0 0 1.1rem;
}
.auth-msg--err { background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.28); color: var(--danger); }
.auth-msg--ok  { background: rgba(40,140,90,.09); border: 1px solid rgba(40,140,90,.3);  color: #1f6b48; }

.champ { margin-bottom: 1.05rem; }
.champ label { display: block; margin-bottom: .32em; font-family: var(--font-ui); font-weight: 700; font-size: .86rem; color: var(--text-soft); }
.champ-opt { font-weight: 400; color: var(--text-mute); }
.champ input[type="text"], .champ input[type="email"], .champ input[type="password"],
.champ textarea, .champ select {
    display: block; width: 100%; box-sizing: border-box;
    font-family: var(--font-body); font-size: .95rem;
    padding: .62rem .8rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-m);
    background: var(--bg-panel-lo); color: var(--text);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.champ textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
    outline: none; background: var(--bg-panel);
    border-color: var(--crystal-blue); box-shadow: 0 0 0 3px rgba(192,57,43,.13);
}
.champ-aide { display: block; margin-top: .3rem; font-size: .78rem; color: var(--text-mute); line-height: 1.45; }

.champ-case { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 1.3rem; font-size: .82rem; color: var(--text-soft); line-height: 1.45; cursor: pointer; }
.champ-case input { margin-top: .18rem; flex: none; }

.auth-btn { width: 100%; }
.auth-liens { margin: 1.25rem 0 0; font-size: .88rem; color: var(--text-soft); }
.auth-note { margin: 1.35rem 0 0; font-size: .76rem; color: var(--text-mute); line-height: 1.5; }

/* ---- « Mon compte » ------------------------------------------------------ */
.compte-wrap { max-width: 780px; }
.compte-entete { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.compte-av {
    flex: none; width: 62px; height: 62px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-ui); font-weight: 800; font-size: 1.6rem; color: #fff;
    background: hsl(var(--av-h, 210) 42% 44%);
}
.compte-id { flex: 1 1 240px; min-width: 0; }
.compte-id h1 { margin: 0 0 .2rem; font-size: 1.45rem; }
.compte-meta { margin: 0; font-size: .84rem; color: var(--text-mute); }
.compte-role { color: var(--crystal-blue); font-weight: 700; }
.compte-bio { margin: .55rem 0 0; font-size: .9rem; color: var(--text-soft); line-height: 1.5; }
.compte-fav { margin: .35rem 0 0; font-size: .84rem; color: var(--text-soft); }
.compte-sortir { flex: none; }

.btn-ghost {
    background: transparent; color: var(--text-soft);
    border: 1px solid var(--border-strong);
}
.btn-ghost:hover { color: var(--crystal-blue); border-color: var(--crystal-blue); }

.compte-onglets { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.4rem 0 1rem; }
.compte-onglets a {
    font-family: var(--font-ui); font-size: .86rem; font-weight: 700; text-decoration: none;
    color: var(--text-soft); padding: .45rem .9rem;
    border: 1px solid var(--border); border-radius: var(--radius-s);
    background: var(--bg-panel-lo);
}
.compte-onglets a:hover { color: var(--crystal-blue); border-color: var(--border-strong); }
.compte-onglets a.is-active { color: #fff; background: var(--crystal-blue); border-color: var(--crystal-blue); }

.mes-coms { list-style: none; margin: .4rem 0 0; padding: 0; }
.mes-coms-item { padding: .75rem 0; border-top: 1px solid var(--border); }
.mes-coms-item:first-child { border-top: 0; }
.mes-coms-ou { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; font-size: .82rem; }
.mes-coms-ou a { font-family: var(--font-ui); font-weight: 700; }
.mes-coms-date { color: var(--text-mute); font-size: .76rem; }
.mes-coms-tag {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-mute); border: 1px solid var(--border); border-radius: 999px; padding: .05rem .45rem;
}
.mes-coms-txt { margin: .3rem 0 0; font-size: .9rem; color: var(--text-soft); line-height: 1.5; }

/* ---- ce que les comptes changent dans les commentaires ------------------- */
.cf-row--membre { align-items: center; justify-content: space-between; }
.cf-signe { font-size: .84rem; color: var(--text-soft); }
.cf-signe strong { color: var(--crystal-blue); }

.comment-membre {
    font-size: .62rem; text-transform: uppercase; letter-spacing: .07em;
    font-family: var(--font-ui); font-weight: 700;
    color: var(--crystal-blue);
    border: 1px solid rgba(192,57,43,.35); border-radius: 999px;
    padding: .06rem .4rem; margin-left: .1rem;
}

/* L'avis « tu as déjà commenté ici » : une note, pas une sanction. */
.disc-limite {
    font-size: .85rem; line-height: 1.55; color: var(--text-soft);
    background: var(--bg-panel-lo); border: 1px dashed var(--border-strong);
    border-radius: var(--radius-m); padding: .75rem .9rem; margin: 0 0 1rem;
}
.disc-invite {
    margin: .75rem 0 0; font-size: .8rem; color: var(--text-mute); line-height: 1.5;
}
.disc-invite a { font-weight: 700; }

@media (max-width: 520px) {
    .compte-entete { gap: .8rem; }
    .compte-av { width: 50px; height: 50px; font-size: 1.3rem; }
    .compte-sortir { width: 100%; }
    .cf-row--membre { flex-direction: column; align-items: stretch; gap: .5rem; }
    .cf-row--membre .cf-submit { width: 100%; }
}

/* ============================================================================
 * GALERIE D'AVATARS (11/09/2026)
 * Plus de mille visages tirés des seize jeux. Aucun téléversement n'est possible :
 * on choisit dans cette grille, et le site n'accepte que les clés du catalogue.
 * ========================================================================= */

.ava-intro { font-size: .9rem; color: var(--text-soft); line-height: 1.55; margin: 0 0 1.1rem; }

.ava-filtres {
    display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
    margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.ava-cherche { position: relative; flex: 1 1 220px; min-width: 0; }
.ava-cherche-ico { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); font-size: .82rem; opacity: .55; pointer-events: none; }
.ava-cherche input {
    width: 100%; box-sizing: border-box;
    font-family: var(--font-body); font-size: .9rem;
    padding: .5rem .7rem .5rem 2rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-m);
    background: var(--bg-panel-lo); color: var(--text);
}
.ava-cherche input:focus { outline: none; background: var(--bg-panel); border-color: var(--crystal-blue); box-shadow: 0 0 0 3px rgba(192,57,43,.13); }
.ava-filtres select {
    font-family: var(--font-body); font-size: .86rem;
    padding: .5rem .6rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-m);
    background: var(--bg-panel-lo); color: var(--text);
}
.ava-compte { font-size: .78rem; color: var(--text-mute); margin-left: auto; white-space: nowrap; }

/* La grille se remplit toute seule : autant de colonnes que la largeur en autorise. */
.ava-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: .55rem;
    max-height: 62vh; overflow-y: auto;
    padding: .3rem .4rem .6rem 0;
}

.ava-case {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .4rem .2rem .3rem;
    border: 1px solid transparent; border-radius: var(--radius-m);
    cursor: pointer; text-align: center;
    transition: border-color .12s, background .12s;
}
.ava-case[hidden] { display: none !important; }   /* le display:flex écrasait [hidden] */
.ava-case:hover { background: var(--bg-panel-lo); border-color: var(--border-strong); }
.ava-case img, .ava-aucun {
    width: 58px; height: 58px; border-radius: 50%;
    object-fit: cover; display: block;
    background: var(--bg-panel-lo);
    border: 2px solid transparent;
    transition: border-color .12s, transform .12s;
}
.ava-case:hover img { transform: scale(1.06); }
.ava-aucun {
    display: grid; place-items: center;
    font-family: var(--font-ui); font-weight: 800; font-size: 1.35rem; color: var(--text-mute);
    border: 2px dashed var(--border-strong);
}
.ava-nom {
    font-size: .64rem; line-height: 1.25; color: var(--text-mute);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    max-width: 76px;
}
/* Le bouton radio reste dans le flux pour le clavier et les lecteurs d'écran : on le rend
   invisible à l'œil, jamais display:none — qui l'exclurait de la tabulation. */
.ava-case input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ava-case input[type="radio"]:focus-visible + img,
.ava-case input[type="radio"]:focus-visible + .ava-aucun { outline: 3px solid var(--crystal-blue); outline-offset: 2px; }

.ava-case.is-choisi { background: rgba(192,57,43,.07); border-color: var(--crystal-blue); }
.ava-case.is-choisi img, .ava-case.is-choisi .ava-aucun { border-color: var(--crystal-blue); }
.ava-case.is-choisi .ava-nom { color: var(--crystal-blue); font-weight: 700; }

.ava-vide { text-align: center; color: var(--text-mute); font-size: .88rem; padding: 1.4rem 0 .4rem; }
.ava-valider { margin-top: 1.1rem; }

/* L'avatar là où il se montre : en-tête du compte, menu, commentaires. */
.compte-av--img { object-fit: cover; border: 2px solid var(--border-strong); background: var(--bg-panel-lo); }
.comment-av--img { object-fit: cover; }
.nav-account-ava {
    width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
    vertical-align: -.35em; margin-right: .1rem;
    background: var(--bg-panel-lo);
}

@media (max-width: 520px) {
    .ava-grille { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: .45rem; max-height: 56vh; }
    .ava-case img, .ava-aucun { width: 50px; height: 50px; }
    .ava-nom { font-size: .6rem; max-width: 64px; }
    .ava-compte { margin-left: 0; }
}

/* ============================================================================
 * FENÊTRE DE CONFIRMATION (11/09/2026)
 * Remplace confirm() et alert(), qui affichaient le nom d'hôte du serveur en
 * en-tête et n'avaient rien à voir avec le site. Écrite à la main : aucune
 * bibliothèque, rien de téléchargé, cohérent avec le reste des panneaux.
 * ========================================================================= */

.ff-modal { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; }
.ff-modal[hidden] { display: none !important; }   /* le display:grid écraserait [hidden] */

.ff-modal-voile {
    position: absolute; inset: 0;
    background: rgba(18, 17, 20, .55);
    backdrop-filter: blur(2px);
    animation: ff-modal-voile-in .16s ease-out;
}
@keyframes ff-modal-voile-in { from { opacity: 0; } to { opacity: 1; } }

.ff-modal-boite {
    position: relative;
    width: min(420px, calc(100vw - 2.4rem));
    box-sizing: border-box;
    padding: 1.5rem 1.6rem 1.25rem;
    background: var(--bg-panel);
    border: 1px solid var(--border-strong);
    border-top: 3px solid var(--crystal-blue);
    border-radius: var(--radius-m);
    box-shadow: 0 18px 50px rgba(18, 17, 20, .35);
    animation: ff-modal-in .18s cubic-bezier(.2, .9, .3, 1);
}
@keyframes ff-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.ff-modal-titre {
    margin: 0 0 .5rem;
    font-family: var(--font-title);
    font-size: 1.14rem; line-height: 1.3; color: var(--text);
}
.ff-modal-texte {
    margin: 0 0 1.3rem;
    font-size: .93rem; line-height: 1.55; color: var(--text-soft);
}

.ff-modal-actions { display: flex; gap: .55rem; justify-content: flex-end; flex-wrap: wrap; }
.ff-modal-btn {
    font-family: var(--font-ui); font-weight: 700; font-size: .86rem;
    padding: .52rem 1.15rem; cursor: pointer;
    border: 1px solid var(--border-strong); border-radius: var(--radius-s);
    background: var(--bg-panel-lo); color: var(--text-soft);
    transition: background .14s, color .14s, border-color .14s;
}
.ff-modal-btn[hidden] { display: none; }
.ff-modal-btn:hover { color: var(--text); border-color: var(--text-soft); }
.ff-modal-btn:focus-visible { outline: 3px solid var(--crystal-blue); outline-offset: 2px; }

.ff-modal-btn--oui {
    background: var(--crystal-blue); border-color: var(--crystal-blue); color: #fff;
}
.ff-modal-btn--oui:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #fff; }
/* Une action destructrice se signale, mais pas seulement par la couleur : le libellé du bouton
   dit ce qu'il fait (« Supprimer », et non « OK »). */
.ff-modal-btn--oui.is-danger { background: var(--danger); border-color: var(--danger); }

/* La page ne défile plus derrière la fenêtre. */
.ff-modal-ouvert, .ff-modal-ouvert body { overflow: hidden; }

@media (max-width: 420px) {
    .ff-modal-actions { flex-direction: column-reverse; }
    .ff-modal-btn { width: 100%; }
}

/* ============================================================================
 * « CE QUE J'AI POSTÉ » — mes propres commentaires en surbrillance (11/09/2026)
 * Demande du propriétaire : voir d'un coup d'œil ce qu'on a écrit sur la page.
 * Le repère ne tient pas à la SEULE couleur : la mention « toi » l'accompagne,
 * lisible aussi par qui ne distingue pas les teintes et par un lecteur d'écran.
 * ========================================================================= */
.comment.is-mien {
    position: relative;
    background: rgba(192, 57, 43, .045);
    border-left: 3px solid var(--crystal-blue);
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    padding-left: .75rem;
}
.comment.is-mien > .comment-main > .comment-head > .comment-name { color: var(--crystal-blue); }
.comment-mien {
    font-size: .62rem; text-transform: uppercase; letter-spacing: .07em;
    font-family: var(--font-ui); font-weight: 800;
    color: #fff; background: var(--crystal-blue);
    border-radius: 999px; padding: .1rem .45rem;
}

/* ============================================================================
 * ZONES DE CLIC DES ACTIONS D'UN COMMENTAIRE (11/09/2026)
 * Mesuré au navigateur : « Répondre » faisait 18 px de haut et « supprimer »
 * encore moins — l'un n'avait qu'un padding-top, l'autre aucun padding du tout.
 * Au doigt, sur téléphone, c'est trop petit (on vise 30 px au minimum).
 * On leur donne une vraie surface SANS changer leur allure de lien : la marge
 * négative compense le padding, si bien que le texte reste aligné exactement
 * où il était.
 * ========================================================================= */
.comment-reply {
    /* Hauteur EXPLICITE plutôt que dosée au remplissage : le texte fait 0,7 rem en capitales,
       sa boîte de ligne ne mesure que 11 px, et deux paddings ne suffisaient pas (26 px mesures
       au navigateur). inline-flex + min-height donnent la surface voulue a coup sur. */
    display: inline-flex; align-items: center;
    min-height: 32px;
    padding: .2rem .55rem;
    margin: .15rem 0 0 -.55rem;
    border-radius: var(--radius-s);
    transition: background .14s;
}
.comment-reply:hover { background: rgba(192, 57, 43, .07); }

.comment-del {
    display: inline-flex; align-items: center;
    min-height: 30px;
    padding: .2rem .5rem;
    margin-right: -.5rem;
    border-radius: var(--radius-s);
    transition: background .14s;
}
.comment-del:hover { background: rgba(192, 57, 43, .08); }

/* ============================================================================
 * PAGE PUBLIQUE D'UN MEMBRE (11/09/2026)
 * On y arrive en cliquant l'avatar ou le pseudo sous un commentaire.
 * ========================================================================= */
.comment-av-lien { flex: none; display: block; line-height: 0; border-radius: 50%; }
.comment-av-lien:focus-visible { outline: 3px solid var(--crystal-blue); outline-offset: 2px; }
.comment-name--lien { text-decoration: none; }
.comment-name--lien:hover { color: var(--crystal-blue); text-decoration: underline; }

.compte-boutons { display: flex; gap: .45rem; flex-wrap: wrap; flex: none; }

.membre-chiffres { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.membre-stats {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .9rem;
}
.membre-stats li { text-align: center; }
.membre-stat-n {
    display: block;
    font-family: var(--font-title); font-weight: 800; font-size: 1.5rem; line-height: 1.1;
    color: var(--crystal-blue);
}
.membre-stat-n--date { font-size: 1.02rem; letter-spacing: -.01em; }
.membre-stat-l {
    display: block; margin-top: .2rem;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute);
}
.membre-anciennete { margin: 1rem 0 0; font-size: .8rem; color: var(--text-mute); text-align: center; }
.membre-inactif { color: var(--danger); font-weight: 700; }

@media (max-width: 520px) {
    .compte-boutons { width: 100%; }
    .compte-boutons .btn { flex: 1; text-align: center; }
    .membre-stats { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
    .membre-stat-n { font-size: 1.3rem; }
}

/* ============================================================================
 * SIGNALER, BLOQUER, ET LA VIE DU MEMBRE (14/09/2026)
 * ========================================================================= */

/* ---- actions sous un commentaire ---------------------------------------- */
.comment-actions { display: inline-flex; gap: .15rem; align-items: center; margin-left: .35rem; }
.comment-signaler, .comment-bloquer {
    display: inline-flex; align-items: center; min-height: 32px;
    padding: .2rem .5rem;
    font-family: var(--font-ui); font-weight: 700; font-size: .66rem;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-mute); text-decoration: none;
    border-radius: var(--radius-s);
    transition: color .14s, background .14s;
}
.comment-signaler:hover, .comment-bloquer:hover { color: var(--danger); background: rgba(192, 57, 43, .07); }
.comment-signale {
    display: inline-flex; align-items: center; min-height: 32px; padding: .2rem .5rem;
    font-family: var(--font-ui); font-weight: 700; font-size: .62rem;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-mute); cursor: help;
}

/* Message d'un membre bloqué : présent pour tenir la branche, effacé à l'œil. */
.comment.is-masque { padding: .5rem .2rem; }
.comment-masque {
    margin: 0 0 .4rem;
    font-size: .8rem; font-style: italic; color: var(--text-mute);
    background: var(--bg-panel-lo); border-left: 3px solid var(--border-strong);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    padding: .5rem .7rem;
}
.comment-masque a { font-style: normal; font-weight: 700; }

/* ---- page « Signaler » --------------------------------------------------- */
.sig-extrait {
    margin: 0 0 1.2rem; padding: .7rem .9rem;
    font-size: .88rem; line-height: 1.55; color: var(--text-soft);
    background: var(--bg-panel-lo); border-left: 3px solid var(--border-strong);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    text-align: left;
}
.sig-regles {
    text-align: left; margin: 0 0 1.4rem; padding: .85rem 1rem;
    font-size: .84rem; line-height: 1.55; color: var(--text-soft);
    background: rgba(192, 57, 43, .045);
    border: 1px solid rgba(192, 57, 43, .2); border-radius: var(--radius-m);
}
.sig-regles p { margin: 0 0 .55rem; }
.sig-regles ul { margin: 0; padding-left: 1.1rem; }
.sig-regles li { margin-bottom: .4rem; }
.sig-regles li:last-child { margin-bottom: 0; }

.sig-motifs, .ff-sig-motifs { border: 0; padding: 0; margin: 0 0 1.1rem; }
.sig-motifs legend, .ff-sig-motifs legend {
    padding: 0; margin-bottom: .55rem;
    font-family: var(--font-ui); font-weight: 700; font-size: .86rem; color: var(--text-soft);
}
.sig-motif, .ff-sig-motif {
    display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem;
    align-items: start;
    padding: .5rem .6rem; margin-bottom: .3rem;
    border: 1px solid var(--border); border-radius: var(--radius-s);
    background: var(--bg-panel-lo);
    cursor: pointer;
    transition: border-color .14s, background .14s;
}
.sig-motif:hover, .ff-sig-motif:hover { border-color: var(--border-strong); background: var(--bg-panel); }
.sig-motif input, .ff-sig-motif input { grid-row: span 2; margin-top: .2rem; }
.sig-motif-t, .ff-sig-motif-t { font-family: var(--font-ui); font-weight: 700; font-size: .88rem; color: var(--text); }
.sig-motif-q, .ff-sig-motif-q { font-size: .78rem; line-height: 1.45; color: var(--text-mute); }
.sig-motif:has(input:checked), .ff-sig-motif:has(input:checked) {
    border-color: var(--crystal-blue); background: rgba(192, 57, 43, .06);
}
.sig-motif input:focus-visible, .ff-sig-motif input:focus-visible { outline: 3px solid var(--crystal-blue); outline-offset: 2px; }

/* ---- la fenêtre de signalement ------------------------------------------ */
.ff-modal--form .ff-modal-boite { width: min(560px, calc(100vw - 2.4rem)); max-height: 88vh; overflow-y: auto; }
.ff-sig-intro { text-align: left; font-size: .84rem; line-height: 1.55; color: var(--text-soft); margin-bottom: 1.1rem; }
.ff-sig-intro p { margin: 0 0 .6rem; }
.ff-sig-intro ul { margin: 0 0 .6rem; padding-left: 1.1rem; }
.ff-sig-intro li { margin-bottom: .35rem; }
.ff-sig-extrait {
    margin: .5rem 0 0; padding: .55rem .75rem;
    font-size: .82rem; font-style: italic; color: var(--text-soft);
    background: var(--bg-panel-lo); border-left: 3px solid var(--border-strong);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.ff-sig-form { text-align: left; }
.ff-sig-detail-l {
    display: block; margin-bottom: .3em;
    font-family: var(--font-ui); font-weight: 700; font-size: .84rem; color: var(--text-soft);
}
.ff-sig-detail-l span { font-weight: 400; color: var(--text-mute); }
.ff-sig-form textarea {
    display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 68px;
    font-family: var(--font-body); font-size: .92rem; line-height: 1.5;
    padding: .6rem .8rem; margin-bottom: .9rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-m);
    background: var(--bg-panel-lo); color: var(--text);
}
.ff-sig-form textarea:focus { outline: none; background: var(--bg-panel); border-color: var(--crystal-blue); box-shadow: 0 0 0 3px rgba(192,57,43,.13); }
.ff-sig-erreur {
    margin: 0 0 .9rem; padding: .5rem .7rem;
    font-size: .84rem; line-height: 1.5; color: var(--danger);
    background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.28);
    border-radius: var(--radius-s);
}
.ff-sig-erreur[hidden] { display: none; }

/* ---- « Mon compte » : membres bloqués ----------------------------------- */
.bloq-liste { list-style: none; margin: .4rem 0 0; padding: 0; }
.bloq-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem 0; border-top: 1px solid var(--border);
}
.bloq-item:first-child { border-top: 0; }
.bloq-av {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; background: var(--bg-panel-lo);
}
.bloq-av--txt {
    display: grid; place-items: center;
    font-family: var(--font-ui); font-weight: 800; color: var(--text-mute);
    border: 2px dashed var(--border-strong);
}
.bloq-qui { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.bloq-qui a { font-family: var(--font-ui); font-weight: 700; font-size: .92rem; }
.bloq-date { font-size: .74rem; color: var(--text-mute); }
.bloq-form { flex: none; }

/* ---- « Mon compte » : mes signalements ---------------------------------- */
.sig-liste { list-style: none; margin: .4rem 0 0; padding: 0; }
.sig-item {
    padding: .8rem .9rem; margin-bottom: .6rem;
    border: 1px solid var(--border); border-left-width: 3px;
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    background: var(--bg-panel-lo);
}
/* La couleur du liseré dit le statut d'un coup d'œil — mais le libellé écrit reste, lui, la
   source de vérité : un repère qui ne tient qu'à la couleur n'existe pas pour tout le monde. */
.sig-item--s0 { border-left-color: var(--text-mute); }
.sig-item--s1 { border-left-color: var(--crystal-blue); }
.sig-item--s2 { border-left-color: var(--border-strong); opacity: .75; }
.sig-item-tete { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .35rem; }
.sig-item-motif { font-family: var(--font-ui); font-weight: 800; font-size: .86rem; color: var(--text); }
.sig-item-statut {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute);
    border: 1px solid var(--border-strong); border-radius: 999px; padding: .05rem .5rem;
}
.sig-item--s1 .sig-item-statut { color: var(--crystal-blue); border-color: rgba(192,57,43,.35); }
.sig-item-date { font-size: .74rem; color: var(--text-mute); margin-left: auto; }
.sig-item-quoi { margin: 0; font-size: .86rem; color: var(--text-soft); }
.sig-item-extrait {
    margin: .45rem 0 0; padding: .45rem .7rem;
    font-size: .82rem; font-style: italic; color: var(--text-mute);
    background: var(--bg-panel); border-left: 2px solid var(--border-strong);
}
.sig-item-detail { margin: .45rem 0 0; font-size: .8rem; color: var(--text-mute); }

/* ---- le jeu de cœur, montré plutôt que dit ------------------------------ */
.compte-fav-carte {
    display: inline-flex; align-items: center; gap: .6rem;
    margin-top: .55rem; padding: .4rem .7rem .4rem .45rem;
    text-decoration: none;
    border: 1px solid var(--border-strong); border-radius: var(--radius-m);
    background: var(--bg-panel-lo);
    transition: border-color .14s, background .14s;
}
.compte-fav-carte:hover { border-color: var(--crystal-blue); background: var(--bg-panel); }
.compte-fav-carte img { display: block; border-radius: 2px; }
.compte-fav-txt { display: flex; flex-direction: column; gap: .05rem; }
.compte-fav-txt small {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-mute);
}
.compte-fav-txt strong { font-family: var(--font-ui); font-size: .9rem; color: var(--text); }
.compte-fav-carte:hover .compte-fav-txt strong { color: var(--crystal-blue); }

/* Un bouton qui a déjà servi : visible, mais sans promesse. */
.btn.is-inerte { opacity: .55; cursor: default; pointer-events: none; }

@media (max-width: 520px) {
    .comment-actions { margin-left: 0; }
    .bloq-item { flex-wrap: wrap; }
    .bloq-form { width: 100%; }
    .bloq-form .btn { width: 100%; }
    .sig-item-date { margin-left: 0; }
    .ff-modal--form .ff-modal-boite { max-height: 92vh; }
}

/* ============================================================================
 * LISIBILITÉ ET CONFORT TACTILE (14/09/2026)
 *
 * Demande du propriétaire : « que tout soit nickel aussi en responsive téléphone ».
 * Audit de 170 mesures — 34 pages × 5 largeurs (320, 360, 390, 414, 768 px), en
 * visiteur, en membre et en administrateur.
 *
 * Ce que l'audit a établi, et c'est la bonne nouvelle : la mise en page tient
 * partout. Aucun débordement du document, aucune image plus large que l'écran,
 * aucun tableau incontenu, à aucune des cinq largeurs. Restaient deux familles
 * de défauts, traitées ici.
 *
 * ── 1. UN PLANCHER DE TAILLE DE TEXTE ──────────────────────────────────────
 * Vingt-cinq endroits descendaient sous 11 px, jusqu'à 9,3 px. À bout de bras,
 * sur un téléphone, on ne lit plus. Plancher à 0,72 rem (11,5 px) PARTOUT — un
 * caractère de 9 px n'est pas plus lisible sur grand écran, il est seulement
 * plus facile à ignorer — puis 0,78 rem (12,5 px) sous 820 px, là où l'écran
 * est tenu à la main.
 * On ne remonte QUE ce qui était trop petit : les valeurs sont nommées une par
 * une, sans règle fourre-tout qui rapetisserait au passage ce qui allait bien.
 *
 * ── 2. DES CIBLES TACTILES DE 30 PX ────────────────────────────────────────
 * Le fil d'Ariane offrait 19 px de haut, le pseudo d'un commentaire 24, les
 * boutons d'administration 26. Un doigt rate ces cibles.
 * Ces règles sont limitées aux ÉCRANS TACTILES et aux écrans étroits
 * (`hover: none`, ou moins de 820 px) : à la souris, 19 px se visent très bien,
 * et grossir les liens sur un grand écran abîmerait la mise en page sans rendre
 * service à personne. Le confort tactile est une affaire de doigt, pas de
 * résolution.
 * ========================================================================= */

/* ---- 1. le plancher de lisibilité ------------------------------------------ */
/* 9,3 px — les plus petits du site */
.ctn-dir,
.ctn-count,
.st-jeu-jaq                                  { font-size: 0.72rem; }
/* 9,9 px */
.comment-membre,
.comment-mien,
.comment-signale                             { font-size: 0.72rem; letter-spacing: .05em; }
.ava-nom                                     { font-size: 0.72rem; }
/* 10,2 px */
.game-tile-cat,
.tag-chip,
.article-card-meta,
.ac-date                                     { font-size: 0.72rem; }
/* 10,6 px */
.comment-signaler,
.comment-bloquer,
.x-card-tag,
.cnm-sec,
.article-head-meta,
.compte-fav-txt small                        { font-size: 0.72rem; }
/* 10,7 à 10,9 px */
.ctn-toc-label,
.comment-del,
.mes-coms-tag,
.sig-item-statut,
.sp-path,
.art-status                                  { font-size: 0.72rem; }

/* Les balises <small> du contenu et des panneaux descendaient jusqu'à 9,3 px.
   `max()` prend la plus grande des deux valeurs : on relève le plancher sans
   jamais rapetisser un <small> qui était déjà confortable. */
main small,
.panel small                                 { font-size: max(0.72rem, 0.8em); }

@media (max-width: 820px) {
    /* Écran tenu à la main : on monte le plancher à 12,5 px. */
    .ctn-dir, .ctn-count, .st-jeu-jaq,
    .comment-membre, .comment-mien, .comment-signale, .ava-nom,
    .game-tile-cat, .tag-chip, .article-card-meta, .ac-date,
    .comment-signaler, .comment-bloquer, .x-card-tag, .cnm-sec,
    .article-head-meta, .compte-fav-txt small,
    .ctn-toc-label, .comment-del, .mes-coms-tag, .sig-item-statut,
    .sp-path, .art-status                    { font-size: 0.78rem; }
    main small, .panel small                 { font-size: max(0.78rem, 0.8em); }
}

/* ---- 2. le confort tactile, sur écran tactile ou étroit -------------------- */
@media (hover: none), (max-width: 820px) {

    /* Fil d'Ariane : 19 px de haut, la plus petite cible du site. Le remplissage
       vertical l'amène à 32 px, et la marge négative garde le texte aligné sur
       la colonne — sans quoi le fil se décalerait de trois pixels vers la droite. */
    .crumbs a {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: .1rem .3rem;
        margin-left: -.3rem;
        border-radius: var(--radius-s);
    }

    /* Le pseudo cliquable d'un commentaire : 24 px. C'est un vrai lien — il mène
       à la page publique du membre. */
    .comment-name--lien {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 .35rem;
        margin-left: -.35rem;
        border-radius: var(--radius-s);
    }

    /* Liens de bas de formulaire : « Créer un compte », « Mot de passe oublié ». */
    .auth-liens a {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 .4rem;
    }

    /* Étiquettes de tag : cliquables, donc dimensionnées pour un doigt. */
    .tag-chip {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 .6rem;
    }

    /* Les liens « où » de « Mes commentaires » et des fiches de membre. */
    .mes-coms-ou a,
    .compte-fav-carte {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
    }

    /* Boutons de l'administration : 26 px mesurés. Ces pages posent leur taille
       de texte et leur remplissage en style en ligne ; on n'ajoute qu'une hauteur
       minimale, qui s'impose sans rien déranger d'autre. */
    .admin-table .btn,
    .admin-actions .btn,
    .admin-actions button,
    .admin-table button.btn {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Segments de période du module de statistiques : 29 px, il manquait un rien. */
    .st-seg-i { min-height: 32px; }
}


/* ---- LISIBILITÉ, DEUXIÈME PASSE ------------------------------------------
 * L'audit relancé après la première passe a montré ce que celle-ci n'avait pas
 * pris. Trois causes, aucune surprenante :
 *   · des sélecteurs que je n'avais pas nommés (le fil d'Ariane lui-même) ;
 *   · des règles d'origine PLUS SPÉCIFIQUES que les miennes, qui l'emportaient
 *     malgré ma position en fin de fichier — la spécificité passe avant l'ordre ;
 *   · des boutons hors des conteneurs que j'avais visés.
 * --------------------------------------------------------------------------- */

/* Le fil d'Ariane : 10,2 px. J'avais réglé sa hauteur de cible, pas sa taille
   de texte — c'est pourtant la première ligne qu'on lit sur une page. */
.crumbs,
.crumbs a,
.crumbs span                                 { font-size: 0.75rem; }

/* Navigation de chapitre : les règles d'origine sont portées par `a.chap-nav-toc`,
   donc plus spécifiques que `.ctn-toc-label` seul. On monte au même niveau. */
.chap-nav .ctn-toc-label,
a.chap-nav-toc .ctn-toc-label                { font-size: 0.75rem; }
.chap-nav .ctn-count,
a.chap-nav-toc .ctn-count                    { font-size: 0.75rem; }
.chap-nav .ctn-dir,
a.chap-nav-toc .ctn-dir                      { font-size: 0.75rem; }

@media (max-width: 820px) {
    .crumbs, .crumbs a, .crumbs span         { font-size: 0.78rem; }
    .chap-nav .ctn-toc-label,
    a.chap-nav-toc .ctn-toc-label,
    .chap-nav .ctn-count,
    a.chap-nav-toc .ctn-count,
    .chap-nav .ctn-dir,
    a.chap-nav-toc .ctn-dir                  { font-size: 0.78rem; }
}

@media (hover: none), (max-width: 820px) {

    /* Bouton de zoom du sphérier : 27 px de large. Il manquait cinq pixels. */
    .sph-btn { min-width: 32px; min-height: 32px; }

    /* « Vider le journal » vit dans un simple <form> d'un panneau, hors des
       conteneurs `.admin-actions` et `.admin-table` que j'avais visés. */
    .panel form button.btn,
    .panel form .btn                         { min-height: 32px; }

    /* Liens du classement des pages, dans le tableau de bord. */
    .stat-pages-row a,
    .sp-label a                              { display: inline-flex; align-items: center; min-height: 30px; }

    /* Loupe d'une vignette de bestiaire : 30 px tout juste, on arrondit au-dessus. */
    .best-thumb-zoom                         { min-width: 32px; min-height: 32px; }
}

/* ============================================================================
 * LA LISTE DES LIEUX SOUS LA CARTE (14/09/2026)
 * Second chemin vers les mêmes lieux, pour qui navigue au doigt (à 360 px, 33
 * paires de repères se chevauchent — c'est la géographie, pas un défaut), pour
 * les lecteurs d'écran, et pour les moteurs de recherche, qui ne voyaient
 * jusqu'ici que des <button> sans lien.
 * ========================================================================= */

/* La phrase d'aide ne s'affiche que là où le besoin existe : au doigt. */
.map-aide-tactile { display: none; }
@media (hover: none), (max-width: 820px) {
    .map-aide-tactile {
        display: block;
        margin: 0 0 .8rem;
        padding: .6rem .8rem;
        font-size: .82rem; line-height: 1.5; color: var(--text-soft);
        background: var(--bg-panel-lo);
        border-left: 3px solid var(--crystal-blue);
        border-radius: 0 var(--radius-s) var(--radius-s) 0;
    }
    .map-aide-tactile a { font-weight: 700; }
}

.map-liste-d {
    margin: 1.1rem 0 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-m);
    background: var(--bg-panel-lo);
}
.map-liste-d > summary {
    padding: .7rem .9rem;
    font-family: var(--font-ui); font-weight: 700; font-size: .88rem;
    color: var(--text-soft); cursor: pointer;
    min-height: 32px;
    display: flex; align-items: center;
}
.map-liste-d > summary:hover { color: var(--crystal-blue); }
.map-liste-d[open] > summary { border-bottom: 1px solid var(--border); }

.map-liste { list-style: none; margin: 0; padding: .5rem .9rem .8rem; }
.map-liste-i {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .6rem;
    align-items: baseline;
    padding: .45rem 0;
    border-top: 1px solid var(--border);
}
.map-liste-i:first-child { border-top: 0; }
/* L'étiquette de type porte la couleur du repère correspondant sur la carte : le lien entre les
   deux se fait à l'œil, sans légende à consulter. */
.map-liste-t {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    padding: .1rem .45rem; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--border-strong); color: var(--text-mute);
}
.map-liste-i--temple    .map-liste-t { color: #7a5cc4; border-color: #7a5cc466; }
.map-liste-i--boss      .map-liste-t { color: var(--danger); border-color: rgba(192,57,43,.4); }
.map-liste-i--secret    .map-liste-t { color: #b8860b; border-color: #b8860b66; }
.map-liste-i--chimere   .map-liste-t { color: #1f7a5a; border-color: #1f7a5a66; }
.map-liste-i--superboss .map-liste-t { color: #8b1a1a; border-color: #8b1a1a66; }
.map-liste-i > a,
.map-liste-n { font-family: var(--font-ui); font-weight: 700; font-size: .9rem; }
.map-liste-d-txt {
    grid-column: 2; font-size: .8rem; line-height: 1.45; color: var(--text-mute);
}

@media (max-width: 520px) {
    .map-liste-i { grid-template-columns: 1fr; }
    .map-liste-t { justify-self: start; }
    .map-liste-d-txt { grid-column: 1; }
}

/* ---- LISIBILITÉ, TROISIÈME PASSE ----------------------------------------
 * Les derniers relevés de l'audit, dont trois que j'ai moi-même introduits en
 * ajoutant la liste des lieux : une correction se vérifie, elle ne se suppose
 * pas. Le quatrième — le sommaire d'onglet à 28 px — existait avant.
 * ------------------------------------------------------------------------- */

/* Mon étiquette de type dans la liste des lieux : 10,9 px. */
.map-liste-t                                 { font-size: 0.72rem; }
@media (max-width: 820px) { .map-liste-t     { font-size: 0.78rem; } }

@media (hover: none), (max-width: 820px) {
    /* Les lieux de la liste sont des liens : ils se visent au doigt. */
    .map-liste-i > a {
        display: inline-flex; align-items: center; min-height: 30px;
    }

    /* Les repères de la carte passaient à 24 px sous 768 px — plus petits que la
       règle générale, alors que c'est là qu'on les touche du doigt. */
    .map-marker { min-width: 30px; min-height: 30px; }

    /* Sommaire d'un onglet (« Mini-jeux », « Secrets »…) : 28 px, il manquait deux
       pixels. Ces liens sont le sommaire de la page, on les utilise beaucoup. */
    .tab-sommaire-lien {
        display: flex; align-items: center; min-height: 32px;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   COMMENTER EXIGE UN COMPTE (14/09/2026)
   Le message qui remplace le formulaire pour un visiteur.

   Première version écrite : un bloc à moi, cadre blanc sur fond clair et gros
   bouton plein. Le propriétaire l'a trouvé laid, et il avait raison — il jurait
   avec le reste, d'autant que la couleur d'accent change d'un jeu à l'autre.
   Il porte donc maintenant la classe `.callout` DU SITE, qui fournit déjà le
   fond teinté, le filet de 3 px et le losange en marge. Ne restent ici que les
   deux réglages propres à ce message.
   ══════════════════════════════════════════════════════════════════════════ */
/* La teinte et le filet suivent l'accent DU JEU affiché (`--ff-c1`), au lieu du bleu pâle fixe
   de `.callout.tip` : sur une fiche à l'accent olive, un fond bleu jure immédiatement. Repli sur
   `--crystal-blue` si un jeu ne définit pas sa couleur. */
.disc-connexion {
    margin-top: 1.1rem;
    background: color-mix(in srgb, var(--ff-c1, var(--crystal-blue)) 7%, transparent);
    border-left-color: var(--ff-c1, var(--crystal-blue));
}
.disc-connexion .callout-title,
.disc-connexion p a,
.disc-connexion strong { color: var(--ff-c1, var(--crystal-blue)); }
.disc-connexion::before { color: var(--ff-c1, var(--crystal-blue)); }
.disc-connexion p { margin: 0; }
/* La note secondaire : plus petite, mais PAS en `--text-mute`, qui donnait un
   gris délavé illisible sur fond clair. On garde la couleur du texte à 80 %. */
.disc-connexion-note {
    margin-top: .55rem !important;
    font-size: .78rem;
    line-height: 1.55;
    opacity: .8;
}
/* Confort tactile : au doigt, un lien dans une phrase doit rester visable.
   30 px de haut, et uniquement sur écran tactile ou étroit — à la souris, la
   hauteur de ligne suffit et grossir les liens abîmerait le paragraphe. */
@media (hover: none), (max-width: 820px) {
    .disc-connexion p a {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
    }
}


/* === REMPLIR LE CADRE — 15/09/2026 ==================================================
   Le propriétaire : « les images ne prennent pas toute la longueur du cadre parent […] garder la
   même taille de hauteur mais étirer sur la largeur pour prendre tout le cadre et donc tronquer le
   haut et le bas de la photo vu qu'on fait une sorte de zoom […] appliquer partout ».

   ⚑ CE BLOC LÈVE VOLONTAIREMENT LE GARDE « Jamais d'agrandissement » DU 03/09/2026 (plus haut dans
     cette feuille, `max-width: max-content`). Ce garde existait pour une bonne raison — 63 fichiers
     étaient étirés jusqu'à ×3,77 et en paraissaient flous. Le recadrage réduit le facteur nécessaire
     (on agrandit jusqu'à couvrir, pas jusqu'à contenir), mais il ne l'annule pas : les captures
     nativement petites seront plus douces. Compromis assumé sur demande explicite.

   ⚑ Il doit rester APRÈS la règle du 03/09 dans le fichier : c'est l'ordre de source qui tranche
     entre deux sélecteurs de même spécificité. Ne pas le remonter.

   Les CARTES en sont exclues : `map-route-mihen.jpg` fait 1235×3200 ; la rogner supprimerait
   l'information que le lecteur vient y chercher. Ce n'est pas un zoom, c'est une amputation. */
.chapter-img img,
.chapter-pair img,
.chapter-gallery img {
    max-width: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
}
/* ⚑ `.boss-img` EXCLU À DESSEIN. Ce ne sont pas des captures de scène mais des portraits de
   créatures, souvent minuscules : `mob-g-shadow-knight.png` fait 99×127, `boss-materia.jpg`
   113×134. Les étirer sur 800 px en rognant haut et bas ne donnerait pas un zoom mais un cadrage
   sur le torse du monstre. Ils gardent leur taille naturelle, centrée. */
.boss-img img { width: auto; max-width: 100%; height: auto; max-height: 280px; object-fit: contain; }
/* Les cartes gardent leur intégralité, dans les deux blocs qui les portent. */
.chapter-img.is-map img,
.boss-map img,
.albhed-map img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: none;
    object-fit: contain;
}


/* === PORTRAITS ENTIERS — 15/09/2026 ================================================
   `outils/rognage-cover.php` a mesuré ce qu'il RESTE d'une image à l'écran : **389 captures ne
   laissaient voir moins de 35 % de leur contenu**, 942 autres entre 35 et 55 %. Les pires sont des
   portraits de personnages écrasés dans un cadre horizontal — `ff13-2-maqui.jpg` 332×1157 dans une
   paire de 392×200, soit 15 % visible : une bande de torse, tête coupée.

   ⚑ CE BLOC NE REVIENT PAS SUR LA DEMANDE D'ÉTIREMENT. Le propriétaire voulait « étirer sur la
     largeur pour prendre tout le cadre et donc tronquer le haut et le bas » — pour des captures en
     PAYSAGE qui laissaient du vide. Sur un portrait 1:3,5, le même recadrage supprime 85 % de
     l'image. On rogne donc ce qui est large, on préserve ce qui est haut : `is-portrait` est posée
     par `ff_img_kind()` quand la hauteur dépasse 1,2 fois la largeur.

   Et le cadre RESTE REMPLI : une copie floutée de l'image sert de fond (`--illus-fond`), idiome
   déjà employé par `ff_section_banner()` pour les bandeaux trop petits. Pas de bande vide. */
.chapter-img.is-portrait,
.chapter-pair figure.is-portrait,
.chapter-gallery figure.is-portrait {
    position: relative;
    isolation: isolate;
}
.chapter-img.is-portrait::before,
.chapter-pair figure.is-portrait::before,
.chapter-gallery figure.is-portrait::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--illus-fond);
    background-size: cover;
    background-position: center center;
    filter: blur(18px) brightness(.5) saturate(.7);
    transform: scale(1.12);   /* le flou révèle les bords : on déborde pour les masquer */
    z-index: 0;
}
.chapter-img.is-portrait img,
.chapter-pair figure.is-portrait img,
.chapter-gallery figure.is-portrait img {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
}
/* La légende doit rester au-dessus du fond flouté. */
.chapter-img.is-portrait figcaption,
.chapter-pair figure.is-portrait figcaption,
.chapter-gallery figure.is-portrait figcaption { position: relative; z-index: 2; }


/* === LE TABLEAU DE BORD DANS LA BARRE — 15/09/2026 ==================================
   Demande du propriétaire : « il me faut un menu "Dashboard" en haut en surbrillance ou dans une
   couleur différente pour voir bien le menu ». Il ne s'affiche que pour une session admin
   (condition dans `includes/nav.php`), et il doit se détacher franchement des autres entrées :
   fond plein en rouge cristal, texte clair, petite icône. */
.nav-dashboard {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .32em .78em;
    border-radius: var(--radius-m);
    background: var(--crystal-red, #d8362b);
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .01em;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 1px 6px rgba(216,54,43,.35);
    transition: filter .15s, transform .15s;
}
.nav-dashboard:hover,
.nav-dashboard:focus-visible {
    filter: brightness(1.12);
    transform: translateY(-1px);
    color: #fff !important;
}
/* Sur la page d'administration elle-même, on marque la position courante. */
.nav-dashboard.active {
    outline: 2px solid rgba(255,255,255,.55);
    outline-offset: 1px;
}
.nav-dashboard-ico { font-size: 1.05em; line-height: 1; }
/* Sur petit écran la barre est déjà serrée : on garde l'icône, on abrège le mot. */
@media (max-width: 720px) {
    .nav-dashboard { padding: .3em .55em; }
}


/* ============================================================
   ATTAQUES SUR TELEPHONE — UNE LIGNE PAR ATTAQUE (16/09/2026)
   ------------------------------------------------------------
   Le proprietaire, capture d'ecran a l'appui : « en version telephone je trouve moche les attaques
   connues d'un boss […] on perd de la place car ca prend 1 ligne pour un attribut ».

   MESURE (Chromium, 390 px, boss Ecorche de FF VIII, six attaques) : 1 203 px de haut, dont douze
   lignes pour deux informations — `puissance` valait « - » six fois, `cibles` valait « 1 » six fois.

   Le PHP retire desormais les colonnes de remplissage et resume les colonnes constantes. Ici on
   s'occupe de la FORME : le nom garde sa ligne (c'est le titre de l'attaque), les attributs courts
   se rangent cote a cote sur la ligne suivante, la note prend toute la largeur parce qu'elle est
   la seule a etre longue.

   ⚑ Ces regles sont en FIN DE FEUILLE a dessein : le bloc « Responsive Tables Fix v0.39.1 » plus
     haut redeclare `.boss-table tbody td` avec `display:flex` et `min-width:90px` sur l'etiquette.
     Sans cette position, chaque attribut reprendrait une ligne entiere.
   ============================================================ */
@media (max-width: 540px) {
    .boss-attacks tbody tr {
        display: flex !important;
        flex-wrap: wrap;
        align-items: baseline;
        padding: .1rem .15rem .35rem !important;
    }

    .boss-attacks tbody td {
        display: inline-flex !important;
        justify-content: flex-start !important;
        width: auto !important;
        min-height: 0 !important;
        border-bottom: 0 !important;
        padding: .2rem .45rem !important;
        gap: .3rem;
    }

    /* l'etiquette redevient une petite mention accolee a sa valeur, et non une colonne de 90 px */
    .boss-attacks tbody td::before {
        min-width: 0 !important;
        margin-right: 0 !important;
        font-size: .62rem;
        letter-spacing: .06em;
        opacity: .8;
    }

    /* le nom : titre de la ligne, sans etiquette (« NOM » n'apprend rien).
       Il PARTAGE sa ligne avec les attributs courts : « Attaquer » et « Physique » tiennent
       ensemble dans 390 px, et leur donner deux lignes etait le gaspillage signale. */
    .boss-attacks tbody td.atk-nom {
        flex: 0 1 auto;
        padding: .4rem .3rem .4rem .5rem !important;
        border-bottom: 0 !important;
    }
    .boss-attacks tbody td.atk-nom::before { display: none !important; }
    .boss-attacks tbody td.atk-nom strong {
        display: inline !important;
        margin: 0 !important;
        font-size: .95rem;
    }

    /* les attributs courts : cote a cote */
    .boss-attacks tbody td.atk-type,
    .boss-attacks tbody td.atk-cibles,
    .boss-attacks tbody td.atk-puiss { flex: 0 1 auto; }

    /* la note : seule a pouvoir etre longue, donc seule a prendre la largeur */
    .boss-attacks tbody td.atk-note {
        flex: 1 1 100%;
        color: var(--text-soft);
        line-height: 1.45;
        border-top: 1px solid rgba(216, 54, 43, .12) !important;
        margin-top: .2rem;
        padding-top: .35rem !important;
    }

    /* une ligne qui n'affiche qu'un tiret est une ligne perdue */
    .boss-attacks tbody td.atk-vide { display: none !important; }
}

/* Ce qui vaut pour TOUTES les attaques, dit une fois au lieu d'etre repete a chaque ligne. */
.boss-attacks-commun {
    margin: -.35rem 0 .9rem;
    font-size: .86rem;
    color: var(--text-soft);
    line-height: 1.5;
}
.boss-attacks-commun .atk-commun-cle {
    font-family: var(--font-title);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gold-soft);
}

/* Une grille integralement en tirets, dite en une phrase plutot qu'en neuf lignes vides.
   16/09/2026 — l'absence de donnee est une information ; une colonne de tirets ne l'est pas. */
.boss-grid-vide {
    margin: .2rem 0 .9rem;
    padding: .5rem .7rem;
    font-size: .85rem;
    font-style: italic;
    color: var(--text-soft);
    background: var(--bg-panel-lo);
    border-left: 2px solid rgba(216, 54, 43, .35);
    border-radius: var(--radius-s);
    line-height: 1.5;
}

/* Une grille d'UNE SEULE case prend toute la largeur au lieu d'en laisser une vide a cote.
   16/09/2026 — vu sur la fiche « Agent de securite » de Rebirth : la grille des alterations ne
   contenait qu'« Immunites connues / Non documentees » et la moitie droite restait grise.
   La grille est en `repeat(auto-fill, minmax(150px, 1fr))`, donc deux colonnes des 310 px :
   une case seule ne remplissait que la premiere. */
.boss-grid .bg-cell:only-child { grid-column: 1 / -1; }

/* Une cellule de grille reduite a un tiret disparait UNE FOIS LA GRILLE EMPILEE (16/09/2026).
   Le point de rupture est 860 px, celui ou `.x-row` passe a une colonne : au-dela, la cellule sert
   a aligner les colonnes et doit rester. La classe est posee par `ffMarquerCellulesVides()`. */
@media (max-width: 860px) {
    .x-table .x-row:not(.x-row--head) > .x-vide { display: none !important; }
}

/* Une grille dont toutes les cases portent la meme valeur, dite en une phrase (16/09/2026).
   Elle NOMME les cles, donc rien n'est perdu : « Normal sur les 8 elements : Feu, Glace… ».
   Les classes bg-weak / bg-absorb / bg-immune peuvent s'y ajouter — une creature entierement
   « Absorbe » est un fait de combat majeur, et il doit garder sa couleur. */
.boss-grid-constante {
    margin: .2rem 0 .9rem;
    padding: .5rem .7rem;
    font-size: .88rem;
    color: var(--text-soft);
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    line-height: 1.5;
}
.boss-grid-constante strong { color: var(--gold); }
.boss-grid-constante.bg-weak,
.boss-grid-constante.bg-absorb,
.boss-grid-constante.bg-immune { color: #fff; }
.boss-grid-constante.bg-weak strong,
.boss-grid-constante.bg-absorb strong,
.boss-grid-constante.bg-immune strong { color: #fff; }

/* ============================================================
   EXTRAIT VISIBLE DANS LES FICHES FERMÉES (16/09/2026)
   ------------------------------------------------------------
   Choix du propriétaire parmi trois options : « extrait visible de 2 lignes ».
   Origine : son « c'est assez maigre comme contenu non ? » sur l'onglet des vêtisphères de FF X-2.
   Mesure : cet onglet contenait 52 146 caractères et n'en montrait que 2 156 — 4 %.

   ⚑ NE CIBLE QUE `.bestiary-cell`, JAMAIS `details.boss-card`. Le site a deux mécanismes de
     repliement, et sur les pages de chapitre une fiche de boss FERMÉE mesure déjà 1 901 px : son
     contenu est visible. Une première version, plus large, le ramenait à 51 px — elle aurait CACHÉ
     du contenu aujourd'hui lisible. Mesuré avant d'écrire, pas après.

   ⚑ ET ELLE NE MONTRE QUE `.boss-lead`. Ma première tentative révélait tout `.best-detail` clampé
     en hauteur : le remplissage du conteneur occupait les 3 em, et la cellule grandissait de 189 à
     236 px EN N'AFFICHANT RIEN — une boîte vide avec un filet. Retirée dans la minute, puis refaite
     après avoir cherché où vivait réellement la prose.

   ⚑ 28 % DES CELLULES N'ONT PAS DE PROSE (3 418 sur 4 761 en ont une). Le dernier sélecteur,
     `:not(:has(.boss-lead))`, leur rend leur hauteur d'origine : sans lui, on leur ajouterait un
     cadre vide, ce qui serait une régression pour 1 343 cellules.

   `pointer-events: none` : l'extrait ne doit pas intercepter le clic qui ouvre la fiche.
   ============================================================ */
.bestiary-cell:not(.open) .best-detail {
    display: block !important;
    max-height: 3.1em;
    overflow: hidden;
    margin: .3rem 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    pointer-events: none;
}
.bestiary-cell:not(.open) .best-detail details.boss-card,
.bestiary-cell:not(.open) .best-detail .boss-body {
    display: block !important;
    content-visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    max-height: none !important;
}
.bestiary-cell:not(.open) .best-detail summary,
.bestiary-cell:not(.open) .best-detail .boss-body > *:not(.boss-lead) {
    display: none !important;
}
.bestiary-cell:not(.open) .best-detail .boss-lead {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--text-soft);
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.bestiary-cell:not(.open) .best-detail .boss-lead * {
    font-size: inherit !important;
    margin: 0 !important;
}
/* aucune prose : la cellule doit rester EXACTEMENT comme avant */
.bestiary-cell:not(.open) .best-detail:not(:has(.boss-lead)) { display: none !important; }

/* ============================================================
   LA BARRE D'ONGLETS SAUTE DE 2 px À 58 px (16/09/2026)
   ------------------------------------------------------------
   Vraie cause du décalage résiduel au chargement, et ce ne sont PAS les images : la feuille leur
   fixe déjà une hauteur presque partout. `.tabs` a `min-height: 0` et n'a qu'un enfant au premier
   rendu ; le JavaScript ajoute le menu de débordement vers 2 s et la barre passe à 58,4 px, en
   poussant tout le contenu de 56 px vers le bas.

   Mesuré à 390 px sur cinq jeux : hauteur stabilisée **58,4 px** partout. ff10 et ff13-2 partent
   de 2 px — c'est ce saut que la `min-height` supprime. ff7, ff8 et ff16 partent de 147 px (la
   barre passe d'abord sur plusieurs lignes) : la `min-height` ne les contraint pas, et régler ce
   second cas demanderait de reproduire en CSS le comportement du JavaScript avant qu'il ne tourne.
   ============================================================ */
@media (max-width: 860px) {
    .tabs { min-height: 58px; }
}

/* ============================================================
   GARDE-FOU DES IMAGES SANS HAUTEUR (16/09/2026)
   ------------------------------------------------------------
   Ces trois sélecteurs déclarent une largeur SANS hauteur. Poser des attributs `width`/`height`
   sur leurs images les déforme — mesuré sur les pages de chapitre : 8 images mesurables sur 8,
   `balthier.jpg` passant de 84×165 à 84×1 587. Avec `height: auto`, 0 sur 8.

   ⚑ PRÉALABLE, pas correction : tant qu'aucune dimension n'est posée sur ces images, cette règle
     ne change rien à l'écran (leur hauteur est déjà implicitement `auto`). Elle existe pour que
     l'ajout des dimensions soit sans danger. Ne pas la retirer sans retirer aussi ces dimensions.
   ============================================================ */
.callout .callout-illus img,
.game-hero-logo img,
.chapter-gamenav-logo img { height: auto; }

/* ============================================================
   LA BARRE D'ONGLETS, SECOND SAUT (16/09/2026)
   ------------------------------------------------------------
   Mesuré à 390 px : `.tabs` part de 147 px sur ff7, ff8 et ff16 — la barre s'étale d'abord sur
   plusieurs lignes, puis le JavaScript la replie en défilement horizontal vers 2 s. On applique
   dès le CSS ce que le JavaScript finit par imposer, pour qu'il n'y ait rien à replier.
   La `min-height: 58px` plus haut couvre l'autre moitié : les jeux qui partaient de 2 px.
   ============================================================ */
@media (max-width: 860px) {
    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tabs > * { flex: 0 0 auto; }
}

/* ============================================================
   LE FIL DE COMMENTAIRES POUSSAIT LA PAGE DE 685 px (16/09/2026)
   ------------------------------------------------------------
   `div#game-comments-host` est vide côté serveur et rempli par le JavaScript environ
   **12 secondes** après le chargement : il passait de 0 à 215 px en poussant tout le contenu de
   685 px vers le bas, pendant que le lecteur lisait. CLS mesuré **0,21194** — le double du seuil
   de gêne — identique sur ff7 et crisis-core, donc structurel.

   ⚑ J'avais écarté ce décalage DEUX FOIS comme artefact de mesure, parce que mes contrôles
     s'arrêtaient à 2,6 s après le chargement. Il fallait lire les `sources` de l'entrée
     `layout-shift` pour le nommer. Leçon : un contrôle qui s'arrête trop tôt ne dit pas « rien
     ne bouge », il dit « je n'ai pas regardé assez longtemps ».

   Hauteurs mesurées sur 6 pages × 2 largeurs : fil VIDE 478 px en mobile, 406 px en grand écran ;
   jusqu'à 1 221 px avec cinq commentaires. On réserve donc le PLANCHER : le cas « aucun
   commentaire » remplit la place exactement, aucun blanc n'est ajouté, et les 478 premiers pixels
   du saut disparaissent. Réserver la moyenne laisserait un vide sous chaque page sans commentaire.

   Reste un décalage résiduel quand le fil est garni : le supprimer demanderait de rendre sa
   coquille côté serveur. C'est une modification PHP, pas un réglage de feuille de style.
   ============================================================ */
#game-comments-host { min-height: 406px; }
@media (max-width: 860px) {
    #game-comments-host { min-height: 478px; }
}

/* ============================================================
   RÉAGIR DEMANDE UN COMPTE (16/09/2026)
   ------------------------------------------------------------
   Demande du propriétaire : « il ne faut pas que quelqu'un de non connecté puisse choisir un
   emote […] s'il clique ça l'invite a se connecter ou s'inscrire ».

   ⚑ Le refus qui compte vit côté serveur (`comments.php`, action `react`) : avant le 16/09/2026,
     l'URL suffisait pour gonfler les compteurs sans être connecté. Ce qui est ici n'est qu'une
     explication donnée au visiteur.

   Les emotes restent VISIBLES et leurs compteurs lisibles — c'est de l'information. Elles sont
   seulement signalées comme indisponibles, et le clic fait apparaître l'invitation.
   ============================================================ */
.reactions[data-connecte="0"] .reaction {
    opacity: .58;
    cursor: pointer;                 /* pas `not-allowed` : le clic SERT, il explique */
}
.reactions[data-connecte="0"] .reaction:hover,
.reactions[data-connecte="0"] .reaction:focus-visible {
    opacity: .85;
    border-color: var(--crystal-blue, #4a90d9);
}
.reactions-invite {
    margin: .45rem 0 .9rem;
    padding: .55rem .75rem;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--text-soft);
    background: var(--bg-panel-lo);
    border-left: 2px solid var(--crystal-red, #d8362b);
    border-radius: var(--radius-s);
}
.reactions-invite a {
    color: var(--crystal-blue, #4a90d9);
    font-weight: 600;
    text-decoration: underline;
}
/* une apparition franche, sans animation : le visiteur vient de cliquer, il regarde déjà ici */
.reactions-invite.is-on { outline: 1px solid rgba(216, 54, 43, .25); }