/*
Theme Name: FreedomUnity - UniMultivers
Theme URI: https://freedomunity.fr
Author: Le Fondateur & Son IA 馃鈥嶁檧锔�
Description: Un th猫me organique, quantique et alchimique.
Version: 1.0.3
Text Domain: freedomunity
*/

/* ==========================================================================
   1. LES VARIABLES ALCHIMIQUES (L'ADN des couleurs)
   ========================================================================== */
:root {
    --phi: 1.618;
    --base-spacing: 1rem;
    --spacing-sm: calc(var(--base-spacing) / var(--phi));
    --spacing-md: calc(var(--base-spacing) * var(--phi));
    --spacing-lg: calc(var(--spacing-md) * var(--phi));
    
    --color-void: #0a0a0f;
    --color-stardust: #e0d8c3;
    --color-moss: #2d4a22;
    --color-gold: #d4af37;
    --color-mycelium: #f4f0ec;
    --breath-duration: 10s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--color-void);
    color: var(--color-stardust);
    font-family: 'Georgia', serif;
    line-height: var(--phi);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.mycelium-bg {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(rgba(244, 240, 236, 0.05) 1px, transparent 1px);
    background-size: calc(20px * var(--phi)) calc(20px * var(--phi));
    z-index: 1;
    opacity: 0.5;
    pointer-events: none;
}

/* ==========================================================================
   2. LE NEXUS (Accueil et Portail Web3)
   ========================================================================== */
.nexus-container {
    display: flex; justify-content: center; align-items: center;
    flex-grow: 1; position: relative; z-index: 2; height: 100vh; overflow: hidden;
}

@keyframes palpitation {
    0% { transform: scale(0.95); box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); }
    50% { transform: scale(1.05); box-shadow: 0 0 60px rgba(212, 175, 55, 0.6); }
    100% { transform: scale(0.95); box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); }
}

.sacred-heart {
    width: calc(100px * var(--phi)); height: calc(100px * var(--phi));
    background: radial-gradient(circle, var(--color-gold) 0%, var(--color-moss) 100%);
    border-radius: 50%; animation: palpitation var(--breath-duration) ease-in-out infinite;
    display: flex; justify-content: center; align-items: center; text-align: center;
    cursor: pointer; border: 2px solid rgba(244, 240, 236, 0.3); transition: all 0.5s ease;
    position: relative; z-index: 10;
}

.sacred-heart:hover {
    background: radial-gradient(circle, #fff 0%, var(--color-gold) 100%); color: var(--color-void);
}

.heart-text { font-size: 1rem; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }

.flower-of-life-menu { position: absolute; width: 100%; height: 100%; pointer-events: none; }

.sphere {
    position: absolute; top: 50%; left: 50%; width: 90px; height: 90px;
    margin-top: -45px; margin-left: -45px; background: rgba(10, 10, 15, 0.8);
    border: 1px solid var(--color-gold); border-radius: 50%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-decoration: none; color: var(--color-stardust); font-size: 0.8rem;
    opacity: 0; transform: scale(0); transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: auto;
}

.sphere:hover { background: var(--color-gold); color: var(--color-void); box-shadow: 0 0 20px var(--color-gold); }

.nexus-container.is-active .sphere-1 { opacity: 1; transform: scale(1) translate(0, -140px); transition-delay: 0.1s; }
.nexus-container.is-active .sphere-2 { opacity: 1; transform: scale(1) translate(-120px, 80px); transition-delay: 0.2s; }
.nexus-container.is-active .sphere-3 { opacity: 1; transform: scale(1) translate(120px, 80px); transition-delay: 0.3s; }

.sphere .dashicons { font-size: 24px; margin-bottom: 5px; }

/* ==========================================================================
   3. LES ARCHIVES (La Serre des Plantes & La Guilde)
   ========================================================================== */
.archive-header {
    position: relative; z-index: 10; padding: var(--spacing-md); text-align: center;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3); background: rgba(10, 10, 15, 0.9);
}

.back-to-nexus {
    position: absolute; left: var(--spacing-md); top: 50%; transform: translateY(-50%);
    color: var(--color-gold); text-decoration: none; font-size: 0.9rem; letter-spacing: 1px; transition: opacity 0.3s ease;
}
.back-to-nexus:hover { opacity: 0.7; }

.dimension-title { color: var(--color-stardust); font-size: 2rem; text-transform: uppercase; letter-spacing: 3px; font-weight: normal; }

.archive-container {
    position: relative; z-index: 2; padding: var(--spacing-lg); max-width: 1200px; margin: 0 auto; width: 100%;
}

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-md); }

.alchemical-card {
    background: rgba(45, 74, 34, 0.15); border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px; overflow: hidden; transition: all 0.4s ease;
}
.alchemical-card:hover { border-color: var(--color-gold); box-shadow: 0 0 20px rgba(212, 175, 55, 0.15); transform: translateY(-5px); }

.card-image img { width: 100%; height: 200px; object-fit: cover; border-bottom: 1px solid rgba(212, 175, 55, 0.2); }
.card-content { padding: var(--spacing-md); }
.card-content h2 { font-size: 1.2rem; margin-bottom: var(--spacing-sm); }
.card-content h2 a { color: var(--color-gold); text-decoration: none; }
.card-excerpt { font-size: 0.9rem; opacity: 0.8; }

/* ==========================================================================
   4. LE SANCTUAIRE (Page de Lecture d'un Article Unique)
   ========================================================================== */
.single-header {
    position: relative; z-index: 10; padding: var(--spacing-md);
    background: rgba(10, 10, 15, 0.9); border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.single-container {
    position: relative; z-index: 2; padding: var(--spacing-lg); max-width: 800px; margin: 0 auto; width: 100%;
}

.grimoire-page {
    background: rgba(45, 74, 34, 0.1); border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px; padding: var(--spacing-lg); box-shadow: 0 0 30px rgba(10, 10, 15, 0.8); backdrop-filter: blur(5px);
}

.sacred-title { color: var(--color-gold); font-size: 2.5rem; text-align: center; margin-bottom: var(--spacing-sm); letter-spacing: 2px; }

.alchemical-tags { text-align: center; margin-bottom: var(--spacing-md); }
.alchemical-tags .tag {
    display: inline-block; background: rgba(212, 175, 55, 0.15); color: var(--color-gold);
    padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; margin: 0 5px;
    border: 1px solid rgba(212, 175, 55, 0.4); text-transform: uppercase; letter-spacing: 1px;
}

.grimoire-image { width: 100%; margin-bottom: var(--spacing-md); border-radius: 8px; overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.2); }
.grimoire-image img { width: 100%; height: auto; display: block; }

.grimoire-content { font-size: 1.1rem; line-height: calc(var(--phi) * 1.1); color: var(--color-stardust); }
.grimoire-content h2, .grimoire-content h3 { color: var(--color-gold); margin-top: var(--spacing-md); margin-bottom: var(--spacing-sm); }
.grimoire-content p { margin-bottom: var(--spacing-sm); }