body {
  background-color: rgba(28, 10, 50, 0.906);
  color: rgb(241, 237, 245);
  /*width: 1000px;*/
  letter-spacing: normal;
  text-align: justify;
  /* [disabled]word-spacing: normal; */
}

body.titre {
  width: auto;
}

div.sommaire {
  padding: 0;
  margin: 0;
  font-family: MS Serif, New York, serif;
  font-size: 12pt;
}

div.Auteur {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18pt;
  line-height: 1.5em;
  padding: 0 0 0 144px;
  color: #9cabbd;
}

p.Auteur {
  line-height: 1.5;
}

span.Auteur,
p.Auteur,
h3,
h4 {
  padding: 0 50px;
}

img {
  max-width: 100%;
}

hr {
  width: 100%;
}

.hero {
  border: 2px solid black;
}

.titre-hero {
  width: 100%;
  font-size: 14px;
  font-weight: normal;
  text-align: right;
  display: block;
}

p {
  font-family: "MS Serif", "New York", sans-serif;
  font-size: 16px;
}

form {
  display: flex;
  flex-direction: column;
  width: 600px;
  margin-left: 50px;
}

input,
textarea {
  margin-bottom: 12px;
  height: 36px;
  border: none;
  padding-left: 10px;
  font-weight: bold;
  background: #f7edda;
  color: #000;
  font-size: 16px;
  text-transform: none;
  opacity: 1;
}

input::placeholder,
textarea::placeholder {
  color: black;
  font-size: 16px;
  opacity: 1;
}

textarea {
  height: 120px;
}

.envoyer {
  font-size: 18px;
}

.envoyer:hover {
  background: white;
  transition: 0.3s ease-in;
  color: #4e343b;
  cursor: pointer;
}

.flexbox-col {
  display: flex;
  flex-direction: column;
  margin: 0 30px 0 0;
  align-items: center;
  justify-content: space-between;
  width: 250px;
  height: 100%;
}

.Auteur.flexbox {
  align-items: flex-start;
}

.flexbox-col a {
  width: 250px;
  /* height: 225px; */
}

.flexbox-col span {
  margin-top: 16px;
  text-align: center;
  margin-bottom: 16px;
}

.icon {
  width: 100% !important;
}

@media (max-width: 600px) {
  .center {
    width: 100%;
  }

  form,
  .Auteur.flexbox,
  .Auteur {
    width: 400px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 20px;
  }

  p.Auteur,
  h3,
  h4 {
    padding-left: 20px;
  }

  .titre .pierre {
    font-size: 30px;
  }

  .titre-container {
    padding-left: 0;
  }

  img.hero,
  .titre-hero,
  hr.titre {
    width: 400px;
  }
}