html,body {                                 /* Le css pointe l'ensemble du contenu visible de la page*/
	width:100%;                             /* la page prend la totalité de l'écran */
	min-height:100%;                        /* Hauteur minimale de l'élément*/
	margin:0;                               /* Pas d'espaces entre les bords */
	font-family:Arial, sans-serif;          /* Définition du style de police */
	font-size:20px;                         /* Définition de la taille de la police */
	background-color: #dfdeff;              /* Définition de la couleur du fond */
	color: black;                           /* Définition de la couleur de la police */
	display: flex; 
    flex-direction: row;                    /* Les différents blocs seront rangés en colonnes */
    justify-content: space-between;         /* Espace entre les blocs */
}

header{                                      /* Le css pointe le contenu de la balise header (en-tête)*/
	height:40px;                             /* Hauteur de la section*/
	width:100%;                              /* Cette section occupe l'ensemble de la largeur de la page*/
	background-color:#8d72b8;                /* Couleur de fond de la section*/
	color:#FFF;                              /* Définition de la couleur de la police de cette section*/
	position: fixed;                         /* Le menu ne défile pas, il reste fixé en haut de l'écran */
	text-align: center;                      /* Menu centré*/

}

header nav{                                  /* Le css pointe le contenu de la balise nav de header (en-tête)*/
	vertical-align: top;                     /* Les éléments ne sont plus affichés en liste mais en ligne l'un après l'autre*/
	display:inline-block;                    /* Les éléments sont des blocs*/
	height:100%;                             /* Hauteur prise par les éléments*/
}

header nav ul{                               /* Le css pointe la liste de la balise nav de header (en-tête)*/
	margin:0;                                /* Pas d'espaces entre le contenu et les bordures de la page */
	padding:0;                               /* Espacement entre les mots*/
	list-style-type:none;                    /* Enlève les points de la liste*/
	height:100%;                             /* Hauteur occupée par la liste*/
}

header nav ul li{                            /* Le css pointe le contenu de la liste de la balise nav de header (en-tête)*/
	display:inline-block;                    /* La liste est sous forme de blocs alignés*/
	margin:0;                                /* Pas d'espaces entre le contenu et les bordures de la page */
	height:100%;                             /* Hauteur prise de l'élément de la liste*/
	width:150px;                             /* Largeur de l'élément*/
	text-align:center;                       /* Alignement du texte à l'intérieur du bloc */
}

header nav ul li a{                          /* Le css pointe les liens de l'en-tête*/
	display:block;                           /* Liens sous forme de blocs*/
	width:100%;                              /* Hauteur prise*/
	height:100%;                             /* Largeur prise*/
	line-height:40px;                        /* Définir l'espacement entre les lignes de texte à l'intérieur d'un élément*/
	color:#FFF;                              /* Couleur des liens*/
	text-decoration:none;                    /* Supprime le soulignement du lien*/
}

header nav ul li a:hover{                    /* Le css pointe les liens lorsqu'ils sont survolés par la souris*/
	background-color:#524ffd;                /* Couleur du fond du bloc lien*/
	text-decoration: none;                   /* Supprime les soulignements*/
	font-size: 15px;                         /* Taille de la police du lien*/
}


aside{                                       /* Le css pointe le contenu secondaire*/
	order: 1;                                /* Ordre d'apparition dans la page de la gauche vers la droite*/
	margin-top:50px;                         /* Ecart entre le contenu est la marge supérieure*/
    box-sizing: border-box;                  /* Calculer les dimensions d'un élément*/
    width: 30%;                              /* Espace de la page occupée par le contenu*/                    
	padding:25px;                            /* Espace entre les éléments*/
	background-color:#8d72b8;                /* Couleur du fond du contenu secondaire*/
    border-radius:5px;                       /* Arrondissement des bordures du contenu secondaire*/
    max-width: 30%;                          /* Espace maximal de la page qui peut être occupé par le contenu secondaire*/
    color: white;                            /* Couleur de la police*/
}

aside ul{                                    /* Le css pointe la liste du contenu secondaire*/
	margin:0;                                /* Aucun espace entre liste et la bordure*/
	padding:0;                               /* Espacement entre les mots faible*/
}

aside ul li{                                 /* Le css pointe les éléments de la liste du contenu secondaire*/
	margin:5px;                              /* Aucune marge aux bordure*/
}

aside img {                                  /* Le css pointe l'image du contenu secondaire*/
    max-width: 100%;                         /* Empêche l'image de dépasser le bloc */
    height: auto;                            /* Par défaut*/
    border-radius: 30px;                     /* Arrondissement des bordures de l'image*/

}

aside a{                                     /* Le css pointe les liens du contenu secondaire*/
	text-decoration: underline;              /* soulignement du lien*/
}

main{                                        /* Le css pointe le contenu principal de la page*/
	order: 2;                                /* Ordre d'apparition dans la page de la gauche vers la droite*/
	margin-top: 50px;                        /* Espace entre le contenu principal et la marge supérieure*/
	box-sizing: border-box;                  /* Calculer les dimensions d'un élément*/
    width: 70%;                              /* Largeur fixe pour main */
    padding: 10px;                           /* Espacement entre les mots*/
    max-width: 70%                           /* Limite de la largeur occupée par main*/
}

main h2{                                     /* Le css pointe toutes les balisesde taille h2 du contenu principal main*/
	color: #7d408f;                          /* Couleur de la police*/
}
main h3{                                     /* Le css pointe toutes les balisesde taille h3 du contenu principal main*/
	color: #7d408f;                          /* Couleur de la police*/
}
main strong{                                 /* Le css pointe toutes les balisesde taille h3 du contenu principal main*/
	color: #c47b95;                          /* Couleur de la police*/
}

main h1{                                     /* Le css pointe toutes les balisesde taille h1 du contenu principal main*/
	color: #c47b95;                          /* Couleur de la police*/
	font-size: 50px;                         /* Taille de la police*/
}

a{                                           /* Le css pointe tous les liens de la page*/
	text-decoration: none;                   /* Supprime le soulignement du lien*/
	color: white;                            /* Couleur du lien*/
}

a:hover{                                     /* Le css pointe tous les liens de la page lorsqu'ils sont survolés par la souris*/
	text-decoration: underline;              /* Soulignement du lien*/
}

footer{                                      /* Le css pointe les éléments du pied de page*/
	background-color: #543c7b;               /* Couleur de fond du pied de page*/
	color: #543c7b;                          /* Couleur de la police du bas de page*/
}