Basculer la recherche
Basculer le menu
61
1,9 k
13
5,7 k
Nefald
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

« Modèle:Accueil/shared/styles.css » : différence entre les versions

De Nefald
Autres actions
Navigation interactive dans l’historique
← Modification précédente
Hiob (discussion | contributions)
owner
4 069 modifications
Aucun résumé des modifications
Hiob (discussion | contributions)
owner
4 069 modifications
Annulation des modifications 4484 de Hiob (discussion)
Balise : Annulation
 
(15 versions intermédiaires par le même utilisateur non affichées)
Ligne 2 : Ligne 2 :
   TABLE DES MATIÈRES
   TABLE DES MATIÈRES
   ====================================
   ====================================
   1. HEADER & HERO
   1. VARIABLES CSS
   2. BARRE DE RECHERCHE
  2. HEADER & HERO
   3. EVENT (Bannière événement)
   3. BARRE DE RECHERCHE
   4. NAVIGATION CARDS
   4. EVENT (Bannière événement)
   5. LAYOUT PRINCIPAL
   5. NAVIGATION CARDS
   6. FEATURED ARTICLES
   6. LAYOUT PRINCIPAL
   7. UPDATES
   6b. CADRES
   8. STATS
  7. FEATURED ARTICLES
   9. SOCIAL BUTTONS
   8. UPDATES
   10. LINKS BOX
   9. STATS
   11. UTILITIES
   10. SOCIAL BUTTONS
   12. ANIMATIONS
   11. LINKS BOX
   13. MEDIA QUERIES
   12. UTILITIES
   13. ANIMATIONS
   14. MEDIA QUERIES
   ==================================== */
   ==================================== */


/* ====================================
/* ====================================
   1. HEADER & HERO
   1. VARIABLES CSS
  ==================================== */
 
:root {
    --color-primary: #87bfdb;
    --color-secondary: #eea529;
    --color-surface-0: #202122;
    --color-surface-1: #27292a;
    --color-surface-2: #2e3031;
    --color-base: #eaecf0;
    --color-subtle: #a2a9b1;
    --border-color-base: #3f4142;
    --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;
}
 
/* ====================================
  2. HEADER & HERO
   ==================================== */
   ==================================== */


Ligne 53 : Ligne 80 :
     text-align: center;
     text-align: center;
     max-width: 800px;
     max-width: 800px;
    animation: fadeIn 0.8s ease-out;
}
}


.home-header__logo {
.home-header__logo {
     max-width: 300px;
     max-width: 400px;
     height: auto;
     height: auto;
     margin-bottom: 1.5rem;
     margin-bottom: 1.5rem;
Ligne 74 : Ligne 102 :
     color: var(--color-subtle);
     color: var(--color-subtle);
     line-height: 1.6;
     line-height: 1.6;
}
/* Responsive header */
@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;
    }
}
}


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


Ligne 117 : Ligne 124 :
}
}


/* Hover state */
.home-search:hover {
.home-search:hover {
     border-color: var(--color-primary);
     border-color: var(--color-primary);
     box-shadow: 0 4px 20px rgba(135, 191, 219, 0.15);
     box-shadow: 0 4px 20px rgba(135, 191, 219, 0.15);
}
/* Focus state - utilise une classe JS si :focus-within ne fonctionne pas */
.home-search.is-focused {
    border-color: var(--color-primary);
    box-shadow: 0 4px 30px rgba(135, 191, 219, 0.25);
    background: var(--color-surface-1);
}
}


Ligne 136 : Ligne 135 :
     color: var(--color-subtle);
     color: var(--color-subtle);
     transition: color 0.2s;
     transition: color 0.2s;
}
.home-search.is-focused .home-search__icon {
    color: var(--color-primary);
}
}


Ligne 164 : Ligne 159 :
     color: var(--color-subtle);
     color: var(--color-subtle);
}
}


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


.home-event {
.home-event-bar {
     display: grid;
     display: flex;
     grid-template-columns: 1fr auto;
     align-items: center;
     gap: 1.5rem;
     gap: 1rem;
     padding: 1.5rem;
     padding: 0.75rem 1.5rem;
     background: linear-gradient(135deg, rgba(135, 191, 219, 0.05) 0%, rgba(238, 165, 41, 0.05) 100%);
     background: linear-gradient(135deg, rgba(238, 165, 41, 0.1) 0%, rgba(135, 191, 219, 0.1) 100%);
     border: 2px solid var(--border-color-base);
     border-left: 4px solid var(--color-secondary);
     border-radius: 12px;
     border-radius: var(--radius-md);
     margin-bottom: 2rem;
     margin-bottom: 2rem;
     align-items: center;
     transition: all 0.3s ease;
}
 
.home-event-bar:hover {
    background: linear-gradient(135deg, rgba(238, 165, 41, 0.15) 0%, rgba(135, 191, 219, 0.15) 100%);
    transform: translateX(4px);
}
}


.home-event__content {
.home-event-bar__icon {
     display: flex;
     font-size: 1.5rem;
     flex-direction: column;
     line-height: 1;
     gap: 0.5rem;
     flex-shrink: 0;
}
}


.home-event__label {
.home-event-bar__content {
    flex: 1;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 0.75rem;
     gap: 0.75rem;
    margin-bottom: 0.5rem;
}
}


.home-event__icon {
.home-event-bar__label {
    font-size: 1.25rem;
}
 
.home-event__status {
    padding: 0.25rem 0.75rem;
    background: rgba(238, 165, 41, 0.2);
    border: 1px solid rgba(238, 165, 41, 0.4);
    border-radius: 4px;
     font-size: 0.75rem;
     font-size: 0.75rem;
     font-weight: 700;
     font-weight: 600;
    color: #EEA529;
     text-transform: uppercase;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     letter-spacing: 0.05em;
    color: var(--color-secondary);
    padding: 0.25rem 0.5rem;
    background: rgba(238, 165, 41, 0.2);
    border-radius: 4px;
}
}


.home-event__version {
.home-event-bar__title {
    padding: 0.25rem 0.75rem;
     font-size: 0.95rem;
    background: rgba(135, 191, 219, 0.2);
    border: 1px solid rgba(135, 191, 219, 0.4);
    border-radius: 4px;
     font-size: 0.75rem;
     font-weight: 600;
     font-weight: 600;
    color: #87BFDB;
}
.home-event__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
     color: var(--color-base);
     color: var(--color-base);
}
}


.home-event__desc {
.home-event-bar__link {
    color: var(--color-subtle);
     font-size: 0.875rem;
     font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}
}


.home-event__image {
.home-event-bar__link:hover {
     display: flex;
     color: var(--color-secondary);
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
}
}


.home-event__image img {
@media (max-width: 768px) {
     width: 100%;
    .home-event-bar {
    height: 100%;
        flex-direction: column;
     object-fit: cover;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem;
    }
      
    .home-event-bar__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
     }
   
    .home-event-bar__link {
        align-self: flex-end;
    }
}
}


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


Ligne 262 : Ligne 259 :


.home-nav-card {
.home-nav-card {
    position: relative;
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
Ligne 269 : Ligne 267 :
     background: var(--color-surface-0);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
     border-radius: 12px;
     border-radius: var(--radius-lg);
    text-align: center;
     text-decoration: none;
     text-decoration: none;
     color: var(--color-base);
     color: var(--color-base);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     min-height: 120px;
    overflow: hidden;
     min-height: 140px;
}
}


.mw-body .home-nav-card:hover {
.home-nav-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    transition: opacity 0.3s, transform 0.3s;
}
 
.home-nav-card:hover {
     transform: translateY(-4px);
     transform: translateY(-4px);
     border-color: var(--color-primary);
     border-color: var(--color-primary);
     box-shadow: 0 8px 24px rgba(135, 191, 219, 0.2);
     box-shadow: 0 8px 24px rgba(135, 191, 219, 0.2);
     background: var(--color-surface-1);
}
 
.home-nav-card:hover::before {
     opacity: 0.25;
    transform: scale(1.05);
}
}


.home-nav-card__icon {
.home-nav-card__icon {
     font-size: 2.5rem;
     font-size: 2rem;
     margin-bottom: 0.75rem;
     margin-bottom: 0.75rem;
     line-height: 1;
     position: relative;
    z-index: 1;
}
}


.home-nav-card__title {
.home-nav-card__title {
     font-size: 0.9rem;
     font-size: 1rem;
     font-weight: 600;
     font-weight: 600;
     color: var(--color-base);
     text-align: center;
}
    position: relative;
 
     z-index: 1;
.mw-body .home-nav-card:hover .home-nav-card__title {
     color: var(--color-primary);
}
}


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


.home-container {
.home-container {
     display: grid;
     display: grid;
     grid-template-columns: 1fr 350px;
     grid-template-columns: 1fr 400px;
     gap: 2rem;
     gap: 2rem;
     margin-bottom: 2rem;
     margin-bottom: 2rem;
Ligne 325 : Ligne 339 :


/* ====================================
/* ====================================
   6. FEATURED ARTICLES
   6B. CADRES MODULES (Featured, Stats, etc.)
  ==================================== */
 
.home-featured,
.home-updates,
.home-stats,
.home-social,
.home-links {
    background: var(--color-surface-0);
    border: 1px solid var(--border-color-base);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: border-color 0.3s ease;
}
 
.home-featured:hover,
.home-updates:hover,
.home-stats:hover,
.home-social:hover,
.home-links:hover {
    border-color: var(--color-primary);
}
 
/* Titres des sections */
.home-featured__title,
.home-updates__title,
.home-stats__title,
.home-social__title,
.home-links__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-base);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color-base);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
 
.home-featured__title::before {
    content: '⭐';
    font-size: 1.25rem;
}
 
.home-updates__title::before {
    content: '📰';
    font-size: 1.25rem;
}
 
.home-stats__title::before {
    content: '📊';
    font-size: 1.25rem;
}
 
.home-social__title::before {
    content: '💬';
    font-size: 1.25rem;
}
 
.home-links__title::before {
    content: '🔗';
    font-size: 1.25rem;
}
 
/* ====================================
  7. FEATURED ARTICLES
   ==================================== */
   ==================================== */


Ligne 332 : Ligne 412 :
     background: var(--color-surface-0);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
     border-radius: 12px;
     border-radius: var(--radius-xl);
}
}


Ligne 338 : Ligne 418 :
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 0.75rem;
     justify-content: space-between;
     margin-bottom: 1.5rem;
     margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color-base);
}
}


.home-featured__icon {
.home-featured__title {
     font-size: 1.5rem;
     font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-base);
}
.home-featured__link {
    font-size: 0.875rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
}


.home-featured__title {
.home-featured__link:hover {
     font-size: 1.25rem;
     text-decoration: underline;
    font-weight: 700;
    color: var(--color-base);
}
}


Ligne 359 : Ligne 444 :
}
}


.home-featured-card {
.home-featured-item {
     display: grid;
     display: grid;
     grid-template-columns: 120px 1fr;
     grid-template-columns: 120px 1fr;
Ligne 365 : Ligne 450 :
     padding: 1rem;
     padding: 1rem;
     background: var(--color-surface-1);
     background: var(--color-surface-1);
     border: 1px solid var(--border-color-base);
     border-radius: var(--radius-lg);
    border-radius: 8px;
     text-decoration: none;
     text-decoration: none;
     transition: all 0.2s;
    color: var(--color-base);
     transition: all 0.3s;
}
}


.mw-body .home-featured-card:hover {
.home-featured-item:hover {
     border-color: var(--color-primary);
     background: var(--color-surface-2);
    box-shadow: 0 4px 12px rgba(135, 191, 219, 0.15);
     transform: translateX(4px);
     transform: translateX(4px);
}
}


.home-featured-card__image {
.home-featured-item__image {
     width: 120px;
     width: 120px;
     height: 80px;
     height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-surface-2);
}
.home-featured-card__image img {
    width: 100%;
    height: 100%;
     object-fit: cover;
     object-fit: cover;
    border-radius: var(--radius-md);
}
}


.home-featured-card__content {
.home-featured-item__content {
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     gap: 0.5rem;
     justify-content: center;
}
}


.home-featured-card__title {
.home-featured-item__title {
     font-size: 1rem;
     font-size: 1.125rem;
     font-weight: 600;
     font-weight: 600;
    margin-bottom: 0.5rem;
     color: var(--color-base);
     color: var(--color-base);
    line-height: 1.3;
}
}


.home-featured-card__desc {
.home-featured-item__excerpt {
     font-size: 0.875rem;
     font-size: 0.875rem;
     color: var(--color-subtle);
     color: var(--color-subtle);
     line-height: 1.4;
     line-height: 1.5;
    overflow: hidden;
}
}


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


Ligne 418 : Ligne 496 :
     background: var(--color-surface-0);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
     border-radius: 12px;
     border-radius: var(--radius-xl);
}
}


Ligne 424 : Ligne 502 :
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 0.75rem;
     gap: 0.5rem;
     margin-bottom: 1.5rem;
     margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color-base);
}
}


Ligne 449 : Ligne 525 :
     display: flex;
     display: flex;
     gap: 1rem;
     gap: 1rem;
     padding: 0.75rem;
     padding: 1rem;
     background: var(--color-surface-1);
     background: var(--color-surface-1);
     border: 1px solid var(--border-color-base);
     border-radius: var(--radius-lg);
     border-radius: 8px;
     border-left: 3px solid var(--color-primary);
    text-decoration: none;
    transition: all 0.2s;
}
 
.mw-body .home-update-item:hover {
    border-color: var(--color-primary);
    background: var(--color-surface-2);
}
}


Ligne 469 : Ligne 538 :
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     background: rgba(135, 191, 219, 0.1);
     background: rgba(135, 191, 219, 0.15);
     border-radius: 8px;
     border-radius: 50%;
     font-size: 1.25rem;
     font-size: 1.25rem;
}
}
Ligne 476 : Ligne 545 :
.home-update-item__content {
.home-update-item__content {
     flex: 1;
     flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
}


.home-update-item__title {
.home-update-item__title {
     font-size: 0.9rem;
     font-size: 1rem;
     font-weight: 600;
     font-weight: 600;
     color: var(--color-base);
     color: var(--color-base);
    margin-bottom: 0.25rem;
}
.home-update-item__text {
    font-size: 0.875rem;
    color: var(--color-subtle);
    line-height: 1.5;
}
}


.home-update-item__meta {
.home-update-item__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
     font-size: 0.75rem;
     font-size: 0.75rem;
     color: var(--color-subtle);
     color: var(--color-subtle);
Ligne 493 : Ligne 570 :


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


Ligne 500 : Ligne 577 :
     background: var(--color-surface-0);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
     border-radius: 12px;
     border-radius: var(--radius-xl);
}
 
.home-stats__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color-base);
}
 
.home-stats__icon {
    font-size: 1.5rem;
}
}


Ligne 520 : Ligne 584 :
     font-weight: 700;
     font-weight: 700;
     color: var(--color-base);
     color: var(--color-base);
    margin-bottom: 1.5rem;
}
}


Ligne 528 : Ligne 593 :
}
}


.home-stat {
.home-stat-item {
     padding: 1rem;
     padding: 1rem;
     background: var(--color-surface-1);
     background: var(--color-surface-1);
     border: 1px solid var(--border-color-base);
     border-radius: var(--radius-lg);
    border-radius: 8px;
     text-align: center;
     text-align: center;
}
}


.home-stat__number {
.home-stats__number {
    display: block;
     font-size: 1.5rem;
     font-size: 2.5rem;
     font-weight: 700;
     font-weight: 800;
     color: var(--color-primary);
     color: var(--color-primary);
    line-height: 1;
     margin-bottom: 0.25rem;
     margin-bottom: 0.5rem;
}
}


.home-stat__label {
.home-stats__label {
    display: block;
     font-size: 0.875rem;
     font-size: 0.875rem;
     color: var(--color-subtle);
     color: var(--color-subtle);
Ligne 554 : Ligne 615 :


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


.home-social {
    padding: 1.5rem;
    background: var(--color-surface-0);
    border: 2px solid var(--border-color-base);
    border-radius: 12px;
}


.home-social__header {
/* ====================================
    display: flex;
  SUPPRESSION DES STYLES CONFLICTUELS
    align-items: center;
  Les règles suivantes ont été SUPPRIMÉES car elles
    gap: 0.75rem;
  entraient en conflit avec le modèle ButtonLink :
    margin-bottom: 1.5rem;
 
    padding-bottom: 1rem;
  - #home-card-discord, #home-card-patreon, #home-card-gitlab
    border-bottom: 2px solid var(--border-color-base);
  - min-height forcé
}
  - display: flex !important
 
  - Centrage forcé des images
.home-social__icon {
 
    font-size: 1.5rem;
  Le modèle ButtonLink gère maintenant tout automatiquement.
}
  ==================================== */
 
.home-social__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-base);
}
 
.home-social__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
 
.home-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--color-surface-1);
    border: 2px solid var(--border-color-base);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s;
}
 
.home-social-btn--discord {
    color: #5865F2;
    border-color: rgba(88, 101, 242, 0.3);
}
 
.mw-body .home-social-btn--discord:hover {
    background: rgba(88, 101, 242, 0.1);
    border-color: #5865F2;
    transform: translateY(-2px);
}
 
.home-social-btn--youtube {
    color: #FF0000;
    border-color: rgba(255, 0, 0, 0.3);
}
 
.mw-body .home-social-btn--youtube:hover {
    background: rgba(255, 0, 0, 0.1);
    border-color: #FF0000;
    transform: translateY(-2px);
}
 
.home-social-btn--twitter {
    color: #1DA1F2;
    border-color: rgba(29, 161, 242, 0.3);
}
 
.mw-body .home-social-btn--twitter:hover {
    background: rgba(29, 161, 242, 0.1);
    border-color: #1DA1F2;
    transform: translateY(-2px);
}
 
.home-social-btn--instagram {
    color: #E4405F;
    border-color: rgba(228, 64, 95, 0.3);
}
 
.mw-body .home-social-btn--instagram:hover {
    background: rgba(228, 64, 95, 0.1);
    border-color: #E4405F;
    transform: translateY(-2px);
}
 
.home-social-btn__icon {
    font-size: 1.25rem;
}


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


Ligne 660 : Ligne 640 :
     background: var(--color-surface-0);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
     border-radius: 12px;
     border-radius: var(--radius-xl);
}
 
.home-links__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color-base);
}
 
.home-links__icon {
    font-size: 1.5rem;
}
}


Ligne 680 : Ligne 647 :
     font-weight: 700;
     font-weight: 700;
     color: var(--color-base);
     color: var(--color-base);
    margin-bottom: 1rem;
}
}


Ligne 688 : Ligne 656 :
}
}


.home-links__list a {
.home-links__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
     padding: 0.75rem;
     padding: 0.75rem;
     background: var(--color-surface-1);
     background: var(--color-surface-1);
     border: 1px solid var(--border-color-base);
     border-radius: var(--radius-md);
    border-radius: 6px;
     text-decoration: none;
     text-decoration: none;
     color: var(--color-base);
     color: var(--color-base);
    font-size: 0.9rem;
     transition: all 0.2s;
     transition: all 0.2s;
}
}


.mw-body .home-links__list a:hover {
.home-links__item:hover {
    color: var(--color-primary);
     background: var(--color-surface-2);
     background: var(--color-surface-2);
     border-color: var(--color-primary);
     border-color: var(--color-primary);
Ligne 706 : Ligne 674 :


/* ====================================
/* ====================================
   11. UTILITIES
   13. ANIMATIONS
  ==================================== */
 
.home-grid {
    display: grid;
    grid: auto-flow dense / repeat(auto-fit, minmax(9.375rem, 1fr));
    grid-auto-rows: minmax(3rem, auto);
    grid-gap: 0.5rem;
}
 
.home-grid--col2 {
    grid-template-columns: 1fr 1fr;
}
 
.home-grid a.external {
    background-image: none;
}
 
/* ====================================
  12. ANIMATIONS
   ==================================== */
   ==================================== */


Ligne 739 : Ligne 688 :
}
}


.home-header__content {
/* ====================================
     animation: fadeIn 0.8s ease-out;
  14. MEDIA QUERIES
  ==================================== */
 
@media (min-width: 768px) {
    .home-header__title {
        font-size: 3rem;
     }
   
    .home-header__subtitle {
        font-size: 1.125rem;
    }
}
}


/* ====================================
@media (min-width: 1200px) {
  13. MEDIA QUERIES
    .home-header__title {
  ==================================== */
        font-size: 3.5rem;
    }
   
    .home-header__subtitle {
        font-size: 1.25rem;
    }
}


@media (max-width: 1024px) {
@media (max-width: 1024px) {
Ligne 754 : Ligne 719 :
     .home-sidebar {
     .home-sidebar {
         grid-template-columns: 1fr 1fr;
         grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
     }
     }
      
      
Récupérée de "https://wiki.nefald.fr/Modèle:Accueil/shared/styles.css"
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.