/* ================================================================
   THEMES-COMMON.CSS
   Composants partagés par tous les thèmes saisonniers : badge de
   coin "campagne en cours", cadre lumineux du hero, liseré navbar,
   et recoloration automatique des interactions du site (cartes,
   menu, boutons...) dans la couleur du thème actif.

   Chargé automatiquement avec CHAQUE thème (voir themes.php),
   rien à dupliquer dans les fichiers main-*.css individuels.
   Chaque thème n'a plus qu'à définir sa palette (+ variantes RGB)
   et ses icônes flottantes.
   ================================================================ */

/* ============================================
   BADGE "CAMPAGNE EN COURS" — ruban de coin fixe
   Injecté une fois via <?php echo getThemeExtra('badge'); ?>
   (contenu défini par thème dans themes.php)
   ============================================ */
/* Boîte fixe en haut à droite qui DÉCOUPE le ruban : rien ne peut
   dépasser de ce carré, donc plus de bande qui file dans le vide
   ou qui touche le haut de l'écran. */
.theme-badge-wrap {
    position: absolute;
    top: 80px; /* juste sous la navbar (80px) */
    right: 0;
    width: 170px;
    height: 170px;
    overflow: hidden;
    z-index: 9997;
    pointer-events: none;
}

.theme-badge {
    position: absolute;
    top: 34px;
    right: -52px;
    width: 240px;
    padding: 11px 0;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.25);
    transform: rotate(45deg) translateY(-40px);
    opacity: 0;
    animation:
        theme-badge-drop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards,
        theme-badge-breathe 3.5s ease-in-out 1.1s infinite;
}

.theme-badge i {
    margin-right: 6px;
}

@keyframes theme-badge-drop {
    to {
        transform: rotate(45deg) translateY(0);
        opacity: 1;
    }
}

@keyframes theme-badge-breathe {
    0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.25); }
    50%      { box-shadow: 0 6px 28px rgba(var(--primary-rgb), 0.7), 0 0 0 1px rgba(0, 0, 0, 0.25); }
}

@media (max-width: 560px) {
    .theme-badge-wrap {
        top: 76px;
        width: 130px;
        height: 130px;
    }

    .theme-badge {
        top: 24px;
        right: -46px;
        width: 190px;
        font-size: 0.68rem;
        padding: 8px 0;
    }
}

/* ============================================
   CADRE ANIMÉ DU HERO — filet lumineux haut/bas
   ============================================ */
.hero::before,
.hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--primary), var(--accent), transparent);
    background-size: 200% 100%;
    z-index: 6;
    animation: theme-frame-sweep 7s linear infinite;
}

.hero::before { top: 0; }
.hero::after  { bottom: 0; animation-direction: reverse; }

@keyframes theme-frame-sweep {
    0%   { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   LISERÉ NAVBAR — la navbar est fixe donc c'est visible
   en permanence, quelle que soit la section affichée
   ============================================ */
/* (ancien "#navbar { position: relative }" supprimé : il cassait la navbar fixe pendant les thèmes.
   Le ::after s'ancre déjà correctement sur un élément position: fixed.) */

#navbar::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--accent), var(--primary), transparent);
    background-size: 200% 100%;
    animation: theme-frame-sweep 7s linear infinite;
}

/* ============================================
   RECOLORATION DES INTERACTIONS DU SITE
   (remplace les teintes bleues codées en dur dans main.css par
   la couleur du thème actif, sur TOUTES les sections, pas que le hero)
   ============================================ */
.feature-card:hover {
    border-color: rgba(var(--primary-rgb), 0.35) !important;
}

.team-member-holder:hover {
    border-color: rgba(var(--primary-rgb), 0.5) !important;
    box-shadow: 0 15px 40px rgba(var(--primary-rgb), 0.3) !important;
}

.partner-card:hover {
    border-color: rgba(var(--primary-rgb), 0.3) !important;
}

.nav-menu a:hover {
    background: rgba(var(--primary-rgb), 0.12) !important;
}

.btn-secondary:hover {
    border-color: var(--primary-light) !important;
}

.donate-btn {
    box-shadow: 0 8px 25px rgba(var(--ember-rgb), 0.4) !important;
}

.donate-btn:hover {
    box-shadow: 0 12px 35px rgba(var(--ember-rgb), 0.6) !important;
}

/* ============================================
   ICONES FLOTTANTES / NEIGE — mécanique commune
   Chaque thème définit uniquement ses nth-child : couleur, taille,
   délai et nom d'animation (theme-icons-drift ou theme-icons-fall).
   ============================================ */
.theme-float {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
}

.theme-float i {
    position: absolute;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.12));
}

@keyframes theme-icons-drift {
    0%   { transform: translateY(0) rotate(0deg);     opacity: 0.28; }
    50%  { transform: translateY(-22px) rotate(6deg); opacity: 0.55; }
    100% { transform: translateY(0) rotate(0deg);     opacity: 0.28; }
}

@keyframes theme-icons-fall {
    0%   { transform: translateY(0) rotate(0deg);      opacity: 0;   }
    10%  { opacity: 0.55; }
    90%  { opacity: 0.55; }
    100% { transform: translateY(680px) rotate(20deg); opacity: 0;   }
}

/* ============================================
   ACCESSIBILITÉ
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .theme-badge,
    .hero::before,
    .hero::after,
    #navbar::after,
    .theme-float i {
        animation: none !important;
    }

    .theme-badge {
        opacity: 1;
        transform: rotate(45deg);
    }
}