:root{
  --primary:#1f2a44;
  --secondary:#d0bb20;
  --light:#fafafa;
  --dark:#222;
}

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

body{
  font-family:'Inter',sans-serif;
  background:var(--light);
  color:var(--dark);
  line-height:1.8;
}

/* NAV */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 10%;
  background:white;
  position:sticky;
  top:0;
  z-index:10;
}

.logo img{
  height:50px;       
  width:auto;        
  display:block;
}


nav a{
  text-decoration:none;
  color:var(--primary);
  margin-left:22px;
  font-weight:500;
}

/* HERO */
header{
  background:
    linear-gradient(rgba(53, 72, 115, 0.85), rgba(31,42,68,.85)),
    url("images/bgd.jpg");
  background-size:cover;
  background-position:center;
  color:white;
  padding:120px 10%;
  text-align:center;
}

header h1{
  font-family:'Playfair Display',serif;
  font-size:3rem;
  margin-bottom:20px;
}

header p{
  max-width:850px;
  margin:0 auto 35px;
}

/* SECTIONS */
section{
  padding:90px 10%;
}

section.alt{
  background:white;
}

h2{
  font-family:'Playfair Display',serif;
  color:var(--primary);
  margin-bottom:40px;
  text-align:center;
}

/* LISTES */
.list{
  max-width:900px;
  margin:auto;
}

.list li{
  margin-bottom:14px;
}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:40px;
}

.card{
  background:white;
  padding:35px;
  border-radius:14px;
  box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

.card h3{
  color:var(--primary);
  margin-bottom:15px;
}

/* CONTACT */
section {
  padding: 80px 10%;
}

/* =========================
   FORMULAIRE
========================= */
.contact-form {
  max-width: 600px;
  margin: auto;
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

input,
textarea {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-family: 'Inter', sans-serif;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--secondary);
}

/* =========================
   BOUTON
========================= */
.btn {
  width: 100%;
  padding: 14px;
  background: var(--secondary);
  color: var(--primary);
  border: none;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
}

/* BUTTON */
.btn{
  padding:14px 32px;
  background:var(--secondary);
  color:var(--primary);
  border-radius:30px;
  font-weight:600;
  text-decoration:none;
  font-size: large;
}

/* SIGNATURE */
.signature{
  margin-top:30px;
  text-align:center;
  font-style:italic;
}

/* FOOTER */
footer{
  background:var(--primary);
  color:white;
  text-align:center;
  padding:35px;
}

/* RESPONSIVE */
@media(max-width:768px){
  header h1{font-size:2.2rem}
  nav{flex-direction:column; gap:15px}
}
@media (max-width:768px){
  .logo img{
    height:40px;
  }
}

.contact-form{
  max-width:520px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}

input, textarea{
  padding:14px;
  border-radius:10px;
  border:1px solid #ddd;
  font-family:'Inter',sans-serif;
}
.site-footer{
  background:#1f2a44;
  color:#f1f1f1;
  padding:70px 10% 30px;
  font-size:0.95rem;
}

.footer-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:40px;
  margin-bottom:40px;
}

.footer-col h4{
  color:var(--secondary);
  margin-bottom:15px;
  font-size:1.05rem;
}

.footer-col p{
  line-height:1.7;
}

.footer-col a{
  color:var(--secondary);
  text-decoration:none;
}

.footer-col a:hover{
  text-decoration:underline;
}

/* Ligne du bas */
.footer-bottom a{
  color:hsl(40, 20%, 94%);
  text-decoration:none;
  font-size: smaller;
}

.footer-bottom a:hover{
  text-decoration:underline;
}


/* Mobile */
@media(max-width:768px){
  .site-footer{
    text-align:center;
  }
}
/* Slide depuis la droite */
.slide-right{
  opacity:0;
  transform:translateX(60px);
  transition:1s ease;
}

.slide-right.active{
  opacity:1;
  transform:translateX(0);
}

/* Reveal up */
.reveal-up{
  opacity:0;
  transform:translateY(40px);
  transition:0.8s ease;
}

.reveal-up.active{
  opacity:1;
  transform:translateY(0);
}

/* WHATSAPP (SEUL élément flottant) */
.whatsapp{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#25d366;
  color:white;
  padding:14px 20px;
  border-radius:50px;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.assistant-btn{
  position:fixed;
  bottom:90px;
  right:20px;
  background:#1f2a44;
  color:white;
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:24px;
  z-index:9999;
}

.assistant-box{
  display:none;
  position:fixed;
  bottom:160px;
  right:20px;
  width:320px;
  background:white;
  border-radius:16px;
  box-shadow:0 15px 40px rgba(0,0,0,.2);
  flex-direction:column;
  z-index:9999;
}


.assistant-header{
  background:#1f2a44;
  color:#fff;
  padding:14px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
}

.assistant-body{
  padding:15px;
  overflow-y:auto;
  font-size:0.9rem;
}

.msg{
  margin-bottom:10px;
  padding:10px 14px;
  border-radius:14px;
  max-width:90%;
}

.msg.bot{
  background:#f1f3f6;
  align-self:flex-start;
}

.msg.user{
    margin-top: auto;
 border: 1px solid #1f2a44;
  color:#d0bb20;
  align-self:flex-end;
  margin-left:auto;
}

.assistant-actions button{
  width:100%;
  margin-top:8px;
  padding:10px;
  border:none;
  border-radius:20px;
  background:#1f2a44;
  color:white;
  cursor:pointer;
  font-size:0.85rem;
}