/*! 
 * FUR N TOURS - SYSTÈME CSS UNIFIÉ
 * ================================
 * 
 * 🎨 ARCHITECTURE:
 * - Variables CSS centralisées pour toutes les couleurs
 * - Classes utilitaires pour styling rapide
 * - Composants modulaires et réutilisables
 * - Thème sombre cohérent
 * 
 * 📖 DOCUMENTATION: Voir CSS-SYSTEM-DOCUMENTATION.md
 * 
 * 🎯 PALETTE PRINCIPALE:
 * - Primary: #27CFEA (Vivid Sky Blue)
 * - Secondary: #80DCFA (Sky Blue) 
 * - Accent: #FFE97D (Jasmine)
 * - Tertiary: #9DBBFF (Jordy Blue)
 * - Dark: #000000 (Black)
 * 
 * ⚠️ RÈGLE: Toujours utiliser les variables CSS, jamais les couleurs en dur !
 */

/* ================================
   SYSTÈME DE COULEURS GLOBAL
   ================================ */
:root {
    /* Palette de couleurs principale */
    --color-primary: #27CFEA;        /* Vivid Sky Blue - Couleur principale */
    --color-secondary: #80DCFA;      /* Sky Blue - Couleur secondaire */
    --color-accent: #FFE97D;         /* Jasmine - Couleur d'accent */
    --color-tertiary: #9DBBFF;       /* Jordy Blue - Couleur tertiaire */
    --color-dark: #282a36;           /* Noir - Fond principal */
    
    /* Variations de couleurs */
    --color-primary-light: rgba(39, 207, 234, 0.1);
    --color-primary-lighter: rgba(39, 207, 234, 0.05);
    --color-primary-border: rgba(39, 207, 234, 0.3);
    --color-primary-border-light: rgba(39, 207, 234, 0.2);
    
    --color-secondary-light: rgba(128, 220, 250, 0.1);
    --color-secondary-lighter: rgba(128, 220, 250, 0.05);
    
    --color-accent-light: rgba(255, 233, 125, 0.1);
    --color-accent-lighter: rgba(255, 233, 125, 0.05);
    
    /* Couleurs sémantiques */
    --color-success: #27ae60;
    --color-warning: var(--color-accent);
    --color-error: #e74c3c;
    --color-info: var(--color-primary);
    --color-blue: #2563eb;
    --color-blue-dark: #1d4ed8;
    --color-gray-medium: var(--color-gray-medium);
    --color-orange: #ffc107;
    --color-light-gray: #e9ecef;
    
    /* Backgrounds */
    --bg-primary: var(--color-dark);
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --bg-light: var(--color-primary-lighter);
    --bg-medium: var(--color-primary-light);
    --bg-card: rgba(0, 0, 0, 0.8);
    --bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* Textes */
    --text-primary: var(--color-secondary);
    --text-secondary: var(--color-primary);
    --text-accent: var(--color-accent);
    --text-muted: #999999;
    --text-dark: var(--color-dark);
    --text-white: #ffffff;
    --text-light-gray: var(--text-light-gray)666;
    --text-gray: var(--text-gray)333;
    
    /* Bordures */
    --border-primary: var(--color-primary-border);
    --border-light: var(--color-primary-border-light);
    --border-secondary: var(--color-secondary);
    
    /* Ombres */
    --shadow-small: 0 2px 10px rgba(39, 207, 234, 0.1);
    --shadow-medium: 0 5px 15px rgba(39, 207, 234, 0.2);
    --shadow-large: 0 10px 30px rgba(39, 207, 234, 0.3);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --gradient-dark: linear-gradient(135deg, #282a36, #1a1a1a);
    --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary) 60%, var(--color-primary) 80%);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ================================
   CLASSES UTILITAIRES GLOBALES
   ================================ */

/* Reset et base */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
}

/* Classes de couleurs de texte */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-accent { color: var(--text-accent) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-dark { color: var(--text-dark) !important; }
.text-white { color: var(--text-white) !important; }

/* Classes de backgrounds */
.bg-primary { background: var(--bg-primary) !important; }
.bg-secondary { background: var(--bg-secondary) !important; }
.bg-tertiary { background: var(--bg-tertiary) !important; }
.bg-light { background: var(--bg-light) !important; }
.bg-medium { background: var(--bg-medium) !important; }
.bg-card { background: var(--bg-card) !important; }

/* Classes de bordures */
.border-primary { border-color: var(--border-primary) !important; }
.border-light { border-color: var(--border-light) !important; }
.border-secondary { border-color: var(--border-secondary) !important; }

/* ================================
   UTILITAIRES D'ESPACEMENT
   ================================ */

/* Marges */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.5rem !important; }
.m-2 { margin: 1rem !important; }
.m-3 { margin: 1.5rem !important; }
.m-4 { margin: 2rem !important; }
.m-5 { margin: 3rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }
.mt-5 { margin-top: 3rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

/* Paddings */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.5rem !important; }
.p-2 { padding: 1rem !important; }
.p-3 { padding: 1.5rem !important; }
.p-4 { padding: 2rem !important; }
.p-5 { padding: 3rem !important; }

/* ================================
   UTILITAIRES TYPOGRAPHIQUES
   ================================ */

/* Tailles de police */
.text-xs { font-size: 0.75rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-base { font-size: 1rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-xl { font-size: 1.25rem !important; }
.text-2xl { font-size: 1.5rem !important; }
.text-3xl { font-size: 1.875rem !important; }
.text-4xl { font-size: 2.25rem !important; }

/* Poids de police */
.font-light { font-weight: 300 !important; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }

/* Alignement */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* ================================
   UTILITAIRES DE LAYOUT
   ================================ */

/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* Flex */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.align-start { align-items: flex-start !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }

/* Gaps */
.gap-1 { gap: 0.5rem !important; }
.gap-2 { gap: 1rem !important; }
.gap-3 { gap: 1.5rem !important; }
.gap-4 { gap: 2rem !important; }

/* Application globale du thème sombre */
p, span, .furmeet-description, .product-description, .info-item span, 
.meet-meta, .rating-count, .newsletter-content p {
    color: var(--text-primary);
}

/* Éléments avec fond clair convertis */
.newsletter-section, .activity-icon, .btn-contact, 
.info-item-block, .contact-info, .warning-box,
.highlight-box, .resource-item, .toc-link:hover,
.intro-section, .staff-disclaimer, .contact-card, 
.cgu-header, .assembly-details, .final-contact,
.detail-item, .filter-btn, .btn-map-action {
    background: var(--bg-light);
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* Éléments avec fond bleu clair */
.furmeet-category, .tag, .right-item, .security-item,
.objective-item, .council-detail, .bureau-role {
    background: var(--bg-medium);
    color: var(--text-primary);
}

/* Bordures et lignes */
.meet-header, .content-section, .meet-footer, 
.info-block, .timeline-item {
    border-color: var(--border-light);
}

/* Force le mode sombre sur toutes les sections principales */
section, .section, .hero, main, article {
    background-color: var(--primary-bg) !important;
}

/* Reset et base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    overflow-x: hidden;
    background: var(--bg-primary);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ================================
   HEADER STYLES
   ================================ */
.header {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: var(--shadow-medium);
    border-bottom: 1px solid var(--border-primary);
    transition: var(--transition-medium);
}

/* Header when scrolled */
.header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-small);
}

.header.scrolled .nav-logo h2 {
    color: var(--text-dark);
}

.header.scrolled .nav-logo span {
    color: var(--text-light-gray);
}

.header.scrolled .nav-menu a {
    color: var(--text-gray);
}

.header.scrolled .nav-menu a:hover {
    color: var(--color-primary);
}

.header.scrolled .nav-menu a::after {
    background: var(--color-primary);
}

.header.scrolled .nav-cart {
    background: var(--color-primary-light);
}

.header.scrolled .nav-cart:hover {
    background: var(--color-primary-border-light);
}

.header.scrolled .nav-cart i {
    color: var(--color-primary);
}

.header.scrolled .nav-toggle span {
    background: var(--text-gray)333;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-logo h2 {
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 1.8rem;
}

.nav-logo span {
    color: var(--color-tertiary);
    font-size: 0.9rem;
    font-weight: 400;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    transition: var(--transition-medium);
    position: relative;
}

.nav-menu a:hover {
    color: var(--text-secondary);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--text-secondary);
    transition: var(--transition-medium);
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-cart {
    position: relative;
    cursor: pointer;
    padding: 10px;
    border-radius: 50px;
    background: var(--bg-medium);
    transition: all 0.3s ease;
}

.nav-cart:hover {
    background: var(--color-primary-border-light);
    transform: translateY(-2px);
}

.nav-cart i {
    font-size: 1.5rem;
    color: var(--color-primary);
}

.cart-count {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-accent);
    color: var(--color-dark);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: var(--color-secondary);
    margin: 3px 0;
    transition: 0.3s;
}

/* ================================
   SECTIONS PRINCIPALES
   ================================ */

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--bg-overlay), var(--color-primary-light)), url('img/hero-poster.webp') center/cover no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    position: relative;
    overflow: hidden;
}

/* Hero Background Container */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Hero Poster (affiché par défaut) */
.hero-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: opacity 0.5s ease-in-out;
}

.hero-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hero Video (caché par défaut) */
.hero-background video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Overlay pour améliorer la lisibilité */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 4;
}



/* Hero Content - Centered */
.hero-content-center {
    position: relative;
    z-index: 5;
    text-align: center;
    color: white;
    max-width: 800px;
    width: 100%;
}

.hero-text h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 2px;
}

.hero-text h2 {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 3rem;
    opacity: 0.95;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-buttons {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.btn-telegram {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border: 2px solid rgba(39, 207, 234, 0.8);
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-telegram:hover {
    background: var(--color-primary-border-light);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(39, 207, 234, 0.4);
}

.btn-telegram i {
    font-size: 1.2rem;
}

.btn-boutique {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border: 2px solid var(--color-accent);
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-boutique:hover {
    background: rgba(255, 233, 125, 0.2);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 233, 125, 0.4);
}

.scroll-info {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 2rem;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.video-credit {
    font-size: 0.9rem;
    opacity: 0.7;
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.credit-name {
    color: var(--color-blue);
    font-weight: 600;
    text-shadow: none;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.05"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

/* ================================
   SYSTÈME DE BOUTONS
   ================================ */

/* Bouton primaire */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gradient-primary);
    color: var(--text-dark);
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition-medium);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-large);
    background: var(--gradient-accent);
}

/* Bouton secondaire */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--text-secondary);
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    border: 2px solid var(--text-secondary);
    font-weight: 600;
    transition: var(--transition-medium);
    cursor: pointer;
    font-size: 1rem;
}

.btn-secondary:hover {
    background: var(--text-secondary);
    color: var(--text-dark);
    transform: translateY(-2px);
}

/* Bouton d'accent */
.btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--text-accent);
    color: var(--text-dark);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    transition: var(--transition-medium);
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-accent:hover {
    background: var(--color-tertiary);
    transform: translateY(-2px);
}

/* ================================
   ÉLÉMENTS AVEC ACCENT JAUNE
   ================================ */

/* Text avec highlight jaune */
.text-highlight {
    color: var(--color-accent) !important;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(255, 233, 125, 0.3);
}

/* Badge jaune */
.badge-accent {
    background: var(--color-accent);
    color: var(--text-dark);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(255, 233, 125, 0.3);
}

/* Bordure d'accent */
.border-accent {
    border: 2px solid var(--color-accent) !important;
    box-shadow: 0 0 12px rgba(255, 233, 125, 0.2) !important;
}

/* Icônes avec accent */
.icon-accent {
    color: var(--color-accent) !important;
    filter: drop-shadow(0 0 6px rgba(255, 233, 125, 0.4));
}

/* Classes utilitaires pour accents jaunes */
.bg-accent {
    background: var(--color-accent) !important;
    color: var(--color-dark) !important;
}

.shadow-accent {
    box-shadow: 0 4px 20px rgba(255, 233, 125, 0.3) !important;
}

.glow-accent {
    text-shadow: 0 0 10px rgba(255, 233, 125, 0.6) !important;
}

/* ================================
   SYSTÈME DE FORMULAIRES
   ================================ */

/* Champs de base */
input, 
textarea, 
select {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 15px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: var(--transition-medium);
    width: 100%;
}

input:focus, 
textarea:focus, 
select:focus {
    outline: none;
    border-color: var(--border-primary);
    box-shadow: 0 0 0 3px var(--color-primary-lighter);
}

input::placeholder, 
textarea::placeholder {
    color: var(--text-muted);
}

/* Formulaires spécialisés */
.newsletter-form {
    display: flex;
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.newsletter-form input {
    flex: 1;
    border-radius: 50px;
}

.newsletter-form .btn-primary {
    padding: 15px 25px;
    white-space: nowrap;
    border-radius: 50px;
}

.contact-form {
    display: grid;
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Products Section */
.products-section {
    padding: 100px 0;
    background: var(--color-dark);
}

.section-title {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--color-secondary);
    margin-bottom: 4rem;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

/* ================================
   SYSTÈME DE CARTES
   ================================ */

.product-card {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-small);
    transition: var(--transition-medium);
    position: relative;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-medium);
    border-color: var(--border-primary);
}

.product-image {
    position: relative;
    height: 250px;
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-placeholder {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.image-placeholder i {
    font-size: 3rem;
    color: white;
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(37, 99, 235, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.btn-quick-view {
    background: var(--color-accent);
    color: var(--color-dark);
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-quick-view:hover {
    background: var(--color-secondary);
    color: var(--color-dark);
    transform: scale(1.05);
}

.product-info {
    padding: 2rem;
}

.product-info h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-blue);
    margin-bottom: 0.5rem;
}

.product-description {
    color: var(--text-light-gray);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.product-price {
    margin-bottom: 1rem;
}

.price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-accent);
    text-shadow: 0 0 10px rgba(255, 233, 125, 0.3);
}

.product-options {
    margin-bottom: 1rem;
}

.size-select {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--color-primary-border);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--color-primary-lighter);
    color: var(--color-secondary);
    cursor: pointer;
}

.btn-add-cart {
    width: 100%;
    background: var(--gradient-primary);
    color: white;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-add-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}

/* Stats Section */
.stats-section {
    padding: 100px 0;
    background: var(--color-dark);
}

.stats-section .section-title {
    color: var(--color-primary);
    margin-bottom: 4rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

.stat-card {
    background: var(--color-primary-lighter);
    border: 1px solid var(--color-primary-border-light);
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 10px 40px var(--color-primary-light);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-tertiary) 100%);
}

.stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px var(--color-primary-border-light);
}

.stat-category {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}

.stat-number {
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: 0.5rem;
}

/* Animation pour les chiffres */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-number {
    animation: countUp 0.8s ease-out;
}

.stat-card:nth-child(1) .stat-number {
    animation-delay: 0.1s;
}

.stat-card:nth-child(2) .stat-number {
    animation-delay: 0.2s;
}

.stat-card:nth-child(3) .stat-number {
    animation-delay: 0.3s;
}

/* About Section - Keep for other pages */
.about-section {
    padding: 100px 0;
    background: var(--primary-bg);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-blue);
    margin-bottom: 2rem;
}

.about-text p {
    color: var(--text-light-gray);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.about-features {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.feature i {
    font-size: 2rem;
    color: var(--color-primary);
    padding: 15px;
    background: var(--color-primary-light);
    border-radius: 50%;
}

.about-image {
    display: flex;
    justify-content: center;
}

.about-image .image-placeholder {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, var(--color-blue) 0%, #7c3aed 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-image .image-placeholder i {
    font-size: 4rem;
    color: white;
}

/* Contact Section */
.contact-section {
    padding: 100px 0;
    background: var(--primary-bg);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 3rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--color-primary-lighter);
    border: 1px solid var(--color-primary-border-light);
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--color-primary-light);
}

.contact-item i {
    font-size: 1.5rem;
    color: var(--color-primary);
    background: var(--color-primary-light);
    padding: 15px;
    border-radius: 50%;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--color-primary-lighter);
    border: 1px solid var(--color-primary-border-light);
    border-radius: 20px;
    box-shadow: 0 10px 30px var(--color-primary-light);
}

.contact-form input,
.contact-form textarea {
    padding: 15px;
    border: 2px solid var(--color-primary-border);
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--color-primary-lighter);
    color: var(--color-secondary);
    transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Cart Sidebar */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-primary);
    z-index: 2000;
    transition: var(--transition-medium);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-medium);
}

.cart-sidebar.active {
    right: 0;
}

.cart-header {
    padding: 2rem;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-light);
}

.cart-close {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-light-gray);
}

.cart-items {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}

.empty-cart {
    text-align: center;
    color: var(--text-light-gray);
    font-style: italic;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-light-gray);
}

.cart-item-info h4 {
    color: var(--color-blue);
    margin-bottom: 0.5rem;
}

.cart-item-price {
    font-weight: 600;
    color: var(--color-blue);
}

.cart-footer {
    padding: 2rem;
    border-top: 1px solid var(--color-primary-border);
    background: var(--color-primary-lighter);
}

.cart-total {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.btn-checkout {
    width: 100%;
    background: linear-gradient(45deg, var(--color-blue), #7c3aed);
    color: white;
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ================================
   FOOTER
   ================================ */
.footer {
    background: var(--gradient-dark);
    border-top: 2px solid var(--border-primary);
    color: var(--text-primary);
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.footer-section p {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: var(--color-primary);
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: var(--color-primary-border-light);
    border: 1px solid var(--color-primary-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--color-primary);
    color: var(--color-dark);
    transform: translateY(-2px);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--color-primary-border-light);
    color: rgba(128, 220, 250, 0.7);
}

/* Boutique Page Styles */
.boutique-hero {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary-border-light) 100%);
    padding: 120px 0 80px;
    color: white;
    text-align: center;
}

.boutique-hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.boutique-hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1rem;
    opacity: 0.8;
}

.breadcrumb a {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.breadcrumb a:hover {
    opacity: 1;
}

.breadcrumb span {
    color: rgba(255, 255, 255, 0.6);
}

/* Products Filter */
.products-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    gap: 2rem;
}

.products-filter h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-blue);
    margin: 0;
}

.filter-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 20px;
    border: 2px solid var(--color-primary-border);
    background: var(--color-primary-lighter);
    color: var(--color-secondary);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--color-primary);
    color: var(--color-dark);
    border-color: var(--color-primary);
}

/* Product Badge */
.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 3;
}

.product-badge:not(.sale):not(.popular) {
    background: #27ae60;
    color: white;
}

.product-badge.sale {
    background: #e74c3c;
    color: white;
}

.product-badge.popular {
    background: var(--color-accent);
    color: var(--color-dark);
}

/* Product Rating */
.product-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.stars {
    display: flex;
    gap: 2px;
}

.stars i {
    color: var(--color-accent);
    font-size: 0.9rem;
    text-shadow: 0 0 6px rgba(255, 233, 125, 0.3);
}

.stars i.far {
    color: var(--color-light-gray);
}

.rating-count {
    font-size: 0.85rem;
    color: var(--text-light-gray);
}

/* Price styling */
.product-price {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

.old-price {
    font-size: 1.2rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

/* Navigation active state */
.nav-menu a.active {
    color: var(--color-accent);
    text-shadow: 0 0 8px rgba(255, 233, 125, 0.4);
}

.nav-menu a.active::after {
    width: 100%;
    background: var(--color-accent);
    box-shadow: 0 0 8px rgba(255, 233, 125, 0.5);
}

/* Newsletter Section */
.newsletter-section {
    background: #f8f9fa;
    padding: 80px 0;
}

.newsletter-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-blue);
    margin-bottom: 1rem;
}

.newsletter-content p {
    font-size: 1.1rem;
    color: var(--text-light-gray);
    margin-bottom: 2rem;
}

.newsletter-form {
    display: flex;
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.newsletter-form input {
    flex: 1;
    padding: 15px;
    border: 2px solid var(--color-light-gray);
    border-radius: 50px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-blue);
}

.newsletter-form .btn-primary {
    padding: 15px 25px;
    white-space: nowrap;
}

/* FurMeet Section */
.furmeet-section {
    padding: 100px 0;
    background: var(--color-dark);
}

.furmeet-section .section-subtitle {
    max-width: 600px;
    margin: 0 auto 4rem;
    line-height: 1.6;
}

.furmeet-section .mention {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.furmeet-section .link {
    color: var(--color-primary);
    text-decoration: none;
}

.furmeet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.furmeet-card {
    background: var(--color-primary-lighter);
    border: 1px solid var(--color-primary-border-light);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px var(--color-primary-light);
    transition: all 0.3s ease;
}

.furmeet-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px var(--color-primary-border-light);
}

.furmeet-card.protected {
    opacity: 0.7;
}

.furmeet-image {
    position: relative;
    height: 200px;
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.furmeet-bg {
    background: linear-gradient(135deg, var(--color-blue) 0%, #7c3aed 100%);
}

.furmeet-bg-2 {
    background: linear-gradient(135deg, #7c3aed 0%, var(--color-blue) 100%);
}

.furmeet-bg-3 {
    background: linear-gradient(135deg, var(--color-gray-medium) 0%, #374151 100%);
}

.furmeet-date {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 233, 125, 0.9);
    color: var(--color-dark);
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.image-placeholder i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.7);
}

.furmeet-content {
    padding: 2rem;
}

.furmeet-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.furmeet-category {
    display: inline-block;
    background: var(--color-primary-border-light);
    color: var(--color-primary);
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.protected-cat {
    background: #f5f5f5;
    color: var(--color-gray-medium);
}

.furmeet-description {
    color: var(--text-light-gray);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.furmeet-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.furmeet-link {
    color: var(--color-blue);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.furmeet-link:hover {
    color: #1d4ed8;
}

.protected-link {
    color: var(--color-gray-medium);
}

/* Meet Page Styles */
.meet-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.meet-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-blue) 0%, #7c3aed 100%);
    background-size: cover;
    background-position: center;
}

.meet-hero-bg.alt-bg {
    background: linear-gradient(135deg, #7c3aed 0%, var(--color-blue) 100%);
}

.meet-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.meet-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.meet-breadcrumb {
    margin-bottom: 1rem;
    opacity: 0.8;
}

.meet-breadcrumb a {
    color: white;
    text-decoration: none;
}

.meet-breadcrumb span {
    margin: 0 0.5rem;
}

.meet-hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.meet-content {
    padding: 80px 0;
    background: var(--primary-bg);
}

.meet-content .container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
}

.meet-article {
    background: var(--color-primary-lighter);
    border: 1px solid var(--color-primary-border-light);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px var(--color-primary-light);
}

.meet-header {
    border-bottom: 1px solid var(--color-light-gray);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.meet-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-light-gray);
}

.meet-date {
    text-transform: capitalize;
}

.meet-author {
    color: var(--color-blue);
    font-weight: 600;
}

.meet-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-blue);
}

.meet-intro {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-blue);
    margin-bottom: 1.5rem;
}

.meet-link {
    color: var(--color-blue);
    text-decoration: none;
}

.paw-divider {
    text-align: center;
    margin: 3rem 0;
    color: var(--color-blue);
}

.paw-divider i {
    font-size: 1.5rem;
}

.meet-info-box {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.meet-info-box h4 {
    color: var(--color-blue);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-item.full-width {
    grid-column: 1 / -1;
}

.info-label {
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

.info-value {
    color: var(--color-secondary);
}

.map-placeholder {
    background: var(--color-primary-light);
    border: 2px dashed var(--color-primary);
    border-radius: 10px;
    padding: 3rem;
    text-align: center;
    margin: 2rem 0;
    color: var(--color-primary);
}

.map-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Interactive Map Styles */
.interactive-map {
    width: 100%;
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.map-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid var(--color-light-gray);
}

.map-address {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.map-address i {
    font-size: 1.5rem;
    color: var(--color-blue);
    min-width: 25px;
}

.map-address strong {
    color: var(--color-blue);
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    display: block;
}

.map-address p {
    color: var(--text-light-gray);
    margin: 0;
    font-size: 0.9rem;
}

.btn-map-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 20px;
    background: var(--color-blue);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-map-action:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}

.btn-map-action i {
    font-size: 0.8rem;
}

/* Custom Leaflet marker styles */
.custom-marker-icon {
    background: var(--color-blue);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Responsive map styles */
@media (max-width: 768px) {
    .interactive-map {
        height: 250px;
    }
    
    .map-info {
        flex-direction: column;
        text-align: center;
    }
    
    .map-address {
        justify-content: center;
    }
    
    .btn-map-action {
        width: 100%;
        justify-content: center;
    }
}

/* Activity Cards */
.activities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.activity-card {
    background: var(--color-primary-lighter);
    border: 2px solid var(--color-primary-border-light);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.activity-card:hover {
    border-color: var(--color-blue);
    transform: translateY(-5px);
}

.activity-icon {
    width: 60px;
    height: 60px;
    background: #f0f7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.activity-icon i {
    font-size: 1.5rem;
    color: var(--color-blue);
}

/* Timeline */
.timeline {
    position: relative;
    padding: 2rem 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-light-gray);
}

.timeline-item {
    position: relative;
    display: flex;
    margin-bottom: 2rem;
}

.timeline-time {
    background: var(--color-blue);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    margin-right: 2rem;
    min-width: 80px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.timeline-content {
    flex: 1;
    padding-top: 0.25rem;
}

.timeline-content h4 {
    color: var(--color-blue);
    margin-bottom: 0.5rem;
}

/* Info Item Block */
.info-list {
    display: grid;
    gap: 1.5rem;
}

.info-item-block {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.info-item-block i {
    font-size: 1.5rem;
    color: var(--color-blue);
    margin-top: 0.25rem;
}

.info-item-block strong {
    display: block;
    color: var(--color-blue);
    margin-bottom: 0.25rem;
}

/* Meet Footer */
.meet-footer {
    border-top: 1px solid var(--color-light-gray);
    padding-top: 2rem;
    margin-top: 3rem;
}

.meet-tags {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.tag {
    background: #f0f7ff;
    color: var(--color-blue);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.meet-navigation {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.btn-back,
.btn-next {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 20px;
    background: #f8f9fa;
    color: var(--color-blue);
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-back:hover,
.btn-next:hover {
    background: var(--color-blue);
    color: white;
}

/* Sidebar */
.meet-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sidebar-widget {
    background: var(--color-primary-lighter);
    border: 1px solid var(--color-primary-border-light);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px var(--color-primary-light);
}

.sidebar-widget h3 {
    color: var(--color-blue);
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.info-block {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.info-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.info-block i {
    font-size: 1.2rem;
    color: var(--color-blue);
    width: 20px;
}

.info-block strong {
    display: block;
    color: var(--text-gray);
    margin-bottom: 0.25rem;
}

.info-block span {
    color: var(--text-light-gray);
    font-size: 0.9rem;
}

.btn-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 20px;
    background: #f0f7ff;
    color: var(--color-blue);
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin: 0.5rem 0;
    width: 100%;
    justify-content: center;
}

.btn-contact:hover {
    background: var(--color-blue);
    color: white;
}

.btn-contact.featured {
    background: var(--color-blue);
    color: white;
}

.btn-contact.featured:hover {
    background: #1d4ed8;
}

/* Furry Info Page Styles */
.furry-hero {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary-border-light) 100%);
    padding: 120px 0 80px;
    color: white;
    text-align: center;
}

.furry-hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.furry-content {
    padding: 80px 0;
    background: var(--primary-bg);
}

.furry-content .container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
}

.furry-article {
    background: var(--color-primary-lighter);
    border: 1px solid var(--color-primary-border-light);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px var(--color-primary-light);
}

.content-section {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #f0f0f0;
}

.content-section:last-of-type {
    border-bottom: none;
    margin-bottom: 2rem;
}

.content-section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-blue);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f7ff;
}

.lead-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.content-section p {
    color: var(--text-light-gray);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.furry-link {
    color: var(--color-blue);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.furry-link:hover {
    color: #1d4ed8;
}

/* Video Embed */
.video-embed {
    margin: 2rem 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.video-thumbnail {
    position: relative;
    background: linear-gradient(135deg, var(--color-blue) 0%, #7c3aed 100%);
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-thumbnail:hover {
    transform: scale(1.02);
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    background: linear-gradient(135deg, var(--color-blue) 0%, #7c3aed 100%);
}

.video-placeholder i {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.video-placeholder h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.video-placeholder p {
    opacity: 0.8;
    color: white;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.3s ease;
}

.play-button:hover {
    background: var(--jasmine);
    transform: translate(-50%, -50%) scale(1.1);
}

.play-button i {
    font-size: 2rem;
    color: var(--color-blue);
    margin-left: 5px;
}

/* Content Navigation */
.content-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #f0f0f0;
}

.share-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.share-buttons span {
    color: var(--text-light-gray);
    font-weight: 600;
}

.share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.share-btn:hover {
    transform: translateY(-2px);
}

.share-btn.facebook {
    background: #1877f2;
}

.share-btn.twitter {
    background: #1da1f2;
}

.share-btn.discord {
    background: #7289da;
}

/* Furry Sidebar */
.furry-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.toc {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toc-link {
    color: var(--text-light-gray);
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.toc-link:hover {
    background: #f0f7ff;
    color: var(--color-blue);
    border-left-color: var(--color-blue);
}

.resource-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.resource-item:hover {
    background: #f0f7ff;
}

.resource-item i {
    font-size: 1.5rem;
    color: var(--color-blue);
    width: 30px;
    text-align: center;
}

.resource-item strong {
    display: block;
    color: var(--text-gray);
    margin-bottom: 0.25rem;
}

.resource-item span {
    color: var(--text-light-gray);
    font-size: 0.9rem;
}

/* Staff Section */
.staff-section {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary-border-light) 100%);
    color: var(--color-secondary);
}

.staff-section .section-title {
    color: var(--color-primary);
    margin-bottom: 4rem;
}

.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-bottom: 4rem;
}

.staff-member {
    text-align: center;
    padding: 2rem;
    background: var(--color-primary-light);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid var(--color-primary-border);
    transition: all 0.3s ease;
}

.staff-member:hover {
    transform: translateY(-10px);
    background: var(--color-primary-border-light);
    border-color: var(--color-primary);
}

.staff-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
}

.staff-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(39, 207, 234, 0.5);
    transition: all 0.3s ease;
}

.staff-avatar:hover img {
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.staff-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-primary-border-light);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(39, 207, 234, 0.5);
}

.staff-placeholder i {
    font-size: 3rem;
    color: var(--color-secondary);
}

.staff-info h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

.staff-role {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
}

.staff-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px) scale(1.1);
}

/* Social media colors on hover */
.social-link.telegram:hover { background: #0088cc; }
.social-link.instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-link.twitter:hover { background: #1da1f2; }
.social-link.twitch:hover { background: #9146ff; }
.social-link.discord:hover { background: #7289da; }

.staff-disclaimer {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.staff-disclaimer p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-style: italic;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .hero {
        padding: 100px 1rem;
    }

    .hero-text h1 {
        font-size: 2.8rem;
    }

    .hero-text h2 {
        font-size: 1.4rem;
        margin-bottom: 2rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .btn-telegram,
    .btn-boutique {
        width: 200px;
        justify-content: center;
    }

    .video-credit {
        bottom: -80px;
        font-size: 0.8rem;
    }

    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .contact-content {
        grid-template-columns: 1fr;
    }

    .about-features {
        justify-content: center;
    }

    /* Stats section responsive */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .stat-card {
        padding: 2rem 1.5rem;
    }

    .stat-number {
        font-size: 3rem;
    }

    .cart-sidebar {
        width: 100%;
        right: -100%;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 1rem;
    }

    .hero-text h1 {
        font-size: 2.2rem;
    }

    .hero-text h2 {
        font-size: 1.2rem;
    }

    .hero-buttons {
        gap: 0.8rem;
    }

    .btn-telegram,
    .btn-boutique {
        padding: 12px 20px;
        font-size: 0.9rem;
        width: 180px;
    }

    .scroll-info {
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .about-features {
        flex-direction: column;
        gap: 1rem;
    }

    .stats-grid {
        gap: 1.5rem;
    }

    .stat-card {
        padding: 1.5rem 1rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .stat-category {
        font-size: 0.9rem;
    }

    .staff-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .staff-member {
        padding: 1.5rem;
    }

    .staff-avatar {
        width: 100px;
        height: 100px;
    }

    .staff-social {
        gap: 0.8rem;
    }

    .social-link {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    /* FurMeet responsive */
    .furmeet-grid {
        grid-template-columns: 1fr;
    }

    .meet-content .container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .meet-hero h1 {
        font-size: 2.5rem;
    }

    .activities-grid {
        grid-template-columns: 1fr;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .meet-navigation {
        flex-direction: column;
    }

    .timeline::before {
        left: 15px;
    }

    .timeline-time {
        min-width: 60px;
        margin-right: 1rem;
    }

    /* Furry page responsive */
    .furry-content .container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .furry-hero-content h1 {
        font-size: 2.5rem;
    }

    .content-section h2 {
        font-size: 1.5rem;
    }

    .content-navigation {
        flex-direction: column;
        gap: 1rem;
    }

    .share-buttons {
        order: -1;
    }

    .play-button {
        width: 60px;
        height: 60px;
    }

    .play-button i {
        font-size: 1.5rem;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-card {
    animation: fadeInUp 0.6s ease forwards;
}

.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* CGU Styles */
.cgu-header {
    text-align: center;
    margin: 120px 0 60px 0;
    padding: 40px 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary-border-light) 100%);
    color: white;
    border-radius: 20px;
}

.cgu-header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.update-date {
    font-size: 1.2rem;
    opacity: 0.9;
    font-weight: 300;
}

.cgu-content {
    max-width: 900px;
    margin: 0 auto 80px auto;
    padding: 0 20px;
}

.cgu-section {
    margin-bottom: 40px;
    background: var(--color-primary-lighter);
    border: 1px solid var(--color-primary-border-light);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--color-primary-light);
    border-left: 5px solid var(--color-primary);
}

.cgu-section h2 {
    color: var(--color-blue);
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;
}

.cgu-section p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 15px;
}

.cgu-section ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

.cgu-section li {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 10px;
    padding-left: 10px;
}

.contact-info {
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

.contact-info p {
    margin-bottom: 10px;
}

.contact-info a {
    color: var(--color-blue);
    text-decoration: none;
    font-weight: 500;
}

.contact-info a:hover {
    text-decoration: underline;
}

.warning-box {
    background: var(--color-accent-lighter);
    border: 1px solid var(--color-accent);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.warning-box p {
    color: var(--color-dark);
    margin-bottom: 0;
}

/* Styles spécifiques Politique de Confidentialité */
.intro-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 40px;
    text-align: center;
}

.intro-text {
    font-size: 1.2rem;
    line-height: 1.8;
    margin: 0;
}

.sub-list {
    margin-left: 20px;
    margin-top: 10px;
}

.highlight-box {
    background: var(--color-accent-lighter);
    border: 2px solid var(--color-accent);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 0 15px rgba(255, 233, 125, 0.2);
}

.highlight-box p {
    color: var(--text-dark);
    margin: 0;
    font-weight: 500;
}

.rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.right-item {
    background: #f8fafc;
    padding: 25px;
    border-radius: 12px;
    border-left: 4px solid #667eea;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.right-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.right-item i {
    font-size: 1.5rem;
    color: #667eea;
    min-width: 30px;
}

.right-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-blue);
    margin-bottom: 5px;
}

.right-item p {
    font-size: 0.95rem;
    color: var(--color-gray-medium);
    margin: 0;
}

.security-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.security-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #f0fdf4;
    padding: 25px;
    border-radius: 12px;
    border-left: 4px solid #10b981;
}

.security-item i {
    font-size: 1.8rem;
    color: #10b981;
    margin-top: 5px;
}

.security-item h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #065f46;
    margin-bottom: 8px;
}

.security-item p {
    color: #047857;
    margin: 0;
}

.final-contact {
    text-align: center;
}

.contact-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 25px;
    max-width: 600px;
    margin: 0 auto;
}

.contact-card i {
    font-size: 2.5rem;
    opacity: 0.9;
}

.contact-card h4 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.contact-card p {
    margin-bottom: 15px;
    opacity: 0.9;
}

.contact-email {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 12px 24px;
    border-radius: 30px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.contact-email:hover {
    background: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    color: white;
}

/* Responsive CGU */
@media (max-width: 768px) {
    .cgu-header {
        margin: 100px 20px 40px 20px;
        padding: 30px 20px;
    }
    
    .cgu-header h1 {
        font-size: 2.2rem;
    }
    
    .update-date {
        font-size: 1rem;
    }
    
    .cgu-section {
        padding: 20px;
        margin-bottom: 25px;
    }
    
    .cgu-section h2 {
        font-size: 1.5rem;
    }
    
    .cgu-section p,
    .cgu-section li {
        font-size: 1rem;
    }

    .intro-section {
        margin: 20px;
        padding: 25px;
    }

    .intro-text {
        font-size: 1.1rem;
    }

    .rights-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .right-item {
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }

    .security-item {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .contact-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 25px;
        margin: 0 20px;
    }

    .contact-card i {
        font-size: 2rem;
    }
}

/* Styles spécifiques pour les Statuts */
.objectives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.objective-item {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 25px;
    border-radius: 15px;
    border-left: 5px solid #667eea;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.objective-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
}

.objective-item i {
    font-size: 2rem;
    color: #667eea;
    margin-bottom: 15px;
}

.objective-item h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-blue);
    margin-bottom: 10px;
}

.objective-item p {
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.resource-category {
    background: #f0fdf4;
    border: 2px solid #10b981;
    border-radius: 12px;
    padding: 20px;
}

.resource-category h4 {
    color: #047857;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.resource-category h4 i {
    font-size: 1.2rem;
}

.resource-category ul {
    margin: 0;
    padding-left: 15px;
}

.resource-category li {
    color: #059669;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.assembly-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
    background: #fef3c7;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid #f59e0b;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.detail-item i {
    color: #d97706;
    font-size: 1.2rem;
    min-width: 20px;
}

.detail-item span {
    color: #92400e;
    font-weight: 500;
}

.council-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.council-detail {
    background: #ede9fe;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #8b5cf6;
}

.council-detail i {
    font-size: 1.8rem;
    color: #7c3aed;
    margin-bottom: 10px;
}

.council-detail h4 {
    color: #6d28d9;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.council-detail p {
    color: #7c2d12;
    margin: 0;
    font-weight: 500;
}

.bureau-members {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.bureau-role {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid #ec4899;
    transition: transform 0.3s ease;
}

.bureau-role:hover {
    transform: scale(1.05);
}

.bureau-role i {
    font-size: 2rem;
    color: #ec4899;
    margin-bottom: 15px;
}

.bureau-role h4 {
    color: #be185d;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

/* Responsive pour les statuts */
@media (max-width: 768px) {
    .objectives-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .resources-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .council-info {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .bureau-members {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .assembly-details {
        padding: 15px;
    }
    
    .detail-item {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

/* ================================
   SECTION PROMO RCS
   ================================ */

.rcs-promo {
    padding: 40px 0;
    background: linear-gradient(135deg, rgba(255, 233, 125, 0.1) 0%, rgba(39, 207, 234, 0.1) 100%);
    border-top: 2px solid rgba(255, 233, 125, 0.2);
    border-bottom: 2px solid rgba(255, 233, 125, 0.2);
}

.promo-card {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 233, 125, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 233, 125, 0.2);
}

.promo-icon {
    background: linear-gradient(135deg, var(--color-accent) 0%, #ffd93d 100%);
    color: var(--color-dark);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 10px 20px rgba(255, 233, 125, 0.3);
    animation: pulse 2s infinite;
}

.promo-content {
    flex: 1;
}

.promo-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.promo-content p {
    color: var(--color-secondary);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.btn-promo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--color-accent) 0%, #ffd93d 100%);
    color: var(--color-dark);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.btn-promo:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(255, 233, 125, 0.4);
    background: linear-gradient(135deg, #ffd93d 0%, var(--color-accent) 100%);
}

/* Responsive pour promo */
@media (max-width: 768px) {
    .promo-card {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem;
        margin: 0 1rem;
    }
    
    .promo-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .promo-content h3 {
        font-size: 1.3rem;
    }
}

/* ================================
   PAGE NOTIFICATIONS RCS - COMPACT LAYOUT
   ================================ */

/* Section principale RCS */
.rcs-main {
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a2e 50%, var(--color-dark) 100%);
    padding: 120px 0 60px;
    min-height: calc(100vh - 140px);
    position: relative;
    overflow: hidden;
}

.rcs-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 233, 125, 0.1) 0%, transparent 70%);
}

.rcs-main .container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Header compact */
.main-header {
    text-align: center;
    margin-bottom: 3rem;
}

.hero-icon {
    font-size: 3rem;
    color: var(--color-accent);
    margin-bottom: 1rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(39, 207, 234, 0.5);
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--color-secondary);
}

/* Layout en trois colonnes */
.main-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 2rem;
    align-items: start;
    flex: 1;
    margin-bottom: 3rem;
}

/* Infos importantes (gauche) */
.important-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Formulaire au centre */
.inscription-center {
    display: flex;
    justify-content: center;
}

/* Info technique (droite) */
.technical-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 233, 125, 0.2);
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
    box-shadow: 0 5px 15px rgba(255, 233, 125, 0.2);
}

.feature-item i {
    font-size: 1.1rem;
    min-width: 18px;
}

.feature-item span {
    color: var(--color-secondary);
    font-size: 0.9rem;
    text-align: left;
    line-height: 1.3;
}

/* Info item pour section technique */
.info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 233, 125, 0.1);
}

.info-item i {
    font-size: 1.1rem;
    margin-top: 0.2rem;
    min-width: 18px;
}

.info-item span {
    color: var(--color-secondary);
    font-size: 0.85rem;
    line-height: 1.3;
}

/* Section détaillées en dessous */
.detailed-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 233, 125, 0.1);
    margin-top: 2rem;
}

.detailed-info .info-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 233, 125, 0.1);
    transition: all 0.3s ease;
}

.detailed-info .info-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
    box-shadow: 0 10px 25px rgba(255, 233, 125, 0.15);
}

.detailed-info .info-card h3 {
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detailed-info .info-card h3 i {
    font-size: 1rem;
}

.detailed-info .info-card p {
    color: var(--color-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Carte d'inscription (centre) */
.inscription-card {
    width: 100%;
    max-width: 400px;
    background: linear-gradient(135deg, rgba(39, 207, 234, 0.1) 0%, rgba(128, 220, 250, 0.1) 100%);
    border-radius: 20px;
    padding: 2rem;
    border: 2px solid rgba(255, 233, 125, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    height: fit-content;
}

.card-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.card-header i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.card-header h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.rcs-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    color: var(--color-secondary);
    font-size: 1.1rem;
}

.rcs-form input {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 233, 125, 0.3);
    border-radius: 12px;
    padding: 15px;
    color: var(--color-secondary);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.rcs-form input:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(255, 233, 125, 0.1);
    box-shadow: 0 0 15px rgba(255, 233, 125, 0.3);
}

.rcs-form input::placeholder {
    color: rgba(128, 220, 250, 0.7);
}

.form-hint {
    color: rgba(255, 233, 125, 0.8);
    font-size: 0.9rem;
    font-style: italic;
}

/* Amélioration du champ téléphone */
.form-group label i {
    margin-right: 0.5rem;
    color: var(--color-accent);
}

.phone-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.phone-input-container input {
    padding-right: 45px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

.phone-status {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.phone-status i {
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

#phoneValid {
    color: #27ae60;
    opacity: 0;
    transform: scale(0.8);
}

#phoneInvalid {
    color: #e74c3c;
    opacity: 0;
    transform: scale(0.8);
}

.phone-status.valid #phoneValid {
    opacity: 1;
    transform: scale(1);
}

.phone-status.invalid #phoneInvalid {
    opacity: 1;
    transform: scale(1);
}

.phone-feedback {
    margin-top: 0.5rem;
    min-height: 24px;
    transition: all 0.3s ease;
}

.phone-feedback > div {
    display: none;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    padding: 0.3rem 0;
}

.phone-feedback.show-valid .feedback-valid {
    display: flex;
    color: #27ae60;
    animation: slideInFade 0.3s ease;
}

.phone-feedback.show-invalid .feedback-invalid {
    display: flex;
    color: rgba(255, 233, 125, 0.9);
    animation: slideInFade 0.3s ease;
}

.phone-feedback.show-corrected .feedback-corrected {
    display: flex;
    color: var(--color-accent);
    animation: slideInFade 0.3s ease;
}

@keyframes slideInFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* États d'input améliorés */
.phone-input-container input.valid {
    border-color: #27ae60;
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.3);
}

.phone-input-container input.invalid {
    border-color: #e74c3c;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.3);
}

.phone-input-container input.corrected {
    border-color: var(--color-accent);
    box-shadow: 0 0 15px rgba(255, 233, 125, 0.4);
    animation: pulseCorrection 0.6s ease;
}

@keyframes pulseCorrection {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 233, 125, 0.4);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 233, 125, 0.6);
    }
}

.btn-inscription {
    background: linear-gradient(135deg, var(--color-accent) 0%, #ffd93d 100%);
    color: var(--color-dark);
    padding: 18px 30px;
    border: none;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 1rem;
}

.btn-inscription:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 233, 125, 0.4);
    background: linear-gradient(135deg, #ffd93d 0%, var(--color-accent) 100%);
}

.btn-inscription:active {
    transform: translateY(-1px);
}

.success-message {
    background: rgba(46, 204, 113, 0.1);
    border: 2px solid #2ecc71;
    color: #2ecc71;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: slideIn 0.5s ease;
}

.success-message i {
    font-size: 1.2rem;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design pour RCS */
@media (max-width: 1100px) {
    .main-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .inscription-center {
        order: 1;
    }
    
    .important-features {
        order: 2;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
    
    .technical-info {
        order: 3;
    }
    
    .detailed-info {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .rcs-main {
        padding: 100px 0 30px;
        min-height: auto;
    }
    
    .main-header {
        margin-bottom: 1.5rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .main-content {
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .important-features {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    
    .feature-item {
        padding: 0.8rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .feature-item span {
        font-size: 0.85rem;
    }
    
    .info-item {
        padding: 0.8rem;
    }
    
    .info-item span {
        font-size: 0.8rem;
    }
    
    .inscription-card {
        padding: 1.5rem;
        margin: 0 0.5rem;
    }
    
    .card-header h2 {
        font-size: 1.4rem;
    }
    
    .card-header i {
        font-size: 1.5rem;
    }
    
    .rcs-form {
        gap: 1.2rem;
    }
    
    .form-group label {
        font-size: 0.95rem;
    }
    
    .detailed-info {
        padding: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .detailed-info .info-card {
        padding: 1.2rem;
    }
    
    .rcs-form input {
        padding: 12px;
        font-size: 1rem;
    }
    
    .phone-input-container input {
        padding-right: 40px;
        font-size: 0.95rem;
    }
    
    .phone-status {
        right: 12px;
    }
    
    .phone-status i {
        font-size: 1rem;
    }
    
    .phone-feedback {
        font-size: 0.8rem;
    }
    
    .phone-feedback > div {
        font-size: 0.8rem;
    }
    
    .btn-inscription {
        font-size: 1rem;
        padding: 15px 25px;
    }
}

/* ===== ADMIN STYLES ===== */
.admin-header {
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a2e 100%);
    border-bottom: 3px solid var(--color-accent);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.admin-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0 0 0;
}

.admin-breadcrumb {
    padding: 0.75rem 0 1rem 0;
    border-top: 1px solid rgba(255, 233, 125, 0.2);
    margin-top: 1rem;
}

.breadcrumb-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.breadcrumb-item:hover {
    opacity: 1;
    background: rgba(255, 233, 125, 0.1);
}

.breadcrumb-item.active {
    opacity: 1;
    color: var(--color-accent);
    font-weight: 600;
}

.breadcrumb-item i {
    font-size: 0.9rem;
}

.breadcrumb-separator {
    color: var(--color-primary);
    opacity: 0.4;
    font-size: 0.8rem;
}

.admin-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--color-primary);
}

.admin-logo i {
    font-size: 2rem;
    color: var(--color-accent);
    animation: pulse 2s infinite;
}

.admin-logo-text h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}

.admin-logo-text span {
    font-size: 0.9rem;
    color: var(--color-accent);
    opacity: 0.9;
    font-weight: 500;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.admin-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-menu a {
    color: var(--color-primary);
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-menu a i {
    font-size: 1.1rem;
    color: var(--color-accent);
}

.admin-menu a span {
    font-weight: 500;
}

.admin-menu a:hover {
    background: rgba(255, 233, 125, 0.15);
    border-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 233, 125, 0.2);
}

.admin-menu a.active {
    background: var(--color-accent);
    color: var(--color-dark);
    border-color: var(--color-accent);
    box-shadow: 0 4px 15px rgba(255, 233, 125, 0.3);
}

.admin-menu a.active i {
    color: var(--color-dark);
}

.btn-logout {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border: 2px solid #e74c3c;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    font-weight: 500;
}

.btn-logout i {
    font-size: 1.1rem;
}

.btn-logout:hover {
    background: #e74c3c;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.admin-main {
    padding: 2rem 0;
    min-height: calc(100vh - 80px);
    background: linear-gradient(135deg, #0f0f23 0%, var(--color-dark) 100%);
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(39, 207, 234, 0.3);
    border-radius: 15px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.stat-card.active {
    border-color: rgba(46, 204, 113, 0.5);
}

.stat-card.inactive {
    border-color: rgba(231, 76, 60, 0.5);
}

.stat-icon {
    background: var(--color-primary);
    color: var(--color-dark);
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.stat-card.active .stat-icon {
    background: #2ecc71;
}

.stat-card.inactive .stat-icon {
    background: #e74c3c;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
}

.stat-label {
    color: var(--color-primary);
    opacity: 0.8;
}

.admin-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.btn-action {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.btn-action:hover {
    background: var(--color-primary);
    color: var(--color-dark);
    transform: translateY(-2px);
}

.btn-action.primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-dark);
}

.btn-action.primary:hover {
    background: #ffd93d;
}

.subscribers-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2rem;
    border: 2px solid rgba(39, 207, 234, 0.2);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.section-header h2 {
    color: var(--color-primary);
    margin: 0;
}

.search-box {
    position: relative;
    max-width: 300px;
}

.search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    opacity: 0.6;
}

.search-box input {
    padding-left: 3rem;
}

.subscribers-table {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.table-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 120px 120px;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-weight: 600;
    color: var(--color-primary);
}

.table-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 120px 120px;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    align-items: center;
    transition: all 0.3s ease;
}

.table-row:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

.subscriber-info,
.phone-number,
.date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
}

.subscriber-info i,
.phone-number i,
.date i {
    color: var(--color-accent);
    opacity: 0.7;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge.active {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid #2ecc71;
}

.status-badge.inactive {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

.actions {
    display: flex;
    gap: 0.5rem;
}

.btn-toggle,
.btn-delete {
    background: none;
    border: 1px solid;
    padding: 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-toggle {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-toggle:hover {
    background: var(--color-accent);
    color: var(--color-dark);
}

.btn-delete {
    color: #e74c3c;
    border-color: #e74c3c;
}

.btn-delete:hover {
    background: #e74c3c;
    color: white;
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--color-primary);
    opacity: 0.6;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--color-accent);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--color-dark);
    border: 2px solid var(--color-accent);
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
}

.modal-header {
    background: rgba(255, 233, 125, 0.1);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 233, 125, 0.3);
}

.modal-header h3 {
    color: var(--color-primary);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.modal-close:hover {
    color: var(--color-accent);
    background: rgba(255, 233, 125, 0.1);
}

.modal form {
    padding: 2rem;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

.btn-cancel {
    background: none;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    background: var(--color-primary);
    color: var(--color-dark);
}

.btn-confirm {
    background: var(--color-accent);
    border: none;
    color: var(--color-dark);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-confirm:hover {
    background: #ffd93d;
    transform: translateY(-1px);
}

.alert {
    padding: 1rem 1.5rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert.success {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid #2ecc71;
    color: #2ecc71;
}

/* Styles pour la page d'envoi de messages */
.send-message-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}

.message-form-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2rem;
    border: 2px solid rgba(39, 207, 234, 0.2);
}

.message-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.message-type-select {
    appearance: none;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    cursor: pointer;
}

.char-counter {
    text-align: right;
    font-size: 0.85rem;
    color: var(--color-primary);
    opacity: 0.7;
    margin-top: 0.25rem;
}

.recipients-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.radio-option:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-accent);
}

.radio-option input[type="radio"] {
    width: 20px;
    height: 20px;
}

.radio-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
}

.subscribers-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
}

.subscriber-checkbox {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.subscriber-checkbox:hover {
    background: rgba(255, 255, 255, 0.05);
}

.subscriber-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.subscriber-name {
    color: var(--color-primary);
    font-weight: 600;
}

.subscriber-phone {
    color: var(--color-primary);
    opacity: 0.7;
    font-size: 0.9rem;
}

.message-preview {
    margin: 2rem 0;
}

.message-preview h4 {
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.preview-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--color-accent);
    border-radius: 15px;
    padding: 1.5rem;
    max-width: 300px;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.preview-type {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.preview-type.info {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
}

.preview-type.promo {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.preview-type.event {
    background: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
}

.preview-type.urgent {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.preview-sender {
    font-size: 0.85rem;
    color: var(--color-primary);
    opacity: 0.7;
}

.preview-title {
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.preview-content {
    color: var(--color-primary);
    line-height: 1.4;
    margin-bottom: 1rem;
}

.preview-footer {
    font-size: 0.75rem;
    color: var(--color-primary);
    opacity: 0.5;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.5rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.btn-preview {
    background: none;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.btn-preview:hover {
    background: var(--color-primary);
    color: var(--color-dark);
}

.btn-send-message {
    background: linear-gradient(135deg, var(--color-accent) 0%, #ffd93d 100%);
    border: none;
    color: var(--color-dark);
    padding: 0.75rem 2rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.btn-send-message:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 233, 125, 0.4);
}

.message-history {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2rem;
    border: 2px solid rgba(39, 207, 234, 0.2);
    height: fit-content;
}

.message-history h3 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.stats-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-mini {
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.stat-mini-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
}

.stat-mini-label {
    font-size: 0.85rem;
    color: var(--color-primary);
    opacity: 0.7;
}

.messages-history {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message-history-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.message-history-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.message-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.message-type-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
}

.message-type-badge.info {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
}

.message-type-badge.promo {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.message-type-badge.event {
    background: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
}

.message-type-badge.urgent {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.message-date {
    font-size: 0.8rem;
    color: var(--color-primary);
    opacity: 0.6;
}

.message-history-title {
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

.message-history-content {
    color: var(--color-primary);
    opacity: 0.8;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.message-history-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-accent);
}

.empty-history {
    text-align: center;
    padding: 2rem;
    color: var(--color-primary);
    opacity: 0.6;
}

.empty-history i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--color-accent);
}

/* Dashboard Styles */
.dashboard-overview {
    margin-bottom: 3rem;
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.overview-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.overview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-primary);
}

.overview-card.primary::before {
    background: var(--color-primary);
}

.overview-card.success::before {
    background: #2ecc71;
}

.overview-card.warning::before {
    background: var(--color-accent);
}

.overview-card.info::before {
    background: var(--color-tertiary);
}

.overview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.card-icon {
    background: var(--color-primary);
    color: var(--color-dark);
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.overview-card.success .card-icon {
    background: #2ecc71;
}

.overview-card.warning .card-icon {
    background: var(--color-accent);
}

.overview-card.info .card-icon {
    background: var(--color-tertiary);
}

.card-content h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.5rem 0;
    line-height: 1;
}

.card-content p {
    color: var(--color-primary);
    opacity: 0.8;
    margin: 0 0 0.5rem 0;
}

.trend {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.trend.positive {
    color: #2ecc71;
}

.trend.negative {
    color: #e74c3c;
}

.trend.neutral {
    color: var(--color-accent);
}

.quick-actions {
    margin-bottom: 3rem;
}

.quick-actions h3 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.action-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(39, 207, 234, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--color-primary);
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.action-card:hover {
    border-color: var(--color-accent);
    background: rgba(255, 233, 125, 0.1);
    transform: translateY(-3px);
}

.action-card i {
    font-size: 2rem;
    color: var(--color-accent);
}

.action-card span {
    font-weight: 600;
}

.recent-data {
    margin-bottom: 3rem;
}

.data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.data-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 2rem;
    border: 2px solid rgba(39, 207, 234, 0.2);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-header h3 {
    color: var(--color-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-header i {
    color: var(--color-accent);
}

.view-all {
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.view-all:hover {
    color: var(--color-primary);
}

.recent-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recent-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.recent-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.item-avatar {
    background: var(--color-primary);
    color: var(--color-dark);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.item-info strong {
    color: var(--color-primary);
}

.item-info span {
    color: var(--color-primary);
    opacity: 0.7;
    font-size: 0.9rem;
}

.item-info small {
    color: var(--color-primary);
    opacity: 0.5;
    font-size: 0.8rem;
}

.empty-state-small {
    text-align: center;
    padding: 2rem;
    color: var(--color-primary);
    opacity: 0.6;
}

.empty-state-small i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--color-accent);
}

.analytics {
    margin-bottom: 3rem;
}

.analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.chart-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 2rem;
    border: 2px solid rgba(39, 207, 234, 0.2);
}

.chart-container h3 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Site Admin Styles */
.system-info-section {
    margin-bottom: 3rem;
}

.system-info-section h3 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.info-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(39, 207, 234, 0.2);
    border-radius: 15px;
    padding: 1.5rem;
}

.info-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.info-header i {
    color: var(--color-accent);
    font-size: 1.2rem;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-primary);
    opacity: 0.9;
}

.info-row strong {
    color: var(--color-accent);
}

.memory-bar {
    background: rgba(255, 255, 255, 0.1);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.memory-usage {
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
    height: 100%;
    transition: width 0.3s ease;
}

.maintenance-section {
    margin-bottom: 3rem;
}

.maintenance-section h3 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.maintenance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.maintenance-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(39, 207, 234, 0.2);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.maintenance-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
}

.maintenance-icon {
    background: var(--color-primary);
    color: var(--color-dark);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
}

.maintenance-content h4 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.maintenance-content p {
    color: var(--color-primary);
    opacity: 0.7;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.btn-maintenance {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto;
}

.btn-maintenance:hover {
    background: var(--color-primary);
    color: var(--color-dark);
}

.btn-maintenance.primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-dark);
}

.btn-maintenance.primary:hover {
    background: #ffd93d;
}

.btn-maintenance.warning {
    border-color: #f39c12;
    color: #f39c12;
}

.btn-maintenance.warning:hover {
    background: #f39c12;
    color: var(--color-dark);
}

.config-section {
    margin-bottom: 3rem;
}

.config-section h3 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.config-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.tab-btn {
    background: none;
    border: none;
    color: var(--color-primary);
    padding: 1rem 1.5rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tab-btn.active,
.tab-btn:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.tab-content {
    display: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 2rem;
    border: 2px solid rgba(39, 207, 234, 0.2);
}

.tab-content.active {
    display: block;
}

.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.config-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.config-item label {
    color: var(--color-primary);
    font-weight: 600;
}

.config-input {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    padding: 0.75rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.config-input:focus {
    border-color: var(--color-accent);
    background: rgba(255, 233, 125, 0.1);
}

.toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    transition: 0.3s;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: var(--color-primary);
    border-radius: 50%;
    transition: 0.3s;
}

.toggle input:checked + .toggle-slider {
    background-color: var(--color-accent);
}

.toggle input:checked + .toggle-slider:before {
    transform: translateX(30px);
    background-color: var(--color-dark);
}

.config-actions {
    margin-top: 2rem;
    text-align: center;
}

.btn-save-config {
    background: linear-gradient(135deg, var(--color-accent) 0%, #ffd93d 100%);
    border: none;
    color: var(--color-dark);
    padding: 1rem 2rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.btn-save-config:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 233, 125, 0.4);
}

.quick-navigation {
    margin-bottom: 3rem;
}

.quick-navigation h3 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.nav-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(39, 207, 234, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--color-primary);
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.nav-card:hover {
    border-color: var(--color-accent);
    background: rgba(255, 233, 125, 0.1);
    transform: translateY(-3px);
}

.nav-card i {
    font-size: 1.5rem;
    color: var(--color-accent);
}

/* Admin Responsive */
@media (max-width: 1024px) {
    .send-message-layout {
        grid-template-columns: 1fr;
    }
    
    .table-header,
    .table-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .table-header {
        display: none;
    }
    
    .table-row {
        background: rgba(255, 255, 255, 0.05);
        padding: 1.5rem;
    }
    
    .admin-nav {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .admin-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }
    
    .admin-menu a,
    .btn-logout {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
    
    .admin-logo {
        justify-content: center;
    }
    
    .admin-logo i {
        font-size: 1.5rem;
    }
    
    .admin-logo-text h2 {
        font-size: 1.2rem;
    }
    
    .admin-logo-text span {
        font-size: 0.8rem;
    }
    
    .breadcrumb-container {
        justify-content: center;
        font-size: 0.9rem;
    }
    
    .breadcrumb-item {
        padding: 0.2rem 0.4rem;
    }
    
    .admin-stats {
        grid-template-columns: 1fr;
    }
    
    .admin-actions {
        justify-content: center;
    }
    
    .data-grid,
    .analytics-grid {
        grid-template-columns: 1fr;
    }
    
    .overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .maintenance-grid {
        grid-template-columns: 1fr;
    }
    
    .config-tabs {
        flex-wrap: wrap;
    }
}

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

/* ======================== FURMEETS ADMIN STYLES ======================== */

.furmeet-stats {
    margin: 2rem 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 233, 125, 0.2);
}

.stat-card.primary {
    border-color: var(--color-primary);
}

.stat-card.success {
    border-color: #28a745;
}

.stat-card.warning {
    border-color: var(--color-accent);
}

.stat-card.info {
    border-color: var(--color-tertiary);
}

.stat-icon {
    font-size: 2.5rem;
    opacity: 0.8;
}

.stat-card.primary .stat-icon {
    color: var(--color-primary);
}

.stat-card.success .stat-icon {
    color: #28a745;
}

.stat-card.warning .stat-icon {
    color: var(--color-accent);
}

.stat-card.info .stat-icon {
    color: var(--color-tertiary);
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.furmeet-actions {
    margin: 2rem 0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-action {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: var(--color-dark);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(39, 207, 234, 0.3);
}

.btn-action.primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, #ffd700 100%);
}

.furmeets-section {
    margin: 3rem 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.search-filters {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box i {
    position: absolute;
    left: 1rem;
    color: var(--color-primary);
    z-index: 1;
}

.search-box input {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(39, 207, 234, 0.3);
    border-radius: 25px;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    color: white;
    font-size: 0.9rem;
    width: 250px;
    transition: all 0.3s ease;
}

.search-box input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(39, 207, 234, 0.3);
    outline: none;
}

.filter-select {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(39, 207, 234, 0.3);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-select:focus {
    border-color: var(--color-primary);
    outline: none;
}

.furmeets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.furmeet-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(39, 207, 234, 0.2);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.furmeet-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(39, 207, 234, 0.2);
    border-color: var(--color-primary);
}

.furmeet-header {
    background: rgba(255, 233, 125, 0.1);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 233, 125, 0.2);
}

.furmeet-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.furmeet-status.upcoming {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid #28a745;
}

.furmeet-status.past {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border: 1px solid #6c757d;
}

.furmeet-status.cancelled {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid #dc3545;
}

.furmeet-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--color-accent);
}

.furmeet-content {
    padding: 1.5rem;
}

.furmeet-content h3 {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.furmeet-description {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.furmeet-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.detail-item i {
    color: var(--color-secondary);
    width: 1.2rem;
}

.furmeet-photos {
    margin: 1.5rem 0;
}

.photos-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--color-accent);
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    position: relative;
}

.furmeet-photo {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.furmeet-photo:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(39, 207, 234, 0.3);
}

.more-photos {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
}

.furmeet-card .furmeet-actions {
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0;
}

.furmeet-card .furmeet-actions button {
    flex: 1;
    min-width: 80px;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
    font-weight: 600;
}

.btn-edit {
    background: linear-gradient(135deg, var(--color-tertiary) 0%, #6fa8dc 100%);
    color: white;
}

.btn-view {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    color: var(--color-dark);
}

.btn-delete {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.furmeet-card .furmeet-actions button:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.6);
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.btn-add-first {
    background: linear-gradient(135deg, var(--color-accent) 0%, #ffd700 100%);
    color: var(--color-dark);
    border: none;
    padding: 1rem 2rem;
    border-radius: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

.btn-add-first:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 233, 125, 0.3);
}

.furmeet-modal {
    max-width: 800px;
    width: 95%;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(39, 207, 234, 0.3);
    border-radius: 10px;
    padding: 0.75rem;
    color: white;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(39, 207, 234, 0.2);
    outline: none;
}

.form-group small {
    display: block;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.photo-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.photo-modal {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.photo-modal-close {
    position: absolute;
    top: -2rem;
    right: -2rem;
    background: var(--color-accent);
    color: var(--color-dark);
    border: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s ease;
}

.photo-modal-close:hover {
    transform: scale(1.1);
}

.photo-modal-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Media queries pour les furmeets */
@media (max-width: 768px) {
    .furmeets-grid {
        grid-template-columns: 1fr;
    }
    
    .section-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-filters {
        flex-direction: column;
    }
    
    .search-box input {
        width: 100%;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .furmeet-card .furmeet-actions {
        justify-content: center;
    }
    
    .furmeet-card .furmeet-actions button {
        flex: 0 0 auto;
        min-width: 100px;
    }
}

/* ======================== FURMEETS PUBLIC STYLES ======================== */

.page-header {
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a2e 50%, var(--color-dark) 100%);
    padding: 4rem 0 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="25" cy="25" r="2" fill="rgba(255,233,125,0.1)"/><circle cx="75" cy="75" r="1.5" fill="rgba(39,207,234,0.1)"/><circle cx="50" cy="10" r="1" fill="rgba(157,187,255,0.1)"/></svg>');
    animation: float 20s infinite linear;
}

@keyframes float {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-100px) rotate(360deg); }
}

.page-header-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
}

.page-header h1 {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-header p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.furmeet-stats-inline {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.stat-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    min-width: 120px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(39, 207, 234, 0.2);
}

.stat-inline .stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-accent);
    text-shadow: 0 2px 10px rgba(255, 233, 125, 0.3);
}

.stat-inline .stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.25rem;
}

.filters-section {
    background: rgba(255, 255, 255, 0.02);
    padding: 2rem 0;
    border-top: 1px solid rgba(39, 207, 234, 0.1);
    border-bottom: 1px solid rgba(39, 207, 234, 0.1);
}

.filters-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.search-container {
    flex: 1;
    max-width: 400px;
}

.filters-section .search-box {
    position: relative;
}

.filters-section .search-box i {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    z-index: 1;
}

.filters-section .search-box input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(39, 207, 234, 0.3);
    border-radius: 30px;
    padding: 1rem 1.5rem 1rem 3.5rem;
    color: white;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.filters-section .search-box input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 30px rgba(39, 207, 234, 0.3);
    outline: none;
}

.filter-buttons {
    display: flex;
    gap: 1rem;
}

.filter-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(39, 207, 234, 0.3);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(39, 207, 234, 0.3);
}

.upcoming-section,
.archives-section {
    padding: 4rem 0;
}

.upcoming-section h2,
.archives-section h2 {
    font-size: 2.2rem;
    color: var(--color-primary);
    margin-bottom: 3rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;
}

.upcoming-section h2::after,
.archives-section h2::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: 2px;
}

.upcoming-section h2 i {
    color: var(--color-accent);
}

.archives-section h2 i {
    color: var(--color-secondary);
}

.furmeets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.furmeet-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(39, 207, 234, 0.2);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(10px);
}

.furmeet-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(39, 207, 234, 0.2);
    border-color: var(--color-primary);
}

.upcoming-card {
    border-color: rgba(255, 233, 125, 0.4);
}

.upcoming-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 20px 50px rgba(255, 233, 125, 0.2);
}

.furmeet-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.furmeet-badge.upcoming {
    background: linear-gradient(135deg, var(--color-accent) 0%, #ffd700 100%);
    color: var(--color-dark);
}

.furmeet-badge.past {
    background: rgba(108, 117, 125, 0.8);
    color: white;
}

.furmeet-header {
    background: linear-gradient(135deg, rgba(39, 207, 234, 0.1) 0%, rgba(255, 233, 125, 0.1) 100%);
    padding: 2rem 1.5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.furmeet-date {
    background: var(--color-primary);
    color: var(--color-dark);
    border-radius: 15px;
    padding: 1rem;
    text-align: center;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    font-weight: bold;
}

.date-day {
    font-size: 2rem;
    line-height: 1;
}

.date-month {
    font-size: 0.8rem;
    opacity: 0.8;
    margin: 0.2rem 0;
}

.date-year {
    font-size: 0.9rem;
    opacity: 0.7;
}

.furmeet-info {
    flex: 1;
}

.furmeet-info h3 {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.furmeet-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-accent);
    font-weight: 600;
}

.furmeet-content {
    padding: 1.5rem;
}

.furmeet-content > p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.furmeet-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.furmeet-details .detail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.furmeet-details .detail-item i {
    color: var(--color-secondary);
    width: 1.2rem;
    text-align: center;
}

.furmeet-gallery {
    border-top: 1px solid rgba(39, 207, 234, 0.2);
    padding-top: 1.5rem;
}

.gallery-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.gallery-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    position: relative;
}

.gallery-thumb {
    width: 100%;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.gallery-thumb:hover {
    transform: scale(1.05);
    border-color: var(--color-primary);
    box-shadow: 0 5px 15px rgba(39, 207, 234, 0.3);
}

.gallery-more {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    grid-column: 4;
}

.empty-section {
    padding: 6rem 0;
    text-align: center;
}

.empty-content {
    color: rgba(255, 255, 255, 0.6);
}

.empty-content i {
    font-size: 5rem;
    color: var(--color-primary);
    opacity: 0.5;
    margin-bottom: 2rem;
}

.empty-content h3 {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.empty-content p {
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0 auto;
}

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-close {
    position: absolute;
    top: -3rem;
    right: -3rem;
    background: var(--color-accent);
    color: var(--color-dark);
    border: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(255, 233, 125, 0.5);
}

#lightboxImg {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

/* Ajustements généraux pour la page furmeets */
.main {
    margin-top: 80px; /* Même marge que les autres pages */
}

/* Media queries pour furmeets publics */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 2rem;
    }
    
    .furmeet-stats-inline {
        gap: 1rem;
    }
    
    .stat-inline .stat-number {
        font-size: 1.5rem;
    }
    
    .stat-inline {
        min-width: 100px;
        padding: 0.75rem;
    }
    
    .filters-container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .search-container {
        max-width: none;
        width: 100%;
    }
    
    .filter-buttons {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .furmeets-grid {
        grid-template-columns: 1fr;
    }
    
    .furmeet-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .furmeet-date {
        align-self: center;
    }
    
    .gallery-preview {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gallery-more {
        grid-column: 3;
    }
    
    .lightbox-close {
        top: 1rem;
        right: 1rem;
    }
}

/* ======================== FURMEETS HOMEPAGE STYLES ======================== */

/* Styles spécifiques pour les furmeets sur la page d'accueil */
.furmeet-section .furmeet-grid .furmeet-card {
    position: relative;
}

.furmeet-status-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.furmeet-status-badge.upcoming {
    background: linear-gradient(135deg, var(--color-accent) 0%, #ffd700 100%);
    color: var(--color-dark);
}

.furmeet-status-badge.past {
    background: rgba(108, 117, 125, 0.9);
    color: white;
    border: 1px solid rgba(108, 117, 125, 0.5);
}

.furmeet-section .furmeet-image {
    position: relative;
    overflow: hidden;
}

.furmeet-photo {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.furmeet-card:hover .furmeet-photo {
    transform: scale(1.05);
}

.furmeet-section .furmeet-content .furmeet-category {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-secondary);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.furmeet-section .furmeet-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.furmeet-section .furmeet-meta .author,
.furmeet-section .furmeet-meta .participants {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.furmeet-section .furmeet-meta i {
    color: var(--color-primary);
}

.empty-furmeet {
    text-align: center;
    padding: 3rem 2rem;
    color: rgba(255, 255, 255, 0.7);
}

.empty-furmeet i {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
    opacity: 0.6;
}

.empty-furmeet h3 {
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.empty-furmeet p {
    margin-bottom: 1.5rem;
    line-height: 1.5;
}