/* ═══════════════════════════════════════════════════════════════════════════
   KODA MONDE SHELL V2 — FOUNDATIONS
   ═══════════════════════════════════════════════════════════════════════════
   Source de verite structurelle pour toutes les pages Monde.
   Les couleurs viennent de koda-design-tokens.css via --monde-* et --koda-*.
   Les composants (cards, stats, CTA, pricing) restent pour W2.

   Remplace : koda-monde-shell.css (120L) + layout de koda-monde-template.css
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. RESET SCOPE
   ═══════════════════════════════════════════════════════════════════════════
   Pas de reset global (html, body) — WordPress le gere.
   Scope strict : .koda-monde et ses descendants uniquement.
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde,
.koda-monde *,
.koda-monde *::before,
.koda-monde *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.koda-monde img,
.koda-monde video,
.koda-monde svg {
    display: block;
    max-width: 100%;
}

.koda-monde a {
    color: inherit;
    text-decoration: none;
}

.koda-monde ul,
.koda-monde ol {
    list-style: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. LAYOUT MONDE — Conteneur principal
   ═══════════════════════════════════════════════════════════════════════════
   Structure :
     .koda-monde
       .koda-monde__fixed-bg        (fond sticky, optionnel via PHP)
       .koda-monde__fixed-overlay    (overlay sticky, optionnel)
       .koda-monde__content          (contenu scrollable, z-index layer)
         <sections>

   Hooks JS preserves :
     [data-koda-monde]    -> koda-monde.js root init
     [data-instance]      -> aqua.js / lupus.js
     [data-koda-terra]    -> terra.js
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables locales de layout ── */
.koda-monde {
    --shell-content-max: 1280px;
    --shell-content-padding: clamp(var(--space-4, 16px), 5vw, var(--space-8, 32px));
    --shell-section-gap: clamp(var(--space-16, 64px), 10vw, var(--space-32, 128px));
    --shell-prose-max: 65ch;

    position: relative;
    width: 100%;
    max-width: 100%;
    color: var(--koda-text-primary);
    font-family: var(--font-body, 'Cormorant Garamond', Georgia, serif);
    line-height: var(--leading-normal, 1.5);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Fond sticky (injecte par PHP, simule background-attachment: fixed) ── */
.koda-monde__fixed-bg {
    position: sticky;
    top: 0;
    height: 100vh;
    margin-bottom: -100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}

/* ── Overlay sticky (teinte monde sur le fond) ── */
.koda-monde__fixed-overlay {
    position: sticky;
    top: 0;
    height: 100vh;
    margin-bottom: -100vh;
    z-index: 1;
    pointer-events: none;
}

/* ── Contenu scrollable ── */
.koda-monde__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Offset hero (compense le header WP/Elementor) ── */
.koda-monde .hero {
    padding-top: var(--koda-hero-offset, 80px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2b. FULL-WIDTH SECTION BREAKOUT
   ═══════════════════════════════════════════════════════════════════════════
   Les sections a l'interieur de .koda-monde[data-koda-monde] sortent
   du flux contraint pour occuper 100vw, avec padding de centrage.
   Compatible avec les classes existantes des 3 mondes.
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde[data-koda-monde] .terra-section,
.koda-monde[data-koda-monde] .koda-monde__section--full {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    padding-left: max(var(--shell-content-padding), calc((100% - var(--shell-content-max)) / 2));
    padding-right: max(var(--shell-content-padding), calc((100% - var(--shell-content-max)) / 2));
    border-radius: 0;
}

.koda-monde[data-koda-monde] .terra-nav,
.koda-monde[data-koda-monde] .koda-monde__nav {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    padding-left: max(var(--shell-content-padding), calc((100% - var(--shell-content-max)) / 2));
    padding-right: max(var(--shell-content-padding), calc((100% - var(--shell-content-max)) / 2));
    border-radius: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2c. GLASSMORPHISME UTILITY
   ═══════════════════════════════════════════════════════════════════════════
   .koda-glass : panneaux semi-transparents avec blur.
   Fallback @supports pour navigateurs sans backdrop-filter.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Glassmorphisme sur sections monde ── */
.koda-monde__section {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(16px) saturate(var(--koda-glass-saturate, 130%));
    -webkit-backdrop-filter: blur(16px) saturate(var(--koda-glass-saturate, 130%));
    border-bottom: 1px solid var(--koda-glass-border, rgba(255, 255, 255, 0.04));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .koda-monde__section {
        background: rgba(10, 10, 10, 0.88);
    }
}

.koda-monde__section.koda-glass {
    border-radius: 0;
}

/* ── Utility class koda-glass ── */
.koda-monde .koda-glass {
    background: var(--koda-glass-bg-light, rgba(18, 18, 18, 0.45));
    border: 1px solid var(--koda-glass-border, rgba(255, 255, 255, 0.08));
    box-shadow: var(--koda-glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.4));
    backdrop-filter: blur(var(--koda-glass-blur, 20px)) saturate(var(--koda-glass-saturate, 130%));
    -webkit-backdrop-filter: blur(var(--koda-glass-blur, 20px)) saturate(var(--koda-glass-saturate, 130%));
    border-radius: var(--koda-glass-radius, 16px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .koda-monde .koda-glass {
        background: var(--koda-glass-bg-solid, rgba(18, 18, 18, 0.85));
    }
}

.koda-monde .koda-glass * {
    position: relative;
}

/* ── Hero media invisible (le fond sticky est visible a travers) ── */
.koda-monde__hero-media {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. HERO FRAME — Structure uniquement
   ═══════════════════════════════════════════════════════════════════════════
   Structure HTML cible :
     <section class="koda-monde__hero">
       <div class="koda-monde__hero-media">            <!-- bg image/video -->
       <div class="koda-monde__hero-overlay">           <!-- gradient overlay -->
       <div class="koda-monde__hero-content">           <!-- contenu centre -->
         <span class="koda-monde__hero-badge">
         <h1 class="koda-monde__hero-title">
         <p class="koda-monde__hero-subtitle">
         <div class="koda-monde__hero-stats">           <!-- telemetry slot -->
         <div class="koda-monde__hero-cta">             <!-- boutons -->
       <div class="koda-monde__hero-scroll">            <!-- scroll indicator -->

   Hooks JS preserves :
     .koda-monde__hero-media          -> koda-monde.js (lazy video)
     #hero-terra / #hero-aqua / etc.  -> ancres HTML
     data-video-url                   -> koda-monde.js
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__hero {
    position: relative;
    min-height: min(90vh, 700px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

/* ── Media layer (image poster + video JS-injected) ── */
.koda-monde__hero .koda-monde__hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.koda-monde__hero-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.koda-monde__hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--duration-slowest, 1000ms) var(--ease-out, ease);
}

/* ── Overlay — degrade monde vers fond ── */
.koda-monde__hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--monde-hero-overlay,
        linear-gradient(
            to bottom,
            rgba(10, 10, 10, 0.20) 0%,
            rgba(10, 10, 10, 0.15) 40%,
            rgba(10, 10, 10, 0.35) 80%,
            var(--koda-void, #0a0a0a) 100%
        )
    );
    pointer-events: none;
}

/* ── Content layer ── */
.koda-monde__hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: var(--space-8, 32px) var(--shell-content-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Logo Monde (au-dessus du badge SYSTEME) ── */
.koda-monde__hero-logo {
    display: block;
    width: clamp(180px, 25vw, 320px);
    height: auto;
    margin: 0 auto var(--space-6, 24px);
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
    transition: filter var(--transition-slow, 500ms ease);
}

.koda-monde__hero-logo:hover {
    filter: drop-shadow(0 4px 24px var(--monde-glow));
}

@media (max-width: 768px) {
    .koda-monde__hero-logo {
        width: clamp(140px, 40vw, 220px);
    }
}

/* ── Badge ── */
.koda-monde__hero-badge,
.koda-monde__badge {
    display: inline-block;
    padding: var(--space-2, 8px) var(--space-6, 24px);
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--monde-border);
    border-radius: var(--radius-full, 9999px);
    color: var(--monde-primary);
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-semibold, 600);
    letter-spacing: var(--tracking-display, 0.15em);
    text-transform: uppercase;
    margin-bottom: var(--space-6, 24px);
    text-shadow: none;
}

/* ── Titre ── */
.koda-monde__hero-title,
.koda-monde__title {
    font-family: var(--font-totem, 'Cinzel Decorative', serif);
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: var(--font-bold, 700);
    line-height: var(--leading-none, 1);
    margin: 0 0 var(--space-4, 16px);
    color: var(--koda-text-primary);
    text-shadow:
        0 2px 20px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(0, 0, 0, 0.5);
}

/* ── Sous-titre ── */
.koda-monde__hero-subtitle,
.koda-monde__subtitle {
    font-family: var(--font-body, 'Cormorant Garamond', serif);
    font-size: clamp(var(--text-lg, 1.125rem), 3vw, var(--text-2xl, 1.5rem));
    color: var(--koda-text-secondary);
    margin: 0 0 var(--space-10, 40px);
    max-width: 600px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

/* ── Stats slot (telemetry) — vide par defaut, rempli par micro-theme ── */
.koda-monde__hero-stats {
    margin-bottom: var(--space-8, 32px);
}

/* ── CTA buttons ── */
.koda-monde__hero-cta {
    display: flex;
    gap: var(--space-4, 16px);
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Scroll indicator ── */
.koda-monde__hero-scroll,
.koda-monde__scroll-indicator {
    position: absolute;
    bottom: var(--space-8, 32px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 8px);
    color: var(--koda-text-muted);
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider, 0.05em);
    animation: koda-monde-bounce 2s infinite;
    pointer-events: none;
}

.koda-monde__scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--monde-primary), transparent);
}

@keyframes koda-monde-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(10px); }
}

/* ── Mobile : pas de video (iOS bug), hero compact ── */
@media (max-width: 768px) {
    .koda-monde__hero-poster {
        position: relative;
    }
    .koda-monde__hero-video {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. SECTIONS FRAMEWORK
   ═══════════════════════════════════════════════════════════════════════════
   Pattern : chaque section de contenu est un .koda-monde__section
   avec un header optionnel (badge + titre + description, centre).

   Variantes via custom properties :
     --section-bg : fond de section (defaut transparent)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section conteneur ── */
.koda-monde__section {
    padding: var(--shell-section-gap) var(--shell-content-padding);
    max-width: var(--shell-content-max);
    margin-left: auto;
    margin-right: auto;
}

/* ── Section header (reutilisable) ── */
.koda-monde__section-header {
    text-align: center;
    margin-bottom: var(--space-12, 48px);
}

.koda-monde__section-badge {
    display: inline-block;
    padding: var(--space-1-5, 6px) var(--space-4, 16px);
    background: var(--monde-subtle);
    border: 1px solid var(--monde-border);
    border-radius: var(--radius-full, 9999px);
    color: var(--monde-primary);
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-semibold, 600);
    letter-spacing: var(--tracking-widest, 0.1em);
    text-transform: uppercase;
    margin-bottom: var(--space-4, 16px);
}

.koda-monde__section-title {
    font-family: var(--font-rune, 'Cinzel', serif);
    font-size: clamp(1.75rem, 5vw, var(--text-4xl, 2.5rem));
    font-weight: var(--font-bold, 700);
    margin: 0 0 var(--space-3, 12px);
    color: var(--koda-text-primary);
}

.koda-monde__section-desc {
    font-family: var(--font-body, 'Cormorant Garamond', serif);
    font-size: var(--text-lg, 1.125rem);
    color: var(--koda-text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--leading-relaxed, 1.625);
}

/* ── Variante : section avec fond eleve ── */
.koda-monde__section--elevated {
    background: var(--koda-panel-elevated, #1a1a1a);
}

/* ── Variante : section pleine largeur ── */
.koda-monde__section--wide {
    max-width: none;
    padding-left: max(var(--shell-content-padding), calc((100% - var(--shell-content-max)) / 2));
    padding-right: max(var(--shell-content-padding), calc((100% - var(--shell-content-max)) / 2));
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. GRIDS
   ═══════════════════════════════════════════════════════════════════════════
   Systeme de grilles responsive pour les composants de section.
   Les composants W2 (cards, etc.) se posent dans ces grilles.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grille 3 colonnes (piliers, outils, codex) ── */
.koda-monde__grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-8, 32px);
}

/* ── Grille 2 colonnes ── */
.koda-monde__grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8, 32px);
}

/* ── Split : 2 colonnes egales avec variante reverse ── */
.koda-monde__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12, 48px);
    align-items: center;
}

.koda-monde__split--reverse > :first-child {
    order: 2;
}

.koda-monde__split--reverse > :last-child {
    order: 1;
}

/* ── Timeline (quetes) ── */
.koda-monde__timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 24px);
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    padding-left: var(--space-12, 48px);
}

.koda-monde__timeline::before {
    content: '';
    position: absolute;
    left: var(--space-5, 20px);
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        var(--monde-primary),
        var(--monde-subtle),
        transparent
    );
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. CONTAINERS
   ═══════════════════════════════════════════════════════════════════════════
   Utilitaires de largeur pour le contenu textuel et les blocs centres.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Conteneur standard ── */
.koda-monde__container {
    width: 100%;
    max-width: var(--shell-content-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--shell-content-padding);
    padding-right: var(--shell-content-padding);
}

/* ── Conteneur prose (texte long) ── */
.koda-monde__prose {
    max-width: var(--shell-prose-max);
    margin-left: auto;
    margin-right: auto;
}

.koda-monde__prose > * + * {
    margin-top: var(--space-6, 24px);
}

/* ── Centering utility ── */
.koda-monde__center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. NAVIGATION STICKY
   ═══════════════════════════════════════════════════════════════════════════
   Barre de nav interne au monde (ancres de section).
   Absorbe le pattern de koda-monde-template.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__nav {
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown, 100);
    background: var(--koda-glass-bg-solid, rgba(18, 18, 18, 0.85));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--koda-border, #2d2a25);
}

.koda-monde__nav-inner {
    display: flex;
    gap: 0;
    max-width: var(--shell-content-max);
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.koda-monde__nav-inner::-webkit-scrollbar {
    display: none;
}

.koda-monde__nav-item {
    flex: 1;
    min-width: max-content;
    padding: var(--space-4, 16px) var(--space-6, 24px);
    color: var(--koda-text-secondary);
    text-decoration: none;
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    text-align: center;
    transition: all var(--transition-fast, 150ms ease);
    border-bottom: 2px solid transparent;
}

.koda-monde__nav-item:hover {
    color: var(--monde-primary);
    background: var(--monde-subtle);
}

.koda-monde__nav-item.active {
    color: var(--monde-primary);
    border-bottom-color: var(--monde-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. STICKY CTA
   ═══════════════════════════════════════════════════════════════════════════
   Barre fixe en bas d'ecran avec CTA pricing.
   Hooks JS preserves :
     #sticky-cta                     -> koda-monde.js getElementById
     .koda-monde__sticky-cta-close   -> koda-monde.js querySelector
     #pricing                        -> koda-monde.js IntersectionObserver
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-max, 9999);
    background: var(--koda-glass-bg-solid, rgba(18, 18, 18, 0.85));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--monde-border);
    padding: var(--space-3, 12px) var(--space-6, 24px);
    transition: transform var(--transition-base, 300ms ease);
}

.koda-monde__sticky-cta[hidden] {
    transform: translateY(100%);
    display: block !important;
    pointer-events: none;
}

.koda-monde__sticky-cta-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6, 24px);
    max-width: 900px;
    margin: 0 auto;
}

.koda-monde__sticky-cta-text {
    color: var(--koda-text-secondary);
    font-size: var(--text-sm, 0.875rem);
}

.koda-monde__sticky-cta-close {
    background: none;
    border: none;
    color: var(--koda-text-muted);
    cursor: pointer;
    font-size: var(--text-lg, 1.125rem);
    padding: var(--space-2, 8px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. ERROR STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-error {
    padding: var(--space-8, 32px);
    background: var(--koda-danger-subtle, rgba(231, 76, 60, 0.1));
    border: 1px solid var(--koda-danger-glow, rgba(231, 76, 60, 0.25));
    border-radius: var(--radius-md, 8px);
    color: var(--koda-danger, #e74c3c);
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. SHARED KEYFRAMES
   ═══════════════════════════════════════════════════════════════════════════
   Animations partagees entre les 3 mondes.
   Les animations monde-specifiques restent dans les micro-themes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scroll reveal (utilise par IntersectionObserver dans aqua.js / lupus.js) ── */
@keyframes koda-monde-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.koda-monde .animate-in {
    animation: koda-monde-fadeInUp 0.8s var(--ease-out, ease) forwards;
}

/* ── Logo float (hero, identique dans les 3 mondes) ── */
@keyframes koda-monde-logoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ── Cursor blink (terminal, identique dans les 3 — elimine aquaCursorBlink / lupusCursorBlink) ── */
@keyframes koda-monde-cursorBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ── Type-in (terminal welcome, identique dans les 3) ── */
@keyframes koda-monde-typeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Bounce scroll indicator ── */
/* (defini plus haut dans section 3 : koda-monde-bounce) */

/* ── Float CTA (template) ── */
@keyframes koda-monde-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. RESPONSIVE — BREAKPOINTS DE BASE
   ═══════════════════════════════════════════════════════════════════════════
   Structure responsive fondamentale.
   Les composants W2 ajouteront leurs propres media queries.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1024px : tablette paysage / petit desktop ── */
@media (max-width: 1024px) {
    .koda-monde__grid-2 {
        gap: var(--space-6, 24px);
    }

    .koda-monde__split {
        gap: var(--space-8, 32px);
    }
}

/* ── 768px : tablette portrait ── */
@media (max-width: 768px) {
    /* Hero compact */
    .koda-monde__hero {
        min-height: 500px;
    }

    .koda-monde__hero-content {
        padding: var(--space-6, 24px) var(--shell-content-padding);
    }

    .koda-monde__hero-cta {
        flex-direction: column;
        align-items: center;
    }

    .koda-monde__hero-cta > * {
        width: 100%;
        max-width: 300px;
    }

    /* Grids : 1 colonne */
    .koda-monde__grid-3 {
        grid-template-columns: 1fr;
    }

    .koda-monde__grid-2 {
        grid-template-columns: 1fr;
    }

    .koda-monde__split {
        grid-template-columns: 1fr;
    }

    .koda-monde__split--reverse > :first-child {
        order: unset;
    }

    .koda-monde__split--reverse > :last-child {
        order: unset;
    }

    /* Video : pas sur mobile (iOS) */
    .koda-monde__hero-poster {
        position: relative;
    }

    .koda-monde__hero-video {
        display: none;
    }

    /* Sticky CTA : stack */
    .koda-monde__sticky-cta-inner {
        flex-direction: column;
        gap: var(--space-3, 12px);
    }

    .koda-monde__sticky-cta-text {
        font-size: var(--text-xs, 0.75rem);
        text-align: center;
    }

    /* Timeline : padding reduit */
    .koda-monde__timeline {
        padding-left: var(--space-8, 32px);
    }

    .koda-monde__timeline::before {
        left: var(--space-3, 12px);
    }
}

/* ── 480px : mobile ── */
@media (max-width: 480px) {
    /* Spacing reduit */
    .koda-monde {
        --shell-section-gap: var(--space-12, 48px);
    }

    /* Hero minimal */
    .koda-monde__hero {
        min-height: 400px;
    }

    .koda-monde__hero-content {
        padding: var(--space-4, 16px);
    }

    /* Section header compact */
    .koda-monde__section-header {
        margin-bottom: var(--space-8, 32px);
    }

    /* Nav compact */
    .koda-monde__nav-item {
        padding: var(--space-3, 12px) var(--space-4, 16px);
        font-size: var(--text-xs, 0.75rem);
    }

    /* Grids gap reduit */
    .koda-monde__grid-3,
    .koda-monde__grid-2 {
        gap: var(--space-4, 16px);
    }

    /* Timeline : encore plus compact */
    .koda-monde__timeline {
        padding-left: var(--space-6, 24px);
    }

    .koda-monde__timeline::before {
        left: var(--space-2, 8px);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. LANDSCAPE MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 992px) and (orientation: landscape) {
    .koda-monde__hero {
        min-height: auto;
        padding: var(--space-8, 32px) 0;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════

   W2 — COMPONENTS LIBRARY
   Tous les composants reutilisables des pages Monde.
   Couleurs exclusivement via --monde-* et --koda-*.

   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   13. BOUTONS CTA
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde .koda-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-6, 24px);
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-semibold, 600);
    text-decoration: none;
    border-radius: var(--radius-md, 8px);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast, 150ms ease);
    line-height: var(--leading-tight, 1.25);
}

.koda-monde .koda-btn--primary {
    background: var(--monde-primary);
    color: var(--koda-text-inverse);
}

.koda-monde .koda-btn--primary:hover {
    background: var(--monde-secondary);
    box-shadow: 0 0 20px var(--monde-glow);
    transform: translateY(-2px);
}

.koda-monde .koda-btn--outline {
    background: transparent;
    color: var(--koda-text-primary);
    border: 1px solid var(--koda-border-light);
}

.koda-monde .koda-btn--outline:hover {
    border-color: var(--monde-primary);
    color: var(--monde-primary);
}

.koda-monde .koda-btn--secondary {
    background: var(--monde-subtle);
    color: var(--monde-primary);
    border: 1px solid var(--monde-border);
}

.koda-monde .koda-btn--secondary:hover {
    background: var(--monde-primary);
    color: var(--koda-text-inverse);
}

.koda-monde .koda-btn--ghost {
    background: transparent;
    color: var(--monde-primary);
    border: none;
    padding: var(--space-2, 8px) var(--space-4, 16px);
}

.koda-monde .koda-btn--ghost:hover {
    background: var(--monde-subtle);
}

/* ── Tailles ── */
.koda-monde .koda-btn--sm {
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-size: var(--text-sm, 0.875rem);
}

.koda-monde .koda-btn--lg {
    padding: var(--space-4, 16px) var(--space-8, 32px);
    font-size: var(--text-lg, 1.125rem);
}

.koda-monde .koda-btn--xl {
    padding: var(--space-5, 20px) var(--space-10, 40px);
    font-size: var(--text-xl, 1.25rem);
}

@media (max-width: 768px) {
    .koda-monde .koda-btn--lg,
    .koda-monde .koda-btn--xl {
        padding: var(--space-3, 12px) var(--space-6, 24px);
        font-size: var(--text-base, 1rem);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. CARDS
   ═══════════════════════════════════════════════════════════════════════════
   Card generique reutilisable pour piliers, outils, profils, etc.
   Les micro-themes n'ajoutent que des surcharges de couleur.
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__card {
    position: relative;
    padding: var(--space-8, 32px);
    background: var(--koda-panel-elevated, #1a1a1a);
    border: 1px solid var(--koda-border);
    border-radius: var(--radius-lg, 12px);
    transition: all var(--transition-base, 300ms ease);
    overflow: hidden;
}

.koda-monde__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--monde-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base, 300ms ease);
}

.koda-monde__card:hover {
    border-color: var(--monde-border);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.5));
}

.koda-monde__card:hover::before {
    transform: scaleX(1);
}

.koda-monde__card-icon {
    font-size: var(--text-5xl, 3rem);
    margin-bottom: var(--space-6, 24px);
}

.koda-monde__card-title {
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-xl, 1.25rem);
    font-weight: var(--font-semibold, 600);
    margin: 0 0 var(--space-3, 12px);
    color: var(--koda-text-primary);
}

.koda-monde__card-desc {
    font-size: var(--text-base, 1rem);
    color: var(--koda-text-secondary);
    line-height: var(--leading-relaxed, 1.625);
    margin: 0;
}

.koda-monde__card-number {
    position: absolute;
    bottom: var(--space-4, 16px);
    right: var(--space-6, 24px);
    font-size: var(--text-6xl, 3.75rem);
    font-weight: var(--font-extrabold, 800);
    color: var(--monde-subtle);
    opacity: 0.5;
    line-height: var(--leading-none, 1);
}

/* ── Variante : value-card (myth / truth / action) ── */
.koda-monde__value-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 20px);
}

.koda-monde__value-myth,
.koda-monde__value-truth,
.koda-monde__value-action {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5, 6px);
}

.koda-monde__value-label {
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest, 0.1em);
    font-weight: var(--font-semibold, 600);
}

.koda-monde__value-label--myth   { color: var(--koda-danger); }
.koda-monde__value-label--truth  { color: var(--koda-success); }
.koda-monde__value-label--action { color: var(--monde-primary); }

.koda-monde__value-myth p {
    color: var(--koda-text-secondary);
    font-style: italic;
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--leading-relaxed, 1.625);
}

.koda-monde__value-truth p {
    color: var(--koda-text-primary);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--leading-relaxed, 1.625);
}

.koda-monde__value-action p {
    color: var(--monde-primary);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    line-height: var(--leading-snug, 1.375);
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. STATS / PREUVES
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__stats-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-8, 32px);
}

.koda-monde__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-8, 32px);
    background: var(--koda-panel-elevated, #1a1a1a);
    border: 1px solid var(--koda-border);
    border-radius: var(--radius-lg, 12px);
    min-width: 180px;
}

.koda-monde__stat-number {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: var(--text-3xl, 2rem);
    font-weight: var(--font-bold, 700);
    color: var(--monde-primary);
    line-height: var(--leading-none, 1);
    margin-bottom: var(--space-2, 8px);
}

.koda-monde__stat-label {
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    color: var(--koda-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider, 0.05em);
}

@media (max-width: 480px) {
    .koda-monde__stats-row {
        gap: var(--space-4, 16px);
    }
    .koda-monde__stat {
        padding: var(--space-6, 24px);
        min-width: 140px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. TOOL ROWS
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__tool {
    display: flex;
    gap: var(--space-5, 20px);
    padding: var(--space-6, 24px);
    background: var(--koda-panel-elevated, #1a1a1a);
    border: 1px solid var(--koda-border);
    border-radius: var(--radius-md, 8px);
    transition: all var(--transition-fast, 150ms ease);
}

.koda-monde__tool:hover {
    border-color: var(--monde-border);
    background: var(--monde-subtle);
}

.koda-monde__tool-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--monde-subtle);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-2xl, 1.5rem);
}

.koda-monde__tool-title {
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-semibold, 600);
    margin: 0 0 var(--space-1, 4px);
    color: var(--koda-text-primary);
}

.koda-monde__tool-desc {
    font-size: var(--text-sm, 0.875rem);
    color: var(--koda-text-secondary);
    margin: 0;
    line-height: var(--leading-snug, 1.375);
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. TIMELINE DE PROGRESSION
   ═══════════════════════════════════════════════════════════════════════════
   Complete la timeline structurelle de W1 (section 5) avec les dots/steps.
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__timeline-step {
    position: relative;
    padding-bottom: var(--space-8, 32px);
}

.koda-monde__timeline-dot {
    position: absolute;
    left: calc(-1 * var(--space-12, 48px) + var(--space-5, 20px) - 6px);
    top: var(--space-1, 4px);
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full, 9999px);
    background: var(--monde-primary);
    border: 2px solid var(--koda-panel, #121212);
    box-shadow: 0 0 8px var(--monde-glow);
}

.koda-monde__timeline-step--locked .koda-monde__timeline-dot {
    background: var(--koda-text-disabled);
    box-shadow: none;
}

.koda-monde__timeline-step--locked .koda-monde__timeline-step-content {
    opacity: 0.5;
}

.koda-monde__timeline-step-header {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-2, 8px);
}

.koda-monde__timeline-step-header .koda-monde__card-title {
    margin: 0;
}

.koda-monde__timeline-meta {
    margin-top: var(--space-2, 8px);
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    color: var(--koda-text-muted);
}

.koda-monde__timeline-lock {
    color: var(--koda-text-disabled);
}

/* ── Double CTA outils (grimoire + documents) ── */
.koda-monde__tools-cta {
    display: flex;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
    margin-top: var(--space-4, 16px);
}

/* ── Mode Pro / Immersif — visibility toggles ── */
/* Tout element .koda-lex-pro-only est masque en mode Immersif */
body.koda-mode-immersion .koda-lex-pro-only {
    display: none !important;
}

/* Tout element .koda-lex-immersion-only est masque en mode Pro */
body.koda-mode-pro .koda-lex-immersion-only {
    display: none !important;
}

/* ── Callout mode Pro : layout specifique ── */
.koda-monde__callout.koda-lex-pro-only {
    max-width: var(--shell-content-max);
    margin: var(--space-4, 16px) auto;
    padding: var(--space-4, 16px) var(--space-6, 24px);
}

/* ── Typographie mode Pro : titres en sans-serif ── */
body.koda-mode-pro .koda-monde__hero-title {
    font-family: var(--font-tech, 'Montserrat', sans-serif);
}

body.koda-mode-pro .koda-monde__section-title {
    font-family: var(--font-tech, 'Montserrat', sans-serif);
}

@media (max-width: 768px) {
    .koda-monde__timeline-dot {
        left: calc(-1 * var(--space-8, 32px) + var(--space-3, 12px) - 6px);
    }
    .koda-monde__timeline-step-header {
        flex-wrap: wrap;
    }
    .koda-monde__tools-cta {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .koda-monde__timeline-dot {
        left: calc(-1 * var(--space-6, 24px) + var(--space-2, 8px) - 6px);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   18. PRICING CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6, 24px);
    max-width: 960px;
    margin: 0 auto;
}

.koda-monde__pricing-card {
    padding: var(--space-10, 40px) var(--space-8, 32px);
    background: var(--koda-panel-elevated, #1a1a1a);
    border: 1px solid var(--koda-border);
    border-radius: var(--radius-lg, 12px);
    text-align: center;
    position: relative;
    transition: transform var(--transition-fast, 150ms ease);
}

.koda-monde__pricing-card--featured {
    border-color: var(--monde-primary);
    background: var(--monde-subtle);
    transform: scale(1.03);
}

.koda-monde__pricing-popular {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1, 4px) var(--space-5, 20px);
    background: var(--monde-primary);
    color: var(--koda-text-inverse);
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-bold, 700);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider, 0.05em);
    border-radius: var(--radius-full, 9999px);
}

.koda-monde__pricing-tier {
    font-family: var(--font-rune, 'Cinzel', serif);
    font-size: var(--text-xl, 1.25rem);
    margin-bottom: var(--space-4, 16px);
    color: var(--koda-text-primary);
}

.koda-monde__pricing-price {
    margin-bottom: var(--space-6, 24px);
}

.koda-monde__pricing-amount {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: var(--text-5xl, 3rem);
    font-weight: var(--font-bold, 700);
    color: var(--koda-text-primary);
}

.koda-monde__pricing-period {
    color: var(--koda-text-muted);
    font-size: var(--text-sm, 0.875rem);
}

.koda-monde__pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8, 32px);
    text-align: left;
}

.koda-monde__pricing-features li {
    padding: var(--space-2, 8px) 0;
    border-bottom: 1px solid var(--koda-border);
    color: var(--koda-text-secondary);
    font-size: var(--text-sm, 0.875rem);
}

.koda-monde__pricing-features li::before {
    content: '\2726\0020';
    color: var(--monde-primary);
}

@media (max-width: 768px) {
    .koda-monde__pricing-card--featured {
        transform: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   19. BADGES DE TIER
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__tier-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5, 6px);
    padding: var(--space-1, 4px) var(--space-3, 12px);
    border-radius: var(--radius-full, 9999px);
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, 0.025em);
    border: 1px solid var(--koda-border);
    background: var(--koda-panel-elevated, #1a1a1a);
    color: var(--koda-text-secondary);
}

.koda-monde__tier-badge--initie {
    border-color: var(--koda-text-muted);
    color: var(--koda-text-muted);
}

.koda-monde__tier-badge--adepte {
    border-color: var(--monde-border);
    color: var(--monde-primary);
    background: var(--monde-subtle);
}

.koda-monde__tier-badge--gardien {
    border-color: var(--koda-gold-border);
    color: var(--koda-gold);
    background: var(--koda-gold-subtle);
}

.koda-monde__tier-badge--archiviste {
    border-color: var(--koda-gold);
    color: var(--koda-text-inverse);
    background: var(--koda-gold);
}


/* ═══════════════════════════════════════════════════════════════════════════
   20. CALLOUT BOX
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__callout {
    padding: var(--space-6, 24px);
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--koda-border);
    background: var(--koda-panel-elevated, #1a1a1a);
}

.koda-monde__callout--info {
    border-color: var(--koda-info-glow);
    background: var(--koda-info-subtle);
}

.koda-monde__callout--warning {
    border-color: var(--koda-warning-glow);
    background: var(--koda-warning-subtle);
}

.koda-monde__callout--tip {
    border-color: var(--monde-border);
    background: var(--monde-subtle);
}


/* ═══════════════════════════════════════════════════════════════════════════
   21. SPLIT SECTION + MONITEUR MOCKUP
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__split-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 24px);
}

.koda-monde__split-visual {
    display: flex;
    justify-content: center;
}

.koda-monde__moniteur-mockup {
    width: 100%;
    max-width: 600px;
    background: var(--koda-panel-elevated, #1a1a1a);
    border: 1px solid var(--koda-border);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-xl, 0 24px 64px rgba(0, 0, 0, 0.6));
}

.koda-monde__moniteur-header {
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--koda-panel, #121212);
    border-bottom: 1px solid var(--koda-border);
    font-size: var(--text-sm, 0.875rem);
    color: var(--koda-text-secondary);
}

.koda-monde__moniteur-dots {
    display: flex;
    gap: 6px;
}

.koda-monde__moniteur-dots span {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full, 9999px);
    background: var(--koda-border);
}

.koda-monde__moniteur-dots span:first-child  { background: var(--koda-danger); }
.koda-monde__moniteur-dots span:nth-child(2) { background: var(--koda-warning); }
.koda-monde__moniteur-dots span:last-child   { background: var(--koda-success); }

.koda-monde__moniteur-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4, 16px);
    padding: var(--space-6, 24px);
}

.koda-monde__moniteur-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px);
    background: var(--koda-panel, #121212);
    border-radius: var(--radius-md, 8px);
    text-align: center;
}

.koda-monde__widget-icon {
    font-size: var(--text-2xl, 1.5rem);
}

.koda-monde__widget-label {
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    color: var(--koda-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider, 0.05em);
}

.koda-monde__widget-value {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
    color: var(--monde-primary);
}

@media (max-width: 768px) {
    .koda-monde__moniteur-body {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   22. BLOC EDITORIAL
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__editorial {
    max-width: var(--shell-prose-max);
    margin: 0 auto;
    font-size: var(--text-lg, 1.125rem);
    line-height: 1.8;
    color: var(--koda-text-secondary);
}

.koda-monde__editorial strong {
    color: var(--monde-primary);
    font-weight: var(--font-semibold, 600);
}

.koda-monde__editorial > * + * {
    margin-top: var(--space-6, 24px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   23. BLOC DE PREUVE / CITATION
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__proof {
    border-left: 3px solid var(--monde-primary);
    padding-left: var(--space-6, 24px);
    margin: var(--space-8, 32px) 0;
}

.koda-monde__proof-quote {
    font-family: var(--font-body, 'Cormorant Garamond', serif);
    font-size: var(--text-lg, 1.125rem);
    font-style: italic;
    color: var(--koda-text-primary);
    line-height: var(--leading-relaxed, 1.625);
    margin: 0 0 var(--space-3, 12px);
}

.koda-monde__proof-author {
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
    color: var(--koda-text-secondary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   24. TABLEAU COMPARATIF
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__comparison {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, 0.875rem);
}

.koda-monde__comparison th {
    background: var(--koda-panel-elevated, #1a1a1a);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    text-align: left;
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-weight: var(--font-semibold, 600);
    color: var(--koda-text-primary);
    border-bottom: 2px solid var(--monde-primary);
}

.koda-monde__comparison td {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-bottom: 1px solid var(--koda-border);
    color: var(--koda-text-secondary);
}

.koda-monde__comparison .check {
    color: var(--monde-primary);
    font-weight: var(--font-bold, 700);
}

.koda-monde__comparison .cross {
    color: var(--koda-text-disabled);
}

@media (max-width: 768px) {
    .koda-monde__comparison {
        font-size: var(--text-xs, 0.75rem);
    }
    .koda-monde__comparison th,
    .koda-monde__comparison td {
        padding: var(--space-2, 8px) var(--space-3, 12px);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   25. LOCKED CONTENT OVERLAY
   ═══════════════════════════════════════════════════════════════════════════
   Utilise par les species-card--locked et les sections verrouilees.
   TRANSITION ALIAS: .species-card--locked still required by template.php
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__locked,
.species-card--locked {
    position: relative;
    pointer-events: none;
}

.koda-monde__locked > *:not(.koda-monde__locked-overlay):not(.species-card__lock-overlay),
.species-card--locked > *:not(.species-card__lock-overlay) {
    filter: blur(4px) grayscale(0.4);
}

.koda-monde__locked-overlay,
.species-card__lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--koda-overlay);
    z-index: 5;
    pointer-events: all;
    gap: var(--space-2, 8px);
    border-radius: inherit;
}

.koda-monde__locked-icon,
.species-card__lock-icon {
    font-size: var(--text-3xl, 2rem);
}

.koda-monde__locked-text,
.species-card__lock-text {
    font-family: var(--font-rune, 'Cinzel', serif);
    font-size: var(--text-sm, 0.875rem);
    color: var(--koda-gold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider, 0.05em);
}

.koda-monde__locked-link,
.species-card__lock-link {
    padding: var(--space-2, 8px) var(--space-6, 24px);
    background: var(--koda-gold-subtle);
    border: 1px solid var(--koda-gold-border);
    border-radius: var(--radius-sm, 4px);
    color: var(--koda-gold);
    font-size: var(--text-sm, 0.875rem);
    text-decoration: none;
    transition: background var(--transition-fast, 150ms ease);
}

.koda-monde__locked-link:hover,
.species-card__lock-link:hover {
    background: var(--koda-gold-glow);
}


/* ═══════════════════════════════════════════════════════════════════════════
   26. CTA FINAL
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__cta-final {
    text-align: center;
    padding-top: calc(var(--shell-section-gap) * 1.5);
    padding-bottom: calc(var(--shell-section-gap) * 1.5);
}

.koda-monde__cta-content {
    max-width: 600px;
    margin: 0 auto;
}

.koda-monde__cta-icon {
    display: block;
    font-size: var(--text-6xl, 3.75rem);
    margin-bottom: var(--space-6, 24px);
    animation: koda-monde-float 3s var(--ease-in-out, ease) infinite;
}

.koda-monde__cta-title {
    font-family: var(--font-rune, 'Cinzel', serif);
    font-size: clamp(1.75rem, 5vw, var(--text-4xl, 2.5rem));
    font-weight: var(--font-bold, 700);
    margin: 0 0 var(--space-4, 16px);
    background: linear-gradient(135deg, var(--koda-text-primary) 0%, var(--monde-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.koda-monde__cta-desc {
    font-size: var(--text-lg, 1.125rem);
    color: var(--koda-text-secondary);
    margin: 0 0 var(--space-8, 32px);
    line-height: var(--leading-relaxed, 1.625);
}

.koda-monde__cta-buttons {
    display: flex;
    gap: var(--space-4, 16px);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-6, 24px);
}

.koda-monde__cta-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--koda-text-muted);
    margin: 0;
}

.koda-monde__cta-check {
    color: var(--koda-success);
}

@media (max-width: 768px) {
    .koda-monde__cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .koda-monde__cta-buttons > * {
        width: 100%;
        max-width: 300px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   27. ORDER SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__order-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-12, 48px);
    align-items: center;
    padding: var(--space-12, 48px);
    background: var(--koda-overlay);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--monde-border);
    border-left: 4px solid var(--monde-primary);
    border-radius: var(--radius-lg, 12px);
}

.koda-monde__order-token {
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px var(--monde-glow));
}

.koda-monde__order-name {
    font-family: var(--font-rune, 'Cinzel', serif);
    font-size: clamp(1.8rem, 4vw, var(--text-4xl, 2.5rem));
    color: var(--monde-primary);
    margin: 0 0 var(--space-2, 8px);
}

.koda-monde__order-motto {
    font-family: var(--font-body, 'Cormorant Garamond', serif);
    font-style: italic;
    color: var(--koda-text-secondary);
    font-size: var(--text-lg, 1.125rem);
    margin: 0 0 var(--space-6, 24px);
}

.koda-monde__order-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6, 24px);
    margin-bottom: var(--space-8, 32px);
}

.koda-monde__order-stat {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    color: var(--koda-text-secondary);
}

.koda-monde__order-stat-icon {
    font-size: var(--text-xl, 1.25rem);
}

.koda-monde__order-status--teaser {
    display: inline-block;
    padding: var(--space-3, 12px) var(--space-6, 24px);
    background: var(--koda-gold-subtle);
    border: 1px dashed var(--koda-gold-border);
    border-radius: var(--radius-md, 8px);
    color: var(--koda-gold);
    font-style: italic;
}

.koda-monde__order-status--member {
    color: var(--monde-primary);
    font-weight: var(--font-semibold, 600);
}

@media (max-width: 768px) {
    .koda-monde__order-inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: var(--space-8, 32px) var(--space-6, 24px);
    }
    .koda-monde__order-blason {
        display: flex;
        justify-content: center;
    }
    .koda-monde__order-stats {
        justify-content: center;
    }
    .koda-monde__order-cta {
        text-align: center;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   28. QUETES / MISSIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__quetes {
    background: var(--monde-gradient);
    max-width: none;
}

.koda-monde__quetes-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    max-width: 600px;
    margin: 0 auto;
}

.koda-monde__quete {
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
    padding: var(--space-4, 16px) var(--space-5, 20px);
    background: var(--koda-panel-elevated, #1a1a1a);
    border: 1px solid var(--koda-border);
    border-radius: var(--radius-md, 8px);
    transition: all var(--transition-fast, 150ms ease);
}

.koda-monde__quete:hover {
    border-color: var(--monde-border);
    transform: translateX(4px);
}

.koda-monde__quete-check {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid var(--koda-border);
    border-radius: var(--radius-full, 9999px);
    color: var(--koda-text-muted);
    font-size: var(--text-sm, 0.875rem);
}

.koda-monde__quete-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.koda-monde__quete-title {
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-medium, 500);
    color: var(--koda-text-primary);
}

.koda-monde__quete-type {
    font-family: var(--font-tech, 'Montserrat', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    color: var(--koda-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider, 0.05em);
}

.koda-monde__quete-xp {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: var(--monde-subtle);
    border-radius: var(--radius-sm, 4px);
    color: var(--monde-primary);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-weight: var(--font-bold, 700);
    line-height: var(--leading-none, 1);
}

.koda-monde__quete-xp small {
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-medium, 500);
    opacity: 0.8;
}

/* ── Type variants ── */
.koda-monde__quete--initiation .koda-monde__quete-check  { border-color: var(--koda-success); }
.koda-monde__quete--progression .koda-monde__quete-check { border-color: var(--koda-warning); }
.koda-monde__quete--expert .koda-monde__quete-check      { border-color: var(--monde-primary); }

@media (max-width: 480px) {
    .koda-monde__quete {
        flex-wrap: wrap;
    }
    .koda-monde__quete-xp {
        margin-left: auto;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   29. GRIMOIRE PREVIEW
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde__grimoire-preview {
    padding: var(--shell-section-gap) var(--shell-content-padding);
}

.koda-monde__grimoire-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6, 24px);
    margin-bottom: var(--space-12, 48px);
}

.koda-monde__grimoire-step {
    padding: var(--space-8, 32px);
    background: var(--monde-subtle);
    border-left: 3px solid var(--monde-primary);
    border-radius: var(--radius-sm, 4px);
}

.koda-monde__grimoire-step-number {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: var(--text-4xl, 2.5rem);
    color: var(--monde-primary);
    font-weight: var(--font-bold, 700);
    margin-bottom: var(--space-4, 16px);
    line-height: var(--leading-none, 1);
}

.koda-monde__grimoire-step-title {
    font-family: var(--font-rune, 'Cinzel', serif);
    font-size: var(--text-xl, 1.25rem);
    margin-bottom: var(--space-3, 12px);
    color: var(--koda-text-primary);
}

.koda-monde__grimoire-step-desc {
    font-size: var(--text-base, 1rem);
    line-height: var(--leading-relaxed, 1.625);
    color: var(--koda-text-secondary);
}

.koda-monde__grimoire-screenshot-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: var(--koda-panel, #121212);
    border: 2px dashed var(--monde-border);
    border-radius: var(--radius-lg, 12px);
    color: var(--koda-text-muted);
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-10, 40px);
}

.koda-monde__grimoire-cta {
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════════════
   30. KEYFRAME SUPPLEMENTAIRE
   ═══════════════════════════════════════════════════════════════════════════
   logoGlow : parametrable via --monde-glow (unifie les 3 variantes monde).
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes koda-monde-logoGlow {
    0%, 100% { filter: drop-shadow(0 0 15px var(--monde-glow)) drop-shadow(0 0 30px var(--monde-glow)); }
    50%      { filter: drop-shadow(0 0 25px var(--monde-glow)) drop-shadow(0 0 50px var(--monde-glow)); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   31. VARIANTES PAR MONDE
   ═══════════════════════════════════════════════════════════════════════════
   UNIQUEMENT des surcharges de variables --monde-*.
   Aucun selecteur de composant ici.
   Les vraies couleurs sont dans koda-design-tokens.css — ces blocs ne font
   que connecter les tokens au systeme --monde-*.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TERRA / OUROBOROS — Foret mystique ── */
.koda-monde--terra {
    --monde-primary: var(--koda-terra-primary);
    --monde-secondary: var(--koda-terra-secondary);
    --monde-dark: var(--koda-terra-dark);
    --monde-glow: var(--koda-terra-glow);
    --monde-subtle: var(--koda-terra-subtle);
    --monde-border: var(--koda-terra-border);
    --monde-gradient: linear-gradient(135deg, #0a1f0a 0%, var(--koda-void) 100%);
}

/* ── AQUA / ABYSSAE — Profondeurs oceaniques ── */
.koda-monde--aqua {
    --monde-primary: var(--koda-aqua-primary);
    --monde-secondary: var(--koda-aqua-secondary);
    --monde-dark: var(--koda-aqua-dark);
    --monde-glow: var(--koda-aqua-glow);
    --monde-subtle: var(--koda-aqua-subtle);
    --monde-border: var(--koda-aqua-border);
    --monde-gradient: linear-gradient(135deg, #0a0f1f 0%, var(--koda-void) 100%);
}

/* ── LUPUS — Meute automnale ── */
.koda-monde--lupus {
    --monde-primary: var(--koda-lupus-primary);
    --monde-secondary: var(--koda-lupus-secondary);
    --monde-dark: var(--koda-lupus-dark);
    --monde-glow: var(--koda-lupus-glow);
    --monde-subtle: var(--koda-lupus-subtle);
    --monde-border: var(--koda-lupus-border);
    --monde-gradient: linear-gradient(135deg, #1f0a0a 0%, var(--koda-void) 100%);
}

/* ── TANAE — Terrier chaleureux ── */
.koda-monde--tanae {
    --monde-primary: var(--koda-tanae-primary);
    --monde-secondary: var(--koda-tanae-secondary);
    --monde-dark: var(--koda-tanae-dark);
    --monde-glow: var(--koda-tanae-glow);
    --monde-subtle: var(--koda-tanae-subtle);
    --monde-border: var(--koda-tanae-border);
    --monde-gradient: linear-gradient(135deg, #1f1a0a 0%, var(--koda-void) 100%);
}


/* ═══════════════════════════════════════════════════════════════════════════
   FIN DU SHELL V2 — FOUNDATIONS + COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════
   Migration restante (micro-themes individuels, PAS dans ce fichier) :
   - Composants hero decores (lightning, bubbles, leaves, vines, etc.)
   - Terminal panels theme-specifiques (terminal-welcome, rapture-terminal, lodge-terminal)
   - Env/depth/territory monitor cells
   - Section-specific decorations (scanlines, totem frames, deco frames, etc.)
   - @keyframes monde-specifiques (sporeFloat, bubbleRise, leafFall, etc.)

   Alias de transition encore necessaires (hooks JS W0bis) :
   - .terra-section        → koda-monde-aqua.js L57, koda-monde-lupus.js L56
   - .terra-nav            → idem
   - .terra-quest          → idem
   - .species-card         → idem
   - .species-card--locked → koda-monde-template.php
   - .koda-monde--terra    → koda-monde-terra.js root selector
   - .koda-monde--aqua     → koda-monde-aqua.js root selector
   - .koda-monde--lupus    → koda-monde-lupus.js root selector
   ═══════════════════════════════════════════════════════════════════════════ */