:root{
  --bg:#0a0a0a; --text:#fff; --muted:#cfd3da; --pink:#ff3d77;
  --panel:#111216; --stroke:#232735; --maxw:1100px; --r:28px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.7}
img{max-width:100%;display:block}

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

.title-xxl{font-size:clamp(36px,6vw,68px);font-weight:800;line-height:1.1;margin:0 0 10px}
.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}
.lead{font-size:clamp(16px,2.2vw,18px)}.muted{color:var(--muted)}.pink{color:var(--pink)}
.overline{display:inline-block;letter-spacing:.08em;text-transform:uppercase;font-weight:700;font-size:12px;margin-bottom:.4rem}

.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:700;border:1px solid transparent}
.btn--pink{background:var(--pink);color:#0b0b10;box-shadow:0 10px 40px rgba(255,61,119,.25)}
.btn--lg{padding:14px 22px}
.btn--dark{background:#0f1116;color:#fff;border-color:#0f1116}
.btn--pill{background:transparent;border:1px solid rgba(255,255,255,.1);color:#fff}
.actions{margin-top:14px}

/* header */
.header{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand__logo{width:42px;height:42px;object-fit:contain;border-radius:50%}

/* hero + intro */
.hero{padding-block:100px 24px}
.intro{padding-block:16px 24px}
.intro__rule{border:0;height:2px;width:64px;background:rgba(255,61,119,.6);margin:10px auto 16px;border-radius:2px}

/* split */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;padding-block:24px}
.split.reverse{grid-template-columns:.95fr 1.05fr}
.split__media{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--r);overflow:hidden}
.split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11}
.check{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.check li{position:relative;padding-left:26px}
.check li::before{content:"";position:absolute;left:0;top:.55em;width:16px;height:16px;border-radius:50%;background:var(--pink)}
@media (max-width:900px){.split,.split.reverse{grid-template-columns:1fr}}

/* services */
.services{padding-block:32px}
.services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
.svc{background:#0f1115;border:1px solid #202432;border-radius:20px;padding:24px;text-align:center;transition:.3s}
.svc:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(255,61,119,.1)}
.svc__icon{
  width:60px;height:60px;margin:0 auto 14px;border-radius:50%;
  background:rgba(255,61,119,.15);border:2px solid var(--pink);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.svc__icon::after{content:"";width:24px;height:24px;border-radius:50%;background:var(--pink)}
@media (max-width:900px){.services__grid{grid-template-columns:1fr}}

/* offers */
.offer{padding-block:28px}
.offer__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
.offer__card{background:var(--panel);border:1px solid var(--stroke);border-radius:22px;overflow:hidden}
.offer__media img{width:100%;height:260px;object-fit:cover}
.offer__pink{background:var(--pink);color:#0b0b10;border-radius:16px;padding:16px;margin:0 16px 16px;transform:translateY(-18px);box-shadow:0 14px 40px rgba(255,61,119,.28)}
@media (max-width:900px){.offer__grid{grid-template-columns:1fr}}

/* CTA */
.cta{background:var(--pink);margin-top:26px}
.cta__inner{color:#0b0b10;padding-block:36px;text-align:center}

/* contact + footer */
.contact{padding-block:40px}
.contact__list{list-style:none;display:grid;gap:8px;justify-content:center;text-align:center;padding:0;margin:10px 0 0}
.contact__logo{width:44px;height:44px;margin:16px auto 0;opacity:.85}
.footer{border-top:1px solid #1d202a;margin-top:10px}
.footer__inner{padding-block:18px;text-align:center;color:#cfd3da}

/* 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 ======== */
.social-footer {
  background: var(--bg);
  padding: 40px 0;
  text-align: center;
  margin-top: 60px;
}

.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:#fff; font-size:26px; text-decoration:none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.social-btn svg { width:26px; height:26px; }
.social-btn:hover { transform: translateY(-4px); box-shadow:0 4px 14px rgba(0,0,0,.25); }
.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,.5); }
.social-btn.twitter:hover   { box-shadow:0 4px 15px rgba(29,161,242,.5); }
.social-btn.facebook:hover  { box-shadow:0 4px 15px rgba(24,119,242,.5); }

/* === Bouton flottant 5 étoiles (bas droite) === */
.review-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1001;
  background: var(--pink);
  color: #0b0b10;
  border: none;
  width: 64px; height: 64px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(255,61,119,.3);
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer; padding: 0;
}
.review-btn:hover { transform: translateY(-2px); box-shadow:0 8px 22px rgba(255,61,119,.45); }
.review-btn-stars { display:block; font-size:14px; line-height:1; letter-spacing:1px; }

/* === Panneau d'avis compact (au-dessus du bouton, bas droite) === */
.review-sheet {
  position: fixed;
  right: 24px; bottom: 96px; left: auto;
  z-index: 1002; display: none;
}
.review-sheet[aria-hidden="false"] { display:block; }
.review-sheet__content{
  width:320px; background:#151515; color:#eaeaea; border:1px solid #2d2d2d;
  border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.45); padding:14px 16px 12px;
  position:relative; animation:rs-fade-in .22s ease-out;
}
@keyframes rs-fade-in{ from{ transform:translateY(10px); opacity:0;} to{ transform:translateY(0); opacity:1;} }
.review-sheet__close{ position:absolute; top:8px; right:10px; background:transparent; border:none; color:#aaa; font-size:20px; cursor:pointer; }
.review-sheet__close:hover{ color:#fff; }

.rating{ display:flex; gap:.35rem; margin:.5rem 0 1rem; justify-content:center; }
.star{ font-size:22px; background:none; border:none; color:#444; cursor:pointer; }
.star.is-active, .star.is-preview{ color:#ffcc33; text-shadow:0 0 6px rgba(255,204,51,.3); }

.review-textarea{ width:100%; background:#0f0f0f; border:1px solid #262626; color:#e0e0e0; border-radius:8px; padding:.65rem; resize:vertical; font-size:.95rem; }
.review-actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:.6rem; }
.review-feedback{ margin-top:.45rem; font-size:.9rem; color:#9ad69a; min-height:1em; }

/* === Chatbot (compact, bas droite) === */
.chatbot-btn{
  position:fixed; right:24px; bottom:100px; /* au-dessus du bouton avis */
  z-index:1003; width:64px; height:64px; border-radius:50%;
  background:#0f1116; color:#fff; border:1px solid #232735;
  display:flex; align-items:center; justify-content:center; font-size:26px; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.35); transition:transform .25s, box-shadow .25s;
}
.chatbot-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.5); }

.chatbot{ position:fixed; right:24px; bottom:170px; z-index:1004; display:none; }
.chatbot[aria-hidden="false"]{ display:block; }
.chatbot__content{
  width:320px; max-width:90vw;
  background:#151515; color:#eaeaea; border:1px solid #2d2d2d; border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.45); padding:12px; position:relative;
  animation:cb-fade-in .22s ease-out;
}
@keyframes cb-fade-in{ from{ transform:translateY(10px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.chatbot__close{ position:absolute; top:6px; right:8px; background:transparent; border:none; color:#aaa; font-size:20px; cursor:pointer; }
.chatbot__close:hover{ color:#fff; }
.chatbot__title{ margin:0 0 8px; font-size:16px; font-weight:700; }

.chatbot__quick{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.chip{
  border:1px solid #2d2d2d; background:#0f0f0f; color:#e0e0e0; border-radius:999px; padding:6px 10px;
  font-size:12px; cursor:pointer;
}
.chip:hover{ border-color:#444; }

.chatbot__log{
  background:#0f0f0f; border:1px solid #262626; border-radius:8px; padding:8px; height:160px; overflow:auto; font-size:14px;
}
.chatbot__log .bot{ background:#121212; border:1px solid #222; border-radius:8px; padding:6px 8px; margin:6px 0; }
.chatbot__log .user{ text-align:right; color:#cfd3da; margin:6px 0; }

.chatbot__form{ display:flex; gap:6px; margin-top:8px; }
.chatbot__input{ flex:1; background:#0f0f0f; border:1px solid #262626; color:#e0e0e0; border-radius:8px; padding:.6rem; }
.chatbot__input:focus{ outline:none; border-color:#444; box-shadow:0 0 0 3px rgba(255,61,119,.18); }

/* Accessibilité */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* === Vidéo de fond pour la section HERO === */
.hero { position: relative; overflow: hidden; }

/* conteneur full-bleed sous le contenu */
.hero-bg {
  position: absolute;
  inset: 0;          /* top:0; right:0; bottom:0; left:0 */
  z-index: -1;       /* passe derrière les textes du hero */
}

/* la vidéo couvre toute la zone, sans déformer */
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.38) saturate(1.05); /* lisibilité du texte */
}

/* voile sombre (optionnel) */
.hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 30% 30%, rgba(0,0,0,.25), rgba(0,0,0,.55) 70%);
}

/* Fallback accessibilité : si l’utilisateur réduit les animations, on masque la vidéo */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* Mobile : si tu veux couper la vidéo pour perf/batterie, décommente :
@media (max-width: 768px) {
  .hero-video { display: none; }
  .hero { background: url('images/hero-fallback.jpg') center/cover no-repeat; }
}
*/
/* === Style uniforme pour la section Contact === */
.contact__list a {
  color: var(--text);               /* couleur blanche comme le reste du site */
  text-decoration: none;            /* enlève le soulignement */
  font-weight: 600;                 /* même épaisseur que le titre */
  font-family: inherit;             /* garde la même police (Poppins) */
  transition: color 0.25s ease;     /* petite transition douce */
}

.contact__list a:hover {
  color: var(--pink);               /* rose léger au survol (facultatif) */
}