/* composants-detail.css - VERSION FINALE CORRIGÉE */
/* ================================================== */

:root {
    /* Palette professionnelle Kalabancoro */
    --primaire: #2C5F2D;
    --primaire-light: #4CAF50;
    --primaire-dark: #1e3d1f;
    --secondaire: #FFB400;
    --secondaire-light: #FFD166;
    --secondaire-dark: #E6A200;
    
    /* Système de couleurs moderne */
    --texte: #2D3748;
    --texte-light: #718096;
    --texte-lighter: #A0AEC0;
    --fond: #F7FAFC;
    --fond-dark: #EDF2F7;
    --blanc: #FFFFFF;
    --bordure: #E2E8F0;
    --bordure-dark: #CBD5E0;
    
    /* Effets modernes */
    --ombre-portee: 0 10px 40px rgba(0, 0, 0, 0.08);
    --ombre-flottante: 0 20px 60px rgba(0, 0, 0, 0.12);
    --ombre-legere: 0 4px 12px rgba(0, 0, 0, 0.05);
    
    /* Animations optimisées */
    --transition-rapide: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* RESET COMPLET POUR ÉVITER LES CONFLITS */
.ck-detail-initiatives * {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.ck-detail-initiatives {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    overflow-x: hidden !important;
}

/* LAYOUT PRINCIPAL - 75%/25% */
.ck-layout-principal {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 1rem !important;
}

/* Desktop : 75%/25% */
@media (min-width: 1024px) {
    .ck-layout-principal {
        grid-template-columns: 75% 25% !important;
        gap: 2rem !important;
        padding: 2rem !important;
        max-width: 1400px !important;
    }
}

/* ================================================== */
/* COLONNE PRINCIPALE - 75% */
/* ================================================== */

.ck-colonne-principale {
    width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

/* Carte principale des détails */
.ck-carte-principale {
    background: var(--blanc) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    box-shadow: var(--ombre-portee) !important;
    border: 1px solid var(--bordure) !important;
    margin-bottom: 1.5rem !important;
    backdrop-filter: blur(10px) !important;
}

@media (min-width: 768px) {
    .ck-carte-principale {
        padding: 2rem !important;
        border-radius: 20px !important;
    }
}

/* En-tête amélioré */
.ck-en-tete {
    margin-bottom: 2rem !important;
    padding-bottom: 1.5rem !important;
    border-bottom: 2px solid var(--fond) !important;
}

.ck-badges {
    display: flex !important;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem !important;
    flex-wrap: wrap !important;
}

.ck-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.6rem 1rem !important;
    border-radius: 50px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    box-shadow: var(--ombre-legere) !important;
    transition: var(--transition-rapide) !important;
}

.ck-badge-categorie {
    background: var(--primaire) !important;
    color: white !important;
}

.ck-badge-quartier {
    background: var(--secondaire) !important;
    color: var(--texte) !important;
}

.ck-badge-budget {
    background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%) !important;
    color: white !important;
}

.ck-titre {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: var(--primaire-dark) !important;
    margin-bottom: 1rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

@media (min-width: 768px) {
    .ck-titre {
        font-size: 2.25rem !important;
    }
}

.ck-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

@media (min-width: 480px) {
    .ck-meta {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }
}

.ck-meta-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    background: var(--fond) !important;
    border-radius: 12px !important;
    border: 1px solid var(--bordure) !important;
    transition: var(--transition-standard) !important;
}

.ck-meta-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--ombre-legere) !important;
}

.ck-meta-item i {
    color: var(--primaire) !important;
    font-size: 1.1rem !important;
    width: 20px !important;
    text-align: center !important;
}

.ck-meta-texte {
    color: var(--texte) !important;
    font-weight: 500 !important;
}

.ck-meta-texte strong {
    color: var(--primaire) !important;
}

/* Contenu de l'initiative - CORRECTION DÉBORDEMENT */
.ck-contenu {
    line-height: 1.7 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
}

.ck-section {
    margin-bottom: 2.5rem !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

.ck-section-titre {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--primaire) !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid var(--fond) !important;
    max-width: 100% !important;
}

.ck-section-titre i {
    color: var(--primaire) !important;
}

.ck-description {
    font-size: 1.05rem !important;
    color: var(--texte) !important;
    line-height: 1.8 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
}

.ck-description p {
    margin-bottom: 1.5rem !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

.ck-description p:last-child {
    margin-bottom: 0 !important;
}

.ck-description img {
    max-width: 100% !important;
    height: auto !important;
}

/* Documents */
.ck-documents {
    background: var(--fond) !important;
    padding: 1.5rem !important;
    border-radius: 12px !important;
    border: 1px solid var(--bordure) !important;
    max-width: 100% !important;
}

@media (min-width: 768px) {
    .ck-documents {
        padding: 2rem !important;
    }
}

.ck-grille-images {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
    max-width: 100% !important;
}

.ck-item-image {
    background: var(--blanc) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 2px solid var(--bordure) !important;
    transition: var(--transition-standard) !important;
    box-shadow: var(--ombre-legere) !important;
    max-width: 100% !important;
}

.ck-item-image:hover {
    transform: translateY(-5px) !important;
    border-color: var(--primaire) !important;
    box-shadow: var(--ombre-flottante) !important;
}

.ck-lien-image {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

.ck-image-document {
    width: 100% !important;
    height: 140px !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
    max-width: 100% !important;
}

.ck-lien-image:hover .ck-image-document {
    transform: scale(1.05) !important;
}

.ck-overlay-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(44, 95, 45, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.ck-lien-image:hover .ck-overlay-image {
    opacity: 1 !important;
}

.ck-overlay-image i {
    color: white !important;
    font-size: 1.5rem !important;
}

.ck-info-image {
    padding: 1rem !important;
    max-width: 100% !important;
}

.ck-nom-document {
    display: block !important;
    font-weight: 600 !important;
    color: var(--texte) !important;
    margin-bottom: 0.25rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.9rem !important;
    max-width: 100% !important;
}

.ck-taille-document {
    color: var(--texte-light) !important;
    font-size: 0.8rem !important;
}

/* Liste documents */
.ck-liste-documents {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    max-width: 100% !important;
}

.ck-document-item {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    background: var(--blanc) !important;
    border-radius: 12px !important;
    border: 1px solid var(--bordure) !important;
    transition: var(--transition-standard) !important;
    max-width: 100% !important;
}

.ck-document-item:hover {
    transform: translateX(5px) !important;
    border-color: var(--primaire) !important;
    box-shadow: var(--ombre-legere) !important;
}

.ck-icone-document {
    width: 45px !important;
    height: 45px !important;
    background: var(--primaire) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.ck-icone-document i {
    color: white !important;
    font-size: 1.2rem !important;
}

.ck-info-document {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.ck-lien-document {
    color: var(--primaire) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 0.25rem !important;
    max-width: 100% !important;
}

.ck-lien-document:hover {
    color: var(--secondaire) !important;
    text-decoration: underline !important;
}

.ck-bouton-telecharger {
    background: var(--secondaire) !important;
    color: var(--texte) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    cursor: pointer !important;
    transition: var(--transition-standard) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.ck-bouton-telecharger:hover {
    background: var(--secondaire-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--ombre-legere) !important;
}

/* ================================================== */
/* COLONNE LATÉRALE - 25% */
/* ================================================== */

.ck-colonne-laterale {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    height: fit-content !important;
}

@media (min-width: 1024px) {
    .ck-colonne-laterale {
        position: sticky !important;
        top: 2rem !important;
    }
}

/* Carte latérale */
.ck-carte-laterale {
    background: var(--blanc) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    box-shadow: var(--ombre-portee) !important;
    border: 1px solid var(--bordure) !important;
    transition: var(--transition-standard) !important;
    backdrop-filter: blur(10px) !important;
}

.ck-carte-laterale:hover {
    box-shadow: var(--ombre-flottante) !important;
}

/* SECTION SOUTIEN - NOUVEAUX BOUTONS VERT/ROUGE */
.ck-soutien {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    color: var(--texte) !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: auto !important;
    padding: 1.5rem !important;
}

.ck-soutien-titre {
    color: var(--primaire) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    position: relative !important;
    z-index: 2 !important;
}

.ck-soutien-titre i {
    color: var(--secondaire) !important;
}

.ck-compteurs-soutien {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
    position: relative !important;
    z-index: 2 !important;
}

.ck-compteur {
    text-align: center !important;
    padding: 0.75rem !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid var(--bordure) !important;
}

.ck-nombre-votes {
    display: block !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-bottom: 0.25rem !important;
    color: var(--primaire) !important;
}

.ck-texte-votes {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--texte-light) !important;
}

.ck-boutons-soutien {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
    position: relative !important;
    z-index: 2 !important;
}

.ck-bouton-vote {
    border: none !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    min-height: 50px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* BOUTON VERT POUR SOUTIEN */
.ck-bouton-positif {
    background: var(--primaire) !important;
    color: white !important;
}

.ck-bouton-positif:hover:not(:disabled) {
    background: var(--primaire-light) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(44, 95, 45, 0.3) !important;
}

/* BOUTON ROUGE POUR OPPOSITION */
.ck-bouton-negatif {
    background: #dc3545 !important;
    color: white !important;
}

.ck-bouton-negatif:hover:not(:disabled) {
    background: #c82333 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.3) !important;
}

.ck-bouton-vote:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.ck-bouton-vote.vote-actif {
    box-shadow: inset 0 0 0 2px white, 0 6px 20px rgba(0, 0, 0, 0.3) !important;
    transform: scale(1.02) !important;
}

.ck-message-vote {
    margin-top: 1rem !important;
    font-size: 0.9rem !important;
    min-height: 1.2rem !important;
    font-weight: 600 !important;
    padding: 0.75rem !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    position: relative !important;
    z-index: 2 !important;
}

.ck-message-vote.succes {
    color: var(--primaire) !important;
    background: rgba(44, 95, 45, 0.1) !important;
}

.ck-message-vote.erreur {
    color: #dc3545 !important;
    background: rgba(220, 53, 69, 0.1) !important;
}

.ck-restrictions {
    margin-top: 1rem !important;
    color: var(--texte-light) !important;
    font-size: 0.8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Section Statistiques */
.ck-statistiques-titre {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--primaire) !important;
    margin-bottom: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.ck-liste-statistiques {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.ck-stat-item {
    display: flex !important;
    align-items: center !important;
    padding: 0.875rem !important;
    background: var(--fond) !important;
    border-radius: 8px !important;
    border: 1px solid var(--bordure) !important;
    transition: var(--transition-standard) !important;
}

.ck-stat-item:hover {
    transform: translateX(3px) !important;
    border-color: var(--primaire) !important;
    background: var(--blanc) !important;
}

.ck-stat-icone {
    width: 35px !important;
    height: 35px !important;
    background: var(--primaire) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 0.75rem !important;
    flex-shrink: 0 !important;
}

.ck-stat-icone i {
    color: white !important;
    font-size: 1rem !important;
}

.ck-stat-label {
    flex: 1 !important;
    color: var(--texte) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

.ck-stat-valeur {
    background: var(--primaire) !important;
    color: white !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 15px !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    min-width: 40px !important;
    text-align: center !important;
}










/* Section Partage - COULEURS ORIGINALES DES RÉSEAUX SOCIAUX */
.ck-partage-titre {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--primaire) !important;
    margin-bottom: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.ck-boutons-partage {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
}

.ck-bouton-partage {
    border: none !important;
    border-radius: 8px !important;
    padding: 0.875rem 0.25rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    font-weight: 600 !important;
    color: white !important; /* Texte en blanc pour contraster */
    text-align: center !important;
    font-size: 0.75rem !important;
    min-height: 60px !important;
}

/* Couleurs de fond spécifiques pour chaque réseau social */
.ck-bouton-partage[data-reseau="facebook"] {
    background: #1877f2 !important; /* Bleu Facebook */
}

.ck-bouton-partage[data-reseau="twitter"] {
    background: #1da1f2 !important; /* Bleu Twitter */
}

.ck-bouton-partage[data-reseau="whatsapp"] {
    background: #25d366 !important; /* Vert WhatsApp */
}

.ck-bouton-partage[data-reseau="link"] {
    background: var(--primaire) !important; /* Vert Kalabancoro */
}

/* Icônes en blanc pour contraster */
.ck-bouton-partage i {
    font-size: 1.1rem !important;
    color: white !important;
}

/* Effet hover - éclaircissement */
.ck-bouton-partage:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    filter: brightness(110%) !important;
}

/* Hover spécifique pour chaque réseau */
.ck-bouton-partage[data-reseau="facebook"]:hover {
    background: #3b89ff !important;
}

.ck-bouton-partage[data-reseau="twitter"]:hover {
    background: #4ab3f4 !important;
}

.ck-bouton-partage[data-reseau="whatsapp"]:hover {
    background: #2ed573 !important;
}

.ck-bouton-partage[data-reseau="link"]:hover {
    background: var(--primaire-light) !important;
}










/* Messages de copie de lien */
.ck-message-copie {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    background: var(--primaire) !important;
    color: white !important;
    padding: 1rem 1.5rem !important;
    border-radius: 8px !important;
    z-index: 10000 !important;
    box-shadow: var(--ombre-flottante) !important;
    display: none !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-weight: 600 !important;
    animation: ck-slideInRight 0.3s ease !important;
}

.ck-message-copie.ck-message-erreur {
    background: #dc3545 !important;
}

@keyframes ck-slideInRight {
    from {
        transform: translateX(100%) !important;
        opacity: 0 !important;
    }
    to {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }
}
























/* ================================================== */
/* SECTION COMMENTAIRES - NOUVEAU DESIGN */
/* ================================================== */

.ck-section-commentaires {
    background: var(--blanc) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    box-shadow: var(--ombre-portee) !important;
    border: 1px solid var(--bordure) !important;
    margin-top: 2rem !important;
    max-width: 100% !important;
    width: 100% !important;
    backdrop-filter: blur(10px) !important;
}

@media (min-width: 768px) {
    .ck-section-commentaires {
        padding: 2rem !important;
        border-radius: 20px !important;
    }
}

.ck-en-tete-commentaires {
    text-align: center !important;
    margin-bottom: 2rem !important;
    padding-bottom: 1.5rem !important;
    border-bottom: 2px solid var(--fond) !important;
}

.ck-titre-commentaires {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--primaire) !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
}

.ck-badge-commentaires {
    background: var(--primaire) !important;
    color: white !important;
    padding: 0.4rem 1rem !important;
    border-radius: 20px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    box-shadow: var(--ombre-legere) !important;
}

.ck-sous-titre-commentaires {
    color: var(--texte-light) !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

/* Liste des commentaires */
.ck-liste-commentaires {
    margin-bottom: 2.5rem !important;
    max-height: 600px !important;
    overflow-y: auto !important;
}

.ck-commentaire {
    background: var(--fond) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
    border: 1px solid var(--bordure) !important;
    transition: var(--transition-standard) !important;
    position: relative !important;
}

.ck-commentaire:hover {
    border-color: var(--primaire) !important;
    box-shadow: var(--ombre-legere) !important;
}

.ck-commentaire:last-child {
    margin-bottom: 0 !important;
}

.ck-en-tete-commentaire {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
    position: relative !important;
}

/* NOUVEAU : Icône utilisateur pour l'avatar */
.ck-avatar-commentaire {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    background: var(--primaire) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
    border: 2px solid var(--primaire-light) !important;
}

.ck-avatar-commentaire i {
    font-size: 1.1rem !important;
}

.ck-infos-commentaire {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.ck-auteur-commentaire {
    font-weight: 700 !important;
    color: var(--primaire) !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

/* NOUVEAU : Date à droite avec fond jaune */
.ck-date-commentaire {
    font-size: 0.8rem !important;
    color: var(--texte) !important;
    background: var(--secondaire) !important;
    padding: 0.3rem 0.8rem !important;
    border-radius: 15px !important;
    font-weight: 600 !important;
    align-self: flex-start !important;
    margin-left: auto !important;
}

/* NOUVEAU : Contenu du commentaire en gris */
.ck-contenu-commentaire {
    color: var(--texte-light) !important;
    line-height: 1.6 !important;
    font-size: 0.95rem !important;
    opacity: 0.9 !important;
}

.ck-contenu-commentaire p {
    margin-bottom: 0.5rem !important;
}

.ck-contenu-commentaire p:last-child {
    margin-bottom: 0 !important;
}

/* État vide */
.ck-etat-vide {
    text-align: center !important;
    padding: 3rem 1rem !important;
    color: var(--texte-light) !important;
}

.ck-etat-vide i {
    font-size: 3rem !important;
    color: #bdc3c7 !important;
    margin-bottom: 1rem !important;
}

.ck-etat-vide h4 {
    color: var(--primaire) !important;
    margin-bottom: 0.5rem !important;
    font-size: 1.3rem !important;
}

.ck-etat-vide p {
    font-size: 1rem !important;
    margin-bottom: 0 !important;
}

/* Formulaire de commentaire - BORDURE SIMPLE */
/* ================================================== */
/* FORMULAIRE DE COMMENTAIRE - BORDURE UNIQUE */
/* ================================================== */

.ck-formulaire-commentaire {
    background: var(--fond) !important;
    padding: 1.5rem !important;
    border-radius: 12px !important;
    border: none !important; 
    transition: var(--transition-standard) !important;
    backdrop-filter: blur(10px) !important;
}

.ck-formulaire-commentaire:focus-within {
    border: none !important; 
    background: var(--blanc) !important;
    box-shadow: 0 0 0 3px rgba(44, 95, 45, 0.1) !important;
}

.ck-groupe-champs {
    margin-bottom: 1rem !important;
    border: none !important; /* ASSURER AUCUNE BORDURE ICI */
}

.ck-textarea-commentaire {
    width: 100% !important;
    padding: 1.25rem !important;
    border: 2px solid var(--bordure) !important; /* BORDURE UNIQUE ICI */
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    resize: vertical !important;
    min-height: 140px !important; /* AUGMENTER LA HAUTEUR MINIMALE */
    transition: var(--transition-standard) !important;
    background: var(--blanc) !important;
}

.ck-textarea-commentaire:focus {
    outline: none !important;
    border-color: var(--primaire) !important; /* BORDURE AU FOCUS */
    box-shadow: 0 0 0 3px rgba(44, 95, 45, 0.1) !important;
}

.ck-indicateur-saisie {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 0.5rem !important;
}

.ck-compteur-caracteres {
    color: var(--texte-light) !important;
    font-size: 0.85rem !important;
}

.ck-actions-formulaire {
    display: flex !important;
    justify-content: flex-end !important;
}

.ck-bouton-publier {
    background: var(--primaire) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 1rem 2rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--transition-standard) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    font-size: 1rem !important;
}

.ck-bouton-publier:hover:not(:disabled) {
    background: var(--primaire-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(44, 95, 45, 0.3) !important;
}

.ck-bouton-publier:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Message connexion */
.ck-message-connexion {
    background: var(--blanc) !important;
    padding: 2rem !important;
    border-radius: 12px !important;
    border: 1px solid var(--bordure) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
}

.ck-icone-connexion {
    font-size: 3rem !important;
    color: var(--primaire) !important;
}

.ck-texte-connexion h4 {
    color: var(--primaire) !important;
    font-size: 1.3rem !important;
    margin-bottom: 0.5rem !important;
}

.ck-texte-connexion p {
    color: var(--texte-light) !important;
    margin-bottom: 1.5rem !important;
    font-size: 1rem !important;
}

.ck-bouton-connexion {
    background: var(--primaire) !important;
    color: white !important;
    padding: 1rem 2rem !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: var(--transition-standard) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    font-size: 1rem !important;
}

.ck-bouton-connexion:hover {
    background: var(--secondaire) !important;
    color: var(--texte) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 180, 0, 0.3) !important;
}

/* ================================================== */
/* MESSAGES POPUP CENTRÉS */
/* ================================================== */

.ck-message-global {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 1.5rem 2rem !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    z-index: 10000 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    min-width: 300px !important;
    text-align: center !important;
    backdrop-filter: blur(10px) !important;
}

.ck-message-succes {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
    color: #155724 !important;
    border: 2px solid #c3e6cb !important;
}

.ck-message-erreur {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%) !important;
    color: #721c24 !important;
    border: 2px solid #f5c6cb !important;
}

/* ================================================== */
/* CHARGEMENT ET ANIMATIONS */
/* ================================================== */

.ck-chargement {
    text-align: center !important;
    padding: 3rem 1rem !important;
    color: var(--texte-light) !important;
}

.ck-loader {
    width: 50px !important;
    height: 50px !important;
    border: 3px solid var(--fond) !important;
    border-top: 3px solid var(--primaire) !important;
    border-radius: 50% !important;
    animation: ck-spin 1s linear infinite !important;
    margin: 0 auto 1rem !important;
}

@keyframes ck-spin {
    0% { transform: rotate(0deg) !important; }
    100% { transform: rotate(360deg) !important; }
}

/* ================================================== */
/* RESPONSIVE MOBILE - NOUVELLE ORGANISATION */
/* ================================================== */

@media (max-width: 1023px) {
    .ck-colonne-laterale {
        order: 2 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
    
    .ck-soutien {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 767px) {
    .ck-layout-principal {
        padding: 0.5rem !important;
        gap: 1rem !important;
    }
    
    .ck-colonne-laterale {
        grid-template-columns: 1fr !important;
        order: 2 !important;
    }
    
    .ck-carte-principale,
    .ck-carte-laterale,
    .ck-section-commentaires {
        padding: 1rem !important;
        border-radius: 12px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .ck-titre {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    
    .ck-badges {
        gap: 0.5rem !important;
        justify-content: center !important;
    }
    
    .ck-badge {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
    
    .ck-meta {
        grid-template-columns: 1fr !important;
    }
    
    .ck-grille-images {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
        gap: 0.75rem !important;
    }
    
    .ck-image-document {
        height: 120px !important;
    }
    
    .ck-compteurs-soutien {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }
    
    .ck-boutons-partage {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .ck-bouton-partage {
        padding: 0.75rem 0.25rem !important;
        font-size: 0.7rem !important;
        min-height: 55px !important;
    }
    
    .ck-en-tete-commentaire {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    
    .ck-date-commentaire {
        align-self: flex-start !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 480px) {
    .ck-detail-initiatives {
        padding: 0.25rem !important;
    }
    
    .ck-layout-principal {
        padding: 0.25rem !important;
    }
    
    .ck-carte-principale,
    .ck-carte-laterale,
    .ck-section-commentaires {
        padding: 0.875rem !important;
        border-radius: 10px !important;
    }
    
    .ck-titre {
        font-size: 1.25rem !important;
    }
    
    .ck-boutons-partage {
        grid-template-columns: 1fr !important;
    }
    
    .ck-bouton-partage {
        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
        min-height: 50px !important;
        padding: 0.75rem !important;
    }
    
    .ck-bouton-partage i {
        margin-bottom: 0 !important;
        margin-right: 0.5rem !important;
    }
    
    .ck-message-global {
        min-width: 250px !important;
        padding: 1.25rem 1.5rem !important;
        left: 1rem !important;
        right: 1rem !important;
        transform: translateY(-50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}