/* ------------------- RESET ------------------- */
    *,*::before,*::after{box-sizing:border-box}
    html:focus-within{scroll-behavior:smooth}
    body{margin:0;min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
    img,svg,video,canvas{display:block;max-width:100%}
    button,input,select,textarea{font:inherit}
    a{color:inherit;text-decoration:none}

    /* ------------------- THEME ------------------- */
    :root{
      --bg:#0f1118; --bg-elev:#151826; --card:#141827;
      --text:#E7E9F3; --muted:#A9AFC6;
      --primary:#7B82FE; --primary-2:#97A0FF;
      --ring:rgba(123,130,254,.35); --shadow:0 8px 24px rgba(0,0,0,.35);
      --radius:16px;
    }
    body{
      font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 20% -10%, #1a1e2e 0%, transparent 60%),
        radial-gradient(1000px 500px at 80% 0%, #1b1e30 0%, transparent 55%),
        var(--bg);
      line-height:1.5;
    }

    /* container = 86% of page width */
    .container{width:80%; margin-inline:auto; padding-inline:24px;}

    /* type scale (bigger like you asked) */
    h1,h2,h3{letter-spacing:-.02em}
    h1{font-size:6rem; line-height:1.08; margin:.25em 0 .4em}
    h2{font-size:4rem; line-height:1.12; margin:.2em 0 .3em}
    h3{font-size:3rem}

    .muted{color:var(--muted)}
    .gradient{background:linear-gradient(90deg,var(--primary) 0%,var(--primary-2) 60%,#B7C0FF 100%);
      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    .text-primary{color:var(--primary)}

    .btn{display:inline-flex;align-items:center;gap:.6rem;border:1px solid transparent;border-radius:999px;padding:1rem 1.35rem;font-weight:700;transition:.2s;cursor:pointer;white-space:nowrap}
    .btn:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
    .btn-primary{background:var(--primary);color:#0E1020}
    .btn-primary:hover{opacity:.92;transform:translateY(-1px)}
    .btn-ghost{background:transparent;border-color:#2a2f45}
    .btn-ghost:hover{background:#1a1e2e}

    /* ------------------- NAV ------------------- */
    .nav{position:sticky;top:0;z-index:50;background:linear-gradient(#0f1118cc,#0f1118cc);
      backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
    .nav-inner{display:flex;align-items:center;gap:20px;height:64px}
    .brand{font-weight:800;letter-spacing:.02em}
    .quote{margin-left:auto;font-style:italic;font-size:1rem;color:var(--muted)}
    .nav-links{display:flex;gap:22px;margin-left:auto}
    .nav-links a{font-size:1.05rem;color:var(--muted)}
    .nav-links a.active,.nav-links a:hover{color:#cfd6ff}
    .burger{display:none;margin-left:auto;background:transparent;border:0;color:var(--text);font-size:1.4rem}
    @media (max-width:980px){
      .quote{display:none}.nav-links{display:none}.burger{display:inline-flex}
      .mobile{display:none;position:fixed;inset:64px 0 auto 0;background:var(--bg-elev);
        border-bottom:1px solid rgba(255,255,255,.06)}
      .mobile a{display:block;padding:16px 24px;border-top:1px solid rgba(255,255,255,.06);color:var(--muted)}
      .mobile a:hover{background:#171b2b;color:#dee3ff}
      .mobile.show{display:block}
    }

    /* ------------------- SECTIONS ------------------- */
    section{padding:84px 0}              /* more breathing room on big screens */
    @media (max-width:980px){ section{padding:64px 0} }

    /* HERO */
    .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
    @media (max-width:1100px){.hero{grid-template-columns:1fr}}
    .pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
    .pill{font-size:1rem;padding:.55rem .8rem;border-radius:999px;color:#dbe0ff;background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08)}
    .lead{max-width:820px;color:var(--muted);font-size:1.2rem}
    .cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
    .hero-card {
  border-radius: calc(var(--radius) + 4px);
  background: #0c0f1a;
  box-shadow: var(--shadow);
  overflow: hidden;

  /* Increased size */
  width: 90%;        /* slightly wider than parent container */
  height: 90%;       /* let it grow naturally with content */
    border-bottom-right-radius:200px;
        border-top-left-radius:200px;


}

.hero-card img {
  aspect-ratio: 16/9;   /* more cinematic ratio for height increase */
  object-fit: cover;
  width: 100%;
  height: 100%;         /* ensures proportional scaling */
  min-height: 350px;    /* bigger default height */
}

    .scroll-hint{display:flex;align-items:center;gap:.5rem;margin-top:20px;color:var(--muted);font-size:1rem}

    /* ABOUT */
    .about .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:12px}
    @media (max-width:980px){.about .stats{grid-template-columns:1fr 1fr}}
    @media (max-width:560px){.about .stats{grid-template-columns:1fr}}
    .about .stat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 0}
    .about .stat .value{font-size:clamp(2.2rem,2.6vw + 1.4rem,3.4rem);font-weight:800;line-height:1.1}
    .about .stat .label{color:var(--muted);font-size:1.05rem}

    /* THEMES */
    .themes .grid{display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
    @media (max-width:1200px){.themes .grid{grid-template-columns:repeat(3,1fr)}}
    @media (max-width:820px){.themes .grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:520px){.themes .grid{grid-template-columns:1fr}}
    .themes .card{position:relative;border-radius:16px;overflow:hidden;background:#0e1323;border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}
    .themes .card img{width:100%;height:220px;object-fit:cover}
    .themes .card .overlay{position:absolute;inset:auto 0 0 0;padding:14px 16px;background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));color:#fff;font-weight:700;letter-spacing:.01em}

    /* SERVICES */
    .services .two-col{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
    @media (max-width:1100px){.services .two-col{grid-template-columns:1fr}}
    .services .cards{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
    @media (max-width:1200px){.services .cards{grid-template-columns:repeat(2,2fr)}}
    @media (max-width:720px){.services .cards{grid-template-columns:1fr}}
    .services .card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
      border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
    .services .card h3{margin:.4rem 0 .5rem}
    .services .icon{width:22px;height:22px;display:inline-grid;place-items:center;border-radius:6px;background:#1a1f36;color:var(--primary)}

    /* PRICING / CONTACT */
    .contact .pricing{text-align:center;background:
      radial-gradient(650px 220px at 50% -10%, rgba(123,130,254,.15), transparent 60%),
      linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.06);border-radius:22px;padding:40px 26px}
    .contact .pricing ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
    .contact .pricing li{display:flex;align-items:center;justify-content:center;gap:.6rem;color:var(--muted);font-size:1.05rem}
    .good{color:#24d17c;font-weight:700}

    /* FOOTER */
    footer{margin-top:84px;background:#111827;color:#fff}
    footer .top{display:grid;gap:24px;grid-template-columns:2fr 1fr 1fr;padding:32px 0}
    footer p,footer a{font-size:1rem}
    footer .muted{color:#9CA3AF}
    footer .links a{display:block;color:#D1D5DB;padding:6px 0}
    footer .links a:hover{text-decoration:underline}
    footer .bottom{border-top:1px solid rgba(255,255,255,.08);padding:12px 0;color:#9CA3AF;font-size:.95rem;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}

#chatbox {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  height: 420px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: system-ui, sans-serif;
}

/* Header */
#chatbox::before {
  content: "Consultation Chat";
  background: #7b82fe;
  color: white;
  font-weight: bold;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* Messages area */
#messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.4;
}

/* Messages bubbles */
#messages p {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: 14px;
  margin: 6px 0;
  word-wrap: break-word;
}

/* User message */
#messages p b::after {
  content: "";
}

/* Differentiate user/admin */
#messages p b {
  display: none;
}

#messages p.user {
  background: #4A90E2;
  color: white;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}

#messages p.admin {
  background: #f1f1f1;
  color: #333;
  margin-right: auto;
  border-bottom-left-radius: 4px;
}

/* Input area */
#chatbox input {
  border: none;
  padding: 12px;
  font-size: 14px;
  flex: 1;
  outline: none;
}

#chatbox button {
  border: none;
  background: #4A90E2;
  color: white;
  padding: 0 18px;
  cursor: pointer;
  font-size: 14px;
}

#chatbox button:hover {
  background: #357ABD;
}

/* Input row */
#chatbox input, #chatbox button {
  height: 42px;
}

#chatbox > div:last-child {
  display: flex;
  border-top: 1px solid #ddd;
}
#messages p.user {
  background: #4A90E2;
  color: white;
  margin-left: auto;
  padding: 8px 12px;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
}

#messages p.admin {
  background: #f1f1f1;
  color: #333;
  margin-right: auto;
  padding: 8px 12px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
#chatTabs {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 8px;
}

#chatTabs button {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
  color: white;
  cursor: pointer;
}
#chatbox {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #1a1f36;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  overflow: hidden;
  font-family: system-ui, sans-serif;
}
#chatbox.expanded {
  width: 100%;
  height: 100%;
  max-height: none;
  bottom: 0;
  right: 0;
}
#messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}
#messages p {
  padding: 8px 12px;
  border-radius: 12px;
  margin: 6px 0;
  max-width: 70%;
  word-wrap: break-word;
}
#messages p.user {
  background: #7B82FE;
  color: #fff;
  margin-left: auto;
}
#messages p.admin {
  background: #2a2f4c;
  color: #cfd6ff;
  margin-right: auto;
}
#chatbox footer {
  display: flex;
  border-top: 1px solid rgba(255,255,255,.1);
}
#chatbox input {
  flex: 1;
  border: none;
  padding: 10px;
  outline: none;
  background: transparent;
  color: #ffffff;
}
#chatbox button {
  background: #7B82FE;
  border: none;
  padding: 0 16px;
  cursor: pointer;
  color: #0E1020;
  font-weight: bold;
}
#expand-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
#chatTabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px;
  scrollbar-width: thin;
}
#chatTabs button {
  padding: 6px 12px;
  border-radius: 8px;
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

#chatbox {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  height: 350px;
  background: #1a1f36;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

/* Expanded full screen */
#chatbox.expanded {
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
  border-radius: 0;
}

/* Initial small state */
#chatbox.initial {
  width: 300px;
  height: 420px;
}

/* Toolbar */
.chat-toolbar {
  display: flex;
  justify-content: flex-end;
  background: #2d3354;
  padding: 4px;
}
.chat-toolbar button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  margin-left: 6px;
}
.chat-toolbar button:hover {
  color: #7b82fe;
}

/* Messages */
#messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
#messages p {
  margin: 6px 0;
  padding: 8px 12px;
  border-radius: 12px;
  max-width: 75%;
  word-wrap: break-word;
}
#messages p.user {
  background: #7b82fe;
  color: #fff;
  margin-left: auto;
}
#messages p.admin {
  background: #333a63;
  color: #fff;
  margin-right: auto;
}

/* Input */
.chat-input {
  display: flex;
  border-top: 1px solid #333;
}
.chat-input input {
  flex: 1;
  border: none;
  padding: 10px;
  font-size: 0.9rem;
  outline: none;
  background: #2d3354;
  color: #fff;
}
.chat-input button {
  background: #7b82fe;
  color: #fff;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
}
.chat-input button:hover {
  background: #6066d1;
}

/* Bubble for collapsed mode */
#chat-bubble {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #7b82fe;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
/* Style par défaut (desktop centré) */

/* Responsive Mobile → push to right */
@media (max-width: 768px) {
  #chatbox {
    width: 80%;
    bottom: 60px;
    right: 10px;
  transform: translateX(-50%);
  }
}
.social-links {
  display: flex;
  gap: 12px;
  justify-content: center;   /* centré dans le container */
  margin-top: 20px;
}

.social-links a img {
  width: 32px;
  height: 32px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-links a:hover img {
  transform: scale(1.1);
  opacity: 0.8;
}