/* Reset CSS */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

:root {
    --primary-color: #4A90E2; /* Bleu clair (apaisant, frais) */
    --secondary-color: #81C784; /* Vert doux (nature, sérénité) */
    --text-color: #333333; /* Gris foncé pour le texte */
    --background-color: #c4d3cd92; /* Gris clair pour les fonds */
    --highlight-color: #A5D6A7; /* Vert clair, complémentaire au secondaire */
    --border-color: #E0E0E0; /* Gris clair pour les bordures */
    --accent-color: #7bc8a494;
  }

@keyframes floatingBackground {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body {
  min-height: 100vh;
  background: linear-gradient(-45deg, #7bc8a4, #9abdcb74, #6a8b7199, #f5faff);
  background-size: 400% 400%;
  background-attachment: fixed;
  animation: floatingBackground 20s ease infinite;
  font-family: 'Lora', serif;
  color: var(--text-color);
}

    
  h1, h2, h3, h4 {
    font-family: 'Lora', serif;
    text-align: left;
    text-align: center;
    color: var(--primary-color);
    
  }
  
  h1 {
    font-size: 4rem;
    margin:30px 0;
  }
  h2 {
    font-size: 3rem;
    margin:100px 0 0 0;
    
  }
  h4{
    margin-bottom: 10px;
    font-weight: 700;
  }
 
  hr{
    width:200px;
    height: 5px;
    background-color: var(--primary-color);
    border: none;
    margin:20px auto;
    margin-bottom: 50px;
   }
  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px; 
}
.imageProvisoire {
  max-width: 100%;
  height: auto;
  padding: 10px;
}
.subtitle {
  text-align: center;
}
@media screen and (max-width:450px){
  h1 {
    font-size: 2.5rem;
  }
  .imageProvisoire {
    max-width: 300px;
  height: auto;
  }
}
/* -----------Navigation---------------- */
nav {
  height: 100px;
  width: 100%;
  background: rgba(245, 245, 245, 0.212); /* Transparent, effet verre */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: background 0.3s ease-in-out;
  border: none;
}
  nav:hover {
    background-color: var(--accent-color);
    transition: background-color 0.5s ease-in-out;
  }
  nav p {
    position:absolute;
    top: 40px;
    left: 130px;
    color:var(--primary-color);
    font-size: 1.5rem;
  }
  .logo {
      width: 100px;
      position: absolute;
      top: 0px;
      left: 20px;
      z-index: 999;
  }
  .liste-nav {
      width: 100%;
      height : 100%;
      text-align: right;
  }
  .item-nav {
      display: inline-block;
      line-height: 100px;
      font-size: 25px;
      margin:0 10px;
      cursor : pointer; 
  }
  .item-nav a {
      text-decoration: none;
      color: var(--primary-color);
  }
  .item-nav a:hover {
    color:#1c1c1c
  }
  .btn-toggle-container {
      position: absolute;
      top: 20px;
      right: 20px;
      cursor : pointer;
      display:none;
  }
  .btn-toggle-container .cont-lignes  {
      width: 40px;
      cursor: pointer;
      position : absolute;
      top: 50%;
      left : 50%;
      transform: translate(-50%, -50%);
  }
  .box {
      position : relative;
      top:15px;
      right: 15px;
  }
  .cont-lignes {
      width: 60px;
      height: 30px;
      cursor: pointer;
      position : absolute;
      top: 50%;
      left : 50%;
      transform: translate(-50%, -50%);
  }
  .lignes {
      width: 100%;
      height : 4px;
      border-radius: 10px;
      background: var(--text-color);
      position : absolute;
      transition : all 0.1s ease-in-out;
  }
  
  .lignes:nth-child(1){
      top : 0px;
  }
  .lignes:nth-child(2){
      top : 13px;
  }
  .lignes:nth-child(3){
      top : 26px;
  }
  
  .btn1.active .lignes:nth-child(1){
      top : 15px;
      transform: rotate(135deg);
  }
  .btn1.active .lignes:nth-child(2){
      opacity: 0;
      transform: translateX(-20px);
  }
  .btn1.active .lignes:nth-child(3){
      top : 15px;
      transform: rotate(-135deg);
  }
 
  
  /* Responsive Nav*/
  @media screen and (max-width:1045px){
  
      .btn-toggle-container {
          display: block;
      }
      nav {
          border-bottom: 1px solid var(--border-color);
          
      }
      .liste-nav {
          position: relative;
          top: 70px;
          display: none;
          
          text-align: center;
      }
      .item-nav {
          display: block;
          background: var(--accent-color);
          line-height: 32px;
          font-size: 16px;
          margin:0;
      }
      .liste-nav.active-menu {
          display: block;
          z-index: 1;
      }
      nav p {
        font-size: 1rem;
      }
      .lignes {
        background-color: var(--primary-color);
      }
      
  }
  
  /* ----- Main Section ---- */
  section {
    color: var(--text-color);
  }
  .titre-section {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  p {
    color:var(--primary-color)
  }
  .accueil>p {
    margin-bottom: 40px;
  }
/*-----Section carousel de présentation*/

/* Conteneur du carousel */
.carousel-container {
   width: 100%;           /* Full width on mobile */
  max-width: 1050px;     /* Limit for larger screens */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  position: relative;
}

/* Carrousel */
.carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

/* Slide de chaque image */
.carousel-slide {
  flex: 0 0 100%;      /*Safari iOS */
  min-width: 100%;
  text-align: center;
  background-color: #fff;
}

.carousel-slide img {
 width: 100%;
  height: auto;        /* Preserve ratio */
  max-height: 500px;   /* Limit max height on desktop */
  object-fit: cover;   /* Crop nicely if needed */
  border-bottom: 2px solid #ddd;
}

.carousel-slide p {
   padding: 10px;
  background-color: rgba(0,0,0,0.05);
  color: var(--primary-color);
  font-size: 1rem;
}

/* Flèches de navigation */
.carousel-container button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: var(--primary-color);
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 50%;
  z-index: 10;
}

button.prev {
  left: 10px;
}

button.next {
  right: 10px;
}

/* Points de navigation */
.dots {
  text-align: center;
  padding: 10px 0;
  background-color: var(--heavygrey);
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background-color: #717171;
}

@media (max-width: 768px) {
  .carousel-container { 
      margin: 0 10px; 
  }

  button {
      padding: 8px;
      font-size: 16px;
  }

  .dot {
      width: 8px;
      height: 8px;
  }
}

@media (max-width: 480px) {
  .carousel-slide img {
      height: 200px; 
  }

  .carousel-slide p {
      font-size: 14px; 
  }

  button {
      padding: 6px;
      font-size: 14px;
  }

  .dot {
      width: 6px;
      height: 6px;
      margin: 0 3px;
  }
}



/* ----- Section Services ----- */
/*  
.cardContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 90vw;
    line-height: 25px; 
  }
  .StrServices {
    font-weight: 700;
  }
  .cardContainer p {
    text-align: center;
  }
  /* 
  .card{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    margin: 20px;
    width: 400px;
    min-width: 400px;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    
  }
  .card:hover {
    -webkit-box-shadow: 2px 1px 38px 9px var(--primary-color);
    -moz-box-shadow: 2px 1px 38px 9px var(--primary-color);
    box-shadow: 2px 1px 38px 9px var(--primary-color);
  }
  .imgCard {
    width: 200px;
    margin: 10px;
    border-radius: 10px;
  }
*/
/* ----- Section Services améliorée ----- */

.cardContainer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  width: 95%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 2rem 0;
}

.card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.35s ease;
  overflow: hidden;
  width: 340px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 2rem 1.5rem;
  position: relative;
}
.StrServices {
  font-weight: 700;
}
/* Liseré coloré fluide */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  width: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  opacity: 0.8;
}

/* Animation hover élégante */
.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Image ronde avec effet verre */
.imgCard {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 1.4rem;
  border: 3px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

/* Titres & textes */
.card h4 {
  color: var(--primary-color);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
  text-align: center;
}

.card p {
  color: rgba(0, 0, 0, 0.75);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.8rem;
  text-align: center;
}

.card ul {
  text-align: left;
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.95rem;
  margin-top: 0.5rem;
  padding-left: 1.2rem;
}

.card ul li {
  margin-bottom: 0.8rem;
  position: relative;
}

.card ul li::before {
  content: "✓";
  color: var(--secondary-color);
  font-weight: bold;
  position: absolute;
  left: -1.2rem;
}

/* Responsive */
@media screen and (max-width: 600px) {
  .card {
    width: 100%;
    max-width: 320px;
    padding: 1.5rem 1rem;
  }
}

/* Forms Section */
   .containerForm { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    padding: 15px; 
  } 
   form { 
    width: 100%; 
    max-width: 700px; 
    margin: 3rem auto; 
    padding: 2rem; 
    background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px); 
    border: 1px solid rgba(255, 255, 255, 0.25); 
    border-radius: 20px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
  } 
  form label { 
    display: block; 
    font-weight: bold; 
    margin-bottom: 0.5rem; 
  } 
  form input, form textarea, form button { 
    width: 100%; 
    padding: 0.75rem; 
    margin-bottom: 1rem; 
    border: 1px solid #ddd; 
    border-radius: 20px; 
  } 
  .containerForm input:focus, .containerForm textarea:focus { 
    border-color: var(--primary-color); 
    box-shadow: 0 0 15px rgba(74,144,226,0.5); 
    background: rgba(255,255,255,0.35); 
    transition: all 0.3s ease; 
  } 
  /* Bouton d'envoi */ 
  .containerForm button { 
    margin-top: 10px; 
    padding: 0.9rem 1.5rem; 
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); 
    order: none; 
    border-radius: 20px; 
    color: #fff; 
    font-weight: 600; 
    font-size: 1.1rem; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
  } 
  .containerForm button:hover { 
    transform: translateY(-2px) scale(1.02); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); 
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); 
  } 
  @media screen and (max-width: 900px) { 
    form { max-width: 95%; padding: 1.5rem; } 
  }
/*----- footer -----*/
footer {
    color: var(--primary-color);
  }