:root {
  --vert-fonce: #0D2C1F;
  --vert-accent: #145B3A;
  --or: #D4AF37;
  --blanc-casse: #F8F6F0;
  --noir-doux: #1A1A1A;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: var(--blanc-casse);
  color: var(--noir-doux);
  margin: 0;
  padding: 0;
}


header {
  background-color: white(--vert-fonce);
  color: var(--or);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 3rem;
}



header a {
  color: var(--or);
  text-decoration: none;
  margin: 0 1rem;
  font-weight: 500;
}

header a:hover {
  color: var(--vert-fonce);
  transform: scale(1.1);

}

.logo:hover {
  transform: scale(1.2);
}

.hero {
  position: relative;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--or);
  background-attachment: fixed;

}

#homehero {
  height: 60vh;


}


.hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(13, 44, 31, 0.6);
  border-radius:15px 15px 20px 20px;

}

.hero h1, .hero p, .hero h3 {
  position: relative;
  z-index: 1;
}

dec {
  background-color: var(--or);
  color: var(--vert-fonce);
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
}

.hero button:hover {
  background-color: var(--vert-accent);
  color: var(--blanc-casse);

}
/* NEW STYLE TEXT ANIMATION FOR HERO TEXT SECTION */

/*
.hero {
  padding: 0px;
  text-align: center;
  font-family: Arial, sans-serif;

}

#typing-text::after {
  content: "|";
  animation: blink 0.7s infinite;
}

  #typing-text {
  display: inline-block;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
*/




/* 🎬 HERO SECTION */

/* 🎞️ SLIDESHOW */
.slider {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 15px 15px 20px 20px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

.slider figure {
  display: flex;
  width: 100%; /* 4 images */
  margin: 0;
  padding: 0;
  animation: slide 20s infinite;
}

.slider .slide {
  flex: 1 0 100%;
}

.slider img {
  width: 100%;
  height: 100vh;
  object-fit: cover;

}

#typing-text {
  font-size: 1.1rem;
  text-transform: capitalize;

}

.body2 {
  font-family: "Poppins", sans-serif;
  background-color: rgba(236, 218, 156, 0.7);


    background: radial-gradient(
    circle,
    #D4AF37 -30%,
    #F8F6F0 45%,
    rgba(236, 218, 156, 0.7) 60%,
    #0D2C1F 93%
  );

  background-size: 200% 200%;

  animation: smoothMove 8s ease-in-out infinite;
}

/* Animation douce du dégradé */
@keyframes smoothMove {
  0% {
    background-position: 0% 80%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}






/* 🎬 Animation keyframes */
@keyframes slide {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(0); }
  12.5% { transform: translateX(-100%); }
  22.5% { transform: translateX(-100%); }
  25%  { transform: translateX(-200%); }
  35%  { transform: translateX(-200%); }
  37.5% { transform: translateX(-300%); }
  47.5% { transform: translateX(-300%); }
  50%  { transform: translateX(-400%); }
  60%  { transform: translateX(-400%); }
  62.5% { transform: translateX(-500%); }
  72.5% { transform: translateX(-500%); }
  75%  { transform: translateX(-600%); }
  85%  { transform: translateX(-600%); }
  87.5% { transform: translateX(-700%); }
  97.5% { transform: translateX(-700%); }
  100% { transform: translateX(0); }
}

/*
  0% { transform: translateX(0); }
  20% { transform: translateX(0); }
  25% { transform: translateX(-100%); }
  45% { transform: translateX(-100%); }
  50% { transform: translateX(-200%); }
  70% { transform: translateX(-200%); }
  75% { transform: translateX(-300%); }
  95% { transform: translateX(-300%); }
  100% { transform: translateX(0); }
}*/

}

section h2 {
  color: var(--vert-fonce);
  margin-bottom: 1.5rem;
  margin-left: 1em;
}


.apropos2 {
  color: var(--vert-fonce);
  margin-bottom: 1.5rem;
  margin-left: 3em;
}

.apropos2 h2{
  margin-left: 3em;
}


.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0px;
  padding: 0px 50px 0px 50px;
}


.box h2{
  justify-content: center;
  text-align: center;
}

.box img{
  width: 5x;
  height: 45px;
  margin-bottom: -20px;
}

.services .box {
  display: flex-wrap;
  text-align: center;
  overflow: hidden;
  height: 210px;
  padding: 20px;
  border-radius: 15px;
  margin: 60px 0px 7px 40px;
  width: 170px;

  transition: 0.3s ease;
  position: relative;
    background-color: var(--vert-fonce);
    background: radial-gradient(
    circle,
    #0D2C1F 0%,
    #0D2C1F 65%,
    #D4AF37 200%
  );

  background-size: 600% 100%;
  animation: smoothMove 5s ease-in-out infinite;
}

/* Animation douce du dégradé */
@keyframes smoothMove {
  0% {
    background-position: 0% 80%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 100%;
  }
}




.box:hover {
transform: scale(1.04);
border: var(--or);
}

.services .box h3 {
  font-size: 1rem;
  color: var(--or);
}

.services .box p {
  font-size: 0.8rem;
  color: var(--blanc-casse);
  margin: -0.8rem 0 2.5rem;
}

.services H2{
  text-align: center;
  color: var(--vert-fonce);

}


.services h4 {
  position: relative;
  color: var(--or);
  margin-top: 20px;
  text-align: center;
}

.services .serv {
  color: var(--or);
}


/* SLIDESHOW en CSS pur, jpicturesite2 */

/* SECTION PORTFOLIO */
.portfolio {
  padding: 60px 0%;
  text-align: left;
 
  align-content: left;


}

.portfolio h2 {
  color: var(--vert-fonce);
  margin-bottom: 30px;
  padding-left: 80px;
}

#folio{
  padding-left: 80px;
  margin-bottom: 30px;

}

#folio h2 {
  color: var(--vert-fonce);
}

#folio iframe {
  padding-left: 35px;
  border-radius: 20px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.0);
  border-color: var(--or);
  background-color: var(--vert-fonce);


}

.slideshow {
  display: flex;
  position: relative;
  width: 560px;
  max-width: 800px;
  height: 315px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.3);

}

.slideshow img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: slideAnimation 30s infinite;

}



.infog {
  display: flex;
  position: relative;
  width: 450px;
  height: 350px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
  
}

.infogh2{
  color: var(--vert-fonce);
  margin-bottom: 30px;
  padding-left: 80px;
  margin-top: 60px;
}


.slideinfo img {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: hidden;
  object-fit: cover;
  top: 0; left: 0;
  animation: slideAnimation 30s infinite;
}

/* pour 6 images */
.slideshow img:nth-child(1) { animation-delay: 3s; }
.slideshow img:nth-child(2) { animation-delay: 5s; }
.slideshow img:nth-child(3) { animation-delay: 10s; }
.slideshow img:nth-child(4) { animation-delay: 15s; }
.slideshow img:nth-child(5) { animation-delay: 20s; }
.slideshow img:nth-child(6) { animation-delay: 25s; } 

.slideinfo img:nth-child(1) { animation-delay: 3s; }
.slideinfo img:nth-child(2) { animation-delay: 5s; }
.slideinfo img:nth-child(3) { animation-delay: 10s; }
.slideinfo img:nth-child(4) { animation-delay: 15s; }
.slideinfo img:nth-child(5) { animation-delay: 20s; }
.slideinfo img:nth-child(6) { animation-delay: 25s; } 

@keyframes slideAnimation {
  0% { opacity: 0; }
  5% { opacity: 1; }
  20% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}

footer {
  background-color: var(--vert-fonce);
  color: var(--or);
  padding-bottom: 0rem;
  padding-top: 0.6rem;
  height: 45vh;
  border-radius: 7px 7px 0px 0px;



}

.grad h3{

  margin-left: 30px;
}

.grad {
  height: 45vh;


  background: radial-gradient(
    circle,
    #0D2C1F 0%,
    #1A1A1A 30%,
    #0D2C1F 60%,
    #D4AF37 200%
  );

  background-size: 200% 200%;

  animation: smoothMove 8s ease-in-out infinite;
}

/* Animation douce du dégradé */
@keyframes smoothMove {
  0% {
    background-position: 0% 80%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}






  footer p {
text-align: center;
}

  footer a {
padding-left:20px  
}

  .pdg{
    text-align: center;
    margin-top:0 em;

  }
.pdg img {
  border-radius: 145px;
  margin-bottom: -20px;

}

#contact {
  margin-left: 0px;
  
  background: radial-gradient(
    circle,
    #0D2C1F 0%,
    #1A1A1A 30%,
    #0D2C1F 60%,
    #D4AF37 200%
  );

  background-size: 200% 200%;

  animation: smoothMove 8s ease-in-out infinite;
}

/* Animation douce du dégradé */
@keyframes smoothMove {
  0% {
    background-position: 0% 80%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


}

#contact h3 {
     padding-left: 1rem;
 
}

.temoins h2 {
    margin-left: 80px;

}

  blockquote {
    background-color: var(--vert-fonce);
    color: white;
    padding-left: 0.5rem;
    border-radius: 8px;
    margin-left: 80 px;

      background: radial-gradient(
    circle,
    #0D2C1F 0%,
    #1A1A1A 30%,
    #0D2C1F 60%,
    #D4AF37 200%
  );

  background-size: 200% 200%;

  animation: smoothMove 8s ease-in-out infinite;
}

/* Animation douce du dégradé */
@keyframes smoothMove {
  0% {
    background-position: 0% 80%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


  }

h5 {
 align-content: center; 
}

/* ================================================================================================================= */
/* ========================= */
/* 📱 RESPONSIVE DESIGN */
/* ========================= */

/* Mobile */
@media (max-width: 768px) {
@media (min-height: 100dvh) {

  header {
    flex-direction: column;
    padding: 1rem;
    text-align: center;
  }

  nav {
    margin-top: 10px;
  }

  nav a {
    display: inline-block;
    margin: 5px;
  }

  .hero {
    height: auto;
    padding: 60px 20px;
  }

  .hero h1 {
    font-size: 1.5rem;
  }

  .hero h3 {
    font-size: 1rem;
  }

  .hero p {
    font-size: 0.9rem;
  }

  /* Slider */
  .slider img {
    min-height: 100%;
  }

  /* SERVICES */
  .services {
    flex-direction: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    margin-left: 2px;
    margin-right: -20px;

  }

  .services .boxes {
    align-items: center;
    justify-content: center;
    width: 150vh;
    margin-left: -90px;
    
}

  .services .box {
  justify-content: center;

    margin-bottom: 10px;
    margin-right: -30px;
    align-items: center;
    width: 150px;
    height: 235px;
    padding: -100px;


  }

.services .box h3 {
  font-size: 0.9rem;
  color: var(--or);
  margin-top: 9px;
}
.box p {
  text-align: center;
  font-size: 0.2rem;
  margin-top: -60px;
  text-align: center;

 
}

.box img{
  max-width: auto;
  max-height: 50%;
  margin-top: -7px;
}

  /* PORTFOLIO */
  .slideshow {
    width: 100%;
    min-height: 100%;
  }

  iframe {
    width: 90%;
    height: auto;
  }

  /* INFOGRAPHIE */
  .infog {
    width: auto;
    min-height: 100%;
  }

.infogh2{
margin-left: -70px;
}

  /* TEXTE */
  .apropos2 {
    margin-left: 10px;
    margin-right: 10px;
  }

  .apropos2 h2 {
    margin-left: 0;
  }

  .portfolio h2,
  #folio,
  #infogh2 {
    padding-left: 10px;
  }

  /* FOOTER */
  footer {
    height: auto;
    padding: 20px;
  }
}


/* Tablette */
@media (min-width: 769px) and (max-width: 1024px) {

  .services {
    flex-wrap: wrap;
  }

  .services .box {
    width: 45%;
    margin-bottom: 20px;
  }

  iframe {
    width: 100%;
  }

  .slideshow {
    width: 90%;
  }
}