/* ============================================================================
   La Voie du CAPTE — Thème AZERGO Moderne (2026)
   Design Charter: Charte AZERGO moderne avec couleurs épurées, typographie
   claire (Sora + Instrument Sans), et composants accessibles.
   ============================================================================ */

/* ===== ROOT VARIABLES (Light Mode - Default) ===== */
:root {
    /* Layout & Spacing */
    --app-bg: #f4f6f9;
    --surface: #ffffff;
    --surface-2: #f5f7fa;
    --border: #e4e9f0;

    /* Typography */
    --text: #2b3242;
    --text-dim: #5a6472;
    --text-mut: #8b95a4;
    --font-head: 'Sora', system-ui, sans-serif;
    --font-body: 'Instrument Sans', system-ui, sans-serif;

    /* CTA & Actions */
    --cta: #F5A623;
    --cta-strong: #e08e15;
    --cta-ink: #ffffff;

    /* Branding */
    --brand-band: #b6d6d2;
    --chip-bg: #fbeed6;
    --chip-ink: #c9791b;

    /* Status Colors */
    --success: #2e9e6b;
    --success-soft: #e4f4ec;
    --danger: #d64545;
    --danger-soft: #fbe9e9;
    --admin: #2f8a99;
    --admin-soft: #e2f0f2;

    /* Badge Colors (Soft for Light Theme) */
    --badge-count-bg: #64748b;
    --badge-count-ink: #ffffff;
    --badge-rr-bg: #38bdf8;
    --badge-rr-ink: #ffffff;

    /* Primary */
    --primary: #2b3242;

    /* Radius & Sizing */
    --radius: 14px;
    --radius-sm: 10px;

    /* Shadows */
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 26px -14px rgba(15, 23, 42, 0.18);
    --shadow-lg: 0 16px 44px -14px rgba(15, 23, 42, 0.30);
    --header-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 8px 22px -16px rgba(15, 23, 42, 0.16);
}

/* ===== DARK MODE ===== */
:root[data-bs-theme="dark"] {
    --app-bg: #0d0d1a;
    --surface: #1a1a2e;
    --surface-2: #2a2a3e;
    --border: #3a3a5c;
    --text: #e8e8f0;
    --text-dim: #b0b0c8;
    --text-mut: #8080a0;
    --cta: #F5A623;
    --cta-strong: #e08e15;
    --cta-ink: #ffffff;
    --brand-band: #5a7a76;
    --chip-bg: #3a2a1a;
    --chip-ink: #e8b86b;
    --success: #2ecc71;
    --success-soft: #1a3a28;
    --danger: #e85555;
    --danger-soft: #3a1a1a;
    --admin: #4fa5b3;
    --admin-soft: #1a3a45;
    --primary: #2b3242;
    --badge-count-bg: #475569;
    --badge-count-ink: #ffffff;
    --badge-rr-bg: #0284c7;
    --badge-rr-ink: #ffffff;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px -14px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 44px -14px rgba(0, 0, 0, 0.7);
    --header-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 8px 22px -16px rgba(0, 0, 0, 0.4);
}

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes azPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.45);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(245, 166, 35, 0);
    }
}

@keyframes azFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes azSlide {
    from {
        transform: translateX(105%);
    }
    to {
        transform: translateX(0);
    }
}

/* ===== GLOBAL STYLES ===== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--app-bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.5;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
}

a {
    color: var(--chip-ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--cta);
}

/* ===== SCROLLBAR CUSTOMIZATION ===== */
.az-sc::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.az-sc {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ===== World Map ===== */
.world-map-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* padding-top élevé pour que le personnage absolu top:-70px reste dans la zone visible
       (overflow-x:auto force overflow-y:auto implicitement — le personnage serait clippé sans ça) */
    padding: 90px 0.5rem 2rem;
}

.world-map-path {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-width: max-content;
    padding: 1rem 0;
    gap: 0;
}

.world-node-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 110px;
    position: relative;
}

.world-node {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.world-node:not(.world-node--locked):hover {
    transform: scale(1.1);
}

.world-node--validated {
    background-color: var(--azergo-success);
}

.world-node--inprogress {
    background-color: var(--theme-accent, var(--bs-primary));
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--theme-accent, var(--bs-primary)) 25%, transparent);
    animation: world-pulse 2s ease-out infinite;
}

.world-node--locked {
    background-color: #1a1a2e;
    border: 2px solid #3a3a5c;
    filter: grayscale(1);
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.world-map-segment {
    width: 32px;
    height: 4px;
    background-color: #3a3a5c;
    flex-shrink: 0;
    margin-top: 30px;
}

@keyframes world-pulse {
    0%   { box-shadow: 0 0 0 0    color-mix(in srgb, var(--theme-accent, var(--bs-primary)) 40%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--theme-accent, var(--bs-primary))  0%, transparent); }
    100% { box-shadow: 0 0 0 0    color-mix(in srgb, var(--theme-accent, var(--bs-primary))  0%, transparent); }
}

@media (max-width: 575.98px) {
    .world-map-container {
        overflow-x: visible;
        overflow-y: auto;
    }
    .world-map-path {
        flex-direction: column;
        align-items: center;
        min-width: auto;
        min-height: max-content;
    }
    .world-node { width: 56px; height: 56px; }
    .world-map-segment {
        width: 4px;
        height: 20px;
        margin-top: 0;
        margin: 8px 0;
    }
    .world-node-wrapper { width: 90px; }
}

@media (min-width: 768px) {
    .world-node { width: 80px; height: 80px; }
    .world-map-segment { width: 48px; margin-top: 38px; }
    .world-node-wrapper { width: 130px; }
}

/* ===== Phase 4 — Animations & Récompenses ===== */

/* VIS-03 — Page fade-in */
.page-fade-in {
    animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* RPG-05 — Personnage CAPTE silhouette */
.capte-character {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 10;
}

.capte-svg {
    display: block;
    width: 60px;
    height: 100px;
    transform-origin: bottom center;
    transition: transform 0.4s ease, color 0.4s ease;
}

.capte-character--stade-1 .capte-svg { color: #7a6fff; transform: scale(0.62); }
.capte-character--stade-2 .capte-svg { color: #3ecfdd; transform: scale(0.74); }
.capte-character--stade-3 .capte-svg { color: #e8e8f0; transform: scale(0.84); }
.capte-character--stade-4 .capte-svg { color: #f0c040; transform: scale(0.92); }
.capte-character--stade-5 .capte-svg { color: #ffffff; transform: scale(1.0); }

.capte-aura { transition: opacity 0.4s ease; }
.capte-character--stade-1 .capte-aura { opacity: 0; }
.capte-character--stade-2 .capte-aura { opacity: 0.25; }
.capte-character--stade-3 .capte-aura { opacity: 0.50; }
.capte-character--stade-4 .capte-aura { opacity: 0.70; }
.capte-character--stade-5 .capte-aura { opacity: 1.0; }

/* Dashboard — personnage en position statique */
.capte-character--dashboard {
    position: static;
    transform: none;
    display: inline-block;
}

/* RPG-06 — Barre reconstruction logo */
.logo-reconstruction {
    display: block;
    max-width: 200px;
    margin: 0 auto;
}

.logo-path {
    transition: opacity 0.3s ease;
}

.logo-path--new {
    filter: drop-shadow(0 0 6px var(--azergo-gold));
}

/* VIS-01/VIS-02 — Canvas victoire */
#victory-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.victory-canvas-wrapper {
    position: relative;
    overflow: hidden;
    min-height: 200px;
}

/* Sacre final */
.sacre-container {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#sacre-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.sacre-content {
    position: relative;
    z-index: 1;
}

#sacre-title {
    color: var(--azergo-gold);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    min-height: 2.2rem;
}

#sacre-narrative {
    opacity: 0;
}

#btn-profil-legende {
    opacity: 0;
}

/* ===== Boss Challenge Overlay ===== */
#boss-challenge-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: bossOverlayIn 0.5s ease forwards;
}

@keyframes bossOverlayIn {
    from { background: rgba(13, 13, 26, 0); }
    to   { background: rgba(13, 13, 26, 0.95); }
}

.boss-challenge-card {
    background: linear-gradient(135deg, #0d0d1a 0%, #1a1030 100%);
    border: 1px solid rgba(245, 156, 0, 0.35);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
    animation: bossCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
    box-shadow: 0 0 48px rgba(245, 156, 0, 0.12), 0 20px 60px rgba(0, 0, 0, 0.6);
}

@keyframes bossCardIn {
    from { opacity: 0; transform: scale(0.82) translateY(24px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.boss-challenge-icon {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 1rem;
    animation: bossIconPulse 2.2s ease-in-out infinite;
}

@keyframes bossIconPulse {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 6px  rgba(245, 156, 0, 0.5)); }
    50%       { transform: scale(1.12); filter: drop-shadow(0 0 20px rgba(245, 156, 0, 1.0)); }
}

.boss-challenge-title {
    color: var(--azergo-gold);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.boss-challenge-subtitle {
    color: #a0a0b8;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0;
}

.boss-challenge-divider {
    border: none;
    border-top: 1px solid rgba(245, 156, 0, 0.2);
    margin: 1.5rem 0;
}

.btn-boss-challenge {
    background: linear-gradient(135deg, #c07a00, var(--azergo-gold));
    border: none;
    color: #0d0d1a;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.15s ease;
    animation: bossButtonGlow 2s ease-in-out infinite;
    letter-spacing: 0.03em;
}

.btn-boss-challenge:hover {
    color: #0d0d1a;
    transform: scale(1.04);
}

@keyframes bossButtonGlow {
    0%, 100% { box-shadow: 0 0  8px rgba(245, 156, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4); }
    50%       { box-shadow: 0 0 22px rgba(245, 156, 0, 0.75), 0 4px 16px rgba(0, 0, 0, 0.4); }
}

/* ===== Phase 13 — Adventure Theme Palettes ===== */

/* Spécificité : :root[data-bs-theme="dark"] = (0,2,0).
   Les blocs thème doivent avoir au moins (0,3,0) pour l'emporter.
   → :root[data-bs-theme="dark"][data-adventure-theme="..."] = (0,3,0). */

:root[data-bs-theme="dark"][data-adventure-theme="medieval"] {
    --theme-accent:     #6c4aff;
    --theme-accent-rgb: 108, 74, 255;
    --theme-bg-card:    var(--bs-card-bg);
    --bs-primary:       #6c4aff;
    --bs-primary-rgb:   108, 74, 255;
}

:root[data-bs-theme="dark"][data-adventure-theme="antiquite"] {
    --theme-accent:     #D4A017;
    --theme-accent-rgb: 212, 160, 23;
    --theme-bg-card:    #1a1508;
    --bs-primary:       #D4A017;
    --bs-primary-rgb:   212, 160, 23;
}

:root[data-bs-theme="dark"][data-adventure-theme="aventure"] {
    --theme-accent:     #C8861A;
    --theme-accent-rgb: 200, 134, 26;
    --theme-bg-card:    #1a1508;
    --bs-primary:       #C8861A;
    --bs-primary-rgb:   200, 134, 26;
}

:root[data-bs-theme="dark"][data-adventure-theme="sf"] {
    --theme-accent:     #00D4FF;
    --theme-accent-rgb: 0, 212, 255;
    --theme-bg-card:    #0a0e1a;
    --bs-primary:       #00D4FF;
    --bs-primary-rgb:   0, 212, 255;
}

:root[data-bs-theme="dark"][data-adventure-theme="egypte"] {
    --theme-accent:     #D4AF37;
    --theme-accent-rgb: 212, 175, 55;
    --theme-bg-card:    #1a1508;
    --bs-primary:       #D4AF37;
    --bs-primary-rgb:   212, 175, 55;
}

:root[data-bs-theme="dark"][data-adventure-theme="viking"] {
    --theme-accent:     #4A90D9;
    --theme-accent-rgb: 74, 144, 217;
    --theme-bg-card:    #0d1a26;
    --bs-primary:       #4A90D9;
    --bs-primary-rgb:   74, 144, 217;
}

:root[data-bs-theme="dark"][data-adventure-theme="farwest"] {
    --theme-accent:     #A0522D;
    --theme-accent-rgb: 160, 82, 45;
    --theme-bg-card:    #1a0f08;
    --bs-primary:       #A0522D;
    --bs-primary-rgb:   160, 82, 45;
}

/* Card background override for all adventure game screens */
:root[data-bs-theme="dark"][data-adventure-theme] .card {
    background-color: var(--theme-bg-card, var(--bs-card-bg));
}

/* Override Bootstrap px-2 for tighter navbar spacing */
.px-2 {
    padding-right: 0rem !important;
    padding-left: 0.8rem !important;
}