/* Style général */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    color: #333;
}

section{
    display: flex;
    flex-wrap: wrap;
}
section h2{
    width: 100%;
}

section > div{
    width: 75%;
}

section aside{
    width: 23%;
}

aside.sidebar{
    width: 87%;
}

.grid-container {
    display: grid;
    gap: 10px;
    padding: 10px;
    background-color: white;
    border-radius: 8px;
}

.item {
    background-color: orange;
    color: white;
    padding: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
}

.header, .menu, .main, .sidebar,.footer { 
    color: white;
    padding: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
 }

 .header{
    background-color: blue;
 }
 .menu{
    background-color: cadetblue;
 }
 .footer{
    background-color: coral;
 }
 .main{
    background-color: cornflowerblue;
 }
 .sidebar{
    background-color: salmon;
 }

/* Exercice 1 */
#exercice-1 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,100px);
    gap: 12px;

}

/* Exercice 2 */
#exercice-2 {
    display: grid;
    grid-template-columns: 2fr 1fr 3fr;
    grid-template-rows: repeat(2,100px);
    gap:12px;
}

/* Exercice 3 */
.item-1 {
    grid-column: 1 / 2;
  }
.item-2 { 
    grid-column: 2 / 3;
    grid-template-columns: 1fr;
 }
.item-3{
    grid-column: 1 / 2;
}
.item-4{
    grid-column: 2 / 3;
}
.item-5{
    grid-column: span 2;
}


/* Exercice 4 */
.align-container {
display: grid;
grid-template-rows: repeat(5, 1fr);
gap:10px;
width: 70px;

}

/* Exercice 5 */
.layout-grid {

    display: grid;
    grid-template-columns:1fr 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "header header header"
    "menu main sidebar"
    "footer footer footer";
    gap:10px;

}
    .header{
        grid-area:header;
    }
    .menu {
        grid-area:menu;
    }
    .main {
        grid-area:main;
    }
    .sidebar{
        grid-area:sidebar;
    }
    .footer{
        grid-area:footer;
    }