/* règles page */

html {
  margin:0;
  padding:0;
  color: #3D3D3D;
  background-color: #f1f1f1;
}

body {
  margin:10px !important;
  max-width: 1920px;
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 10px 5px 5px #aaa;
  border-radius: 15px;
  margin: auto;
  padding: 10px;
  font-size: 15px;
  font-family: sans-serif;
}

main h1 {
  margin: 0px
}

/* fin règles page */

/* ************************************* */

/* images */

img {
  width: 180px;

}

/* fin images */

/* ************************************* */

/* background image */

html {
  background-image: url(https://productions.jeremie-fauveau.fr/sources/fond_html.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

header {
  background-image: url(https://productions.jeremie-fauveau.fr/sources/fond_header_1920.png);
  background-repeat: no-repeat;
  background-position: right;
}

/* fin background image */

/* ************************************* */

/* header */

header div {
  width: 20%;
}

header {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px grey solid;
  border-radius: 15px;
  text-align: center;
  box-shadow: 10px 5px 5px #aaa;
  text-shadow: 9px 9px 9px #aaa;
}

header h1 {
  color: #1e8d82;
}

header h2 {
  color: #31859c;
}

/* fin header */

/* ************************************* */

/* liens */

a {
  text-decoration: none;
  color: #3D3D3D;
  outline: none;
}

a:hover {
  color: #31859c;
  font-weight: unset;
}

li:hover {
  color: #31859c;
  transform: scale(1.1);
}


/*
li 
{
  list-style: none;
}

ul
{
  padding:0
}
*/

/* fin liens */

/* ************************************* */

/* web */

.titreweb {
  text-align: center;
  color: #1e8d82;
  text-decoration: underline;
  font-size: 12px;
  margin-top: 30px;
}

.web {
  display: flex;
  justify-content: space-around;
}

.t1 h2 {
  text-decoration: underline;
  color: #3D3D3D;
  font-size: 20px;
}

.t2 h2 {
  text-decoration: underline;
  color: #3D3D3D;
  font-size: 20px;
}

.t3 h2 {
  text-decoration: underline;
  color: #3D3D3D;
  font-size: 20px;
}

/* fin web */

/* ************************************* */

/* multimédia */

.titremulti {
  text-align: center;
  color: #1e8d82;
  text-decoration: underline;
  font-size: 12px;
}

.multimedia {
  display: flex;
  justify-content: space-around;
}

.t0a h2 {
  text-decoration: underline;
  color: #3D3D3D;
  font-size: 20px;
}

.t00a h2 {
  text-decoration: underline;
  color: #3D3D3D;
  font-size: 20px;
}

.t1a h2 {
  text-decoration: underline;
  color: #3D3D3D;
  font-size: 20px;
}

.t2a h2 {
  text-decoration: underline;
  color: #3D3D3D;
  font-size: 20px;
}

.t3a h2 {
  text-decoration: underline;
  color: #3D3D3D;
  font-size: 20px;
}

.fondvert {
  background-color:rgba(49,133,156,0.3);
  border-radius: 15px;
  padding: 10px;
  margin: 20px 0px 20px 0px;
  box-shadow: 10px 5px 5px #aaa
}

/* fin multimédia */

/* ************************************* */

/* autres */

.titreautre {
  text-align: center;
  color: #1e8d82;
  text-decoration: underline;
  font-size: 12px;

}

.autres {
  display: flex;
  justify-content: space-around;
}

.t1b h2 {
  text-decoration: underline;
  color: #3D3D3D;
  font-size: 20px;
}

/* fin autres */

/* ************************************* */

/* hr */

hr {
  display: none;
  width: 200px;
}

/* fin hr */

/* ************************************* */

/* responsive */

@media screen and (min-width: 1280px) {
  .logoresponsive {
    display: none;
  }
}

@media screen and (max-width: 1280px) {

  /*  header {
    background-image: url(https://productions.jeremie-fauveau.fr/sources/fond_header_1280.png);
    background-repeat: no-repeat;
    background-position: right;
    justify-content: center;
  }
*/

  .logoresponsive {
    text-align: center;
    margin: 10px;
  }

  header {
    display: none;
  }

  section {
    flex-wrap: wrap;
  }

  h2 {
    text-align: center;
  }

}

@media screen and (max-width:800px) {

  html {
    background-image: none;
    background-color: rgb(213, 216, 223);
  }

  header {
    background-image: none;
  }

}

/* fin responsive */

/* ************************************* */