/* =========================================
   ON APPREND TOUS LES JOURS - COMPONENTS CSS
   Composants additionnels pour toutes les pages
   ========================================= */

/* -----------------------------------------
   SECTION FOOTER
   ----------------------------------------- */
.section-footer {
    text-align: center;
    margin-top: var(--space-2xl);
}

/* -----------------------------------------
   CTA BOX
   ----------------------------------------- */
.cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
    padding: var(--space-2xl);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-xl);
    backdrop-filter: blur(10px);
}

.cta-content {
    flex: 1;
}

.cta-title {
    font-size: var(--font-size-2xl);
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.cta-text {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.cta-actions {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .cta-box {
        flex-direction: column;
        text-align: center;
    }
}

/* -----------------------------------------
   HERO BUTTONS
   ----------------------------------------- */
.hero-buttons {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .hero-buttons {
        flex-direction: column;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
}

/* -----------------------------------------
   VIDEO GRID FULL WIDTH
   ----------------------------------------- */
.video-grid-full {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .video-grid-full {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .video-grid-full {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .video-grid-full {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------
   CATEGORIES FILTER
   ----------------------------------------- */
.categories-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-light);
}

.category-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-white);
    border: 2px solid var(--color-gray-light);
    border-radius: var(--border-radius-2xl);
    color: var(--color-text);
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.category-filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.category-filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.category-filter-count {
    background: rgba(0, 0, 0, 0.1);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-xs);
}

.category-filter-btn.active .category-filter-count {
    background: rgba(255, 255, 255, 0.2);
}

/* -----------------------------------------
   EMPTY STATE
   ----------------------------------------- */
.empty-state {
    text-align: center;
    padding: var(--space-4xl) var(--space-xl);
    color: var(--color-gray-dark);
}

.empty-state-text {
    font-size: var(--font-size-lg);
}

/* -----------------------------------------
   ASSOCIATION PAGE
   ----------------------------------------- */
.association-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--space-2xl);
    align-items: start;
}

@media (max-width: 1024px) {
    .association-grid {
        grid-template-columns: 1fr;
    }
}

.association-main {
    /* Main content area */
}

.association-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.association-intro {
    text-align: center;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    border-bottom: 1px solid var(--color-gray-light);
}

.association-name {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-md);
}

.association-name-text {
    display: block;
    color: var(--color-text);
}

.association-name-highlight {
    display: block;
    color: var(--color-secondary);
}

.association-tagline {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    margin: 0;
}

.association-section {
    margin-bottom: var(--space-2xl);
}

.association-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
}

.association-section-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.association-text {
    color: var(--color-text);
    line-height: 1.8;
}

.association-notice {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-cream);
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--color-primary);
}

.association-notice-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    fill: var(--color-primary);
}

.association-notice-text {
    margin: 0;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* Values Grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

@media (max-width: 768px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}

.value-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-cream);
    border-radius: var(--border-radius-lg);
}

.value-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--color-white);
}

.value-content {
    flex: 1;
}

.value-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.value-text {
    margin: 0;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* Stats Card */
.stats-card-title {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    background: var(--color-cream);
    border-radius: var(--border-radius-md);
}

.stat-value {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-secondary);
}

.stat-label {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* Social Card */
.social-card-title {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
}

.social-links-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.social-link-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-cream);
    border-radius: var(--border-radius-md);
    color: var(--color-text);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.social-link-item:hover {
    transform: translateX(4px);
}

.social-link-item svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.social-link-item.youtube svg { fill: #ff0000; }
.social-link-item.facebook svg { fill: #1877f2; }
.social-link-item.instagram svg { fill: #e4405f; }
.social-link-item.linktree svg { fill: #39e09b; }

.social-link-text {
    font-weight: 600;
}

/* Ad Banner Sidebar */
.ad-banner-sidebar {
    padding: var(--space-md);
}

.ad-banner-placeholder-vertical {
    height: 250px;
    max-width: 100%;
}

/* -----------------------------------------
   CONTACT PAGE
   ----------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-2xl);
    align-items: start;
}

@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

.contact-main {
    /* Main content */
}

.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-intro {
    color: var(--color-text-light);
    margin-bottom: var(--space-xl);
}

.contact-form {
    /* Form container */
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-required {
    color: var(--color-error);
}

.form-actions {
    margin-top: var(--space-lg);
}

/* Alerts */
.alert {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-xl);
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

.alert-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.alert-text {
    flex: 1;
}

/* Contact Methods */
.contact-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-method {
    display: flex;
    gap: var(--space-md);
}

.contact-method-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-method-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--color-white);
}

.contact-method-icon.youtube { background: #ff0000; }
.contact-method-icon.facebook { background: #1877f2; }
.contact-method-icon.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.contact-method-icon.email { background: var(--color-primary); }

.contact-method-content {
    flex: 1;
}

.contact-method-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.contact-method-text {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-xs);
}

.contact-method-link {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
}

.contact-method-link:hover {
    color: var(--color-secondary);
}

/* -----------------------------------------
   ADDITIONAL TRANSLATIONS
   ----------------------------------------- */
/* Add these to lang files:
   cta_title, cta_text, stats_title, follow_us, 
   all_categories, cat_education, contact_form_title,
   value_accessibility_title, value_fun_title,
   value_quality_title, value_sharing_title
*/