html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
}
html nav, body nav {
  display: flex;
  justify-content: space-between;
  padding: 7.5px 30px;
}
html nav img, body nav img {
  max-height: 50px;
}
html nav ul, body nav ul {
  display: flex;
}
html nav ul li, body nav ul li {
  margin-left: 15px;
  list-style-type: none;
}
html nav ul li a, body nav ul li a {
  text-decoration: none;
  color: inherit;
}
html nav ul li a:hover, body nav ul li a:hover {
  text-decoration: underline;
}
html section, body section {
  padding: 0 30px;
  width: calc(100% - 60px);
}
html section#accueil, body section#accueil {
  background-image: linear-gradient(25deg, #b80404 80%, white);
  padding-top: 30px;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
}
html section#accueil h1, body section#accueil h1 {
  color: black;
  background-color: white;
  display: inline;
  padding: 2px 5px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 2em;
}
html section#accueil p, body section#accueil p {
  color: white;
  text-transform: uppercase;
  font-size: 2em;
  font-weight: 600;
}
html section#accueil div, body section#accueil div {
  width: 100%;
}
html section#accueil div a, body section#accueil div a {
  border: 0;
  border-radius: 9999px;
  background-color: black;
  color: white;
  text-decoration: none;
  padding: 7.5px 11.25px;
  transition: 0.3s ease;
}
html section#accueil img, body section#accueil img {
  padding-right: 45px;
  max-width: 200px;
}
html section#decouvrir, body section#decouvrir {
  background-image: linear-gradient(#b80404 50%, white 50%);
  padding-top: 30px;
}
html section#decouvrir h2, body section#decouvrir h2 {
  color: white;
  text-align: center;
  margin: 0 0 30px 0;
  text-transform: uppercase;
}
html section#decouvrir .travaux-container, body section#decouvrir .travaux-container {
  display: flex;
  justify-content: center;
}
html section#decouvrir .travaux-container .travaux-item, body section#decouvrir .travaux-container .travaux-item {
  display: flex;
  flex-direction: column;
  border: 1px solid #b80404;
  width: 25%;
  max-width: 300px;
  margin: 0 7.5px;
  background-color: white;
}
html section#decouvrir .travaux-container .travaux-item img, body section#decouvrir .travaux-container .travaux-item img {
  height: 200px;
}
html section#decouvrir .travaux-container .travaux-item h4, body section#decouvrir .travaux-container .travaux-item h4 {
  padding: 15px;
  margin: 0;
  color: #eb4646;
}
html section#decouvrir .travaux-container .travaux-item p, body section#decouvrir .travaux-container .travaux-item p {
  padding: 0 15px;
  margin: 0;
  line-height: 1.5em;
}
html section#decouvrir .travaux-container .travaux-item a, body section#decouvrir .travaux-container .travaux-item a {
  padding: 15px;
  color: black;
  font-weight: 600;
}
html section#decouvrir .aides-logo, body section#decouvrir .aides-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
html section#decouvrir .aides-logo img, body section#decouvrir .aides-logo img {
  margin: 0 37.5px;
  max-height: 100px;
}
html section#decouvrir .aides-logo img:first-child, body section#decouvrir .aides-logo img:first-child {
  max-height: 110px;
  margin-bottom: 10px;
}
html section#nous, body section#nous {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
html section#nous img, body section#nous img {
  max-width: 600px;
  flex-shrink: 1;
}
html section#nous .qsn, body section#nous .qsn {
  max-width: 500px;
}
html section#nous .qsn h3, body section#nous .qsn h3 {
  text-transform: uppercase;
  font-size: 1.5em;
  text-align: center;
}
html section#nous .qsn p, body section#nous .qsn p {
  line-height: 1.5em;
  text-align: justify;
}
html footer, body footer {
  background-color: #394048;
  color: white;
  display: flex;
  justify-content: space-between;
  width: calc(100% - 30px);
  padding: 7.5px 15px;
}

@media (max-width: 1024px) {
  html body section#decouvrir .travaux-container {
    flex-wrap: wrap;
  }
  html body section#decouvrir .travaux-container .travaux-item {
    width: 100%;
    margin-bottom: 15px;
  }

  html body section#accueil {
    display: flex;
    justify-content: center;
  }
  html body section#accueil img {
    display: none;
  }
  html body section#accueil .leftAccueil {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  html body section#accueil .leftAccueil p {
    font-size: 1.5em;
    margin-bottom: 45px;
  }

  html body section#nous img {
    max-width: 300px;
  }

  html body section#decouvrir .aides-logo {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  html body section#decouvrir .aides-logo img {
    margin-bottom: 30px;
    max-width: 200px;
  }
  html body section#decouvrir .aides-logo img:first-child {
    margin-bottom: 30px;
  }

  html body section#nous {
    flex-direction: column;
    align-items: center;
  }
  html body section#nous img {
    order: 2;
  }
}
@media (max-width: 640px) {
  html body section#accueil h1 {
    text-align: center;
  }
  html body section#accueil p {
    font-size: 1.5em;
  }

  html body nav ul {
    display: none;
  }

  html body section#decouvrir .travaux-container {
    flex-wrap: wrap;
  }
  html body section#decouvrir .travaux-container .travaux-item img {
    width: 100%;
  }

  html body footer {
    flex-direction: column;
  }
}

/*# sourceMappingURL=main.css.map */