@font-face
{
    font-family: 'figli-ouidade';
    src: url('polices/figli-ouidade-webfont.eot');
    src: url('polices/figli-ouidade-webfont.eot') format('embedded-opentype'),
         url('polices/figli-ouidade-webfont.woff') format('woff'),
         url('polices/figli-ouidade-webfont.ttf') format('truetype'),
         url('polices/figli-ouidade-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'droidsans';
    src: url('polices/droidsans-webfont.eot');
    src: url('polices/droidsans-webfont.eot') format('embedded-opentype'),
         url('polices/droidsans-webfont.woff') format('woff'),
         url('polices/droidsans-webfont.ttf') format('truetype'),
         url('polices/droidsans-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}


body {
  display: flex;
  flex-direction: column;
  width: 80%;
  position: absolute;
  right: 0;
  background-image: url(images/fond.png);
  box-sizing: border-box;

}


header p {
  font-size: 0.8em;
}

header img {

  top: ;
  right:;
  margin: 20px;
}


header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-family: figli-ouidade, sans-serif;
  margin-left: 50px;
  margin: 20px;
  margin-top: 40px;
  border-bottom: #e30613 solid 3px;
  padding-bottom: 20px;
  text-align: center;
}

header div {

}
h2 {
  color: #5b2d87;
}

.bonjour {
  display: flex;
  font-family: droidsans, sans-serif;
  position: relative;
  width: 18%;
  height: 100%;
  background-color: #5b2d87;
  border-radius: 20px;
  position: fixed;
  top: 0;
  left: 0;
  font-family: figli-ouidade;
  font-size: 8vw;
  writing-mode: vertical-lr;

}

/* exemple trouvé sur web pour font scaling based on container's width:
div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    font-size: 2.5vw;
}
*/

.bonjour p {
  position: relative;
  margin: auto;
  /* transform: rotateX(90deg); */
}

.contenu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  margin-left: 50px;
  margin-top: 40px;
  padding: 40px;
  font-family: droidsans;
  box-shadow: 4px 4px 4px;
}
/*
.contenu div {
  padding: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}
*/
.contenu section {
  flex: 1;
  padding: 20px;
}

section ul {
  list-style-image: url(images/O_signature_puce.png) ;
}

footer {
  margin: 40px;
  padding: 40px;
}

.contact {
  text-align: center;
}