body { font-family: arial, sans-serif; color: black; margin: 0}

header { text-align: center; color: white; background-color: rgba(0, 0, 0, 255); border: 1px black solid  }

nav { text-align: center; background-color: white; box-shadow: 0px 3px 1px -1px rgba(0,0,0,0.5); padding: 10px}

footer { font-style: italic; text-align: center; background-color: silver; border: 1px black solid; padding: 10px }

section { text-align: center; margin-top: 50px; margin-bottom: 50px }

h1 {margin-top: 0; padding-top: 40px;}

h3 {text-align: center}

ul { padding: 0; display: inline;}

li.sommaire {list-style-type: none; display: inline; margin: 10px;}

li.sommaire:hover {font-weight: bold;}

p {text-align: center}

a {
	text-decoration: none;
	color: black;
}



* {box-sizing: border-box;}

/* id */

#contact { border: 1px black solid; border-radius: 15px; padding: 20px; margin-bottom: 40px}

#projets { display: flex; margin: 30px; display: inline-block; width: 80%; margin: auto }

#sujets { display: flex; flex-wrap: wrap; width: 80%; margin: auto }

/* classes*/

.gauche {text-align: left;}

a.lien-ext {
	text-decoration: none;
	color: rgb(30, 10, 206);
}

ul.cours_proposes {list-style-type: disc; display:block; text-align: left}

.left {float:left}

.right{float:right; margin-top: 20px;}

.separateur { width: 40px; height: 1px; margin: 15px auto; display: block; background: #999999; }

.conteneur { width: 80%; margin: auto }

.projet { width: 300px; margin: 30px; display: inline-block; background-color: white; padding-bottom: 10px;
border: 0px black solid; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)}

.projet:hover {box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); transition: 0.3s}

.projet img {min-width: 300px; height: 250px}

.picture { width: 100%; overflow: hidden; margin-bottom: 15px }

.projet span {display: block;}


.sujet { width: 300px; margin: 30px; display: inline-block; background-color: white; padding-bottom: 10px;
border: 0px black solid; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)}

.sujet:hover {box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); transition: 0.3s}

.sujet img {min-width: 300px; height: 250px}

.sujet span {display: block;}

.container {position: relative; width: 100%; height: 0; padding-bottom: 10%}

.video {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}