/* Styles globaux */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; padding: 20px; background: #fdfdfd;}
h2 { margin: 20px 0; border-bottom: 2px solid #ccc; padding-bottom: 5px; }

/* --- 3.1 Barre de navigation (Flexbox) --- */
.navbar {
    display: flex;
    justify-content: space-between; /* Espace entre le logo et les liens */
    align-items: center; /* Centrage vertical */
    background-color: #333;
    padding: 15px 30px;
    margin-bottom: 40px;
}
.navbar .logo {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}
.nav-links {
    list-style: none; /* Enlève les puces de <ul> */
    display: flex;    /* Aligne les <li> horizontalement */
    gap: 20px;
}
.nav-links a {
    color: white;
    text-decoration: none;
}
.nav-links a:hover {
    text-decoration: underline;
}

/* --- 3.2 Cartes de même hauteur (Flexbox) --- */
.cards {
    display: flex;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}
.card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    flex: 1; /* Permet aux cartes de prendre la même place */
    
    /* Configurer la carte elle-même comme flex container en colonne */
    display: flex;
    flex-direction: column; 
}
.card h3 { margin-bottom: 10px; }
.card p { margin-bottom: 15px; color: #555; }
.card-link {
    /* Pousse le lien complètement en bas avec margin-top: auto */
    margin-top: auto;
    
    display: inline-block;
    padding-top: 15px;
    color: #007bff;
    text-decoration: none;
    align-self: flex-start; /* Evite qu'il prenne toute la largeur s'il n'est pas un bloc plein */
}
.card-link:hover { text-decoration: underline; }