.bouton {
    padding: 5px 10px;
    color: white;
    text-decoration: none;   /* Bouton pour passes d'une page a une autre */
    border-radius: 5px;
    text-align: center;
    background: gray;
}

.index h1 {
    text-align: center;
    background: rgb(205,205,205);
    border-radius: 10px;
    margin-bottom: 0;
}

.index .first, .index .second {
	display: flex;                    /*  Pour les 2 images du haut et séparement les 3 images du bas, permet de le mettre l'une a cote de l'autre avec un espace de 20px entre les 2 et une taille de 800px. Ces éléments sont alignés au centre */
	gap: 20px;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	align-items: center;
}

.index p { 
    background: rgb(205,205,205);         /* defini la couleur de fond des paragraphes les bord un peu circulaire */
    margin: 5px;
    border-radius: 10px;
    padding-right: 1px;
}

.index .haut, .index .droite, .l, .m, .r { /* Défini la taille que va prendre chaque image, pour celle du haut chaqun prendra 1/2 car il y a 2 images et celles du bas 1/3 car il y a 3 images */
	flex: 1;
}

.index .first img {   /* Défini la taille de l'image avec les bords un peu circulaires */
	width: 100%;
	height: 250px;
	border-radius: 10px;
}

.index .second img {    /* Défini la taille de l'image avec les bords un peu circulaires */

	width: 100%;
	height: 250px;
	border-radius: 10px;
}

body.index {    /*  Défini le fond de la page, ici une image */
	background-image: url('fondsite.jpg');;
}


body.CV {          /*  Défini le fond de la page, ici une image */
    background-image: url('fondsite.jpg');
}

.CV h1 {       /*  Les titres h1 sont centrés */
    text-align: center;
    background: rgb(205,205,205);
    border-radius: 10px;
    margin: 0;
}

.CV h2 {       /*  Les titres h2 font 2,5 fois la taille normal d'un texte */
    font-size: 250%;
    margin-bottom: 0;
}

.CV h3 {    /*  L'espace au dessus des titres h3 est de 2px */
    margin-top: 2px;
}

.CV .cadre {   /*  Le contenu de cv est dans un rectangle avec des bords de 2px, le contenu au centre, une taille de 1000px mit au milieu grace a display block (bloc tout seul donc au milieu) et margin 0 qui enleve les espaces */
    border: 2px solid black;
    border-radius: 10px;
    justify-content: center;
    max-width: 1000px;
    background: rgb(205, 205, 205);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.CV .hautcv {   /*  le haut du cv aura un espace de 30px a gauche */
	margin-left: 30px;
}

.CV .corpscv {      /* Espace flexible pour pouvoir séparer les éléments qui le contiennet en parts égales avec un espacement de 20px entre ces éléments.  align-items: flex-start sert a mettre les éléments en haut, ici la partie gauche et la partie droite du cv */
	display: flex;
	gap: 20px;
	align-items: flex-start; 
}

.CV .hrd {   /* Fais un trait vertical */
	border: none;
	height: 2px;
	width: 250px;
	background-color: gray;
	margin-left: 0
}


.CV .droite {      /*  Defini la taille de la partie droite du cv avec une couleure de fond grise */
	border: none;
	height: 2px;
	width: 400px;
	background-color: gray;
	margin-left: 0
}

.CV .gauchecv {          /* Met un espacement a gauche de 30px et défini la taille de la partie gauche */
	margin-left: 30px;
	width: 322px;
}

.CV .droitecv {    /* Met un espacement a gauche de 20px et défini la taille de la partie droite */
	margin-top: 0;
	border-left: 2px solid gray;
	padding-left: 20px;
}

.CV .contact {  /* Met les élements flexible pour séparer en parts les différents contenu de contact et alignés au centre */
    display: flex;
    align-items: center;
    margin: 0;
}

.CV .contact img {      /* flex pour séparer en part les éléments "enfant" avec une taille définie */
    display: flex;
    width: 20px;
    height: 24px;
}

.CV .langues {      /* flex pour séparer en part les éléments "enfant" et met les éléments au centre */
    display: flex;
    align-items: center;
    margin: 0;
}

.CV .langues img {     /* Défini la taille d'un image */
	width: 20px;
	height: 14px;
}



body.interests {
    background-image: url('fondsite.jpg');   /*  Défini le fond de la page, ici une image */
}

.interests h1 {               /* met les éléments au centre avec un fond (ici en couleur) et des coins arondis */
    text-align: center;
    background: rgb(205,205,205);
    border-radius: 10px;
    margin-bottom: 0;
}

.interests .tout {           /* flex pour séparer en part les éléments "enfant" avec un espacement entre ces elements */
    display: flex;
    gap: 40px;
    margin: 40px;
}

.interests .haut {        /* défini la taille de la partie "haut", partie mise au centre avec des coins légèrement arondi */
    width: 700px;
    height: auto;
    display: block;
    margin: auto;
    border-radius: 5px;
}

.interests .haut iframe {        /* définie taille d'une image avec des coins arondis */
    width: 100%;
    height: 500px;
    border-radius: 5px;
}

.interests .gauche {            /* dis que la partie gauche prendra 1 part (sur le nombre de part en tout ici 2) avec un contoure et un fond et des coins tres arondis */
    flex: 1;
    padding: 20px;
    border: 2px solid black;
    border-radius: 40px;
    background: rgb(205, 205, 205);
}

.interests .droite {            /* dis que la partie gauche prendra 1 part (sur le nombre de part en tout ici 2) avec un contoure et un fond et des coins tres arondis */
    flex: 1;
    padding: 20px;
    border: 2px solid black;
    border-radius: 40px;
    background: rgb(205, 205, 205);
}

.interests p {      /* sur la fin de la page, les mots retournent a la ligne */
    word-break: break-all;
}

body.favorite {
    background-image: url('fondsite.jpg');    /*  Défini le fond de la page, ici une image */
}

.favorite img {         /* Défini la taille de l'image et la met au milieu */ 
    width: 600px;
    height: 455px;
    display: block;
    margin: auto;
}

.favorite h1 {          /* Défini un fond grace a rgb, met les bords arondis et aligne le texte au milieu */
    background: rgb(205,205,205);
    border-radius: 10px;
    text-align: center;
}

body.livre {
    background-image: url('fondsite.jpg');    /*  Défini le fond de la page, ici une image */
}

.livre .contenu {     /* créé un bloc avec des bord qui au coin sont arondis et defini la taille. Ce bloc cesra en milieu de page avec un fond defini grace a rgb */
    border: 2px solid black;
    border-radius: 10px;
    max-width: 800px;
    display: block;
    margin: 0 auto;
    background: rgb(205,205,205);
}

body.film {
    background: url('fondsite.jpg');       /*  Défini le fond de la page, ici une image */
}

.film h1 {     /* met le texte au centre avec un fond et des coins arondis */
    text-align: center;
    background: rgb(205,205,205);
    border-radius: 10px;
    margin-bottom: 0;
}

.film .affiche {    /* donnes une taille et met au milieu le contenu avec des coins arondis */
    width: 600px;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}

.film .info img {   /* Défini une taille a l'image */ 
    width: 20px;
    height: auto;
}

.film .info {        
    display: flex;
    max-width: 200px;
    margin: 0 auto;
    align-items: center;
}

.film .info .temps {   /*  */
    flex: 1;
}

.film .info .producteur {
    flex: 1;
}

.film .texte {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.film .histoire, .film .pourquoi {
    flex: 1;
    background: rgb(205,205,205);
    border-radius: 10px;
}

.film .histoire p, .film .pourquoi p {          /* Retourne le texte a la ligne au lieu de la continuer a la fin de chaque ligne */
    word-break: break-all;
}

body.livre {
    background: url('fondsite.jpg');       /*  Défini le fond de la page, ici une image */
}

.livre h1 {    /* centre le titre, lui met un fond et des coins arrndis */
    text-align: center;
    background: rgb(205,205,205);
    border-radius: 10px;
    margin-bottom: 0;
}

.livre .affiche {   /* créé une taille au bloc et le met au milieu. Le bloc aura des coins arrondi */
    width: 600px;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}

.livre .info img {
    width: 20px;
    height: auto;
}

.livre .info {
    display: flex;
    max-width: 200px;
    margin: 0 auto;
    align-items: center;
}

.livre .info .temps {
    flex: 1;
}

.livre .info .producteur {
    flex: 1;
}

.livre .texte {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.livre .histoire, .livre .pourquoi {
    flex: 1;
    background: rgb(205,205,205);
    border-radius: 10px;
}

.livre .histoire p, .livre .pourquoi p {           /* a la fin de chaque ligne, au lieu de continuer le texte va a la ligne */
    word-break: break-all;
}

body.town {
    background: url('fondsite.jpg');                 /*  Défini le fond de la page, ici une image */
}

.town h1 {                 /* titre h1 est centré avec un fond d'un couleur rapport r=205, g=205 et b=205 avec un coin arondi */
    text-align: center;
    background: rgb(205,205,205);
    border-radius: 10px;
    margin-bottom: 0;
}

.town .tout {           /* l'ensmble est flexible donc les "enfants" peuvent etre séparés en plusieur parts. Espacement de 30px  et une taille de 1200px */
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.town .carte {         /* Met au milieu de la pages les éléments */
    display: block;
    margin: 0 auto;
}

.town .gauche, .town .droite {         /* la prtie droite et gauche prennet chaqune une part sur 2 et prendrons donc la moitié chaqune de la page avec un rembourage, des coins arrondi, et un fond blanc et des bords*/
    flex: 1;
    padding: 20px;
    border: 2px solid black;
    border-radius: 40px;
    background: white;
}

.town .imgchateau {        /* Defini la taille */
    width: 100px;
    height: auto;
}

.town .imgecusson {       /* Defini la taille */
    width: 50px;
    height: auto;
    margin: 0;
}

.town .gauche {         /* Défini la taille de la partie droite et met un fond */
    margin-left: 150px;
    background: rgb(205,205,205);
}

.town .villeecussons {     /* rend flexible les éléments (pour modifié leur taille) sans espacement */
    display: flex;
    gap: 0px;
}

.town .droite {          /* Défini la taille de la partie droite et met un fond */
    margin-right: 150px;
    background: rgb(205,205,205);
}

.town .chateau img {      /* Met l'image a droite du texte avec des espacements */
    float: right;
    margin: 5px 20px 5px 0;
}

.town p {            /* les motes retournent a la ligne au lieu de rester sur la meme */
    word-break: break-all;
}

.town img {         /* defini la taille de l'image */ 
    width: 200px;
    height: auto;
}

.town audio {     /* met au milieu de la page */
    display: block;
    margin: 0 auto;
}

.town h3, .town h4, .town p {     /* aucun rembourage et colle l'élément a ceux qui sont a cote de lui */
    margin: 0;
    padding: 0;
}

.town h5 {        /* aucun rembourage et colle l'élément a ceux qui sont a cote de lui */
    margin: 0;
    padding: 0;
}

body.IUT {
    background: url('fondsite.jpg')             /*  Défini le fond de la page, ici une image */
}

.IUT h1 {          /* Centre les titres h1, leu met un fond et un coin arrondi. Sert vers le bas */
    text-align: center;
    background: rgb(205,205,205);
    border-radius: 10px;
    margin-bottom: 0;
}

.IUT .tout {        
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.IUT .gauche {      /* Prend une place de 3 */
    flex: 3;
}

.IUT .droite {               /* Prend une place de 7 et créé un rectangle avec un fond et les coins arrondi */
    flex: 7;
    border: 2px solid black;
    border-radius: 10px; 
    background-color: rgb(205,205,205);
}

.IUT .gauche p, .droite p {   /* les mots retournes a la ligne a la fin de la page */
    word-break: break-all;
}

.IUT video {        /* Défini la taille de la vidéo et arondi le coin */
    width: 350px;
    height: auto;
    border-radius: 10px;
}