:root{
  --bg:#05060c;
  --bg2:#090b16;
  --panel:rgba(255,255,255,.025);
  --panel-border:rgba(255,255,255,.07);
  --text:#e9ecf5;
  --muted:#8a90a6;
  --dim:#5a6075;
  --eng:#36e0d0;        /* ingénierie - cyan */
  --mkt:#a371ff;        /* marketing - violet */
  --ops:#ff9d4d;        /* opérations - ambre */
  --ceo:#f4c869;        /* direction - or */
  --green:#39d98a;
  --radius:16px;
  font-synthesis:none;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* halos d'ambiance */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 500px at 70% -5%, rgba(120,90,255,.18), transparent 60%),
    radial-gradient(700px 500px at 10% 10%, rgba(40,180,210,.12), transparent 60%),
    radial-gradient(800px 600px at 90% 80%, rgba(255,140,70,.07), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
.mono{font-family:"SF Mono",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace}

/* ---------- champ d'étoiles ---------- */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.star{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:#fff;opacity:.6;
  animation:twinkle var(--d,4s) ease-in-out infinite var(--delay,0s);
}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:.9;transform:scale(1.2)}}

.wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:26px 28px 60px}

/* ---------- en-tête ---------- */
header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:6px 4px 40px}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:19px;color:#0b0b14;
  background:linear-gradient(135deg,#8be9ff,#a371ff 55%,#ff9d4d);
  box-shadow:0 6px 22px rgba(140,100,255,.45);
}
.brand h1{font-size:15px;letter-spacing:.16em;font-weight:700}
.brand small{display:block;font-size:9.5px;letter-spacing:.32em;color:var(--dim);margin-top:3px}

.live-pill{
  display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.16em;font-weight:600;
  padding:8px 16px;border-radius:999px;color:#bff5d9;
  background:rgba(57,217,138,.08);border:1px solid rgba(57,217,138,.28);
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(57,217,138,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(57,217,138,.55)}70%{box-shadow:0 0 0 9px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}
#clock{font-size:13px;letter-spacing:.12em;color:var(--muted)}

/* ---------- hero ---------- */
.hero{text-align:center;padding:18px 0 46px}
.eyebrow{font-size:11px;letter-spacing:.4em;color:var(--dim);font-weight:600}
.hero h2{
  font-size:clamp(38px,6.2vw,72px);line-height:1.04;font-weight:800;letter-spacing:-.02em;margin:18px 0 0;
  background:linear-gradient(105deg,#ffffff 18%,#b79bff 50%,#7fd5ff 82%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer{to{background-position:220% center}}
.hero p{max-width:560px;margin:20px auto 0;color:var(--muted);font-size:15px;line-height:1.6}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:42px 0 12px}
.stat{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);
  padding:20px 14px;text-align:center;backdrop-filter:blur(6px);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.stat:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.045)}
.stat .num{font-size:30px;font-weight:800;letter-spacing:-.01em}
.stat .lbl{font-size:9.5px;letter-spacing:.26em;color:var(--dim);margin-top:8px}

/* ---------- organigramme ---------- */
.section-label{text-align:center;font-size:11px;letter-spacing:.4em;color:var(--dim);font-weight:600;margin:60px 0 26px}
.ceo-wrap{display:flex;justify-content:center;position:relative}
.connector{position:relative;height:46px;margin-top:-2px}
.connector span{position:absolute;background:var(--panel-border);overflow:visible}
/* lignes de base */
.line-v{left:50%;top:0;width:1px;height:24px;transform:translateX(-50%)}
.line-h{left:16.6%;right:16.6%;top:24px;height:1px}
.leg{top:24px;width:1px;height:22px}
.leg1{left:16.6%}.leg2{left:50%}.leg3{left:83.4%}

/* ---- comètes de flux circulant le long des lignes ---- */
.line-v::after,.leg::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:2px;height:11px;border-radius:2px;animation:cometDown 1.8s linear infinite}
.line-v::after{background:linear-gradient(180deg,transparent,#b79bff);box-shadow:0 0 8px #b79bff}
.leg1::after{background:linear-gradient(180deg,transparent,var(--eng));box-shadow:0 0 8px var(--eng);animation-delay:.75s}
.leg2::after{background:linear-gradient(180deg,transparent,var(--mkt));box-shadow:0 0 8px var(--mkt);animation-delay:.85s}
.leg3::after{background:linear-gradient(180deg,transparent,var(--ops));box-shadow:0 0 8px var(--ops);animation-delay:.80s}
@keyframes cometDown{0%{top:-11px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:24px;opacity:0}}

/* bus horizontal : pulses partant vers chaque côté */
.line-h::before,.line-h::after{content:"";position:absolute;top:50%;transform:translateY(-50%);
  height:2px;width:13px;border-radius:2px;animation-duration:1.8s;animation-timing-function:linear;
  animation-iteration-count:infinite;animation-delay:.38s}
.line-h::after{background:linear-gradient(270deg,transparent,var(--eng));box-shadow:0 0 8px var(--eng);animation-name:cometLeft}
.line-h::before{background:linear-gradient(90deg,transparent,var(--ops));box-shadow:0 0 8px var(--ops);animation-name:cometRight}
@keyframes cometRight{0%{left:50%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes cometLeft{0%{right:50%;opacity:0}12%{opacity:1}88%{opacity:1}100%{right:100%;opacity:0}}

.columns{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.col-head{text-align:center;font-size:11px;letter-spacing:.28em;font-weight:600;margin-bottom:16px}
.col.eng .col-head{color:var(--eng)} .col.mkt .col-head{color:var(--mkt)} .col.ops .col-head{color:var(--ops)}

.card{
  --accent:var(--eng);
  position:relative;display:flex;gap:13px;align-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid var(--panel-border);border-radius:14px;padding:13px 14px;margin-bottom:13px;
  overflow:hidden;backdrop-filter:blur(6px);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
  opacity:0;transform:translateY(14px);animation:rise .6s ease forwards var(--ad,0s);
}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);opacity:.7}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 14px 34px rgba(0,0,0,.45)}

.avatar{
  flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  font-weight:800;font-size:13px;letter-spacing:.04em;color:#0b0c12;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 90%,#fff 0%),color-mix(in srgb,var(--accent) 55%,#000 0%));
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent);
}
.card.big .avatar{width:50px;height:50px;border-radius:13px;font-size:15px}
.who{flex:1;min-width:0}
.who .name-row{display:flex;align-items:center;gap:8px}
.who .name{font-weight:700;font-size:14px}
.badge{font-size:8.5px;font-weight:700;letter-spacing:.12em;padding:2px 7px;border-radius:6px;color:#0b0c12;background:var(--accent)}
.role{font-size:11px;color:var(--muted);margin-top:2px}
.tags{font-size:9px;letter-spacing:.06em;color:var(--dim);margin-top:6px}
.meter{flex:0 0 64px;display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.bar{width:60px;height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--accent);animation:fill 1.4s cubic-bezier(.2,.7,.2,1) forwards var(--ad,0s)}
@keyframes fill{to{width:var(--w,70%)}}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:blink 1.6s ease-in-out infinite var(--ad,0s)}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

.ceo-card{--accent:var(--ceo);min-width:300px}

/* ---------- panneaux inférieurs ---------- */
.panels{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;margin-top:54px}
.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:22px;backdrop-filter:blur(6px)}
.panel h3{font-size:10.5px;letter-spacing:.28em;color:var(--dim);font-weight:600;margin-bottom:16px}
.proj{display:flex;align-items:center;justify-content:space-between;padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.proj:last-child{border-bottom:0}
.proj .l{display:flex;align-items:center;gap:11px;font-size:14px}
.proj .l b{width:7px;height:7px;border-radius:50%;background:var(--eng);box-shadow:0 0 8px var(--eng)}
.proj:nth-child(3) .l b{background:var(--mkt);box-shadow:0 0 8px var(--mkt)}
.proj:nth-child(4) .l b{background:var(--ops);box-shadow:0 0 8px var(--ops)}
.proj .r{font-size:11px;color:var(--dim);letter-spacing:.06em}

.feed-title{margin-top:26px}
.act{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 4px;font-size:13px;border-radius:8px;transition:background .2s}
.act:hover{background:rgba(255,255,255,.03)}
.act .who2{color:var(--text)} .act .who2 b{font-weight:700}
.act .t{font-size:10.5px;color:var(--dim)}
.act .ic{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);flex:0 0 auto;margin-right:9px}

.mission .big{font-size:21px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.mission .progress{margin-top:18px}
.mission .ptop{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:8px}
.track{height:7px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.track i{display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,#ff7bd5,#a371ff 50%,#36e0d0);
  animation:fill 1.8s cubic-bezier(.2,.7,.2,1) forwards .4s}
.mission p{margin-top:18px;font-size:12.5px;line-height:1.7;color:var(--muted)}

footer{text-align:center;margin-top:54px;font-size:11px;letter-spacing:.06em;color:var(--dim)}
footer b{color:var(--ops);font-weight:700}

@media(max-width:880px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .columns{grid-template-columns:1fr}
  .panels{grid-template-columns:1fr}
  .connector{display:none}
}