/* Style pour la grille principale */
main {
    display: grid;
    grid-template-columns: 1fr 3fr 2fr;
    grid-template-areas:
    "header header header"
    "aside introduction programme"
    "banniere-agence banniere-agence programme"
    "footer footer footer";
    gap: 10px;
 }
 
 /* Adaptation pour les écrans inférieurs à 992px */
 @media (max-width: 992px) {
    main {
         grid-template-columns: 1fr;
         grid-template-areas:
         "header"
         "aside"
         "introduction"
         "programme"
         "banniere-agence"
         "footer";
         }
 }
 
 /* Style pour l'en-tête */
 header {
    grid-area: header;
    background: #323232;
    text-align: center;
    padding: 10px;
    border-radius: 0 0 12px 12px;
 }
 
 /* Style pour le titre de l'en-tête */
 header > h1 {
    font-size: 48px;
 }
 
 /* Adaptation pour les écrans inférieurs à 992px */
 @media (max-width: 992px) {
    header {
        margin-top: 50px;
        margin-bottom: -10px;
        border-radius: 12px;
    }
 
    header > h1 {
         font-size: 28px;
 }
    }
 
 /* Style pour la barre latérale */
 aside {
    grid-area: aside;
    background: red;
    padding: 10px 0 10px 10px;
    border-radius: 12px;
 }
 
 /* Style pour la liste dans la barre latérale */
 aside > ul {
    list-style: none;
 }
 
 /* Style pour les liens dans la barre latérale */
 aside a{
  text-decoration: none;
  color: whitesmoke;
  font-weight: bold;
 }
 
 /* Effet hover pour les liens dans la barre latérale */
 aside a:hover {
  transition: 0.3s;
  color: grey;
  text-decoration: underline;
 }
 
 /* Adaptation pour les écrans inférieurs à 992px */
 @media (max-width: 992px) {
    aside {
        display: flex;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 5px;
        right: 5px;
        background: #323232;
        border-radius: 0 0 12px 12px;
    }
 
    aside  ul {
        display: flex;
        align-items: center;
        gap: 20px;
    }
 }
 
 /* Style pour l'introduction */
 .introduction {
    grid-area: introduction;
    background: #323232;
    padding: 10px;
    border-radius: 12px;
 }
 
 /* Style pour le programme */
 .programme {
    grid-area: programme;
    background: #323232;
    padding: 10px;
    border-radius: 12px;
 }
 
 /* Style pour la bannière de l'agence */
 .banniere-agence {
    grid-area: banniere-agence;
    background: #323232;
    border-radius: 12px;
 }
 
 /* Style pour l'image de la bannière de l'agence */
 .banniere-agence > img {
    border-radius: 12px;
 }
 
 /* Style pour le pied de page */
 footer {
    grid-area: footer;
    background: #323232;
    padding: 10px;
    text-align: center;
    border-radius: 12px 12px 0 0;
 }