/* --- Variables pour un thème sombre et moderne --- */
:root {
    --color-background: #1e1e1e; /* Fond très sombre */
    --color-text-primary: #f0f0f0; /* Texte clair */
    --color-card-background: #2a2a2a; /* Fond de carte légèrement plus clair */
    --color-primary: #007bff; /* Bleu/cyan pour l'action principale */
    --color-secondary: #28a745; /* Vert pour la deuxième action */
    --color-tertiary: #ffc107; /* Jaune/ambre pour la troisième action */
    --color-hover: #404040; /* Couleur au survol */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- Base et Réinitialisation --- */
body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* --- Conteneur Principal --- */
.container {
    max-width: 600px; /* Taille maximale pour centrer l'attention */
    width: 90%;
    padding: 40px 20px;
    text-align: center;
}

/* --- Header --- */
header h1 {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--color-primary); /* Mise en évidence du titre */
    margin-bottom: 5px;
}

header p {
    font-size: 1.1em;
    opacity: 0.8;
    margin-bottom: 30px;
}

/* --- Section des Liens (Cartes) --- */
.links-section {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacement entre les liens */
    margin-bottom: 40px;
}

.link-card {
    display: block;
    text-decoration: none;
    background-color: var(--color-card-background);
    padding: 20px;
    border-radius: 12px;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
    border-left: 5px solid transparent; /* Bordure pour l'accentuation des couleurs */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Ombre légère pour l'effet de profondeur */
}

/* Effets au survol */
.link-card:hover {
    transform: translateY(-3px);
    background-color: var(--color-hover);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}

/* Styles spécifiques aux couleurs (Primary, Secondary, Tertiary) */
.primary-link { border-left-color: var(--color-primary); }
.secondary-link { border-left-color: var(--color-secondary); }
.tertiary-link { border-left-color: var(--color-tertiary); }

/* Contenu des liens */
.link-label {
    display: block;
    font-size: 1.25em;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--color-text-primary);
}

.link-description {
    display: block;
    font-size: 0.9em;
    color: #b0b0b0;
}

/* --- Footer --- */
footer {
    padding: 20px;
    font-size: 0.8em;
    opacity: 0.6;
    margin-top: auto; /* Pousse le footer en bas de la page */
}