body {
  margin: 1em;
  font: 13px "Lucida Grande", Helvetica, Arial, sans-serif;
  font: 2em "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-style: normal;
  /*
  --s: 100px;
  --c1: #f8edd1;
  --c2: #d88a8a;
  --c3: #9d9d93;
  
  --c:#0000 48%,var(--c1) 0 52%,#0000 0;
  background:
    linear-gradient(-45deg,var(--c)),linear-gradient( 45deg,var(--c)),
    repeating-conic-gradient(from 45deg,var(--c2) 0 25%,var(--c3) 0 50%);
  background-size: var(--s) var(--s);
  */
  --s: 120px; /* control the size*/
  --c1: #d88a8a;
  --c2: #f8edd1;
  
  --_g: 80%,var(--c1) 25.4%,#0000 26%;
  background:
   radial-gradient(at 80% var(--_g)),
   radial-gradient(at 20% var(--_g)),
   conic-gradient(from -45deg at 50% 41%,var(--c1) 90deg,var(--c2) 0) 
      calc(var(--s)/2) 0;
  background-size: var(--s) var(--s);
}

.entete-messages {
    width: 1535px;
    padding:0 0 0.5em 1em;
    background: rgba(255, 192, 203, 0.7);
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    border: 4px solid #b10494;
}

.clearfix {
  content: "";
  display: table;
  clear: both;
}

a {
  color: #00B7FF;
}

h1 {
  margin: 0;
  color: #05485E;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: 2px 2px 0 white, -2px -2px 4px white;
}

h2 {
  margin: 5px 0 0 0;
  color: #8200be;
  font-weight: normal;
  font-size: 1.2em;
  text-shadow: 2px 3px 0 white, -2px -2px 4px white;
}

.spacer-1 {
  height: 10px;
  width: 100%;
}

.spacer-2 {
    clear: both;
  height: 20px;
  width: 100%;
}

.spacer-3 {
  height: 30px;
  width: 100%;
}

.spacer-4 {
  height: 40px;
  width: 100%;
}

.box {
  width: 20em;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border:1px solid #54664B;
  background:rgba(255,255,255,0.2);
  -webkit-box-shadow: #171717 7px 7px 7px;
  -moz-box-shadow: #171717 7px 7px 7px;
  box-shadow: #171717 7px 7px 7px;
}

/* Boutons */
.btn-blue {
  background: #3ba0e3;
  background-image: -webkit-linear-gradient(top, #3ba0e3, #2074a8);
  background-image: -moz-linear-gradient(top, #3ba0e3, #2074a8);
  background-image: -ms-linear-gradient(top, #3ba0e3, #2074a8);
  background-image: -o-linear-gradient(top, #3ba0e3, #2074a8);
  background-image: linear-gradient(to bottom, #3ba0e3, #2074a8);
  border: none;
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  text-shadow: 2px 2px 2px #444444;
  font-family: "Dancing Script";
  color: #ffffff;
  font-size: 1.2em;
  padding: 5px 15px 5px 15px;
  text-decoration: none;
}

.btn-blue:hover {
  background: #3faff5;
  background-image: -webkit-linear-gradient(top, #3faff5, #2586c7);
  background-image: -moz-linear-gradient(top, #3faff5, #2586c7);
  background-image: -ms-linear-gradient(top, #3faff5, #2586c7);
  background-image: -o-linear-gradient(top, #3faff5, #2586c7);
  background-image: linear-gradient(to bottom, #3faff5, #2586c7);
  cursor:pointer;
  text-decoration: none;
}

.btn-green {
  background: #34d958;
  background-image: -webkit-linear-gradient(top, #34d958, #309c17);
  background-image: -moz-linear-gradient(top, #34d958, #309c17);
  background-image: -ms-linear-gradient(top, #34d958, #309c17);
  background-image: -o-linear-gradient(top, #34d958, #309c17);
  background-image: linear-gradient(to bottom, #34d958, #309c17);
  border: none;
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  text-shadow: 2px 2px 2px #444444;
  font-family: "Dancing Script";
  color: #ffffff;
  font-size: 1.2em;
  padding: 5px 15px 5px 15px;
  text-decoration: none;
}

.btn-green:hover {
  background: #36eb5a;
  background-image: -webkit-linear-gradient(top, #36eb5a, #3fb821);
  background-image: -moz-linear-gradient(top, #36eb5a, #3fb821);
  background-image: -ms-linear-gradient(top, #36eb5a, #3fb821);
  background-image: -o-linear-gradient(top, #36eb5a, #3fb821);
  background-image: linear-gradient(to bottom, #36eb5a, #3fb821);
  cursor:pointer;
  text-decoration: none;
}

.btn-red {
  background: #f25959;
  background-image: -webkit-linear-gradient(top, #f25959, #960909);
  background-image: -moz-linear-gradient(top, #f25959, #960909);
  background-image: -ms-linear-gradient(top, #f25959, #960909);
  background-image: -o-linear-gradient(top, #f25959, #960909);
  background-image: linear-gradient(to bottom, #f25959, #960909);
  border: none;
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  text-shadow: 2px 2px 2px #444444;
  font-family: "Dancing Script";
  color: #ffffff;
  font-size: 1.2em;
  padding: 5px 15px 5px 15px;
  text-decoration: none;
}

.btn-red:hover {
  background: #f76f6f;
  background-image: -webkit-linear-gradient(top, #f76f6f, #ab1818);
  background-image: -moz-linear-gradient(top, #f76f6f, #ab1818);
  background-image: -ms-linear-gradient(top, #f76f6f, #ab1818);
  background-image: -o-linear-gradient(top, #f76f6f, #ab1818);
  background-image: linear-gradient(to bottom, #f76f6f, #ab1818);
  cursor:pointer;
  text-decoration: none;
}