/* thème condensé (même style que précédemment, version stable) */
:root{--bg:#0b0b0c;--panel:#0f1115;--accent:#6366f1}
*{box-sizing:border-box}html,body{margin:0}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#0b0b0c,#0e1116 40%,#0b0b0c);color:#f6f7f9}
a{color:#fff;text-decoration:none}.container{max-width:1080px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:20;backdrop-filter:saturate(180%) blur(8px);background:rgba(11,11,12,.6);border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:#fff}
.brand .brand-mark{width:32px;height:32px;border-radius:8px;display:block;object-fit:cover;background:#fff;padding:2px;border:1px solid rgba(255,255,255,.12)}
.nav a{margin:0 8px;color:#e5e7eb;font-size:14px}.btn.btn--sm{padding:8px 12px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:transparent}
.hero{padding:80px 0 48px;border-bottom:1px solid rgba(255,255,255,.06)}.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:32px}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}.hero{padding-top:48px}}
.hero-copy h1{font-size:40px;line-height:1.1;margin:0 0 10px}.accent{color:#a78bfa}.hero-copy p{color:#e5e7eb;max-width:720px}
.hero-cta{display:flex;gap:12px;margin:20px 0 10px}
.hero-badges{list-style:none;display:flex;gap:14px;padding:0;margin:8px 0 0;flex-wrap:wrap}
.hero-badges li{font-size:12px;color:#c7ccd3;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 10px}
.hero-visual{position:relative;min-height:280px}.orb{position:absolute;border-radius:999px;filter:blur(18px);opacity:.7}
.orb-1{width:180px;height:180px;background:#6366f1;top:20px;left:10px}.orb-2{width:120px;height:120px;background:#22d3ee;bottom:10px;right:40px}.orb-3{width:80px;height:80px;background:#f472b6;bottom:80px;left:60px;opacity:.5}
.kpi-floating{position:absolute;right:10px;top:20px;background:#0f1117;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;box-shadow:0 8px 30px rgba(0,0,0,.4);width:300px}
.section{padding:64px 0}.section.alt{background:#0f1117}.section-title{font-size:28px;margin:0 0 24px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}@media (max-width:900px){.cards{grid-template-columns:1fr}}
.card{background:#0f1117;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px}.pills{display:flex;gap:8px;flex-wrap:wrap}.pill{display:inline-block;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:4px 8px;font-size:12px;color:#e5e7eb}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media (max-width:900px){.gallery{grid-template-columns:1fr}}
.contact-card{background:#0f1117;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px}
.contact-card input,.contact-card textarea{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0b0c10;color:#fff}
.btn{display:inline-block;background:#6366f1;color:#fff;border:none;border-radius:12px;padding:12px 16px;font-weight:600;box-shadow:0 6px 20px rgba(99,102,241,.35);cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.site-footer{padding:22px 0;border-top:1px solid rgba(255,255,255,.06)}.footer-inner{display:flex;align-items:center;justify-content:space-between}
/* -------- Intro video -------- */
.intro{position:fixed;inset:0;z-index:9999;background:#000;
  display:grid;place-items:center;opacity:1;transition:opacity .6s ease,visibility .6s;
}
.intro.hide{opacity:0;visibility:hidden;pointer-events:none}
.intro-video{width:100%;height:100%;object-fit:cover}
.intro-overlay{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none}
.intro-title{color:#fff;font-weight:800;letter-spacing:.02em;
  font-size:clamp(36px,8vw,96px);text-shadow:0 10px 60px rgba(0,0,0,.6)}
.intro-credit{position:absolute;right:24px;bottom:20px;color:rgba(255,255,255,.9);font-weight:600}
.intro-arrow{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  width:36px;height:36px;background:transparent;border:none;cursor:pointer;color:#fff;pointer-events:auto}
.intro-arrow::after{content:"";display:block;width:24px;height:24px;
  border-bottom:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));animation:arrowBounce 1.5s infinite}
@keyframes arrowBounce{0%{transform:translate(-0,-0) rotate(45deg)}
  50%{transform:translate(0,8px) rotate(45deg)}100%{transform:translate(0,0) rotate(45deg)}}
@media (prefers-reduced-motion: reduce){ .intro-video{display:none} }
/* Empêche le scroll de passer au dessous pendant l'intro */
.intro { overscroll-behavior: contain; touch-action: none; }
.contact-form .form-row { margin: 8px 0; }
.contact-form input, .contact-form textarea {
  width: 100%; background: #0d1117; color: #e6edf3;
  border: 1px solid #30363d; border-radius: 8px; padding: 10px;
}
.contact-form label { font-size: 14px; opacity: .9; }
.contact-form .btn { margin-top: 8px; }
.form-status { font-size: 14px; margin-top: 8px; color: #9be9a8; }
/* Petite pile verticale de boutons dans la carte contact */
.stack { display: flex; flex-direction: column; gap: 8px; }

.muted { color: #c7ccd3; font-size: 14px; margin: 4px 0 8px; }

.btn--outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
}

.btn--ghost {
  background: transparent;
  border: none;
  color: #a5b4fc;
  padding: 8px 0;
  text-align: left;
}

.feature-list { margin: 12px 0 14px; padding-left: 18px; color: #e5e7eb; }
.feature-list li { margin: 6px 0; }
/* ---------- About page layout ---------- */
.about .section-title { margin: 0 0 16px; }
.about .section-title.sub { margin-top: 28px; }

.about .lead {
  max-width: 980px;
  font-size: 18px;
  line-height: 1.7;
  color: #e6e8ee;
  margin-bottom: 6px;
}

.feature-list {
  margin: 0 0 8px 1.2rem;   /* indent */
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonnes lisibles */
  gap: 10px 24px;
}
.feature-list li { color: #d9dde6; }

@media (max-width: 900px) {
  .feature-list { grid-template-columns: 1fr; }
}

.about-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .about-cols { grid-template-columns: 1fr; }
}
/* Espacement label/valeur dans les mini-KPI de l'en-tête */
.card-kpi { display: flex; gap: 6px; align-items: baseline; }
.kpi-label { opacity: .9; }
/* === Cartes cliquables (Showcase) === */
.card {
  cursor: pointer;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.card:hover,
.card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  border-color: rgba(255,255,255,.18);
  outline: none;
}
.card::after {
  content: "→";
  position: absolute;
  right: 14px;
  bottom: 14px;
  font-weight: 700;
  opacity: .6;
  transition: transform .18s ease, opacity .18s ease;
}
.card:hover::after,
.card:focus-visible::after {
  transform: translateX(4px);
  opacity: 1;
}