/* ====================================
   CHANTIERMAP - THEME PAQUES 2026
   Pour retirer : supprimer l'include de ce fichier dans chantiermap.php
   ==================================== */

/* --- Variables Pastel Paques --- */
:root {
    --easter-yellow: #FBBF24;
    --easter-pink: #F9A8D4;
    --easter-green: #6EE7B7;
    --easter-blue: #93C5FD;
    --easter-purple: #C4B5FD;
    --easter-bg: #FFFEF5;
    --easter-card: #FFFFFF;
    --easter-topbar: linear-gradient(135deg, #1a1230 0%, #2d1b69 40%, #4c1d95 70%, #7c3aed 100%);
}

/* --- Background avec motif d'oeufs subtil --- */
body {
    background-color: var(--easter-bg) !important;
    background-image:
        radial-gradient(ellipse 8px 10px at 15% 20%, rgba(251,191,36,0.12) 0%, transparent 100%),
        radial-gradient(ellipse 6px 8px at 75% 15%, rgba(249,168,212,0.10) 0%, transparent 100%),
        radial-gradient(ellipse 7px 9px at 45% 80%, rgba(110,231,183,0.10) 0%, transparent 100%),
        radial-gradient(ellipse 8px 10px at 85% 70%, rgba(147,197,253,0.10) 0%, transparent 100%),
        radial-gradient(ellipse 6px 8px at 25% 60%, rgba(196,181,253,0.10) 0%, transparent 100%) !important;
}

/* --- Topbar Paques --- */
.cm-topbar {
    background: var(--easter-topbar) !important;
    border-bottom: 2px solid rgba(196,181,253,0.3) !important;
}

/* --- Logo badge --- */
.cm-logo-icon {
    background: linear-gradient(135deg, var(--easter-yellow), #F59E0B) !important;
    position: relative;
}

/* --- Banniere Paques --- */
.easter-banner {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
    color: white;
    text-align: center;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
    z-index: 10001;
    line-height: 1.4;
}
.easter-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 40px,
        rgba(255,255,255,0.04) 40px,
        rgba(255,255,255,0.04) 80px
    );
}
.easter-banner span {
    position: relative;
    z-index: 1;
}
.easter-banner .easter-subtitle {
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
    margin-top: 2px;
    font-style: italic;
}

/* --- Boutons primaires Paques --- */
.cm-btn-primary, .btn-post {
    background: linear-gradient(135deg, var(--easter-purple), #8B5CF6) !important;
    color: white !important;
    border-color: #8B5CF6 !important;
}

/* --- Post cards --- */
.post-card {
    border: 1.5px solid rgba(196,181,253,0.25) !important;
    position: relative;
}
.post-card:hover {
    border-color: rgba(139,92,246,0.4) !important;
    box-shadow: 0 8px 25px rgba(139,92,246,0.12), 0 4px 8px rgba(139,92,246,0.06) !important;
}

/* --- Tags "CHANTIER" en violet Paques --- */
.post-card .post-tag:first-child {
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
}

/* --- Filtres actifs --- */
.cm-filter.active {
    background: linear-gradient(135deg, var(--easter-purple), #a78bfa) !important;
    color: white !important;
    border-color: var(--easter-purple) !important;
}

/* --- Avatars --- */
.cm-avatar, .detail-avatar, .profil-avatar-big, .profil-avatar-pro-placeholder {
    background: linear-gradient(135deg, var(--easter-purple), var(--easter-pink)) !important;
}

/* --- Cover profil Paques --- */
.profil-cover {
    background: linear-gradient(135deg, #1a1230 0%, #4c1d95 50%, #a855f7 100%) !important;
}

/* --- Mobile tabs (bottom nav) --- */
.cm-mob-tab.active {
    color: #7c3aed !important;
}
.cm-mob-tab.active::before {
    background: linear-gradient(90deg, var(--easter-purple), var(--easter-pink)) !important;
}

/* --- Mobile tabs background --- */
.cm-mobile-tabs {
    background: linear-gradient(180deg, rgba(255,255,245,0.98), rgba(255,255,245,1)) !important;
    border-top: 1px solid rgba(196,181,253,0.3) !important;
}

/* --- Form focus states --- */
.cm-form-group input:focus,
.cm-form-group textarea:focus,
.cm-form-group select:focus {
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.15) !important;
}

/* --- Scroll bar --- */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--easter-purple), var(--easter-pink)) !important;
}

/* --- Oeufs flottants (decoration) --- */
.easter-egg {
    position: fixed;
    font-size: 24px;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    animation: eggFloat 12s ease-in-out infinite;
}
.easter-egg:nth-child(1) { left: 5%; animation-delay: 0s; font-size: 20px; }
.easter-egg:nth-child(2) { left: 20%; animation-delay: 2s; font-size: 16px; }
.easter-egg:nth-child(3) { left: 40%; animation-delay: 4s; font-size: 22px; }
.easter-egg:nth-child(4) { left: 60%; animation-delay: 6s; font-size: 18px; }
.easter-egg:nth-child(5) { left: 80%; animation-delay: 8s; font-size: 20px; }
.easter-egg:nth-child(6) { left: 92%; animation-delay: 10s; font-size: 15px; }

@keyframes eggFloat {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

/* --- Notification dot en rose --- */
.cm-mob-tab .notif-dot,
.notif-count-badge {
    background: var(--easter-pink) !important;
}

/* --- Toast en violet --- */
.cm-toast.success {
    border-left-color: #8B5CF6 !important;
}

/* --- Bouton inscription --- */
.bottom-cta-bar {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
}

/* --- Modal headers --- */
.cm-modal-header {
    border-bottom-color: rgba(196,181,253,0.2) !important;
}

/* --- Links couleur Paques --- */
a[style*="color:#f59e0b"], a[style*="color:#F59E0B"],
a[style*="color: #f59e0b"], a[style*="color: #F59E0B"] {
    color: #7c3aed !important;
}

/* --- Stat numbers --- */
.profil-stat-num {
    color: #7c3aed !important;
}

/* --- Dark mode overrides --- */
body.cm-dark {
    background-color: #0f0a1a !important;
    background-image:
        radial-gradient(ellipse 8px 10px at 15% 20%, rgba(139,92,246,0.08) 0%, transparent 100%),
        radial-gradient(ellipse 6px 8px at 75% 15%, rgba(249,168,212,0.06) 0%, transparent 100%),
        radial-gradient(ellipse 7px 9px at 45% 80%, rgba(110,231,183,0.06) 0%, transparent 100%) !important;
}
body.cm-dark .cm-mobile-tabs {
    background: rgba(15,10,26,0.98) !important;
    border-top-color: rgba(139,92,246,0.2) !important;
}
body.cm-dark .easter-banner {
    background: linear-gradient(135deg, #1a1230, #2d1b69, #4c1d95) !important;
}

/* --- Responsiveness --- */
@media (max-width: 768px) {
    .easter-banner { font-size: 12px; padding: 8px 12px; }
    .easter-banner .easter-subtitle { font-size: 10px; }
    .easter-egg { font-size: 16px !important; }
}