/**
 * ═══════════════════════════════════════════════════════════════════════
 * KODA — Monde Layout Fix
 * Correctif universel pour le centrage, l'espacement et le responsive
 * des pages Monde (Terra, Aqua, Lupus)
 *
 * CHARGEMENT : Ce fichier DOIT être chargé APRÈS tous les CSS monde-
 * spécifiques (koda-monde-terra.css, koda-monde-aqua.css, etc.)
 * pour que les overrides de spécificité fonctionnent.
 *
 * PROBLÈMES RÉSOLUS :
 *   1. Reset wildcard `margin:0` qui détruit le centrage auto
 *   2. Double breakout (100vw + left:50%/transform) = décalage scrollbar
 *   3. Absence d'espacement inter-sections
 *   4. Overflow horizontal sur mobile
 *   5. Incohérence entre systèmes de classes template vs thémé
 *
 * @package KODA_Core
 * @since 1.1.0
 * ═══════════════════════════════════════════════════════════════════════
 */


/* ══════════════════════════════════════════════════════════════════════
   0. VARIABLES DE LAYOUT (override safe)
   ══════════════════════════════════════════════════════════════════════ */

.koda-monde {
    --koda-section-gap: clamp(3rem, 8vw, 6rem);
    --koda-content-max: 1200px;
    --koda-content-pad: clamp(1.25rem, 5vw, 2.5rem);
}


/* ══════════════════════════════════════════════════════════════════════
   1. CONTENEUR PRINCIPAL — anti-overflow
   ══════════════════════════════════════════════════════════════════════ */

.koda-monde {
    overflow-x: clip;
}

.koda-monde__content {
    overflow-x: clip;       /* clip, pas hidden — évite de créer un scroll context */
    width: 100%;
}


/* ══════════════════════════════════════════════════════════════════════
   1b. HERO — neutralise le breakout et corrige l'overflow
   Le hero des CSS monde utilise left:50%/transform qui crée un décalage
   de layout (overflow fantôme) même si visuellement c'est un no-op.
   overflow:hidden → overflow:clip pour éviter un scroll context.
   ══════════════════════════════════════════════════════════════════════ */

.koda-monde .koda-monde__hero {
    left: auto;
    transform: none;
    overflow: clip;
    width: 100%;
    box-sizing: border-box;
}

/* Le hero-media et overlay doivent couvrir tout le hero (immunisé au wildcard reset) */
.koda-monde .koda-monde__hero-media,
.koda-monde .koda-monde__hero-overlay {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
}

/* Les control-panels (env monitor + terminal) doivent rester en bas du hero */
.koda-monde .hero__control-panels {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    padding-left: var(--koda-content-pad);
    padding-right: var(--koda-content-pad);
}

/* Le contenu flex du hero ne doit pas chevaucher les control-panels */
.koda-monde .hero__cta {
    margin-bottom: clamp(200px, 30vh, 320px);
}

/* Scroll indicator sous les control-panels */
.koda-monde .koda-monde__scroll-indicator {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}


/* ══════════════════════════════════════════════════════════════════════
   2. SECTIONS TEMPLATE (.koda-monde__section)
   Force le centrage MALGRÉ le wildcard reset des CSS monde.
   Spécificité : .koda-monde .koda-monde__section = 0,2,0
   Bat le wildcard : .koda-monde--terra * = 0,1,0
   ══════════════════════════════════════════════════════════════════════ */

.koda-monde .koda-monde__section {
    max-width: var(--koda-content-max);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: var(--koda-content-pad);
    padding-right: var(--koda-content-pad);
    padding-top: var(--koda-section-gap);
    padding-bottom: var(--koda-section-gap);
    box-sizing: border-box;
    width: 100%;
}

/* Première section après le hero : espacement réduit */
.koda-monde__hero + .koda-user-badge-wrap + .koda-monde__section,
.koda-monde__hero + .koda-monde__section,
.koda-monde .hero + .koda-user-badge-wrap + .koda-monde__section,
.koda-monde .hero + .koda-monde__section {
    padding-top: clamp(2rem, 5vw, 4rem);
}


/* ══════════════════════════════════════════════════════════════════════
   3. SECTIONS THÉMÉES (.terra-section, .pillars, .quests, etc.)
   Annule le breakout left:50%/transform et unifie le centrage.
   ══════════════════════════════════════════════════════════════════════ */

/* --- Sections full-width avec centrage par padding (déjà gérées par shell) --- */
.koda-monde .terra-section {
    margin-top: var(--koda-section-gap);
    margin-bottom: var(--koda-section-gap);
}

/* --- Sections qui utilisaient le breakout left/transform : on le neutralise --- */
.koda-monde .pillars,
.koda-monde .quests,
.koda-monde .journey-path,
.koda-monde .biome-explorer,
.koda-monde .path-section,
.koda-monde .codex-section,
.koda-monde .tools-section,
.koda-monde .backpack-section,
.koda-monde .reef-monitor,
.koda-monde .dive-station,
.koda-monde .lodge-section,
.koda-monde .territory-section {
    left: 0;
    transform: none;
    width: 100%;
    box-sizing: border-box;
    padding-left: var(--koda-content-pad);
    padding-right: var(--koda-content-pad);
    margin-top: 0;
    margin-bottom: 0;
}

/* Contenu intérieur centré à 1200px */
.koda-monde .pillars__grid,
.koda-monde .quests__timeline,
.koda-monde .journey-path__inner,
.koda-monde .biome-explorer__grid,
.koda-monde .codex-section__inner,
.koda-monde .backpack-section__inner,
.koda-monde .reef-monitor__inner,
.koda-monde .dive-station__inner,
.koda-monde .lodge-section__inner,
.koda-monde .territory-section__inner {
    max-width: var(--koda-content-max);
    margin-left: auto;
    margin-right: auto;
}


/* ══════════════════════════════════════════════════════════════════════
   4. ESPACEMENT VERTICAL ENTRE TOUTES LES SECTIONS
   Utilise le sélecteur adjacent pour l'espacement, pas des marges
   qui seraient détruites par le wildcard reset.
   ══════════════════════════════════════════════════════════════════════ */

/* Espacement entre toutes les sections successives dans .koda-monde__content */
.koda-monde__content > section + section,
.koda-monde__content > .koda-monde__section + .koda-monde__section,
.koda-monde__content > .koda-user-badge-wrap + section,
.koda-monde__content > section + .koda-monde__section,
.koda-monde__content > .koda-monde__section + section {
    margin-top: var(--koda-section-gap);
}

/* Le user badge ne compte pas comme espacement */
.koda-monde__content > .koda-user-badge-wrap {
    margin-top: 0;
    margin-bottom: 0;
}


/* ══════════════════════════════════════════════════════════════════════
   5. ANTIDOTE WILDCARD — restaure le spacing des éléments template
   Les CSS monde font `.koda-monde--terra * { margin:0; padding:0 }`
   (spécificité 0,1,0). Ici on restaure les valeurs critiques de
   koda-monde-template.css à spécificité 0,2,0 pour les battre.
   ══════════════════════════════════════════════════════════════════════ */

/* --- Section headers --- */
.koda-monde .koda-monde__section-header,
.koda-monde .section-header,
.koda-monde .terra-section__header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.koda-monde .koda-monde__section-badge {
    padding: 0.375rem 1rem;
    margin-bottom: 1rem;
}

.koda-monde .koda-monde__section-title {
    margin: 0 0 0.75rem;
}

.koda-monde .koda-monde__section-desc,
.koda-monde .section-header p {
    max-width: 600px;
    margin: 0 auto;
}

/* --- Section Ordre --- */
.koda-monde .koda-monde__order-inner {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--koda-content-max);
    padding: 3rem;
}

.koda-monde .koda-monde__order-name {
    margin: 0 0 0.5rem;
}

.koda-monde .koda-monde__order-motto {
    margin: 0 0 1.5rem;
}

.koda-monde .koda-monde__order-stats {
    margin-bottom: 2rem;
}

/* --- Section Grimoire Preview --- */
.koda-monde .koda-monde__grimoire-steps {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--koda-content-max);
    margin-bottom: 3rem;
}

.koda-monde .koda-monde__grimoire-step {
    padding: 2rem;
}

.koda-monde .koda-monde__grimoire-step-number {
    margin-bottom: 1rem;
}

.koda-monde .koda-monde__grimoire-step-title {
    margin-bottom: 0.75rem;
}

.koda-monde .koda-monde__grimoire-screenshot {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--koda-content-max);
    margin-bottom: 2.5rem;
}

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

/* --- Section Codex --- */
.koda-monde .koda-monde__codex-grid {
    margin-bottom: 2rem;
}

.koda-monde .koda-monde__codex-item {
    padding: 2rem 3rem;
}

.koda-monde .koda-monde__codex-icon {
    margin-bottom: 0.5rem;
}

.koda-monde .koda-monde__codex-cta {
    text-align: center;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* --- Section Piliers --- */
.koda-monde .koda-monde__pilier {
    padding: 2.5rem 2rem;
}

.koda-monde .koda-monde__pilier-icon {
    margin-bottom: 1.5rem;
}

.koda-monde .koda-monde__pilier-title {
    margin: 0 0 0.75rem;
}

/* --- Section Arsenal / Outils --- */
.koda-monde .koda-monde__arsenal-tool {
    padding: 1.5rem;
}

.koda-monde .koda-monde__arsenal-title {
    margin: 0 0 0.25rem;
}

/* --- Section Pricing --- */
.koda-monde .koda-monde__pricing-grid {
    margin: 0 auto;
    max-width: 960px;
}

.koda-monde .koda-monde__pricing-card {
    padding: 2.5rem 2rem;
}

.koda-monde .koda-monde__pricing-tier {
    margin-bottom: 1rem;
}

.koda-monde .koda-monde__pricing-features {
    margin: 1.5rem 0 2rem;
    padding: 0;
}

.koda-monde .koda-monde__pricing-features li {
    padding: 0.5rem 0;
}

/* --- CTA Final --- */
.koda-monde .koda-monde__cta-title {
    margin: 0 0 1rem;
}

.koda-monde .koda-monde__cta-desc {
    margin: 0 0 2rem;
}

.koda-monde .koda-monde__cta-buttons {
    margin-bottom: 1.5rem;
}

/* --- Boutons CTA — centrage dans les sections --- */
.koda-monde .koda-monde__grimoire-cta,
.koda-monde .koda-monde__codex-cta,
.koda-monde .terra-cta {
    text-align: center;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* --- Badge + Title communs (typiquement h2, p dans les sections) --- */
.koda-monde .koda-monde__title {
    margin: 0 0 1rem;
}

.koda-monde .koda-monde__subtitle {
    margin: 0 0 2.5rem;
}

.koda-monde .koda-monde__badge {
    margin-bottom: 1.5rem;
    padding: 0.5rem 1.5rem;
}


/* ══════════════════════════════════════════════════════════════════════
   11. GLASSMORPHISM — fix position relative du wildcard
   Le shell fait `.koda-glass * { position: relative; }` ce qui peut
   casser les ::before/::after positionnés en absolute.
   ══════════════════════════════════════════════════════════════════════ */

.koda-monde .koda-glass *::before,
.koda-monde .koda-glass *::after {
    position: absolute;
}


/* ══════════════════════════════════════════════════════════════════════
   12. RESPONSIVE — TABLETTE (≤ 1024px)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .koda-monde {
        --koda-section-gap: clamp(2.5rem, 7vw, 5rem);
        --koda-content-pad: clamp(1rem, 4vw, 2rem);
    }

    /* Control panels : flux normal sur tablette/mobile
       Terra les passe en relative à ≤992px, mais notre règle desktop
       (spécificité 0,2,0, chargée APRÈS) les force en absolute.
       On restaure le flux naturel ici pour éviter le chevauchement. */
    .koda-monde .hero__control-panels {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding-left: 0;
        padding-right: 0;
    }

    /* Le CTA n'a plus besoin du gros margin-bottom — les panels sont en flux */
    .koda-monde .hero__cta {
        margin-bottom: 1.5rem;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   13. RESPONSIVE — MOBILE (≤ 768px)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .koda-monde {
        --koda-section-gap: clamp(2rem, 6vw, 3.5rem);
        --koda-content-pad: 16px;
    }

    /* Le CTA suit le flux naturel — espacement réduit avant les control panels */
    .koda-monde .hero__cta {
        margin-bottom: 1rem;
    }

    /* Control panels : pleine largeur sur mobile */
    .koda-monde .hero__control-panels {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Empêcher tout débordement horizontal */
    .koda-monde,
    .koda-monde__content,
    .koda-monde__content > * {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Toutes les sections template : contraindre au viewport */
    .koda-monde .koda-monde__section {
        max-width: 100%;
        overflow: hidden;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Les sections thémées ne doivent pas dépasser */
    .koda-monde .pillars,
    .koda-monde .quests,
    .koda-monde .terra-section,
    .koda-monde .codex-section,
    .koda-monde .tools-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Grids internes : une seule colonne */
    .koda-monde .pillars__grid,
    .koda-monde .koda-monde__pricing-grid,
    .koda-monde .koda-monde__piliers-grid,
    .koda-monde .koda-monde__codex-grid,
    .koda-monde .koda-monde__arsenal-grid,
    .koda-monde .koda-monde__grimoire-steps {
        grid-template-columns: 1fr;
    }

    /* Flex grids : passage en colonne */
    .koda-monde .koda-monde__codex-grid {
        flex-direction: column;
        align-items: stretch;
    }

    /* Les cartes prennent toute la largeur */
    .koda-monde .koda-monde__pricing-card,
    .koda-monde .pillar-card,
    .koda-monde .koda-monde__pilier,
    .koda-monde .koda-monde__grimoire-step,
    .koda-monde .koda-monde__codex-item,
    .koda-monde .koda-monde__arsenal-tool {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Section Ordre : passage en colonne + anti-débordement */
    .koda-monde .koda-monde__order-inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 1.5rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .koda-monde .koda-monde__order-blason {
        display: flex;
        justify-content: center;
    }

    .koda-monde .koda-monde__order-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    .koda-monde .koda-monde__order-name {
        font-size: clamp(1.4rem, 5vw, 2rem);
        word-break: break-word;
    }

    .koda-monde .koda-monde__order-cta .koda-btn {
        white-space: normal;
        word-break: break-word;
        max-width: 100%;
        text-align: center;
    }

    /* Boutons : tous doivent wrapper le texte sur mobile */
    .koda-monde .koda-btn {
        white-space: normal;
        max-width: 100%;
        word-break: break-word;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   14. RESPONSIVE — PETIT MOBILE (≤ 480px)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .koda-monde {
        --koda-content-pad: 12px;
        --koda-section-gap: 2rem;
    }

    .koda-monde .koda-monde__section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .koda-monde .terra-section,
    .koda-monde .pillars,
    .koda-monde .quests {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   15. FIX ZOOM (200%) — WCAG 1.4.4
   À 200% de zoom, les sections ne doivent pas déborder.
   ══════════════════════════════════════════════════════════════════════ */

@media (min-resolution: 192dpi) {
    .koda-monde .koda-monde__section,
    .koda-monde .terra-section,
    .koda-monde .pillars,
    .koda-monde .quests {
        max-width: 100%;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   16. PRINT — ne pas casser l'impression
   ══════════════════════════════════════════════════════════════════════ */

@media print {
    .koda-monde {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        overflow: visible;
    }

    .koda-monde .koda-monde__section,
    .koda-monde .terra-section,
    .koda-monde .pillars,
    .koda-monde .quests {
        left: 0;
        transform: none;
        max-width: 100%;
        padding: 1rem;
    }
}