/**
 * Styles pour le plugin d'images enrichies - Front-end
 */

/* Styles pour le conteneur principal */
.enhanced-image-container {
    position: relative;
    width: 100%;
    margin-bottom: 2rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.enhanced-image-container:hover {
    transform: scale(1.02);
}

/* Conteneur d'image pour assurer un positionnement correct des éléments superposés */
.enhanced-image-container .enhanced-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Styles pour l'image */
.enhanced-image-container img,
.enhanced-image-container .enhanced-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* Styles pour les informations en bas de l'image */
.enhanced-image-container .enhanced-image-footer {
    padding: 15px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Styles pour le titre */
.enhanced-image-container .enhanced-image-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: #000000 !important; /* FIX: Force la couleur noire pour tous les titres */
}

.enhanced-image-container .enhanced-image-title a,
.enhanced-image-container .enhanced-image-footer .enhanced-image-title a {
    color: #000000 !important; /* FIX: Force la couleur noire pour les liens de titre */
    text-decoration: none;
    transition: color 0.2s ease;
}

/* La couleur au survol sera appliquée dynamiquement par JS via la page de configuration */

/* Styles pour la source repositionnée SUR l'image */
.enhanced-image-container .enhanced-image-source-overlay,
html body .enhanced-image-container .enhanced-image-source-overlay {
    position: absolute !important;
    bottom: 15px !important;
    right: 15px !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    z-index: 98 !important;
    max-width: 80% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.enhanced-image-container .enhanced-image-source-platform {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.enhanced-image-container .enhanced-image-source-icon svg,
.enhanced-image-container .enhanced-image-source-platform svg {
    width: 16px !important;
    height: 16px !important;
}

/* FIX: Couleur noire pour la source sans lien */
.enhanced-image-container .enhanced-image-source-platform > span:not(a),
.enhanced-image-container .enhanced-image-source-overlay > span:not(a) {
    color: #000000 !important;
}

.enhanced-image-container .enhanced-image-source-link,
.enhanced-image-container .enhanced-image-wrapper .enhanced-image-source-overlay a,
.enhanced-image-container .enhanced-image-wrapper .enhanced-image-source-platform a,
html body .enhanced-image-container .enhanced-image-source-link,
html .entry-content .enhanced-image-container .enhanced-image-source-link {
    color: #000000 !important; /* FIX: Force la couleur noire pour les liens de source */
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

/* La couleur au survol sera appliquée dynamiquement par JS via la page de configuration */

/* Styles pour le label en superposition - RENFORCÉS */
.enhanced-image-container .enhanced-image-label,
.enhanced-image-container .enhanced-image-wrapper .enhanced-image-label,
.enhanced-image-container .enhanced-image-wrapper a.enhanced-image-label,
html body .enhanced-image-container .enhanced-image-wrapper a.enhanced-image-label,
html #the-post .entry-content a.enhanced-image-label,
html [class*="content"] a.enhanced-image-label {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    /* Couleur de fond dynamique via PHP/JS */
    color: white !important;
    padding: 8px 15px !important;
    border-radius: 20px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 99 !important;
    border: none !important;
    box-shadow: none !important;
}

.enhanced-image-container .enhanced-image-label:hover,
.enhanced-image-container .enhanced-image-wrapper .enhanced-image-label:hover,
.enhanced-image-container .enhanced-image-wrapper a.enhanced-image-label:hover,
html body .enhanced-image-container .enhanced-image-wrapper a.enhanced-image-label:hover,
html #the-post .entry-content a.enhanced-image-label:hover {
    background-color: #000000 !important;
    color: white !important;
    text-decoration: none !important;
}

/* Classe spéciale pour garantir que les liens dans le label restent blancs */
.enhanced-image-label-link,
.enhanced-image-label-link:link,
.enhanced-image-label-link:visited,
.enhanced-image-container .enhanced-image-wrapper a.enhanced-image-label-link,
.enhanced-image-container .enhanced-image-wrapper a.enhanced-image-label-link:link,
.enhanced-image-container .enhanced-image-wrapper a.enhanced-image-label-link:visited,
html body .enhanced-image-container a.enhanced-image-label-link {
    color: white !important;
    text-decoration: none !important;
    /* Couleur de fond dynamique via PHP/JS */
}

.enhanced-image-label-link:hover,
.enhanced-image-label-link:active,
.enhanced-image-label-link:focus,
.enhanced-image-container .enhanced-image-wrapper a.enhanced-image-label-link:hover,
.enhanced-image-container .enhanced-image-wrapper a.enhanced-image-label-link:active,
.enhanced-image-container .enhanced-image-wrapper a.enhanced-image-label-link:focus,
html body .enhanced-image-container a.enhanced-image-label-link:hover {
    color: white !important;
    text-decoration: none !important;
    background-color: #000000 !important;
}

.enhanced-image-container .enhanced-image-label-icon svg {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
}

/* Styles pour le bouton CTA - RENFORCÉS */
.enhanced-image-container .enhanced-image-cta-container {
    margin-top: 5px !important;
    width: 100% !important;
}

.enhanced-image-container .enhanced-image-cta-button,
.enhanced-image-container .enhanced-image-footer .enhanced-image-cta-button,
.enhanced-image-container .enhanced-image-footer a.enhanced-image-cta-button,
html body .enhanced-image-container .enhanced-image-footer a.enhanced-image-cta-button,
html #the-post .entry-content a.enhanced-image-cta-button,
html [class*="content"] a.enhanced-image-cta-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 20px !important;
    /* Couleur de fond dynamique via PHP/JS */
    color: white !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    transition: background-color 0.2s ease !important;
    border: none !important;
    line-height: normal !important;
    box-shadow: none !important;
}

.enhanced-image-container .enhanced-image-cta-button:hover,
.enhanced-image-container .enhanced-image-footer .enhanced-image-cta-button:hover,
.enhanced-image-container .enhanced-image-footer a.enhanced-image-cta-button:hover,
html body .enhanced-image-container .enhanced-image-footer a.enhanced-image-cta-button:hover,
html #the-post .entry-content a.enhanced-image-cta-button:hover {
    background-color: #000000 !important;
    color: white !important;
    text-decoration: none !important;
    border: none !important;
}

.enhanced-image-container .enhanced-image-cta-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

/* Styles pour les plateformes */
.enhanced-image-container .platform-icon-instagram {
    fill: #E1306C !important;
}

.enhanced-image-container .platform-icon-pinterest {
    fill: #E60023 !important;
}

.enhanced-image-container .platform-icon-twitter {
    fill: #1DA1F2 !important;
}

.enhanced-image-container .platform-icon-facebook {
    fill: #4267B2 !important;
}

.enhanced-image-container .platform-icon-link {
    fill: #0073aa !important;
}

/* Variantes de style pour le bloc */
.is-style-boxed .enhanced-image-container {
    border: 3px solid #e0e0e0 !important;
    box-shadow: none !important;
}

.is-style-shadow .enhanced-image-container {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
}

/* Style de reset pour neutraliser les styles du thème potentiellement problématiques */
.enhanced-image-container a,
.enhanced-image-container a:link,
.enhanced-image-container a:visited,
.enhanced-image-container button {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* Styles responsifs */
@media (max-width: 768px) {
    .enhanced-image-container .enhanced-image-footer {
        padding: 10px !important;
    }
    
    .enhanced-image-container .enhanced-image-title {
        font-size: 1rem !important;
    }
    
    .enhanced-image-container .enhanced-image-label,
    .enhanced-image-container .enhanced-image-wrapper .enhanced-image-label,
    html body .enhanced-image-container .enhanced-image-wrapper a.enhanced-image-label {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
    }
    
    .enhanced-image-container .enhanced-image-source-overlay,
    html body .enhanced-image-container .enhanced-image-source-overlay {
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
    }
    
    .enhanced-image-container .enhanced-image-cta-button,
    .enhanced-image-container .enhanced-image-footer .enhanced-image-cta-button,
    html body .enhanced-image-container .enhanced-image-footer a.enhanced-image-cta-button {
        padding: 10px 15px !important;
        font-size: 1rem !important;
    }
}