/* Définition des couleurs et police*/
:root {                                     /* Pseudo-classe définissant les variables réutilisables */
    --bg-dark: #121212;                     /* Variable : couleur de fond sombre */
    --bg-card: #1e1117;                     /* Variable : couleur de fond des cartes */
    --bordeaux-dark: #4a0d1b;               /* Variable : bordeaux très foncé */
    --bordeaux-main: #6b1426;               /* Variable : bordeaux principal */
    --bordeaux-light: #942138;              /* Variable : bordeaux clair */
    --bordeaux-bright: #b82d49;             /* Variable : bordeaux éclatant */
    --text-main: #f5f5f5;                   /* Variable : couleur de texte principal */
    --text-muted: #bfb0b5;                  /* Variable : couleur de texte secondaire */
    --border-color: #521522;                /* Variable : couleur des bordures */
    --font-family: Verdana, sans-serif;     /* Variable : police de caractères globale */
}                                           /* Fin des variables globales */

.home-container {
    width: 80%;
    margin: auto auto;
    display: flex;
    flex-direction: column; /* Empile les deux groupes l'un sous l'autre */
    gap: 2rem;              /* Espace entre la ligne du haut et du bas */
    justify-content: center;
    align-items: center;
}                                           /* Fin du conteneur principal */

.home-grid{                                 /* Style de la grille des blocs */
    display: grid;                          /* Activation du mode CSS Grid */
    grid-template-columns: repeat(2, 1fr); /* Grille responsive auto-adaptative */
    gap: 2rem;                              /* Espacement entre les cartes */
    width: 100%;                            /* Occupation de toute la largeur dispo */
}                                           /* Fin de la grille */

.home-bloc{                                 /* Style des cartes de sélection */
    background-color: var(--bg-card);       /* Application du fond sombre bordeaux */
    color: inherit;                         /* Héritage de la couleur de texte parente */
    border: 1px solid var(--border-color);  /* Bordure fine bordeaux */
    text-decoration: none;                  /* Suppression du soulignement des liens */

    border-radius: 10px;                    /* Coins arrondis de 10px */
    padding: 1.5rem;                        /* Marge interne de 1.5rem */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Ombre portée sous la carte */
    min-height: 220px;                      /* Hauteur minimale de la carte */

    display: flex;                          /* Activation de Flexbox sur la carte */
    flex-direction: column;                 /* Alignement vertical des éléments */
    justify-content: center;                /* Centrage vertical du contenu */
    align-items: center;                    /* Centrage horizontal du contenu */
    text-align: center;                     /* Texte aligné au centre */

    cursor: pointer;                        /* Curseur en forme de main au survol */
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; /* Animation fluide sur 0.2s */
}                                           /* Fin de la carte */

.home-bloc h2 {                             /* Titres à l'intérieur des cartes */
    font-size: 1.4rem;                      /* Taille de police du titre */
    color: #ffffff;                         /* Couleur blanche pure pour le titre */
    margin-bottom: 1rem;                    /* Espace sous le titre */
}                                           /* Fin du style titre */

.home-bloc p{                               /* Description à l'intérieur des cartes */
    color: var(--text-muted);               /* Couleur de texte adoucie */
    font-size: 0.95rem;                     /* Taille de police légèrement réduite */
    line-height: 1.4;                       /* Hauteur de ligne pour la lisibilité */
}                                           /* Fin du style description */

.icon-home{                                 /* Style des icônes émojis */
    font-size: 3rem;                        /* Grande taille pour l'icône */
    margin-bottom: 1rem;                    /* Espace sous l'icône */
}                                           /* Fin du style icône */