:root{
  --bg:#0a0b0d;
  --panel:#0f1116;
  --stroke:#232735;
  --text:#f2f5f7;
  --muted:#c9d1d9;
  --mint:#cfead1;
  --mint-dark:#9acc9e;
  --maxw:1200px;
  --r:20px;
}

/* RESET SIMPLE */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(1200px 700px at 70% -10%, #101319 0%, #0a0b0d 50%, #07080b 100%);
  color:var(--text);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.7
}
img{max-width:100%;display:block}

.container{max-width:var(--maxw);margin-inline:auto;padding:24px}
.center{text-align:center}.narrow{max-width:750px;margin:0 auto}
.muted{color:var(--muted)}

.title-xxl{font-size:clamp(36px,6vw,64px);font-weight:800;margin:0 0 .4rem}
.title-xl{font-size:clamp(28px,4.6vw,44px);font-weight:800;margin:.2rem 0 .6rem}
.title-lg{font-size:clamp(24px,3.6vw,36px);font-weight:800;margin:.2rem 0 .6rem}
.title-md{font-size:clamp(18px,2.4vw,22px);font-weight:700;margin:0 0 .4rem}

/* NAV */
.nav{position:sticky;top:0;background:rgba(10,11,13,.6);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.06);z-index:10}
.nav__inner{max-width:var(--maxw);margin-inline:auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand__logo{width:36px;height:36px;object-fit:cover;border-radius:8px;border:1px solid var(--stroke);background:#0b0d11}
.brand__name{font-weight:800}
.nav__links{display:flex;gap:18px;align-items:center}
.nav__links a{color:var(--text);text-decoration:none;opacity:.9}
.nav__links a:hover{opacity:1}

.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:700;border:1px solid transparent;cursor:pointer}
.btn--ghost{border-color:rgba(255,255,255,.18);color:var(--text);background:transparent}
.btn--mint{background:var(--mint);color:#0a0b0d;border-color:transparent;box-shadow:0 14px 40px rgba(207,234,209,.18)}
.btn--outline{border:1px solid var(--mint-dark);color:var(--mint);background:transparent}
.btn--outline:hover{background:rgba(207,234,209,.08)}

/* HERO */
.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:28px;padding-block:42px}
.hero__text .lead{max-width:560px;margin-bottom:14px}
.hero__media img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--stroke);background:#0b0d11}
@media (max-width:950px){.hero{grid-template-columns:1fr}}

/* SPLIT */
.split{display:grid;grid-template-columns:1fr .9fr;gap:24px;align-items:center;padding-block:16px}
.split__media img{width:68%;margin-inline:auto;filter:drop-shadow(0 14px 30px rgba(0,0,0,.45))}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* TWO-COL */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;padding-block:18px}
.two-col__left h2{line-height:1.15}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:16px}
.card{background:var(--panel);border:1px solid var(--stroke);border-radius:18px;padding:22px;transform:translateY(6px);opacity:0}
.card.revealed{transform:translateY(0);opacity:1;transition:.6s ease}
.card__icon{width:42px;height:42px;border-radius:12px;background:rgba(207,234,209,.12);display:flex;align-items:center;justify-content:center;margin-bottom:8px;border:1px solid rgba(207,234,209,.35)}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* WHY */
.why{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:center;padding-block:22px}
.why__media img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--stroke)}
.why__list{list-style:none;padding:0;margin:12px 0 0;counter-reset:num}
.why__list>li{position:relative;padding-left:42px;margin:16px 0}
.why__list>li::before{
  counter-increment:num;content:counter(num);
  position:absolute;left:0;top:0.2rem;width:28px;height:28px;border-radius:50%;
  background:var(--mint);color:#0a0b0d;font-weight:800;display:grid;place-items:center;
}
@media (max-width:900px){.why{grid-template-columns:1fr}}

/* SERVICES (liste + image) */
.services{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding-block:26px}
.services__media img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--stroke)}
.service-item{display:flex;gap:14px;align-items:flex-start;margin:16px 0}
.service-item__icon{width:36px;height:36px;border-radius:10px;background:rgba(207,234,209,.12);border:1px solid rgba(207,234,209,.35);display:grid;place-items:center}
@media (max-width:900px){.services{grid-template-columns:1fr}}

/* CONTACT + FOOTER */
.contact{padding-block:36px}
.contact-list{list-style:none;display:grid;gap:10px;justify-content:center;text-align:center;margin:14px 0 0;padding:0}
.contact-list a{color:var(--mint);text-decoration:none}
.contact-list a:hover{text-decoration:underline}

.footer{border-top:1px solid var(--stroke);color:var(--muted)}
.footer .container{padding-block:18px;text-align:center}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.revealed{opacity:1;transform:translateY(0)}

/* Toast */
#toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:#0f1116; color:#fff; border:1px solid #232735; border-radius:14px;
  padding:10px 14px; font-size:14px; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; z-index:9999;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ======== FOOTER RÉSEAUX SOCIAUX ======== */
/* ======== FOOTER RÉSEAUX SOCIAUX ======== */
.social-footer {
  background: transparent;              /* ← même fond que la page */
  padding: 40px 0;
  text-align: center;
  margin-top: 60px;
  border-top: 1px solid var(--stroke);  /* ligne de séparation comme ailleurs */
}

.social-container {
  display: flex;
  justify-content: center;
  gap: 25px;
}

.social-btn {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 26px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-btn svg { width: 26px; height: 26px; }

.social-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Couleurs spécifiques inchangées */
.social-btn.instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.social-btn.twitter  { background: #1DA1F2; }
.social-btn.facebook { background: #1877F2; }
.social-btn.instagram:hover { box-shadow: 0 4px 15px rgba(214, 36, 159, 0.5); }
.social-btn.twitter:hover   { box-shadow: 0 4px 15px rgba(29, 161, 242, 0.5); }
.social-btn.facebook:hover  { box-shadow: 0 4px 15px rgba(24, 119, 242, 0.5); }

/* =========================
   AVIS — bouton + modal
   ========================= */
.review-btn {
  position: fixed;
  bottom: 90px;
  right: 22px;
  height: 48px;
  min-width: 130px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--mint); /* même couleur que Book a Call */
  color: #0a0b0d;          /* texte foncé pour contraste */
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  box-shadow: 0 10px 30px rgba(207, 234, 209, .25);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  z-index: 999;
  padding: 0 16px;
}

.review-btn:hover {
  background: var(--mint-dark); /* vert plus foncé au survol */
  transform: scale(1.04);
  box-shadow: 0 14px 36px rgba(207, 234, 209, .35);
}

.review-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center; z-index:1000;
}
.review-modal.show{ display:flex; }

.review-box{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:22px;
  width:min(90%,380px);
  box-shadow:0 20px 40px rgba(0,0,0,.4);
  color:var(--text);
  position:relative;
}
.review-close{
  position:absolute; top:10px; right:12px;
  background:transparent; border:0; font-size:22px; color:var(--text);
  cursor:pointer; opacity:.8;
}
.review-close:hover{ opacity:1; }

.stars{ display:flex; justify-content:center; gap:6px; margin:12px 0; }
.stars span{ font-size:28px; color:#5b6376; cursor:pointer; transition:transform .15s ease, color .15s ease; }
.stars span.active{ color:#00c16a; transform:scale(1.1); text-shadow:0 2px 6px rgba(0,0,0,.35); }

.review-box textarea{
  width:100%;
  border-radius:10px;
  border:1px solid var(--stroke);
  padding:10px;
  background:#0b0d11;
  color:var(--text);
  font-family:inherit;
  resize:none;
  min-height:80px;
  margin-bottom:10px;
}

.review-msg{ text-align:center; font-size:.85rem; margin-top:8px; color:#00c16a; }

/* SCROLLBAR LÉGÈRE POUR LE CHAT (réutilisée pour modal si besoin) */
.review-box::-webkit-scrollbar,
.container::-webkit-scrollbar{ width:6px; }
.review-box::-webkit-scrollbar-thumb,
.container::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:999px; }
/* =========================
   CHATBOT STRIVE
   ========================= */
.chat-launcher{
  position:fixed;
  bottom: 150px;         /* au-dessus du bouton avis (qui est à 90px) */
  right: 22px;
  width:56px;height:56px;border-radius:50%;
  border:0;background:var(--mint);color:#0a0b0d;
  font-size:22px;font-weight:700;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  cursor:pointer;z-index:1000;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.chat-launcher:hover{ transform:scale(1.05); box-shadow:0 22px 44px rgba(0,0,0,.32); background:var(--mint-dark); }

.chat-window{
  position:fixed;
  bottom: 215px;         /* un peu plus haut que le launcher pour ne pas superposer le bouton 5★ */
  right: 22px;
  width:min(360px,92vw);
  max-height:75vh;
  display:flex;flex-direction:column;
  background:#ffffff;color:#0f172a;
  border-radius:20px;border:1px solid rgba(255,255,255,.06);
  box-shadow:0 30px 60px rgba(0,0,0,.38);
  overflow:hidden;
  transform-origin:bottom right;
  opacity:0;visibility:hidden;
  transform:scale(.92) translateY(8px);
  transition:all .22s cubic-bezier(.2,.8,.4,1);
  z-index:1001;
}
.chat-window.open{ opacity:1; visibility:visible; transform:scale(1) translateY(0); }

.chat-header{
  background:#111; color:#fff; padding:14px;
  display:flex; align-items:flex-start; justify-content:space-between;
}
.chat-header-left{ display:flex; gap:10px; align-items:center; }
.chat-avatar{
  width:32px;height:32px;border-radius:10px;background:#00c16a;color:#0b3d24;
  font-weight:800;font-size:.8rem;display:grid;place-items:center;
}
.chat-meta{line-height:1.1}
.chat-title{font-weight:700;font-size:.9rem}
.chat-sub{font-size:.72rem; color:rgba(255,255,255,.7)}
.chat-close{background:transparent;border:0;color:#fff;font-size:1.2rem;cursor:pointer;opacity:.8}
.chat-close:hover{opacity:1}

.chat-body{ padding:14px; overflow-y:auto; }
.cb-q{ font-size:1rem; font-weight:700; margin:0 0 8px; color:#0f172a; }
.cb-hint{ font-size:.82rem; color:#475569; margin:2px 0 10px; }

.cb-step{ display:none; animation: cbFade .22s ease; }
.cb-step.cb-active{ display:block; }
@keyframes cbFade{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)} }

.cb-options{ display:grid; gap:10px; margin:8px 0 14px; }
.cb-option{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid #dbe3d6; border-radius:12px;
  background:#f8fff9; cursor:pointer;
}
.cb-option input{ accent-color:#00c16a; }

.cb-actions{ display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:6px; flex-wrap:wrap; }
.cb-recap{ background:#f8fff9; border:1px solid #dbe3d6; border-radius:12px; padding:10px; margin-bottom:10px; }
.cb-recap pre{ margin:0; font-size:.82rem; white-space:pre-wrap; word-break:break-word; }

.cb-error{
  font-size:.78rem; color:#b91c1c; background:#fff1f1;
  border:1px solid #b91c1c55; border-radius:10px; padding:8px 10px; margin-top:10px;
}

/* responsive ajusté */
@media (max-width:520px){
  .chat-window{ bottom: 190px; right: 16px; width:min(380px,96vw); }
  .chat-launcher{ right:16px; bottom: 140px; }
}
/* === UNIQUEMENT les variables de couleur === */
:root{
  --bg:#07080b;      /* noir uniforme pour toute la page */
  --panel:#07080b;   /* mêmes panneaux = même noir */
}

/* Force le fond global sans gradient */
body{ background: var(--bg) !important; }

/* Le footer réseaux doit suivre le même fond (pas de vert) */
.social-footer{ background: var(--bg) !important; }

/* Optionnel: les conteneurs qui auraient une autre couleur explicite */
.footer{ background: var(--bg) !important; }