*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth; }
  @media only screen and (max-width: 75em) {
    html {
      font-size: 50%; } }

body {
  box-sizing: inherit;
  font-family: "Lato";
  font-weight: 400;
  line-height: 1.6;
  overflow-X: hidden; }
  body strong {
    font-weight: 400; }
    @media only screen and (max-width: 50em) {
      body strong {
        font-weight: 300; } }

.container {
  width: 100%; }

.heading {
  font-family: "Bebas Neue";
  font-weight: 400;
  font-size: 5rem;
  color: #333;
  text-transform: uppercase; }

.text {
  justify-self: center;
  font-size: 1.8rem;
  font-weight: 400;
  text-align: justify;
  line-height: 1.4; }
  @media only screen and (max-width: 50em) {
    .text {
      font-size: 2rem;
      font-weight: 300; } }

.btn {
  border: none;
  background-color: #251809; }
  .btn a {
    text-decoration: none;
    font-family: "Lato";
    font-weight: 400;
    font-size: 1.5rem;
    color: #fff; }
  .btn__form {
    display: block;
    color: #fff;
    width: 50%;
    margin: 2rem auto;
    padding: 1rem 0rem;
    font-family: "Bebas Neue";
    font-size: 2rem;
    cursor: pointer;
    transition: all .2s; }
    .btn__form:hover {
      transform: scale(1.1);
      rotate: -3deg; }
    .btn__form img {
      width: 2.5rem;
      color: #fff;
      margin-left: .8rem;
      transform: translateY(25%); }

.card {
  display: grid;
  grid-template-rows: repeat(2, max-content) 1fr max-content;
  background-color: #fafafa;
  clip-path: polygon(0% 0%, 0% 100%, 100% 95%, 100% 0%);
  margin-bottom: 15rem; }
  @media only screen and (max-width: 50em) {
    .card {
      margin-bottom: 5rem; } }
  @media only screen and (max-width: 37.5em) {
    .card {
      margin-bottom: 5rem; } }
  .card__img {
    width: 100%; }
  .card__name {
    font-family: "Bebas Neue";
    font-weight: 400;
    background-color: #493116;
    color: #fff;
    font-size: 4rem;
    line-height: 1.3;
    align-self: center;
    width: 90%;
    margin-top: -5rem;
    justify-self: end;
    text-align: center;
    text-transform: uppercase; }
    @media only screen and (max-width: 75em) {
      .card__name {
        font-size: 3rem;
        padding: 2rem;
        line-height: .5; } }
  .card__list {
    width: 80%;
    margin: 2.5rem 3rem 3rem;
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 0.05rem;
    text-align: justify; }
    @media only screen and (max-width: 75em) {
      .card__list {
        font-size: 1.8rem;
        padding: 0;
        text-align: left; } }
    .card__list li {
      list-style: none;
      padding: .5rem; }
  .card__btn {
    align-self: end;
    justify-self: start;
    width: 30%;
    margin: 1.8rem 3rem 3rem;
    transition: all .2s; }
    @media only screen and (max-width: 75em) {
      .card__btn {
        width: 30%; } }
    .card__btn a {
      display: block;
      width: 100%;
      height: 100%;
      padding: .8rem;
      text-decoration: none;
      border: none; }
    .card__btn:hover {
      transform: scale(1.1); }

.header {
  height: 90vh;
  width: 100%;
  background-image: linear-gradient(rgba(92, 56, 32, 0.65), rgba(92, 56, 32, 0.65)), url(../../img/photo-accueil.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  clip-path: polygon(0% 0%, 0% 100%, 100% 75%, 100% 0%); }
  @media only screen and (max-width: 75em) {
    .header {
      height: 95vh;
      clip-path: polygon(0% 0%, 0% 100%, 100% 85%, 100% 0%); } }
  @media only screen and (max-width: 37.5em) {
    .header {
      height: 95vh;
      clip-path: polygon(0% 0%, 0% 100%, 100% 95%, 100% 0%); } }
  .header__couverture {
    background-image: linear-gradient(rgba(92, 56, 32, 0.65), rgba(92, 56, 32, 0.65)), url(../../img/tuiles-plate.JPG); }
  .header__zinguerie {
    background-image: linear-gradient(rgba(92, 56, 32, 0.65), rgba(92, 56, 32, 0.65)), url(../../img/zinc16.JPG); }
  .header__charpente {
    background-image: linear-gradient(rgba(92, 56, 32, 0.65), rgba(92, 56, 32, 0.65)), url(../../img/charpente-bg.jpg); }
  .header__entretien {
    background-image: linear-gradient(rgba(92, 56, 32, 0.65), rgba(92, 56, 32, 0.65)), url(../../img/nettoyage-bg.webp); }
  .header__contact {
    background-image: linear-gradient(rgba(92, 56, 32, 0.65), rgba(92, 56, 32, 0.65)), url(../../img/contact.jpg); }

.header__text {
  height: 80%;
  width: 70%;
  display: grid;
  grid-template-rows: repeat(2, max-content);
  align-content: center;
  justify-content: center; }
  @media only screen and (max-width: 37.5em) {
    .header__text {
      width: 90%;
      margin: -5rem auto 0; } }
  .header__text h1 {
    font-family: "Bebas Neue";
    font-weight: 400;
    font-size: 14rem;
    line-height: 1;
    color: #fff;
    margin-left: 5rem; }
    @media only screen and (max-width: 37.5em) {
      .header__text h1 {
        margin-left: .5rem;
        font-size: 10rem; } }
  .header__text h3 {
    font-family: "Bebas Neue";
    font-weight: 400;
    font-size: 4rem;
    color: #fff;
    text-align: right; }
    @media only screen and (max-width: 37.5em) {
      .header__text h3 {
        width: 100%;
        font-size: 3rem;
        justify-self: start;
        margin-bottom: 2rem;
        text-align: left; } }

.nav {
  height: 12rem;
  display: grid;
  grid-template-columns: 30% 70%;
  justify-content: center;
  align-items: center; }
  @media only screen and (max-width: 50em) {
    .nav {
      height: min-content;
      grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr)); } }
  .nav .logo {
    justify-self: center;
    align-self: center;
  margin-top: 10px; }
    .nav .logo__main {
      width: 30rem;
      
      transition: all .5s; }
      .nav .logo__main:hover {
      s }
      @media only screen and (max-width: 75em) {
        .nav .logo__main {
          margin: .5rem auto; } }
      @media only screen and (max-width: 50em) {
        .nav .logo__main {
          width: 28rem;
          margin: .5rem auto; } }
  .nav ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2rem;
    justify-items: center; }
    @media only screen and (max-width: 50em) {
      .nav ul {
        grid-template-columns: repeat(4, 1fr); } }
    @media only screen and (max-width: 37.5em) {
      .nav ul {
        grid-template-columns: repeat(2, 50%);
        justify-items: center;
        column-gap: 0; } }
  .nav__item {
    width: 50%;
    font-family: "Lato";
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-align: center;
    transition: all .5s; }
    @media only screen and (max-width: 75em) {
      .nav__item {
        font-size: 1.2rem; } }
    @media only screen and (max-width: 50em) {
      .nav__item {
        width: 100%;
        font-size: 2rem;
        margin: 1.2rem; } }
    @media only screen and (max-width: 37.5em) {
      .nav__item {
        width: 50%; } }
  .nav__link {
    text-decoration: none;
    padding: 1.5rem;
    color: #eee;
    transition: all .5s; }
    @media only screen and (max-width: 50em) {
      .nav__link {
        padding: 0rem; } }
  .nav .active {
    transform: scale(1.2);
    background-color: #fff; }
  .nav__item:hover, .nav__item:active {
    transform: scale(1.2);
    background-color: #fff; }
  .nav__link:hover, .nav__link:active {
    color: #493116; }
  .nav .active--link {
    color: #493116; }

.about {
  width: 70%;
  margin: 5rem auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
  column-gap: 5rem; }
  @media only screen and (max-width: 50em) {
    .about {
      width: 100%;
      margin-bottom: 8rem; } }
  .about__left-side {
    display: grid;
    grid-template-rows: repeat(4, max-content);
    justify-items: center; }
    .about__left-side h2 {
      width: 80%;
      margin: 5rem;
      border-bottom: 3px solid #333; }
      @media only screen and (max-width: 50em) {
        .about__left-side h2 {
          width: 70%;
          text-align: center;
          border-bottom: 2px solid #333; } }
    .about__left-side h3 {
      width: 80%;
      font-size: 2rem;
      margin-top: 2rem;
      margin-bottom: 1.5rem;
      color: #493116;
      justify-self: center; }
      @media only screen and (max-width: 50em) {
        .about__left-side h3 {
          width: 90%;
          font-size: 2.2rem;
          margin: 2.2rem 0 1.5rem; } }
    .about__left-side .text {
      width: 80%; }
  .about .about__right-side {
    display: grid;
    justify-items: center;
    align-items: center; }
    .about .about__right-side img {
      justify-self: center;
      align-self: center;
      width: 100%;
      clip-path: polygon(60% 0, 100% 30%, 100% 100%, 30% 100%, 0 65%, 0 0);
      margin-top: 11rem; }
      @media only screen and (max-width: 50em) {
        .about .about__right-side img {
          width: 70%;
          margin: 5rem auto 0rem; } }
      @media only screen and (max-width: 37.5em) {
        .about .about__right-side img {
          width: 90%;
          margin: 5rem auto 0rem; } }
  .about .demande-devis {
    display: grid;
    grid-column: 1 / 2;
    width: 50%;
    margin: auto; }
    .about .demande-devis .btn-devis {
      background-color: #493116;
      border: none;
      margin-top: 8rem;
      transition: all .2s; }
      .about .demande-devis .btn-devis:hover {
        box-shadow: 0px 2px 1px 2px #777; }
    .about .demande-devis .ask-devis {
      display: block;
      width: 100%;
      height: 100%;
      font-family: "Bebas Neue";
      font-weight: 400;
      font-size: 3rem;
      color: #fff;
      padding: 1rem 2.5rem;
      text-decoration: none; }

.article {
  display: grid;
  grid-template-columns: 60% 40%;
  margin-top: 7rem; }
  .article__text-side {
    display: grid;
    grid-template-columns: 80%;
    grid-template-rows: repeat(6, max-content);
    justify-content: center; }
  .article__heading2 {
    width: 80%;
    margin: 3rem 0 .5rem;
    font-family: "Bebas Neue";
    font-weight: 400;
    font-size: 3rem;
    color: #493116;
    text-transform: uppercase;
    justify-self: center; }
    @media only screen and (max-width: 50em) {
      .article__heading2 {
        width: 100%;
        text-align: center; } }
    @media only screen and (max-width: 37.5em) {
      .article__heading2 {
        width: 100%;
        text-align: left;
        font-size: 2.8rem; } }
  .article__text {
    width: 80%;
    font-size: 1.8rem;
    text-align: justify;
    line-height: 1.6;
    justify-self: center; }
    @media only screen and (max-width: 50em) {
      .article__text {
        width: 90%;
        font-size: 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .article__text {
        width: 100%;
        font-size: 2rem; } }
  .article__images-side {
    display: grid;
    grid-template-rows: 50% 50%; }
    @media only screen and (max-width: 50em) {
      .article__images-side {
        grid-template-rows: repeat(2, 50%); } }
    .article__images-side img {
      width: 100%; }
    .article__images-side .swiper1 {
      height: 40rem;
      width: 60rem;
      margin-left: 0;
      margin-top: 5rem; }
      @media only screen and (max-width: 62.5em) {
        .article__images-side .swiper1 {
          width: 70%;
          height: auto;
          margin: 3rem auto 2rem; } }
      @media only screen and (max-width: 37.5em) {
        .article__images-side .swiper1 {
          width: 100%;
          height: auto; } }
    .article__images-side .swiper2 {
      height: 37.5rem;
      width: 60rem;
      margin-left: 0;
      margin-top: 5rem; }
      @media only screen and (max-width: 62.5em) {
        .article__images-side .swiper2 {
          width: 70%;
          height: auto;
          margin: 0 auto; } }
      @media only screen and (max-width: 37.5em) {
        .article__images-side .swiper2 {
          width: 100%;
          height: auto; } }
    .article__images-side .swiper3 {
      height: 60rem;
      width: 60rem;
      margin-left: 0;
      margin-top: 5rem; }
      @media only screen and (max-width: 62.5em) {
        .article__images-side .swiper3 {
          width: 100%;
          height: auto; } }
  .article .demande-devis {
    display: grid;
    grid-column: 1 / 2;
    width: 30%;
    margin: auto; }
    .article .demande-devis .btn-devis {
      background-color: #493116;
      border: none;
      margin-top: 8rem;
      transition: all .2s; }
      .article .demande-devis .btn-devis:hover {
        box-shadow: 0px 2px 1px 2px #777; }
    .article .demande-devis .ask-devis {
      display: block;
      width: 100%;
      height: 100%;
      font-family: "Bebas Neue";
      font-weight: 400;
      font-size: 3rem;
      color: #fff;
      padding: 1rem 2.5rem;
      text-decoration: none; }
    @media only screen and (max-width: 37.5em) {
      .article .demande-devis {
        width: 80%;
        margin-bottom: 5rem; } }
  @media only screen and (max-width: 50em) {
    .article {
      grid-template-columns: 100%; } }

.contact {
  display: grid;
  grid-template-columns: repeat(2, 40%);
  justify-content: center;
  align-content: center;
  margin-top: 10rem; }
  @media only screen and (max-width: 50em) {
    .contact {
      grid-template-columns: 100%; } }

.text-contact {
  width: 80%;
  margin: 0 auto; }
  @media only screen and (max-width: 50em) {
    .text-contact {
      margin-bottom: 7rem; } }
  @media only screen and (max-width: 37.5em) {
    .text-contact {
      width: 90%;
      text-align: center; } }
  .text-contact p {
    margin-bottom: 1rem;
    text-align: justify; }

.formulaire {
  width: 100%; }

form {
  width: 65%;
  border: 5px solid #493116;
  margin: 0 auto;
  padding: 2rem; }
  @media only screen and (max-width: 1700px) {
    form {
      width: 100%; } }
  @media only screen and (max-width: 37.5em) {
    form {
      width: 100%; } }
  form h3 {
    text-align: center; }
  form .form-group {
    width: 70%;
    margin: 0 auto 1rem; }
    @media only screen and (max-width: 37.5em) {
      form .form-group {
        width: 90%; } }
  form label {
    font-family: "Bebas Neue";
    font-size: 2.5rem;
    color: #333; }
  form input {
    width: 100%;
    line-height: 2;
    margin: 0 auto;
    font-family: "Lato";
    font-size: 2rem;
    padding-left: .5rem; }
  form textarea {
    width: 100%;
    font-family: "Lato";
    font-size: 1.8rem;
    padding-top: .5rem;
    padding-left: .5rem; }
  form .no-keep-text {
    width: 100%;
    font-family: "Lato";
    font-size: 1.2rem;
    margin: 2rem auto 4rem;
    text-align: right; }

.services {
  margin-top: 15rem;
  background-image: linear-gradient(rgba(97, 53, 24, 0.75), rgba(70, 36, 22, 0.75)), url(../../img/bg-services.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }
  @media only screen and (max-width: 37.5em) {
    .services {
      margin-top: 5rem;
      background: #493116;
      clip-path: polygon(0 0, 100% 2%, 100% 100%, 0% 100%); } }
  .services h2 {
    text-align: center;
    padding: 7rem;
    color: #fff;
    font-size: 6rem; }
    @media only screen and (max-width: 37.5em) {
      .services h2 {
        font-size: 5rem;
        padding: 5rem 0 0;
        margin: 4rem 0; } }
  .services__cards {
    width: 95%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    grid-gap: 4rem;
    margin: 0 auto; }
    @media only screen and (max-width: 50em) {
      .services__cards {
        padding-bottom: 5rem; } }
    @media only screen and (max-width: 37.5em) {
      .services__cards {
        width: 100%;
        grid-gap: .5rem; } }

.engagements {
  width: 70%;
  margin: 0 auto; }
  @media only screen and (max-width: 1400px) {
    .engagements {
      width: 90%; } }
  @media only screen and (max-width: 37.5em) {
    .engagements {
      width: 100%; } }
  .engagements .top-engagement {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(55rem, 1fr));
    margin-bottom: 15rem; }
    @media only screen and (max-width: 37.5em) {
      .engagements .top-engagement {
        margin-bottom: 7rem; } }
  .engagements .list-engagement h2 {
    margin: 7rem 7rem 0; }
    @media only screen and (max-width: 37.5em) {
      .engagements .list-engagement h2 {
        margin: 4rem;
        line-height: 1.3; } }
    @media only screen and (max-width: 350px) {
      .engagements .list-engagement h2 {
        font-size: 4rem;
        margin-left: 3rem; } }
  .engagements .list-engagement ul {
    font-family: "Lato";
    font-weight: 300;
    margin-left: 7rem; }
    @media only screen and (max-width: 37.5em) {
      .engagements .list-engagement ul {
        width: 80%;
        margin-left: 1.5rem; } }
    .engagements .list-engagement ul li {
      font-size: 1.9rem;
      list-style: none;
      line-height: 2; }
      @media only screen and (max-width: 350px) {
        .engagements .list-engagement ul li {
          font-size: 1.5rem; } }
      .engagements .list-engagement ul li img {
        width: 2rem; }
        @media only screen and (max-width: 350px) {
          .engagements .list-engagement ul li img {
            width: 1.2rem; } }
  .engagements .badges {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100%;
    justify-items: center;
    align-items: center;
    column-gap: 2rem; }
    @media only screen and (max-width: 37.5em) {
      .engagements .badges {
        width: 100%;
        column-gap: 0;
        grid-template-rows: 50%; } }
    @media only screen and (max-width: 350px) {
      .engagements .badges {
        width: 80%; } }
    @media only screen and (max-width: 320px) {
      .engagements .badges {
        width: 70%; } }
    .engagements .badges img {
      padding-top: 7rem;
      width: 15rem; }
      @media only screen and (max-width: 50em) {
        .engagements .badges img {
          width: 15rem;
          margin: 4rem auto 0; } }
      @media only screen and (max-width: 37.5em) {
        .engagements .badges img {
          width: 12rem; } }
      @media only screen and (max-width: 25em) {
        .engagements .badges img {
          width: 10rem; } }
      @media only screen and (max-width: 350px) {
        .engagements .badges img {
          width: 9rem; } }
      @media only screen and (max-width: 320px) {
        .engagements .badges img {
          width: 10rem; } }
  .engagements .partners {
    width: 60%;
    margin: 5rem auto 2rem; }
    @media only screen and (max-width: 75em) {
      .engagements .partners {
        margin-bottom: 2rem; } }
    @media only screen and (max-width: 50em) {
      .engagements .partners {
        width: 80%; } }
    @media only screen and (max-width: 37.5em) {
      .engagements .partners {
        width: 100%; } }
    .engagements .partners h3 {
      text-align: center;
      font-family: "Bebas Neue";
      font-weight: 400;
      font-size: 4rem;
      color: #333; }
      @media only screen and (max-width: 37.5em) {
        .engagements .partners h3 {
          font-size: 2.5rem; } }
    .engagements .partners .swiper-container {
      width: 90%;
      height: 13.3rem;
      border-top: 2px solid #dfdfdf; }
      .engagements .partners .swiper-container img {
        width: 100%; }
        @media only screen and (max-width: 75em) {
          .engagements .partners .swiper-container img {
            width: 10rem; } }
        @media only screen and (max-width: 50em) {
          .engagements .partners .swiper-container img {
            width: 9rem; } }
        @media only screen and (max-width: 37.5em) {
          .engagements .partners .swiper-container img {
            width: 10rem; } }

.footer {
  height: 27rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  background-color: #333;
  color: #fff; }
  @media only screen and (max-width: 37.5em) {
    .footer {
      height: min-content;
      grid-template-columns: 100%;
      row-gap: 3rem; } }
  .footer .nav__name {
    font-family: "Lato";
    font-weight: 400;
    font-size: 1rem; }
    @media only screen and (max-width: 37.5em) {
      .footer .nav__name {
        margin-top: 2rem;
        font-size: 1.8rem;
        width: 100%;
        color: #dfdfdf;
        border-bottom: 1px solid #ddd; } }
  .footer__nav {
    list-style: none;
    margin-left: 5rem; }
    @media only screen and (max-width: 37.5em) {
      .footer__nav {
        margin: .2rem; } }
    .footer__nav__items {
      display: inline-block;
      margin-right: 2rem; }
      @media only screen and (max-width: 50em) {
        .footer__nav__items {
          margin-bottom: 1rem; } }
      @media only screen and (max-width: 37.5em) {
        .footer__nav__items {
          display: block;
          margin: 2rem; } }
    .footer__nav__links {
      text-decoration: none;
      color: #fefefe;
      font-size: 1.3rem;
      text-transform: uppercase;
      transition: all .2s; }
      @media only screen and (max-width: 37.5em) {
        .footer__nav__links {
          font-size: 2rem; } }
      .footer__nav__links:hover {
        color: #fff; }
  .footer .active--footer {
    border-bottom: 1px solid white;
    color: #fdbd32;
    text-transform: uppercase; }
  .footer .coordonees img {
    width: 20rem;
    padding: .5rem; }
    @media only screen and (max-width: 37.5em) {
      .footer .coordonees img {
        width: 50%;
        display: block;
        margin: 1rem auto; } }
    @media only screen and (max-width: 25em) {
      .footer .coordonees img {
        width: 80%; } }
  .footer .coordonees ul {
    list-style: none; }
  .footer .coordonees li {
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: center; }
    @media only screen and (max-width: 37.5em) {
      .footer .coordonees li {
        font-size: 2.3rem;
        margin-bottom: 1rem; } }
    @media only screen and (max-width: 25em) {
      .footer .coordonees li {
        font-size: 1.9rem; } }
  .footer .coordonees a {
    text-decoration: none;
    color: #e9a920;
    text-transform: initial; }
  .footer .coordonees .siret {
    font-size: .8rem; }
    @media only screen and (max-width: 37.5em) {
      .footer .coordonees .siret {
        font-size: 1.4rem; } }
  .footer__copy {
    font-size: 1.5rem; }
    @media only screen and (max-width: 37.5em) {
      .footer__copy {
        margin-bottom: 2rem;
        font-size: 1.8rem; } }
    .footer__copy span {
      font-family: "Bebas Neue";
      font-weight: 400;
      letter-spacing: 1px; }