Modèle:Accueil/shared/styles.css

/* ====================================
   TABLE DES MATIÈRES
   ====================================
   1. VARIABLES CSS
   2. HEADER & HERO
   3. BARRE DE RECHERCHE
   4. EVENT (Bannière événement)
   5. NAVIGATION CARDS
   6. LAYOUT PRINCIPAL
   6b. CADRES (Ce sera ici que nous ajusterons le gap des grilles)
   7. FEATURED ARTICLES
   8. UPDATES
   9. STATS
   10. SOCIAL BUTTONS
   11. LINKS BOX
   12. UTILITIES
   13. ANIMATIONS
   14. MEDIA QUERIES
   ==================================== */

/* ====================================
   1. VARIABLES CSS
   ==================================== */

:root {
    --color-primary: #87bfdb;
    --color-secondary: #eea529;
    --color-surface-0: #202122; /* Couleur de fond principale sombre */
    --color-surface-1: #27292a; /* Couleur de fond carte */
    --color-surface-2: #2e3031; /* Couleur de fond carte image */
    --color-base: #eaecf0; /* Texte principal clair */
    --color-subtle: #a2a9b1; /* Texte secondaire clair */
    --border-color-base: #3f4142; /* Bordure sombre */
    --border-color-subtle: rgba(255, 255, 255, 0.1); /* Bordure très subtile pour mode nuit */

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

/* Dark mode overrides */
.skin-theme-clientpref-night {
    --color-surface-0: #202122;
    --color-surface-1: #27292a;
    --color-surface-2: #2e3031;
    --color-base: #eaecf0;
    --color-subtle: #a2a9b1;
    --border-color-base: #3f4142;
}

/* ====================================
   2. HEADER & HERO
   ==================================== */

.home-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-2xl);
}

.home-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(135, 191, 219, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(238, 165, 41, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.home-header__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    animation: fadeIn 0.8s ease-out;
}

.home-header__logo {
    max-width: 400px;
    height: auto;
    margin-bottom: var(--space-lg);
    filter: drop-shadow(0 4px 20px rgba(135, 191, 219, 0.3));
}

.home-header__title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: var(--space-md);
    color: var(--color-base);
    text-shadow: 0 2px 20px rgba(135, 191, 219, 0.4);
}

.home-header__subtitle {
    font-size: 1rem;
    color: var(--color-subtle);
    line-height: 1.6;
}

/* ====================================
   3. BARRE DE RECHERCHE
   ==================================== */

.home-search {
    position: relative;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-2xl);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-surface-0);
    border: 2px solid var(--border-color-base);
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-search:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px rgba(135, 191, 219, 0.15);
}

.home-search__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-subtle);
    transition: color 0.2s;
}

.home-search__input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--color-base);
    outline: none;
}

.home-search__input::placeholder {
    color: var(--color-subtle);
}

.home-search__kbd {
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-surface-2);
    border: 1px solid var(--border-color-base);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-family: monospace;
    color: var(--color-subtle);
}

/* ====================================
   4. EVENT BAR (Bannière événement)
   ==================================== */

.home-event-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background: linear-gradient(135deg, rgba(238, 165, 41, 0.1) 0%, rgba(135, 191, 219, 0.1) 100%);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2xl);
}

.home-event-bar__icon {
    color: var(--color-secondary);
    width: 24px;
    height: 24px;
}

.home-event-bar__text {
    flex: 1;
    color: var(--color-base);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.home-event-bar__link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.home-event-bar__link:hover {
    color: var(--color-base);
}


/* ====================================
   5. NAVIGATION CARDS
   ==================================== */

.home-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Adapte le nombre de colonnes */
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.home-nav-card {
    padding: var(--space-md);
    background: var(--color-surface-1);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all 0.3s;
}

.home-nav-card:hover {
    background: var(--color-surface-2);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.home-nav-card__icon {
    width: 32px;
    height: 32px;
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
}

.home-nav-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-base);
}

/* ====================================
   6. LAYOUT PRINCIPAL
   ==================================== */

.home-container {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Colonne principale plus large que la sidebar */
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.home-main-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.home-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* ------------------------------------
   6b. CADRES (Grids et Cards)
   ------------------------------------ */

/* Le 'gap' est défini ici globalement pour tous les conteneurs de grille */
/* Les règles spécifiques pour le nombre de colonnes se trouvent dans les Media Queries */
.home-cards-grid,
.home-cards-grid-1,
.home-cards-grid-2, /* Ici, la règle par défaut pour la grille de 2 */
.home-cards-grid-3 {
    display: grid;
    gap: var(--space-md); /* Espacement par défaut entre les cartes (1rem / 16px) */
    margin: 0; /* Assure aucun `margin` par défaut qui pourrait interférer */
    width: 100%;
}

/* Pour forcer le gap vertical même si d'autres styles essaient de le réduire */
.home-cards-grid-2 .home-card,
.home-cards-grid-3 .home-card {
    /* Ce n'est normalement pas nécessaire si le gap fonctionne bien.
       À décommenter et ajuster uniquement en cas de problème persistant. */
    /* margin-bottom: var(--space-md) !important; */
}

/* ====================================
   7. FEATURED ARTICLES
   ==================================== */

.home-featured {
    padding: var(--space-lg);
    background: var(--color-surface-0);
    border-radius: var(--radius-xl);
    border: 2px solid var(--border-color-base);
}

.home-featured__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-base);
    margin-bottom: var(--space-md);
}

.home-featured__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.home-featured__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--color-base);
    text-decoration: none;
}

.home-featured__item:hover {
    color: var(--color-primary);
}

.home-featured__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* ====================================
   8. UPDATES
   ==================================== */

.home-updates {
    background: var(--color-surface-1);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    border: 2px solid var(--border-color-base);
}

.home-updates__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-base);
    margin-bottom: var(--space-md);
}

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

.home-updates__item {
    color: var(--color-subtle);
    font-size: 0.875rem;
    line-height: 1.6;
}

.home-updates__item a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.home-updates__item a:hover {
    color: var(--color-base);
}


/* ====================================
   9. STATS
   ==================================== */

.home-stats {
    background: var(--color-surface-1);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    border: 2px solid var(--border-color-base);
}

.home-stats__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-base);
    margin-bottom: var(--space-lg); /* Augmentation de l'espacement */
}

.home-stats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.home-stat-item {
    padding: var(--space-md);
    background: var(--color-surface-0); /* Fond plus sombre pour les items stats */
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--border-color-base); /* Bordure subtile */
}

.home-stats__number {
    font-size: 1.75rem; /* Taille plus grande pour le nombre */
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.home-stats__label {
    font-size: 0.875rem;
    color: var(--color-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ====================================
   10. SOCIAL BUTTONS
   ==================================== */


/* ====================================
   SUPPRESSION DES STYLES CONFLICTUELS
   Les règles suivantes ont été SUPPRIMÉES car elles
   entraient en conflit avec le modèle ButtonLink :
   
   - #home-card-discord, #home-card-patreon, #home-card-gitlab
   - min-height forcé
   - display: flex !important
   - Centrage forcé des images
   
   Le modèle ButtonLink gère maintenant tout automatiquement.
   ==================================== */

/* ====================================
   11. LINKS BOX
   ==================================== */

.home-links {
    padding: var(--space-lg);
    background: var(--color-surface-0);
    border: 2px solid var(--border-color-base);
    border-radius: var(--radius-xl);
}

.home-links__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-base);
    margin-bottom: var(--space-md);
}

.home-links__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.home-links__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface-1);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-base);
    transition: all 0.2s;
}

.home-links__item:hover {
    background: var(--color-surface-2);
    border-color: var(--color-primary);
}

/* ====================================
   13. ANIMATIONS
   ==================================== */

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

/* ====================================
   14. MEDIA QUERIES
   ==================================== */

@media (min-width: 768px) {
    .home-header__title {
        font-size: 3rem;
    }
    
    .home-header__subtitle {
        font-size: 1.125rem;
    }
}

@media (min-width: 1200px) {
    .home-header__title {
        font-size: 3.5rem;
    }
    
    .home-header__subtitle {
        font-size: 1.25rem;
    }
}

@media (max-width: 1024px) {
    .home-container {
        grid-template-columns: 1fr; /* Layout principal passe en 1 colonne */
    }
    
    .home-sidebar {
        grid-template-columns: 1fr 1fr; /* Sidebar en 2 colonnes sur tablette */
    }
    
    .home-event {
        grid-template-columns: 1fr;
    }
    
    .home-event__image {
        height: 200px;
    }
    
    .home-nav-grid {
        grid-template-columns: repeat(4, 1fr); /* Navigation 4 colonnes */
    }
}

@media (max-width: 768px) {
    .home-header {
        min-height: 300px;
        padding: 2rem 1rem;
    }
    
    .home-header__logo {
        max-width: 200px;
    }
    
    .home-search {
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 0.75rem 1rem;
    }
    
    .home-search__kbd {
        display: none;
    }
    
    .home-nav-grid {
        grid-template-columns: repeat(3, 1fr); /* Navigation 3 colonnes */
    }
    
    .home-sidebar {
        grid-template-columns: 1fr; /* Sidebar repasse en 1 colonne */
    }
    
    /* --- CORRECTION GRILLE --- */
    /* L'ensemble des grilles passe en 1 colonne, y compris celles qui étaient à 2 */
    .home-cards-grid,
    .home-cards-grid-2,
    .home-cards-grid-3 {
        grid-template-columns: 1fr; /* Force à 1 colonne pour les petits écrans */
        gap: var(--space-md); /* Maintient le gap vertical par défaut */
    }
    
    /* Si vous avez une disposition spécifique pour la sidebar et le contenu principal */
    .home-layout-with-sidebar,
    .home-main-content,
    .home-sidebar {
        gap: var(--space-md);
    }
}

@media (max-width: 480px) {
    .home-grid {
        padding: 0 0.5rem;
    }
    
    .home-nav-grid {
        grid-template-columns: repeat(2, 1fr); /* Navigation 2 colonnes */
    }
    
    .home-nav-card {
        padding: 1rem 0.75rem;
    }
    
    .home-stats__grid {
        grid-template-columns: 1fr; /* Stats en 1 colonne */
    }
    
    .home-stats__number {
        font-size: 2rem;
    }

    /* --- CORRECTION GRILLE --- */
    /* Réduction du gap pour les très petits écrans */
    .home-cards-grid,
    .home-cards-grid-1,
    .home-cards-grid-2,
    .home-cards-grid-3 {
        gap: var(--space-sm); /* Réduit le gap */
    }
    
    .home-layout-with-sidebar,
    .home-main-content,
    .home-sidebar {
        gap: var(--space-sm);
    }
}