:root {
    --fond: #fffafa;
    --footer: #707B7C;
    --blanc: #F0EFE7;
    --noir: #000;
}

html, body {
    height: 100%;
    margin: 0;
    font-size: 14px;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--fond);
}

main {
    flex: 1;
}

/* VALUES */
.img_values {
    width: 70%;
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 33rem;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

/* SERVICES */
.img_services {
  /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
  width: 100%;
  filter: gray; /* IE5+ */
  -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
  -webkit-transition: all .4s ease-in-out;  
}

.img_services:hover {
  filter: none;
  -webkit-filter: grayscale(0);
  -webkit-transform: scale(1.01);
}

/* FOOTER */
footer {
    background-color: var(--footer);
}

.footer_informations {
    color: var(--blanc);
}

a.a_footer_informations {
    color: var(--blanc);
    text-decoration: none;
}

ul.ul_footer_plan_mentions {
    list-style-type: none;
}

a.a_footer_plan_du_site_mentions {
    color: var(--blanc);
    text-decoration: none;
}