/* code couleur blanc #ffffff noir #000000 gris #A3A3A3 violet#800080 */

/* style de page*/
.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
}
    
.div1 {
    grid-row: span 3 / span 3;
}

.div2 {
    grid-column: span 3 / span 3;
    grid-row: span 5 / span 5;
}

.div3 {
    grid-row: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 4;
}

.div4 {
    grid-row: span 5 / span 5;
    grid-column-start: 5;
    grid-row-start: 1;
}
        


/*couleurs et polices */

body {
    font-family: Arial, sans-serif; /* Police de base */
    background-color: #A3A3A3; /* Couleur de fond */
    color: #ffffff; /* Couleur du texte */
    line-height: 1.6; /* Espacement entre les lignes */
    margin: 0;
    padding: 0;
    background-image: url('Images/fond.jpg'); /* Chemin vers ton image */
    background-size: cover; /* Étire l'image pour couvrir toute la page */
    background-attachment: fixed; /* Fixe l'image pour qu'elle ne défile pas */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
}

header {
    background-color: #A3A3A3; /* Couleur de fond pour l'en-tête */
    color: #ffffff; /* Couleur du texte */
    padding: 1rem; /* Espacement intérieur */
    text-align: center; /* Alignement du texte */
}


/* navigation */
nav ul {
    list-style-type: none; /* Supprime les puces */
    padding: 0;
    display: flex; /* Affiche les éléments en ligne */
    justify-content: center; /* Centre les éléments */
}

nav ul li {
    margin: 0 1rem; /* Espacement entre les éléments */
}

nav ul li a {
    color: white;
    text-decoration: none; /* Supprime le soulignement */
}


/* contenu principal */
main {
    padding: 2rem; /* Espacement intérieur */
    max-width: 800px; /* Largeur maximale */
    margin: 0 auto; /* Centre le contenu */
}


/* pied de page */
footer {
    text-align: center;
    padding: 1rem;
    background-color: #333;
    color: white;
}

/* Barre de menu latérale */
.sidebar {
    width: 150px;
    background-color: #800080;
    position: fixed; /* Fixe la barre de menu */
    height: 100%;
    left: 0;
    top: 0;
    padding: 1rem;
    border-right: 1px solid #ccc;
}

.sidebar nav ul {
    list-style-type: none;
    padding: 0;
}

.sidebar nav ul li {
    margin: 1rem 0;
}

.sidebar nav ul li a {
    color: #A3A3A3;
    text-decoration: none;
}

/* Contenu principal */
.content {
    margin-left: 220px; /* Décale le contenu pour éviter la barre de menu */
    padding: 1rem;
}

header {
    background-color: #A3A3A3; /* Fond légèrement transparent */
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

main {
    padding: 2rem;
    max-width: 600px;
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid #ccc;
}

footer {
    text-align: center;
    padding: 1rem;
    background-color: #A3A3A3;
    border-top: 1px solid #ccc;
}