/* ================================================
   Couleurs de l'affiche - Camp des Jeunes 2026
   Appliquées sur toute l'application
   ================================================ */

:root {
    /* Couleurs principales de l'affiche */
    --theme-primary: #1a5652;
    /* Vert teal foncé */
    --theme-primary-dark: #134340;
    /* Vert teal plus foncé */
    --theme-accent: #f97316;
    /* Orange vif */
    --theme-secondary: #dc2626;
    /* Rouge magenta */
    --theme-gold: #eab308;
    /* Doré lumineux */
}

/* Override des couleurs principales de l'application */

/* Titres et headers */
h1,
h2,
h3,
h4,
h5,
h6,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: var(--theme-primary) !important;
}

/* Boutons primaires */
.btn,
.btn-primary,
.genric-btn.primary,
.boxed-btn,
.boxed-btn3,
.boxed-btn4 {
    background-color: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
}

.btn:hover,
.btn-primary:hover,
.genric-btn.primary:hover,
.boxed-btn:hover,
.boxed-btn3:hover,
.boxed-btn4:hover {
    background-color: var(--theme-secondary) !important;
    border-color: var(--theme-secondary) !important;
}

/* Liens */
a:hover {
    color: var(--theme-accent) !important;
}

/* Back to top button */
#back-top {
    background: var(--theme-accent) !important;
}

#back-top:hover {
    background: var(--theme-secondary) !important;
}

/* Section spans et labels */
.section-tittle>span,
.section-label {
    color: var(--theme-primary) !important;
}

/* Header et navigation */
.header-area .main-header .main-menu ul li a:hover,
.header-area .main-header .main-menu ul li.active a {
    color: var(--theme-accent) !important;
}

/* Boutons outline */
.btn-outline,
.genric-btn.primary-border {
    border-color: var(--theme-accent) !important;
    color: var(--theme-accent) !important;
}

.btn-outline:hover,
.genric-btn.primary-border:hover {
    background-color: var(--theme-accent) !important;
    color: #fff !important;
}

/* Icônes et éléments accentués */
.features-icon i,
.single-cat i,
.services-icon i {
    color: var(--theme-accent) !important;
}

/* Progress bars */
.progress-bar,
.single-progressBar .barfiller .fill {
    background-color: var(--theme-accent) !important;
}

/* Slider/Hero overlays avec couleur thème */
.slider-area .hero-overly,
.hero-overly {
    background: linear-gradient(135deg, rgba(26, 86, 82, 0.85) 0%, rgba(19, 67, 64, 0.9) 100%) !important;
}

/* Footer */
.footer-area {
    background-color: var(--theme-primary-dark) !important;
}

/* Cards et éléments de contenu */
.single-cat:hover,
.services-caption:hover {
    border-color: var(--theme-accent) !important;
}

/* Inputs focus */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--theme-accent) !important;
}

/* Text colors pour sections spéciales */
.text-primary,
.color-primary {
    color: var(--theme-primary) !important;
}

.text-accent,
.color-accent {
    color: var(--theme-accent) !important;
}

/* Badges et tags */
.badge-primary,
.tag-primary {
    background-color: var(--theme-accent) !important;
}

/* Borders colorés */
.border-primary {
    border-color: var(--theme-primary) !important;
}

.border-accent {
    border-color: var(--theme-accent) !important;
}

/* Backgrounds */
.bg-primary {
    background-color: var(--theme-primary) !important;
}

.bg-accent {
    background-color: var(--theme-accent) !important;
}

/* Pagination */
.pagination .page-item.active .page-link,
.pagination .page-link:hover {
    background-color: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
}

/* Tabs actifs */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background-color: var(--theme-accent) !important;
    color: #fff !important;
}

/* Alerts */
.alert-primary {
    background-color: rgba(26, 86, 82, 0.1) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}

.alert-warning {
    background-color: rgba(249, 115, 22, 0.1) !important;
    border-color: var(--theme-accent) !important;
    color: var(--theme-accent) !important;
}

/* ================================================
   Header Top - Barre supérieure
   ================================================ */
.header-top {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%) !important;
    padding: 10px 0;
}

.header-top .header-info-left ul li,
.header-top .header-info-left ul li a {
    color: #ffffff !important;
    font-size: 14px;
}

.header-top .header-info-left ul li i {
    color: var(--theme-accent) !important;
    margin-right: 5px;
}

.header-top .header-info-left ul li a:hover {
    color: var(--theme-accent) !important;
}

.header-top .header-social li a {
    color: #ffffff !important;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.header-top .header-social li a:hover {
    background-color: var(--theme-accent) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.header-top .header-social li a i {
    font-size: 14px;
}