/* Styles généraux pour les conteneurs principaux */
.dpi-indicators, .dpi-single-indicator {
    font-family: Arial, sans-serif;
}

/* Styles pour les indicateurs numériques (stock, intensité, tendances) */
.dpi-stock, .dpi-intensity, .dpi-tendance_ct, .dpi-tendance_lt {
    display: inline-block;
    padding: 4px 8px;
    margin: 2px;
    border-radius: 4px;
    background: #f5f5f5;
    transition: all 0.3s ease;
}

/* Effet au survol pour les indicateurs numériques */
.dpi-stock:hover, .dpi-intensity:hover, .dpi-tendance_ct:hover, .dpi-tendance_lt:hover {
    background: #e0e0e0;
}

/* Styles pour les tendances (coloration selon la direction) */
.trend-up {
    color: #28a745;
    animation: pulse-up 1.5s infinite;
}

.trend-down {
    color: #dc3545;
    animation: pulse-down 1.5s infinite;
}

.trend-stable {
    color: #6c757d;
}

/* Animations pour les tendances */
@keyframes pulse-up {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes pulse-down {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* Mise en gras des tendances court/long terme */
.trend-ct, .trend-lt {
    font-weight: bold;
}

/* Conteneur principal des indicateurs */
.dpi-indicators {
    font-family: Arial, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Grille pour afficher les cartes émotionnelles */
.indicators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* Style des cartes émotionnelles */
.emotion-card {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Titres dans les cartes émotionnelles */
.emotion-card h3 {
    margin: 0 0 10px;
    font-size: 1.2em;
    color: #333;
}

/* Style des boîtes d’indicateurs (utilisé dans poetic_charge) */
.indicator-box {
    border-radius: 8px;
    padding: 10px;
    margin: 5px 0;
    color: #333;
    font-size: 0.9em;
    transition: transform 0.2s ease;
}

/* Effet au survol pour les boîtes */
.indicator-box:hover {
    transform: scale(1.02);
}

/* Ajustement des marges pour les boîtes dans single-indicator */
.dpi-single-indicator .indicator-box {
    margin: 10px 0;
}

/* Style pour les rectangles subtils (utilisé par [tendancect_color] et [tendancelt_color]) */
.indicator-box-subtle {
    display: inline-block;
    padding: 8px 12px;
    margin: 5px 0;
    font-size: 0.9em;
    color: #444;
    background-color: transparent;
    border-radius: 10px;
    transition: all 0.2s ease;
}

/* Bordure pour tous les indicateurs tendancelt avec spécificité accrue */
.indicator-box-subtle[class*="tendancelt"] {
    border: 2px solid #def3f3 !important; /* Bordure cyan clair pour tous les tendancelt */
}

/* Règle plus spécifique pour tendancelt-priere-color */
.indicator-box-subtle.tendancelt-priere-color {
    border: 2px solid #def3f3 !important; /* Surcharge explicite pour priere */
}

/* Effet au survol pour les rectangles subtils */
.indicator-box-subtle:hover {
    opacity: 0.8;
}

/* Surcharge pour garantir que les styles inline n’écrasent pas border-radius */
.indicator-box-subtle[style] {
    border-radius: 10px !important;
}

/* Surcharge supplémentaire pour les div avec cette classe */
div.indicator-box-subtle {
    border-radius: 10px !important;
}

/* Supprimer la bordure noire spécifique à priere */
.tendancelt-priere-color {
    border: 2px solid #def3f3 !important; /* Uniformisation avec #def3f3 */
}

/* Style des titres de niveau 2 */
h2 {
    color: #444;
    margin-bottom: 15px;
}