@import url(reset.css);
@import url(style.css);
@import url(nav.css);
@import url(footer.css);
.paragraph {
  font-size: 1.5rem;
  letter-spacing: 0.3rem;
}

.text4, .slogan1, .text2, .text1 {
  font-size: 1.2rem;
  padding: 15px;
  justify-self: start;
}

.main {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.container {
  width: 100%;
  height: auto;
  margin: 40px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: 20px 40px;
  grid-auto-flow: column;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas: "picture1 text1" "paragraph picture2" "picture3 text2" "slogan1 picture4" "text4 picture5" "picture6 picture6";
}

.picture1 {
  grid-area: picture1;
}

.text1 {
  grid-area: text1;
  color: #fff;
  text-align: justify;
}

.picture2 {
  grid-area: picture2;
}

.paragraph {
  grid-area: paragraph;
  color: #fff;
  text-align: justify;
}

.picture3 {
  grid-area: picture3;
}

.text2 {
  grid-area: text2;
  color: #fff;
  text-align: justify;
}

.slogan1 {
  grid-area: slogan1;
  color: #fff;
  text-align: justify;
}

.text4 {
  grid-area: text4;
  color: #fff;
  text-align: justify;
}

.picture4 {
  grid-area: picture4;
}

.picture5 {
  grid-area: picture5;
}

.picture6 {
  grid-area: picture6;
  width: 100%;
  height: auto;
}

/* Ajoutez ces styles pour la responsivité */
@media screen and (max-width: 992px) {
    .container {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        padding: 1rem;
    }

    .picture1, .picture2, .picture3, 
    .picture4, .picture5, .picture6 {
        width: 100%;
        height: auto;
    }

    .text1, .text2, .text4,
    .paragraph, .slogan1 {
        padding: 1rem;
        text-align: center;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 768px) {
    body {
        padding-top: 60px;
    }

    .slogan__visuelcop {
        font-size: 1.5rem !important;
        text-align: center;
        padding: 0 1rem;
    }

    .footer__menu {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1rem 0;
        margin: 0;
    }

    .footer {
        width: 100%;
        overflow: hidden;
    }

    .reseau {
        justify-content: center;
        padding: 1rem 0;
    }

    .reseau a {
        margin: 0 0.5rem !important;
    }
}

@media screen and (max-width: 576px) {
    .container {
        padding: 0.5rem;
    }

    .text1, .text2, .text4 {
        font-size: 1rem;
    }

    .slogan1 {
        font-size: 1.2rem;
    }

    .footer__menu {
        font-size: 1rem !important;
    }

    .footer__menu a {
        padding: 0.5rem;
    }
}/*# sourceMappingURL=professionnel.css.map */