/* ========================================
   🎨 STYLE-CARTES-COMMUNES.CSS - VERSION COMPLÈTE
   Avec compatibilité rétroactive
   ======================================== */

/* ========================================
   🔝 SYSTÈME 1 : BORDURE HAUT (monde-card)
   ======================================== */

.monde-card {
    background: white !important;
    border-radius: 16px !important;
    padding: 30px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    border-top: 5px solid #e2e8f0 !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    transition: all 0.3s ease !important;
    text-align: left !important;
    margin-bottom: 20px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Couleurs bordures hautes */
.monde-card.monde-spirituel { 
    border-top-color: #ffbd1b !important; /* Jaune/Orange */
}

.monde-card.monde-psychique { 
    border-top-color: #e91e63 !important; /* Rose */
}

.monde-card.monde-physique { 
    border-top-color: #00bcd4 !important; /* Bleu */
}

/* Hover monde-card */
.monde-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important; /* Réduite */
}

.monde-card.monde-spirituel:hover {
    box-shadow: 0 8px 20px rgba(255, 189, 27, 0.15) !important; /* Réduite */
}

.monde-card.monde-psychique:hover {
    box-shadow: 0 8px 20px rgba(233, 30, 99, 0.15) !important; /* Réduite */
}

.monde-card.monde-physique:hover {
    box-shadow: 0 8px 20px rgba(0, 188, 212, 0.15) !important; /* Réduite */
}
/* ========================================
   ⬅️ SYSTÈME 2 : BORDURE GAUCHE (content-card)
   ======================================== */

.content-card {
    background: white !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border-top: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-left: 4px solid #e2e8f0 !important;
    transition: all 0.3s ease !important;
    margin-bottom: 1.5rem !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Supprimer l'ancien système ::before pour éviter conflits */
.content-card::before {
    display: none !important;
}

/* Couleurs bordures gauches pour les 3 mondes */
.content-card.monde-spirituel {
    border-left-color: #ffbd1b !important; /* Jaune/Orange */
}

.content-card.monde-psychique {
    border-left-color: #e91e63 !important; /* Rose */
}

.content-card.monde-physique {
    border-left-color: #00bcd4 !important; /* Bleu */
}

/* Autres thèmes */
.content-card.monde-generique {
    border-left-color: #8b5cf6 !important; /* Violet */
}


/* Hover content-card */
.content-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
}

.content-card.monde-spirituel:hover {
    box-shadow: 0 8px 25px rgba(255, 189, 27, 0.2) !important;
}

.content-card.monde-psychique:hover {
    box-shadow: 0 8px 25px rgba(233, 30, 99, 0.2) !important;
}

.content-card.monde-physique:hover {
    box-shadow: 0 8px 25px rgba(0, 188, 212, 0.2) !important;
}






/* ========================================
   🎯 SYSTÈME 3 : BORDURE ACCOLADE GAUCHE
   ======================================== */

.content-card-brace {
    background: white !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    padding-left: 2.5rem !important; /* Plus d'espace pour l'accolade */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e2e8f0 !important;
    border-left: none !important; /* Supprimer bordure gauche normale */
    transition: all 0.3s ease !important;
    margin-bottom: 1.5rem !important;
    position: relative !important;
    overflow: visible !important; /* Important pour l'accolade */
}

/* Accolade CSS pur */
.content-card-brace::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 80%;
    background: transparent;
    border-left: 4px solid #8b5cf6;
    border-top: 4px solid #8b5cf6;
    border-bottom: 4px solid #8b5cf6;
    border-radius: 8px 0 0 8px;
    clip-path: polygon(
        0% 20%,
        80% 20%,
        100% 40%,
        100% 50%,
        100% 60%,
        80% 80%,
        0% 80%
    );
}

/* Couleurs pour les 3 mondes */
.content-card-brace.monde-spirituel::before {
    border-color: #ffbd1b !important;
}

.content-card-brace.monde-psychique::before {
    border-color: #e91e63 !important;
}

.content-card-brace.monde-physique::before {
    border-color: #00bcd4 !important;
}

/* Hover */
.content-card-brace:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
}

.content-card-brace:hover::before {
    transform: translateY(-50%) scale(1.05) !important;
}

/* ========================================
   📖 SYSTÈME 4 : FICHE TECHNIQUE - ENCADRÉ LIVRE
   ======================================== */

.content-card-book {
    background: #f8f6f0 !important;
    border: 1px solid #e2e8f0 !important; /* Couleur neutre par défaut */
    border-left: 8px solid #e2e8f0 !important; /* Sera écrasée par les couleurs spécifiques */
    border-radius: 0 !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    position: relative !important;
    font-family: 'Georgia', 'Times New Roman', serif !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; /* Ombre neutre par défaut */
    transition: all 0.3s ease !important;
}

/* Icône info en haut à droite */
.content-card-book::before {
    content: "ℹ️";
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.2rem;
}

/* Titre style livre */
.content-card-book .card-title,
.content-card-book h1,
.content-card-book h2,
.content-card-book h3 {
    color: #8b4513 !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    margin-bottom: 0.8rem !important;
    text-align: center !important;
    border-bottom: 1px dashed #e2e8f0 !important; /* Sera écrasée */
    padding-bottom: 0.5rem !important;
    font-family: 'Georgia', serif !important;
}

/* Contenu */
.content-card-book .card-content,
.content-card-book p {
    color: #2c3e50 !important;
    line-height: 1.6 !important;
    font-family: 'Georgia', serif !important;
}

/* ========================================
   🎨 COULEURS PAR MONDE (PRIORITÉ PLUS ÉLEVÉE)
   ======================================== */

/* Spirituel - Jaune/Doré */
.content-card-book.monde-spirituel {
    border-left-color: #ffbd1b !important;
    border-color: #ffbd1b !important;
    box-shadow: inset 0 0 20px rgba(255, 189, 27, 0.1), 0 2px 8px rgba(0,0,0,0.06) !important;
}

.content-card-book.monde-spirituel .card-title,
.content-card-book.monde-spirituel h1,
.content-card-book.monde-spirituel h2,
.content-card-book.monde-spirituel h3 {
    border-bottom-color: #ffbd1b !important;
}

/* Psychique - Rose */
.content-card-book.monde-psychique {
    border-left-color: #e91e63 !important;
    border-color: #e91e63 !important;
    box-shadow: inset 0 0 20px rgba(233, 30, 99, 0.1), 0 2px 8px rgba(0,0,0,0.06) !important;
}

.content-card-book.monde-psychique .card-title,
.content-card-book.monde-psychique h1,
.content-card-book.monde-psychique h2,
.content-card-book.monde-psychique h3 {
    border-bottom-color: #e91e63 !important;
}

/* Physique - Bleu */
.content-card-book.monde-physique {
    border-left-color: #00bcd4 !important;
    border-color: #00bcd4 !important;
    box-shadow: inset 0 0 20px rgba(0, 188, 212, 0.1), 0 2px 8px rgba(0,0,0,0.06) !important;
}

.content-card-book.monde-physique .card-title,
.content-card-book.monde-physique h1,
.content-card-book.monde-physique h2,
.content-card-book.monde-physique h3 {
    border-bottom-color: #00bcd4 !important;
}

/* ========================================
   ✨ EFFETS HOVER PAR MONDE
   ======================================== */

.content-card-book:hover {
    transform: translateY(-2px) !important;
}

.content-card-book.monde-spirituel:hover {
    box-shadow: inset 0 0 25px rgba(255, 189, 27, 0.15), 0 8px 25px rgba(255, 189, 27, 0.2) !important;
}

.content-card-book.monde-psychique:hover {
    box-shadow: inset 0 0 25px rgba(233, 30, 99, 0.15), 0 8px 25px rgba(233, 30, 99, 0.2) !important;
}

.content-card-book.monde-physique:hover {
    box-shadow: inset 0 0 25px rgba(0, 188, 212, 0.15), 0 8px 25px rgba(0, 188, 212, 0.2) !important;
}


/* Dégradé psychique vers physique pour les évolutions */
/* Dégradé de base */
.evolution-gradient {
    background: linear-gradient(135deg, 
        rgba(233, 30, 99, 0.08) 0%, 
        rgba(34, 211, 238, 0.12) 100%   
    ) !important;
}

/* Spirituel vers Psychique */
.evolution-gradient-spi-psy {
    background: linear-gradient(135deg, 
        rgba(255, 189, 27, 0.15) 0%, 
        rgba(233, 30, 99, 0.12) 100%
    ) !important;
}

/* Psychique vers Physique */
.evolution-gradient-psy-phy {
    background: linear-gradient(135deg, 
        rgba(233, 30, 99, 0.08) 0%, 
        rgba(34, 211, 238, 0.12) 100%
    ) !important;
}

/* Spirituel vers Physique */
.evolution-gradient-spi-phy {
    background: linear-gradient(135deg, 
        rgba(255, 189, 27, 0.15) 0%, 
        rgba(34, 211, 238, 0.12) 100%
    ) !important;
}

/* Psychique vers Spirituel */
.evolution-gradient-psy-spi {
    background: linear-gradient(135deg, 
        rgba(233, 30, 99, 0.08) 0%, 
        rgba(255, 189, 27, 0.15) 100%
    ) !important;
}

/* Physique vers Spirituel */
.evolution-gradient-phy-spi {
    background: linear-gradient(135deg, 
        rgba(34, 211, 238, 0.08) 0%, 
        rgba(255, 189, 27, 0.15) 100%
    ) !important;
}

/* Physique vers Psychique */
.evolution-gradient-phy-psy {
    background: linear-gradient(135deg, 
        rgba(34, 211, 238, 0.08) 0%, 
        rgba(233, 30, 99, 0.12) 100%
    ) !important;
}

===========================
   💡 GUIDE D'UTILISATION
   ======================================== */

/*
🎯 UTILISATION RECOMMANDÉE :

1️⃣ BORDURE HAUT (gros blocs principaux) :
<div class="monde-card monde-spirituel">     → Bordure haut jaune
<div class="monde-card monde-psychique">     → Bordure haut rose  
<div class="monde-card monde-physique">      → Bordure haut bleu

2️⃣ BORDURE GAUCHE (petits blocs/cartes) :
<div class="content-card monde-spirituel">   → Bordure gauche jaune
<div class="content-card monde-psychique">   → Bordure gauche rose
<div class="content-card monde-physique">    → Bordure gauche bleu
<div class="content-card theme-oracle">      → Bordure gauche violet

3️⃣ COMPATIBILITÉ (fonctionne toujours) :
<div class="plan-card plan-spirituel">        → Ancien (thesaurus)
<div class="content-card theme-spiritual">    → Ancien anglais

✅ VOUS POUVEZ TOUT MÉLANGER DANS LA MÊME PAGE !
*/