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

:root {
  --color1: rgb(75, 148, 19);
  --color2: rgb(78, 91, 83);
  --color3: rgb(144, 167, 144);
  --color4: rgb(236, 236, 236);
}
/* Body */
Body {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  background-color: rgb(243, 243, 243);
}
a {
  /*text decoration none :  Pour enlever le surlignage de l'ancrage <a> bien se mettre dans le a comme parent sinon ca ne fonctionne pas */
  text-decoration: none;
}
li {
  /* List style none : Pour enlever les boules devant les listes*/
  list-style: none;
}
h2 {
  margin-top: 20px;
  font-size: 2.4rem;
  color: var(--color2);
}
.service-title {
  color: var(--color2);
  text-align: center;
}
span {
  font-weight: 600;
}

/* Header et navigation */
header {
  font-weight: bold;
}

.navbar {
  position: fixed;
  display: flex;
  width: 100%;
  background: rgba(250, 249, 249, 0.952);
  z-index: 3; /* la bar de naviguation reste en 1er plan */
}
.navbar a {
  width: 20%;
  color: var(--color1);
  margin: 26px 0 26px 20px;
  font-size: 1.8rem;
}
.navbar ul {
  width: 80%;
  display: flex;
  margin: 15px;
  align-items: center;
  justify-content: flex-end;
}
.nav-links li {
  font-size: 1.8rem;
  padding: 0 15px;
}

.nav-links :hover {
  transform: scale(1.2);
}
.logo {
  color: var(--color1);
}

.logo span {
  color: var(--color2);
}

/* Partie Accueil */
.accueil {
  background: url(./assets/img/Andy.webp) 0 56% / cover;
  height: 100vh;
  width: 100%;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
}

.card {
  background: rgba(0, 27, 0, 0.5);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  text-align: center;
  color: var(--color3);
  width: 67%;
}

.acc-title {
  font-size: 3rem;
  margin: 12px;
  text-shadow: -3px 3px 4px black;
}
.acc-text {
  font-size: 1.2rem;
  text-align: center;
  margin: 25px auto;
  text-shadow: -3px 2px 4px black;
}
.acc-btn {
  margin: 12px;
  display: flex;
  justify-content: center;
}

.acc-btn a {
  padding: 0 20px;
  color: var(--color3);
  border: solid 1px;
  border-radius: 32px;
  margin: 0 15px;
  backdrop-filter: blur(3px);
}
.acc-btn a:hover {
  transform: scale(1.1);
  color: var(--color1);
}

/* Nos Services */
section.services {
  height: 95vh;
  background-color: rgb(243, 243, 243);
  clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
  background-image: linear-gradient(
    to top,
    rgb(231, 231, 231) 0%,
    rgb(243, 243, 243) 100%
  );
}

.service-grid-container {
  display: grid;
  margin: 40px;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

.service-card {
  border-radius: 15px;
  overflow: hidden; /* les coins arrondi de la border radius ne s'afficher pas car les enfant le p était trop grand */
  box-shadow: -1px -1px 7px black;
}
.service-icon {
  height: 90px;
  color: rgb(4, 87, 4);
  font-size: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(250, 250, 250);
}

.service-content {
  min-height: 130px;
  color: var(--color2);
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: rgb(250, 250, 250);
  box-shadow: -3px 4px 2px black;
  justify-content: flex-start;
  font-size: 1rem;
}

.service-content h3 {
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
}

/* A propos*/
.presentation {
  text-align: center;
}

.presentation-paragraphe {
  border: 1px solid black;
  max-width: 700px;

  margin: 30px auto 20px auto;
  border-radius: 4px;
  box-shadow: 0 0 7px black;
  padding: 17px;
}

.grid-entreprise {
  display: grid;
  width: 90%;
  grid-template-columns: 1fr 1fr 20px 1fr 1fr;
  grid-template-rows: repeat(8, auto);

  grid-template-areas:
    "img1 img2 .  img3 img4"
    "com1 com1 com1 com1 com1"
    "img5 img6 . img7 img8"
    "com2 com2 com2 com2 com2"
    "img9 img10 . img11 img12"
    "com3 com3 . com4 com4"
    "img13 img14 . img15 img16"
    "com5 com5 . com6 com6";
  margin: 50px auto;
}

.grid-entreprise img {
  border-radius: 5px;
  height: 360px;
  max-width: 100%;
  position: relative;
  object-fit: cover;
  display: block; /* evite l'espace blanc sous les img */
  box-shadow: 0 0 18px rgb(100, 100, 100);
  transition: transform 0.4s ease; /* effet sur les images  */
}

/* 1er ligne photo*/
.img-sdb0 {
  grid-area: img1;
  transform: translateX(90px) translateY(-14px);
}
.img-sdb1 {
  grid-area: img2;
  transform: translateX(-90px);
}
.img-sdb2 {
  grid-area: img3;
  transform: translateX(90px) translateY(-14px);
  z-index: -1;
}

.img-sdb3 {
  grid-area: img4;
  transform: translateX(-90px);
  position: relative;
}

/* 2em lignes commentaire*/
.com-sdb {
  grid-area: com1;
  padding: 30px;
  text-align: center;
}

/* 3em lignes photo */
.img-toit1 {
  grid-area: img5;
  transform: translateX(90px) translateY(-14px);
}
.img-toit2 {
  grid-area: img6;
  transform: translateX(-90px);
}
.img-toit3 {
  grid-area: img7;
  transform: translateX(90px) translateY(-14px);
  object-position: 75% 100%;
  width: 60%; /* pour redimensionner la photo */
  z-index: -1;
}
.img-toit4 {
  grid-area: img8;
  transform: translateX(-90px);
  position: relative;
  width: 60%; /* pour redimensionner la photo */
}

/* 4em lignes commentaire */
.com-toit {
  grid-area: com2;
  text-align: center;
  padding: 30px;
}

/* 5em lignes photo */
.img-cuis1 {
  grid-area: img9;
  transform: translateX(90px) translateY(-14px);
  width: 64%; /* pour redimensionner la photo */
}
.img-cuis2 {
  grid-area: img10;
  transform: translateX(-90px);
}
.img-mur1 {
  grid-area: img11;
  transform: translateX(90px) translateY(-14px);
}

.img-mur2 {
  grid-area: img12;
  transform: translateX(-90px);
}

/* 6em lignes com */
.com-cuis {
  grid-area: com3;
  text-align: center;

  padding: 30px;
}

.com-mur {
  grid-area: com4;
  text-align: center;
  padding: 30px;
}

/* 7em lignes photo */

.img-sdbA1 {
  grid-area: img13;
  transform: translateX(90px) translateY(-14px);
}
.img-sdbA2 {
  grid-area: img14;
  transform: translateX(-90px);
}
.img-sdbC1 {
  grid-area: img15;
  transform: translateX(90px) translateY(-14px);
}
.img-sdbC2 {
  grid-area: img16;
  transform: translateX(-90px);
}

/* 8em lignes com */
.com-sdbA {
  grid-area: com5;
  text-align: center;
  padding: 30px;
}

.com-sdbC {
  grid-area: com6;
  text-align: center;
  padding: 30px;
}

/* Témoignage */

.temoignage {
  border: 1px solid black;
  box-shadow: 4px 5px 20px black;
  width: 100%;
}
.card-com {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 75%;
  margin: 50px auto;
}

.comm {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 12px;
  padding: 10px;
  margin: 20px;
  background: rgb(234, 233, 233);
  box-shadow: 0 0 5px black;
}
.comm span {
  color: orange;
}

/* Contact */

.contact-container {
  min-height: 78vh;
  width: 100%;
  margin-top: 10px;
}

.contact {
  display: flex;
  justify-content: space-evenly;
}
.map {
  margin: 20px 0;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16/9; /* Ratio largeur/hauteur */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid rgb(201, 200, 200);
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-info {
  margin: 100px 0 0 120px;
  padding: 10px;
}
.nom-entreprise {
  display: flex;
}
.nom-entreprise span {
  font-size: 1.25rem;
}
.contact-info h3 {
  color: var(--color1);
}

.grid-contact {
  display: grid;
  grid-template-columns: 8% 92%;
  margin-top: 22px;
  gap: 3px;
}

.dern-info {
  font-size: 2rem;
  margin: 300px 0 0 60px;
  color: rgb(25, 115, 7);
  text-align: right;
}

html {
  scroll-padding-top: 100px; /* permet d'atterrir au bon endroit lors des ancrages */
  scroll-behavior: smooth; /* Optionnel : pour un défilement doux */
}

/* RESPONSIVE */

@media screen and (max-width: 1588px) {
  /* Pour garder l'effet de décalage sur certaines images paire (even)et impaire (odd)*/
  /* .grid-item:nth-child(odd) {
    transform: translateX(-10px);
  }

  .grid-item:nth-child(even) {
    transform: translateX(10px);
  }*/

  .grid-entreprise img {
    height: 300px;
    width: 100%;
  }
  .img-sdb0,
  .img-sdb2,
  .img-toit1,
  .img-toit3,
  .img-cuis1,
  .img-mur1,
  .img-sdbA1,
  .img-sdbC1 {
    transform: translateX(20px) translateY(-14px);
  }
  .img-sdb1,
  .img-sdb3,
  .img-toit2,
  .img-toit4,
  .img-cuis2,
  .img-mur2,
  .img-sdbA2,
  .img-sdbC2 {
    transform: translateX(-20px);
  }
  .map {
    margin-left: 10px;
  }
  .dern-info {
    font-size: 1.7rem;
    margin-right: 10px;
    text-align: center;
  }
}

@media screen and (max-width: 1450px) {
  .navbar {
    font-size: 1.4rem;
  }
  .nav-links li {
    font-size: 1.4rem;
  }
  .contact-info {
    margin: 20px;
  }
  .dern-info {
    font-size: 1.3rem;
    margin: 300px 0 0 0;
  }
  .grid-entreprise {
    width: 99%;
  }

  .grid-entreprise img {
    height: 300px;
    width: 100%;
  }
}

@media screen and (max-width: 1200px) {
  .navbar a {
    font-size: 1rem;
  }
  .nav-links li {
    font-size: 1rem;
  }
  .navbar a {
    margin: 26px 8px;
    width: 27%;
  }
  .navbar ul {
    width: 73%;
  }

  .acc-title {
    font-size: 2rem;
  }
  .acc-text {
    font-size: 1rem;
  }

  .service-icon {
    font-size: 3rem;
    height: 58px;
  }
  .service-content {
    font-size: 0.8rem;
  }

  .grid-entreprise img {
    height: 220px;
    width: 100%;
  }
  .card-com {
    width: 95%;
    margin: 10px auto;
  }
  .comm {
    font-size: 0.9rem;
    padding: 8px;
    margin: 5px;
  }
  .contact {
    flex-direction: column;
    margin: 10px;
    align-items: center;
  }
  .dern-info {
    font-size: 1.3rem;
    margin: 0 0 20px 0;
  }
}
@media screen and (max-width: 990px) {
  .navbar a {
    width: 24%;
  }
  .navbar ul {
    width: 76%;
  }
  .nav-links li {
    padding: 0 10px;
  }
  .accueil {
    height: 80vh;
  }
  .acc-title {
    font-size: 1.2rem;
  }
  .acc-text {
    font-size: 0.8rem;
  }
  .acc-btn {
    font-size: 0.8rem;
  }
  section.services {
    height: 80vh;
  }
  .service-icon {
    font-size: 2.1rem;
    height: 40px;
  }
  .service-grid-container {
    margin: 10px;
    gap: 12px;
  }

  .service-content {
    padding: 5px;
  }
  .presentation-paragraphe {
    font-size: 0.8rem;
    margin: 20px auto;
  }
  .grid-entreprise {
    margin: 30px auto;
  }
}

@media screen and (max-width: 837px) {
  .navbar a {
    padding-left: 10px;
  }

  h2 {
    font-size: 1.8rem;
  }

  .navbar a {
    font-size: 0.9rem;
    margin: 26px 2px;
  }

  .nav-links li {
    font-size: 0.9rem;
    padding: 3px;
  }
  section.services {
    height: 100vh;
  }
  .service-content {
    height: 180px;
  }
  .grid-entreprise {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "img1 img2"
      "img3 img4"
      "com1 com1"
      "img5 img6"
      "img7 img8"
      "com2 com2"
      "img9 img10"
      "com3 com3"
      "img11 img12"
      "com4 com4"
      "img13 img14"
      "com5 com5"
      "img15 img16"
      "com6 com6";
    gap: 15px;
  }
}

@media screen and (max-width: 535px) {
  .navbar a {
    font-size: 0.7rem;
    width: 20%;
  }
  .navbar ul {
    width: 80%;
  }
  .nav-links li {
    font-size: 0.7rem;
  }
  section.services {
    height: 110vh;
  }

  .service-content {
    height: 250px;
  }
  .card-com {
    width: 100%;
    margin: 10px auto;
  }
  .comm {
    font-size: 0.75rem;
    padding: 8px;
    margin: 5px;
  }
}
@media screen and (max-width: 480px) {
  .nav-links li {
    font-size: 0.5rem;
  }
  .temoignage {
    width: 100%;
  }
  .card-com {
    display: flex;
    flex-direction: column;
  }
  section.services {
    height: 140vh;
  }
  .service-content {
    min-height: 320px;
  }
}