/* RESET */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',sans-serif;line-height:1.6;color:#002b40;background:#f0fbff;}

/* HEADER */
.topbar{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 30px;background:#00334d;color:white;z-index:1000;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.topbar .logo{font-weight:bold;font-size:1.2rem;}
.topbar .logo span{color:#00ccff;}
.topbar nav{display:flex;transition:max-height 0.3s ease;}
.topbar nav a{
  margin-left:20px;color:white;text-decoration:none;font-weight:500;position:relative;
}
.topbar nav a::after{
  content:"";position:absolute;bottom:-5px;left:0;width:0;height:2px;
  background:#00ccff;transition:0.3s;
}
.topbar nav a:hover::after{width:100%;}
.topbar nav a:hover{color:#ffe600;}
.burger{display:none;cursor:pointer;font-size:1.5rem;}

/* HERO */
.hero{
  height:100vh;background:url('img/fond.jpg') no-repeat center/cover;
  display:flex;justify-content:center;align-items:center;text-align:center;color:white;position:relative;
}
.hero .overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,40,80,0.5);}
.hero .content{position:relative;z-index:2;}
.hero h1{font-size:3rem;}
.hero p{margin:15px 0;}
.hero .btn{display:inline-block;padding:12px 20px;border-radius:8px;background:#00ccff;color:#00334d;font-weight:bold;text-decoration:none;}
.hero .btn:hover{background:#ffe600;color:#000;}

/* SECTIONS */
.section{max-width:1000px;margin:100px auto;padding:20px;text-align:center;}
.section.light{background:white;border-radius:12px;box-shadow:0 3px 10px rgba(0,0,0,0.1);}
.section h2{margin-bottom:20px;color:#005580;}

/* GRID */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.grid img{
  width:100%;height:220px;object-fit:cover;
  border-radius:10px;box-shadow:0 3px 8px rgba(0,0,0,0.2);
}
.grid p{margin-top:8px;font-weight:600;}

/* FORMS */
.chat-form,.contact-form{max-width:500px;margin:0 auto;}
.chat-form input,.chat-form select,.chat-form button,
.contact-form input,.contact-form textarea,.contact-form button{
  width:100%;padding:12px;margin:8px 0;border-radius:8px;border:1px solid #bbb;font-size:1rem;
}
.chat-form button,.contact-form button{
  background:linear-gradient(45deg,#00bfff,#003366);border:none;color:white;font-weight:bold;cursor:pointer;
}
.chat-form button:hover,.contact-form button:hover{background:linear-gradient(45deg,#00e6ff,#005599);}
.contact-form textarea{min-height:120px;}

/* FOOTER */
footer{text-align:center;padding:20px;background:#00334d;color:white;margin-top:40px;}

/* ANIMATIONS */
.fade-in{opacity:0;transform:translateY(30px);transition:opacity 0.8s ease,transform 0.8s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}

/* RESPONSIVE */
@media(max-width:768px){
  .burger{display:block;}
  .nav-links{
    overflow:hidden;
    max-height:0;
    flex-direction:column;
    position:absolute;
    top:60px;right:0;
    background:#00334d;width:200px;padding:0;
    transition:max-height 0.3s ease;
  }
  .nav-links.open{max-height:300px;padding:10px;}
  .nav-links a{margin:10px 0;}
}
.topbar {
  height: 70px;              /* hauteur fixe de ta barre */
  display: flex;
  align-items: center;
  overflow: hidden;          /* cache ce qui dépasse */
}

.site-logo {
  height: 120px;             /* logo réel */
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .topbar {
    justify-content: center;   /* centre logo + burger */
  }
  .topbar .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* logo centré pile */
  }
  .burger {
    position: absolute;
    right: 20px;   /* burger reste à droite */
  }
}