/* ============================================
   SITE PLUS — styles des améliorations fonctionnelles, dans l'ANCIENNE DA du site
   (fond sombre, verre, accents rouge #e6053e, Bebas Neue / Inter), clair et sombre.
   Uniquement les variables existantes de base.css : aucune nouvelle couleur de marque.
   ============================================ */

/* ---- carte compte joueur (en haut à droite) + compteur réel de boosters ---- */
.plus-compte {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--bg-glass);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.plus-compte:hover { border-color: var(--red-primary); color: var(--red-bright); }
.plus-compte-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--red-primary);
    color: #fff;
    font: 700 0.72rem/1 var(--font-body);
    box-shadow: 0 0 0 2px var(--bg-primary);
}
.plus-compte-count[hidden] { display: none; }
/* < 768 px : responsive.css ne garde que Candidater + connexion ; la carte compte reste visible */
@media (max-width: 767px) {
    html:root .navbar-buttons > .plus-compte:not(#plus-compte-x) { display: inline-flex; }
}

/* ---- barre collante Candidater/Discord retirée (retour Val 30/10 : « enlever la nav bar du bas ») ---- */
html .sticky-cta-bar { display: none; }
html body.has-sticky-cta { padding-bottom: 0; }

/* ---- menu plein écran : aussi sur ordinateur (bouton menu à droite de la navbar) ---- */
@media (min-width: 1024px) {
    .navbar-pill .hamburger { display: flex; }
    .navbar { max-width: 1200px; }
    /* place pour la carte compte + le bouton menu : Lancement et sons restent dans le menu plein écran */
    .navbar-buttons > .navbar-btn-lancement,
    .navbar-buttons > .navbar-sound-toggle { display: none; }
}
/* 1024-1279 px : « Plus » et le thème passent dans le menu plein écran, connexion en icône (comme en mobile) */
@media (min-width: 1024px) and (max-width: 1279px) {
    #navdd-plus, .navbar-buttons > .navbar-theme-toggle { display: none; }
    #navbar-auth .navbar-btn-discord-login { font-size: 0; padding: 0; width: 40px; height: 40px; border-radius: 50%; justify-content: center; }
    #navbar-auth .navbar-btn-discord-login i { font-size: 1.1rem; margin: 0; }
    #navbar-auth .navbar-account-name, #navbar-auth .navbar-account-chevron { display: none; }
}
.plus-menu-title {
    margin: var(--space-md) 0 var(--space-xs);
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red-bright);
}
.plus-factions .mobile-menu-faction { height: 104px; }
.plus-factions .mobile-menu-faction:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }

@media (min-width: 1024px) {
    .mobile-menu .mobile-menu-scroll {
        max-width: 1100px;
        margin: 0 auto;
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
    }
    .plus-factions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
    .plus-factions .mobile-menu-faction { height: 150px; }
    /* groupes dépliés en colonnes : tout le site visible d'un coup d'œil */
    .mobile-menu .mobile-group-panel { max-height: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mobile-menu .mobile-group-chevron { display: none; }
    .mobile-menu .mobile-menu-cta { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
    .mobile-menu .mobile-menu-cta .btn { width: auto; }
}

/* ============================================
   /PROJET — carte par époques (#epoques, emplacement data-map3d-slot de la future carte 3D)
   Repère image : 1288 x 1576, marge 44 px autour de la carte 1200 x 1488
   ============================================ */
.plus-epoques { scroll-margin-top: calc(var(--navbar-height) + 24px); }
.ep-ctrl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md) var(--space-xl);
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}
.ep-narr { min-height: 44px; }

.ep-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-xl); align-items: start; }
.ep-stage { position: relative; width: 100%; max-width: 640px; margin-inline: auto; aspect-ratio: 1288 / 1576; }
.ep-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ep-inner { position: absolute; left: 3.416%; top: 2.792%; width: 93.17%; height: 94.41%; }
.ep-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ep-zone { fill: rgba(255, 255, 255, .16); stroke: #fff; stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; pointer-events: auto; }
.ep-zone.is-mystery { fill: rgba(157, 107, 255, .5); stroke: none; filter: url(#ep-blur); }
.ep-line { fill: none; stroke: var(--ep-c, #fff); stroke-width: 4; stroke-dasharray: 10 8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); pointer-events: auto; animation: ep-dash 1.6s linear infinite; }
.ep-line--train { stroke-dasharray: 3 7; stroke-width: 6; }
@keyframes ep-dash { to { stroke-dashoffset: -36; } }
.ep-pins { position: absolute; inset: 0; }
.ep-pin { position: absolute; width: 44px; height: 44px; margin: -44px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 100%; animation: ep-pop .45s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--ep-d, 0ms); }
.ep-pin-dot { position: absolute; left: 50%; top: 4px; display: block; width: 26px; height: 26px; margin-left: -13px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--ep-c, #fff); border: 3px solid #050507; box-shadow: 0 3px 6px rgba(0, 0, 0, .45); }
.ep-pin.is-mystery .ep-pin-dot { filter: blur(1.3px); }
.ep-pin:hover .ep-pin-dot, .ep-pin:focus-visible .ep-pin-dot { box-shadow: 0 0 0 4px var(--red-primary), 0 3px 6px rgba(0, 0, 0, .5); }
.ep-pin:focus-visible { outline: none; }
.ep-pin.is-narr { z-index: 2; animation: ep-narr 1.1s ease-in-out 3; }
@keyframes ep-pop { from { opacity: 0; transform: translateY(-14px) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ep-narr { 0%, 100% { scale: 1; } 50% { scale: 1.6; } }

.ep-side { display: grid; gap: var(--space-lg); }
.ep-legend, .ep-fiche { padding: var(--space-lg); }
.ep-legend h3, .ep-fiche h4 { margin: 0 0 var(--space-sm); font-size: 1.6rem; }
.ep-group { margin-top: var(--space-md); }
.ep-group h4 { margin: 0 0 var(--space-xs); font-size: 1rem; letter-spacing: 0.08em; color: var(--red-bright); }
.ep-countries { margin: 0 0 var(--space-sm); padding-left: 1.1em; color: var(--text-secondary); font-size: .95rem; list-style: disc; }
.ep-tog { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 44px; padding: 4px 8px; background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; text-align: left; color: var(--text-secondary); font: inherit; }
.ep-tog:hover { background: var(--bg-glass-hover); color: var(--text-primary); }
.ep-tog[aria-pressed="false"] { opacity: .45; }
.ep-tog[aria-pressed="false"] span:last-child { text-decoration: line-through; }
.ep-sw { flex: 0 0 auto; width: 30px; height: 16px; display: inline-block; }
.ep-sw--pin { width: 18px; height: 18px; margin: 0 6px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--ep-c); border: 3px solid #050507; }
.ep-sw--line { height: 0; border-top: 5px dashed var(--ep-c); filter: drop-shadow(0 0 1px #000); }
.ep-sw--zone { background: var(--red-subtle); border: 2px dashed var(--red-primary); border-radius: 3px; }
.ep-fiche { min-height: 160px; }
.ep-fiche img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-md); }
.ep-badge { display: inline-block; margin-bottom: var(--space-sm); padding: 3px 10px; border-radius: var(--radius-full); background: var(--red-subtle); color: var(--red-bright); font-size: .78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ep-hint { margin: 0; color: var(--text-tertiary); }

.ep-time { margin-top: var(--space-xl); }
.ep-caption { margin-bottom: var(--space-md); }
.ep-caption h3 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.ep-date { margin: 0; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: .8rem; color: var(--red-bright); }
.ep-caption p:last-child { max-width: 70ch; margin: var(--space-sm) 0 0; }
.ep-timebar { display: flex; align-items: center; gap: var(--space-sm); flex: 1 1 520px; min-width: 0; }
.ep-arrow { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--bg-glass); border: 1px solid var(--glass-border); color: var(--text-primary); cursor: pointer; }
.ep-arrow:hover:not(:disabled) { border-color: var(--red-primary); color: var(--red-bright); }
.ep-arrow:disabled { opacity: .4; cursor: default; }
/* frise d'années en chips (comme la carte 3D) : chip active pleine rouge, 44 px, défilement horizontal */
.ep-strip { flex: 1; min-width: 0; display: flex; gap: var(--space-sm); overflow-x: auto; padding: 4px 2px; scrollbar-width: thin; cursor: grab; }
.ep-era { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: var(--radius-full); border: 1px solid var(--glass-border-hover); background: var(--bg-glass); color: var(--text-primary); cursor: pointer; font: inherit; white-space: nowrap; }
.ep-era b { font-weight: 700; font-size: .9rem; }
.ep-era span { display: none; }
.ep-era:hover { border-color: var(--red-primary); }
.ep-era[aria-current="true"] { background: var(--red-primary); border-color: var(--red-primary); color: #fff; }

@media (max-width: 860px) {
    .ep-layout { grid-template-columns: 1fr; }
    .ep-arrow { display: none; }
    .ep-ctrl { padding: var(--space-md); }
    .ep-narr { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ep-line, .ep-pin, .ep-pin.is-narr { animation: none; }
    .ep-pin.is-narr .ep-pin-dot { box-shadow: 0 0 0 4px var(--red-primary); }
}

/* ---- carte 3D (iframe /map3d/) au-dessus de la carte 2D ---- */
.ep3d { margin-bottom: var(--space-2xl); }
.ep3d-frame {
    position: relative;
    height: min(78vh, 760px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #050507 url('/images/projet/map-1024.webp') center / cover no-repeat;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
}
.ep3d-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ep3d-frame iframe[hidden] { display: none; }
.ep3d-poster {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    text-align: center;
    background: linear-gradient(180deg, rgba(5, 5, 7, .55), rgba(5, 5, 7, .85));
    color: #F2F2F5;
}
.ep3d-poster p { max-width: 46ch; color: rgba(242, 242, 245, .85); font-size: 1.05rem; }
.ep3d-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.ep3d-frame.is-loaded .ep3d-poster { display: none; }
.ep3d-alt { margin: var(--space-xl) 0 0; color: var(--text-tertiary); }
@media (max-width: 767px) { .ep3d-frame { height: 70vh; } }

/* ============================================
   404 — vraie page dans le gabarit du site
   ============================================ */
.plus-404 { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 82vh; padding: calc(var(--navbar-height) + var(--space-3xl)) 0 var(--space-3xl); }
.plus-404-art { position: absolute; inset: 0; z-index: -1; background: url('/images/hero-color/3.webp') center / cover no-repeat; opacity: .4; }
.plus-404-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg-primary) 0%, rgba(var(--scrim-rgb), .7) 55%, rgba(var(--scrim-rgb), .3) 100%); }
.plus-404-inner { max-width: 760px; }
.plus-404-kicker { margin: 0 0 var(--space-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; color: var(--red-bright); }
.plus-404 h1 { font-size: 4rem; line-height: 1; margin: 0 0 var(--space-lg); }
.plus-404-text { font-size: 1.125rem; max-width: 56ch; margin: 0 0 var(--space-xl); }
.plus-404-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }
@media (max-width: 767px) { .plus-404 h1 { font-size: 2.6rem; } .plus-404-actions .btn { width: 100%; justify-content: center; } }

/* ---- pages autonomes (ex. /economie) dans le gabarit : navbar fixe au-dessus, en-tête maison masqué ---- */
body.plus-shell .eco-top { display: none; }
body.plus-shell .eco-wrap { padding-top: calc(var(--navbar-height) + var(--space-2xl)); }
body.plus-shell.has-event-topbar .eco-wrap { padding-top: calc(var(--navbar-height) + var(--space-3xl) + 24px); }

/* ---- zones de sécurité mobile : la bulle de l'assistant ne masque pas le contenu ---- */
@media (max-width: 767px) {
    .swl-assistant-bubble { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 48px; height: 48px; transition: opacity .2s ease, transform .2s ease; }
    body.plus-hero-visible .swl-assistant-bubble { opacity: 0; transform: scale(.8); pointer-events: none; }
    #app > .footer, body.plus-shell > .footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* ---- /launcher : « Téléchargement bientôt » = badge de statut, pas un faux bouton ---- */
.btn.launcher-btn-disabled,
.btn.launcher-btn-disabled:hover {
    align-self: flex-start;
    min-height: 28px;
    height: auto;
    width: auto;
    padding: 4px 14px 4px 12px;
    gap: 8px;
    border: 0;
    border-radius: var(--radius-full);
    background: rgba(232, 132, 42, .14);
    color: var(--faction-illegal);
    font-size: .8rem;
    letter-spacing: .04em;
    box-shadow: none;
    cursor: default;
    transform: none;
}
.btn.launcher-btn-disabled i { display: none; }
.btn.launcher-btn-disabled::after { content: ''; order: -1; width: 8px; height: 8px; border-radius: 50%; background: var(--faction-illegal); }

/* ============================================
   MOBILE COMPACT (≤ 767 px) — carrousels, accordéons, « Voir plus », « Lire la suite »
   Desktop strictement inchangé. Contenu toujours présent dans le HTML.
   ============================================ */
@media (max-width: 767px) {
    /* accordéons : en-tête cliquable, corps replié (premier ouvert) */
    .plus-acc-head { margin: 0; }
    .plus-acc-btn {
        display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
        width: 100%; min-height: 48px; padding: 6px 0; background: none; border: 0; cursor: pointer;
        font: inherit; color: inherit; text-align: left; letter-spacing: inherit; text-transform: inherit;
    }
    .plus-acc-chev { flex: 0 0 auto; font-size: .85rem; color: var(--red-bright); transition: transform var(--transition-base); }
    .plus-acc:not(.plus-acc-closed) .plus-acc-chev { transform: rotate(180deg); }
    .plus-acc { border-bottom: 1px solid var(--glass-border); }
    .plus-acc-closed > .plus-acc-body { display: none; }
    .plus-acc:not(.plus-acc-closed) > .plus-acc-body { animation: plus-fade .25s ease; }
    .lore-gallery-era.plus-acc { margin-bottom: var(--space-sm); padding-bottom: var(--space-xs); }
    .ed3-detail-block.plus-acc { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }

    /* « Voir plus » (listes longues) et « Lire la suite » (textes longs) */
    [data-plus-more] > .plus-more-hidden { display: none; }
    .plus-more-btn { display: flex; width: 100%; justify-content: center; margin-top: var(--space-md); min-height: 48px; }
    .plus-clamp { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .plus-clamp-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin-top: 4px; background: none; border: 0; color: var(--red-bright); font: 600 .95rem var(--font-body); cursor: pointer; }

    /* /projet : carte détaillée repliée (gardée en page, mise hors flux sans être détruite) */
    .plus-fold { position: relative; }
    .plus-fold-btn { margin-top: var(--space-md); min-height: 48px; }
    .plus-fold-closed .projet-map-toolbar,
    .plus-fold-closed .projet-map-stage { position: absolute; left: -10000px; top: 0; width: calc(100vw - 32px); visibility: hidden; }

    /* carrousels : toujours en ligne, même si la grille d'origine est une colonne */
    [data-mobile-slider].mobile-slider-track { flex-direction: row; }
    .steps-timeline.mobile-slider-track { padding-left: 16px; }
    .steps-timeline .step-item.mobile-slider-item { margin: 0; }

    /* héros : 78 % de l'écran au lieu de 100 % (le contenu suivant apparaît dès l'arrivée) */
    .hero { height: auto; min-height: max(560px, 78svh); }
    .lore-entry { min-height: 78svh; }

    /* repli générique : tout sauf l'en-tête est mis hors flux tant que c'est fermé */
    .plus-fold-generic.plus-fold-closed .plus-fold-keep ~ *,
    .plus-fold-generic.plus-fold-closed .container > :not(.plus-fold-keep) { position: absolute; left: -10000px; top: 0; width: calc(100vw - 32px); visibility: hidden; }

    /* rythme vertical un peu plus serré sur mobile */
    .section, .lp-section { padding-top: 32px; padding-bottom: 32px; }
    .lp-steps--visual .lp-step-visual-media { height: 170px; }
    .lp-steps--visual .lp-step-visual-media img { height: 100%; object-fit: cover; }
    .ep3d-frame { height: 56vh; }
    /* boutons des héros côte à côte quand ils tiennent (deux CTA de même rang, ordre conservé) */
    .projet-hero-cta, .lp-cta-row--hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
    .projet-hero-cta .btn, .lp-cta-row--hero .btn { width: 100%; padding-left: 10px; padding-right: 10px; font-size: .82rem; white-space: normal; text-align: center; justify-content: center; }
    .lp-hero { min-height: 0; }
    .projet-hero .editorial-breadcrumb, .lp-hero .editorial-breadcrumb { margin-bottom: var(--space-sm); }

    /* cartes « appel » (Discord, Le Projet) : icône et texte en ligne, plus compactes */
    .section .discord-card { padding: var(--space-lg); gap: var(--space-md); }
    .section .discord-card .discord-icon { width: 48px; height: 48px; font-size: .8em; }
    .footer-vote { gap: 0 var(--space-md); }
    .footer { padding-top: var(--space-xl); }
    .footer-inner { gap: var(--space-md); }
    .footer-logo { flex-direction: row; gap: var(--space-sm); }
    .footer-logo img { width: 40px; height: auto; }
    .footer-legal { font-size: .85rem; }

    /* grilles rendues plus denses (pas de perte de contenu) */
    .lp-factions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
    .lp-factions .lp-faction { min-height: 0; }
    .wl-open-banner-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .wl-auth-media { min-height: 120px; max-height: 120px; overflow: hidden; }
    .wl-auth-gate-icon { width: 40px; height: 40px; font-size: .8em; }
    .shop-core-page { padding-bottom: var(--space-xl); }

    /* héros des pages éditoriales et du projet : moins hauts */
    .ed3-hero { min-height: min(72svh, 640px); }
    .projet-hero { min-height: 0; padding-top: calc(var(--navbar-height) + var(--space-2xl)); padding-bottom: var(--space-2xl); }

    /* footer : plan du site replié (bouton), liens sur 3 colonnes une fois ouvert (cibles 44 px) */
    .plus-plan-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); width: 100%; max-width: 360px; min-height: 48px; margin: var(--space-sm) auto 0; padding: 0 var(--space-md); background: var(--bg-glass); border: 1px solid var(--glass-border); border-radius: var(--radius-md); color: var(--text-primary); font: 600 .95rem var(--font-body); cursor: pointer; }
    .plus-plan-btn[aria-expanded="true"] .plus-acc-chev { transform: rotate(180deg); }
    .footer-links.plus-plan-closed { display: none; }
    .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; gap: 0 var(--space-sm); font-size: .85rem; }
    .footer-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; line-height: 1.2; }
    .footer-vote { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-md); }
    .footer-legal { gap: 0 var(--space-md); }
}
@keyframes plus-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .plus-acc:not(.plus-acc-closed) > .plus-acc-body { animation: none; }
    .plus-acc-chev { transition: none; }
}