/* ═══════════════════════════════════════════════════════════════════════════
   KODA MONDE CANIN (LUPUS) — Accent & Surcharges
   ═══════════════════════════════════════════════════════════════════════════
   Depends on: koda-design-tokens.css, koda-monde-shell-v2.css
   Replaces:   koda-monde-lupus.css (3668L) + koda-monde-lupus-theme.css
               + koda-lupus-darkacademia.css

   NOMMAGE (resolu W11) :
     Slug public / URL     : "canin"
     Identifiant interne   : "lupus"  (GamiPress, user_meta, BDD)
     Classe CSS            : .koda-monde--lupus  (inchange)
     Handle CSS            : koda-monde-canin
     Label front           : "Canin"  (via lexicon)

   Ce fichier contient UNIQUEMENT :
   - Variables --monde-* pour Lupus
   - Hero overlay Lupus
   - Aliases de transition pour hooks JS (W0bis)
   - Surcharges visuelles minimales propres a Canin/Lupus

   Tout le layout, les composants et le responsive viennent du shell V2.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. VARIABLES MONDE — LUPUS / CANIN
   ═══════════════════════════════════════════════════════════════════════════
   Source : koda-design-tokens.css (:root --koda-lupus-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.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%);

    /* Hero overlay — meute automnale (simplifie W3) */
    --monde-hero-overlay: linear-gradient(
        180deg,
        rgba(26, 20, 16, 0.85) 0%,
        rgba(26, 20, 16, 0.4) 40%,
        rgba(26, 20, 16, 0.7) 100%
    );
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. ALIASES DE TRANSITION — HOOKS JS (W0bis)
   ═══════════════════════════════════════════════════════════════════════════
   koda-monde-lupus.js L56 cible :
     .species-card, .terra-section, .terra-quest, .terra-nav
   avec un IntersectionObserver pour ajouter .animate-in.

   koda-monde-lupus.js root :
     .koda-monde--lupus[data-instance]  (preserved above)
     #canin-datetime-{i}, #trail-temp-{i}, etc.  (IDs in template PHP)

   grimoire-lupus.js root :
     .koda-lupus-interface  (not in this CSS — lives in grimoire CSS)

   A SUPPRIMER apres W13 cleanup.
   ═══════════════════════════════════════════════════════════════════════════ */

.koda-monde--lupus .terra-section {
    /* No-op — layout handled by .koda-monde__section in shell V2 */
}

.koda-monde--lupus .terra-nav {
    /* No-op — layout handled by shell V2 section 2b */
}

.koda-monde--lupus .species-card {
    /* No-op — used as IntersectionObserver target only */
}

.koda-monde--lupus .terra-quest {
    /* No-op — used as IntersectionObserver target only */
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. SURCHARGES VISUELLES CANIN/LUPUS
   ═══════════════════════════════════════════════════════════════════════════
   Effets subtils propres a Canin/Lupus, sans recreer le theme Lodge.
   Palette chaude : rouge/brun + accents ambre.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fond du wrapper — teinte automnale ── */
.koda-monde--lupus {
    background: var(--monde-gradient);
}

/* ── Hero logo glow — rouge chaud ── */
.koda-monde--lupus .koda-monde__hero .hero__logo {
    animation: koda-monde-logoFloat 5s ease-in-out infinite;
    filter: drop-shadow(0 0 20px var(--monde-glow));
}

/* ── Cards — accent bar rouge ── */
.koda-monde--lupus .koda-monde__card::before {
    background: var(--koda-lupus-primary);
}

/* ── Stats numbers — rouge ── */
.koda-monde--lupus .koda-monde__stat-number {
    color: var(--koda-lupus-primary);
}

/* ── Pricing featured card — glow rouge ── */
.koda-monde--lupus .koda-monde__pricing-card--featured {
    border-color: var(--koda-lupus-primary);
    box-shadow: 0 0 30px var(--koda-lupus-glow);
}

/* ── Timeline dots — rouge ── */
.koda-monde--lupus .koda-monde__timeline-dot {
    background: var(--koda-lupus-primary);
    box-shadow: 0 0 8px var(--koda-lupus-glow);
}

/* ── Section elevated bg — brun automnal ── */
.koda-monde--lupus .koda-monde__section--elevated {
    background: linear-gradient(
        180deg,
        rgba(30, 20, 14, 0.4) 0%,
        rgba(26, 20, 16, 0.2) 100%
    );
}

/* ── Scroll indicator — rouge ── */
.koda-monde--lupus .koda-monde__scroll-line {
    background: linear-gradient(to bottom, var(--koda-lupus-primary), transparent);
}

/* ── Tool icons bg — subtle brun ── */
.koda-monde--lupus .koda-monde__tool-icon {
    background: var(--koda-lupus-subtle);
}

/* ── Moniteur mockup — border accent ── */
.koda-monde--lupus .koda-monde__moniteur-mockup {
    border-color: var(--koda-lupus-border);
}

/* ── CTA final — gradient automnal ── */
.koda-monde--lupus .koda-monde__final-cta {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(30, 20, 14, 0.3) 50%,
        transparent 100%
    );
}


/* ═══════════════════════════════════════════════════════════════════════════
   FIN — CANIN/LUPUS ACCENT
   ═══════════════════════════════════════════════════════════════════════════
   Lignes : ~170 (vs 3668 + theme + darkacademia dans le monolithe legacy)
   Reduction : ~95%
   ═══════════════════════════════════════════════════════════════════════════ */