.chuck-card {
    border: 3px solid var(--chuck-border);
    background: var(--chuck-bg);
    padding: 25px;
    border-radius: 12px;
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    overflow: hidden;
}

/* 🔥 effet "impact glow" subtil */
.chuck-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, var(--chuck-border), transparent 70%);
    opacity: 0.08;
    pointer-events: none;
}

/* 💥 hover plus vivant */
.chuck-card:hover {
    transform: scale(1.03) rotate(-0.7deg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* 🥋 header plus punchy */
.chuck-header {
    color: var(--chuck-border);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ⚡ petite animation emoji */
.chuck-header span {
    display: inline-block;
    animation: chuckShake 1.5s infinite ease-in-out;
}

@keyframes chuckShake {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}


/* Conteneur principal */
.cn-main-box {
    all: initial !important; /* Reset total */
    display: block !important;
    border: 4px solid var(--chuck-border) !important;
    background-color: var(--chuck-bg) !important;
    padding: 30px !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    margin: 25px 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}


/* Titre */
.cn-top-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
	color: var(--chuck-text, #333) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
}

/* Zone du texte (Simulation de blockquote sans la balise) */
.cn-content-area {
	background: var(--chuck-bg) !important;
    font-size: 1.3em !important;
    line-height: 1.6 !important;
    color: var(--chuck-text, #222) !important; /* AJOUT : Utilisation de la couleur choisie */
    font-style: italic !important;
    margin: 0 !important;
    padding: 0 0 0 25px !important;
    border: none !important;
    background: transparent !important;
    position: relative !important;
    display: block !important;
    min-height: auto !important;
}
.cn-main-box, 
.cn-main-box * {
    box-sizing: border-box;
}
.cn-content-area,
.cn-content-area * {
    background: transparent !important;
}

.cn-content-area {
    background: var(--chuck-bg) !important;
    padding: 15px;
    border-radius: 8px;
}
.cn-main-box blockquote,
.cn-main-box .cn-content-area {
    background: var(--chuck-bg) !important;
    color: var(--chuck-text, #333) !important; /* AJOUT : Utilisation de la couleur choisie */
    border: none !important;
    box-shadow: none !important;
}
.cn-main-box code {
	 background: transparent !important;
}

/* Guillemet décoratif */
.cn-quote-mark {
	color: var(--chuck-text, #333) !important;
    font-size: 3em !important;
    position: absolute !important;
    left: -10px !important;
    top: -15px !important;
    opacity: 0.3 !important;
    font-family: serif !important;
}

/* PIED DE PAGE OPTIMISÉ - ALIGNÉ À GAUCHE */
.cn-bottom-bar {
    margin-top: 25px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    display: flex !important;
    justify-content: flex-start !important; /* Alligne tout à gauche */
    align-items: center !important;
    gap: 15px !important; /* Espace réduit entre le texte et le bouton */
}

.cn-copy-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #888 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.cn-copy-info {
    font-weight: 600 !important;
}

.cn-copy-divider {
    opacity: 0.3 !important;
}

.cn-copy-tagline {
    font-style: italic !important;
    opacity: 0.7 !important;
}

.cn-link-btn {
    background: var(--chuck-border) !important;
    color: #fff !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
}

.cn-link-btn:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.1) !important;
}

/* 😈 bouton plus stylé même si tu l'utilises peu */
.chuck-btn {
    background: var(--chuck-border);
    color: #fff !important;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.8em;
    font-weight: bold;
    transition: all 0.2s ease;
}

/* effet "power" */
.chuck-btn:hover {
    filter: brightness(1.2);
    transform: scale(1.08);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}