/* style.css */

/* Réinitialisation de base pour une meilleure uniformité */
* {
    box-sizing: border-box; /* Inclusion des bordures et paddings dans la largeur et hauteur */
    margin: 0;
    padding: 0;
}

body {
    font-family: Lato, Arial, sans-serif;
    line-height: 1.6;
    background-color: #fff; /* Arrière-plan légèrement gris */
    color: #333;
    padding: 20px;
    font-size: 1rem;
}

header {
    background: #333;
    color: white;
    padding: 1rem 0;
    text-align: center;
    margin-bottom: 20px;
}

/* Astuce pour que les liens héritent de la couleur du texte parent */
a {
    /* 1. Force la balise <a> à prendre la couleur de son parent */
    color: inherit;
    font-weight: bold;
    /* 2. (Optionnel) Supprime le soulignement par défaut */
    text-decoration: none; 
}

/* Appliquer la règle à tous les états du lien (non visité, visité, etc.) */
/* a:link, a:visited, a:hover, a:active, a:focus */
a:visited, 
a:hover, 
a:active, 
a:focus {
    color: inherit; /* Assure que la couleur ne change pas avec l'état */
}

a:hover{
    text-decoration: underline;
    
}
h2 {
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
}

p {
    margin-bottom: 1.5rem;
}

main {
    background: #EDF1F8;
    padding: 20px;
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Petite ombre */
}

footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
    font-size: 0.9rem;
    color: #666;
}

/* Code pour les deux blocs côte à côte */

.conteneur-flex {
    display: flex;
}

.bloc-a, .bloc-b {
    flex: 1; 
}
.bloc-a img {
    max-width: 100%;
    height: auto; 
}
 .bloc-b {
    text-align: center;
    padding:1rem;
 }
 
 /* MEDIA QUERY pour les écrans de moins de 600px de large (smartphones) */
@media (max-width: 600px) {
    
    .conteneur-flex {
        /* Ceci force les éléments à s'empiler verticalement (colonne) */
        flex-direction: column; 
    }
    
    .bloc-a, 
    .bloc-b {
        /* En mode colonne, il est bon que les blocs reprennent 100% de la largeur du conteneur parent */
        width: 100%; 
        /* On retire la propriété flex pour éviter les comportements inattendus en mode colonne */
        flex: auto; 
    }
}