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

body{
font-family: 'Inter', sans-serif;
color:#1aa6a6;
line-height:1.6;
background:#ffffff;
}

.container{
max-width:1100px;
margin:auto;
padding:40px 20px;
}

.header{
position:fixed;
top:0;
width:100%;
background:white;
border-bottom:1px solid #eee;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
}

nav a{
margin-left:20px;
text-decoration:none;
color:#333;
font-weight:500;
}

.hero{
height:90vh;
display:flex;
align-items:center;
background:linear-gradient(135deg,#0f4c5c,#1aa6a6);
color:white;
text-align:center;
}

.hero h2{
font-size:3rem;
margin-bottom:20px;
}

.cta{
display:inline-block;
margin-top:20px;
padding:14px 28px;
background:#1aa6a6;
color:white;
text-decoration:none;
border-radius:6px;
font-weight:600;
transition:0.3s;
}

.cta:hover{
background:#0f4c5c;
transform:translateY(-2px);
}

.section{
padding-top:120px;
}

.section-title {
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
  color: #fff; /* si fond sombre */
}

.hero-title.fade-slide {
  opacity: 0;
  transform: translateY(25px);
  animation: fadeSlideHero 1s ease-out forwards;
}

@keyframes fadeSlideHero {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dynamic-title {
  width: fit-content;
  margin: 0 auto 2rem;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #00c27a;
  animation: typing 2.5s steps(30), blink .7s infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink {
  50% { border-color: transparent }
}

.contact-image {
  width: 100%;        /* L'image prend toute la largeur du conteneur */
  max-height: 900px;  /* Hauteur maximale */
  object-fit: cover;  /* L'image couvre le conteneur sans déformer */
  display: block;
  margin-bottom: 0px; /* Espace entre l'image et la section contact */
}

.separator {
  width: 100%;                   /* largeur complète */
  height: 4px;                   /* épaisseur de la barre */
  background: #e0e0e0;           /* gris clair */
  margin: 40px 0;                /* espace au-dessus et en dessous */
  border-radius: 2px;            /* bords arrondis */
  position: relative;
  overflow: hidden;
}

.separator::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 50%;
  background: linear-gradient(to right, #d0d0d0, #e0e0e0);
  animation: slide 2s infinite linear;
}

@keyframes slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.dark{
background:#1aa6a6;
}

.grid{
display:flex;
flex-direction:column;
gap:40px;
max-width:700px;
}

.card {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
}

/* Effet hover dynamique */
.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}

/* Optionnel : effet sur le titre */
.card:hover h4 {
  color: #00c27a;
  transition: color 0.3s ease;
}

.services{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
margin-top:40px;
}

.service{
background:white;
padding:25px;
border-radius:8px;
box-shadow:0 10px 20px rgba(0,0,0,0.05);
}

.steps{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
margin-top:40px;
}

.step span{
font-size:2rem;
color:#2ecc71;
font-weight:700;
}

.contact{
text-align:center;
padding-top: 0px; /* ou la valeur que tu veux */
}

.contact-image{
display:block;
width:100%;
margin:0;
}

.footer{
  background:#115D6A;
  color:white;
  text-align:center;
  padding:40px 20px;
  font-size:14px;
  letter-spacing:0.5px;
}



@media (max-width:768px){

body{
padding-top:90px;
}

}

@media (max-width:768px){

.header{
padding:10px 0;
}

.logo{
font-size:20px;
}

.nav{
flex-direction:column;
gap:10px;
}

}

@media (max-width:768px){

nav{
display:none;
}

}

@media (max-width:768px){

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

.hero h2{
font-size:32px;
line-height:1.2;
}

.hero p{
font-size:16px;
}

}

@media (max-width:768px){

.container{
padding:30px 20px;
}

.section{
padding-top:80px;
}

}

@media (max-width:768px){

.card{
padding:24px;
}

}

@media (max-width:768px){

.header{
position:relative;
}

}

@media (max-width:768px){

body{
padding-top:0;
}

}