body {background-color: #e9c29a; margin-left: 10%; margin-right: 20%;}

.grid-container {
  background-color: #e9c29a;
  border: #ff0000;
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 200px;
  z-index: 0;
  position: relative;
}

.corpus {
  margin-top: 300px;
}

.vignettes {background-color: #c88357; margin: 2px; min-width: 10%;}

img {width: 200px; clip-path: circle(77px);}

.cephalopode {
  width: 200px;
  clip-path: circle(77px);
  filter : sepia(250%);
  z-index: -1;
  position: relative;
}

.vignettes:hover .vero {
    opacity: 0.3;
}
  
.vignettes:hover .product {
    opacity: 1;
  }

.vero {
    opacity: 1;
    display: block;
    padding-top: 20px;
    padding-left: 20px;
    width: 90%;
    height: 90%;
    transition: .5s ease;
    backface-visibility: hidden;
    }

.product {
    transition: .5s ease;
    opacity: 0;
    position: relative;
    top: -15%;
    left: 10%;
    transform: translate(-10%, -10%);
    -ms-transform: translate(-10%, -10%);
    text-align: center;
  }

header {
  background-color: #e9c29a;
  position:fixed;
  top: 0;
  width: 100%;
}

li {
    list-style-type: none;
  }

li::before {
  content: "\950 ";
  color: #b05116;}

.rameau {
  background-color: #6B4227;
  color: white;
  font-size: 16px;
  padding: 10px 10px;
  border-radius: 10px 10px;
}

h1 {font-family: Chau Philomene One; color: #6b4227; margin-left: 25%;}

h2 {font-family: Chau Philomene One; color: #895430; margin-left: 35%; text-shadow: 2px 2px 1px #673f2466;}

.emphase {color: #702a02; font-weight: bold;}

td {vertical-align: top;}

a {background: #895430; color: #e9c29a; margin: 3px;}
a:hover {background: #e9c29a; color: #895430; margin: 3px; text-decoration: overline underline;}

.skills1 {display: grid;}

.skills1:hover {background-color: #c8b182a4; color: #ffffff;}

.tarifs {display: grid;}

.contact {background-color: #e9c29a; border-radius: 5%; border-style: groove; border-color: #702a02; text-align: center; width: 80%;}

.en_elaboration {z-index: 0; background-color: #cccccc; border-radius: 50%; border-color: #ff0000; border-width: 2px; border-style: double;}

footer {display: flex; justify-content: center; background-color: #AF5418; opacity: 60%; border-radius: 10px; color: #c88357;}

.avertoch {z-index: 2; font-family: stencil; position: absolute; left: 15%; width: 100%; rotate: -25%; color:#ff0000; font-size: 5em;}