/* ══════════════════════════════════════════════════════
   HOME.CSS — Moustapha Seck | Dark Bold v2
   ══════════════════════════════════════════════════════ */

/* Barre de progression scroll */
#ms-progress{
  position:fixed;top:0;left:0;z-index:9999;
  height:3px;width:0%;
  background:linear-gradient(90deg,var(--orange),var(--teal));
  transition:width .1s linear;pointer-events:none;
}

/* ─── HERO ──────────────────────────────────────────────── */
.ms-hero{
  position:relative;
  min-height:100vh;
  background:var(--dark);
  display:flex;align-items:center;
  padding:100px 0 60px;
  overflow:hidden;
}

/* Texture scanline subtile */
.ms-hero::before{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(
    0deg,transparent,transparent 2px,rgba(255,255,255,.012) 2px,rgba(255,255,255,.012) 4px
  );
  pointer-events:none;z-index:0;
}

/* Glow de fond */
.ms-hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  pointer-events:none;
}
.ms-hero-glow-1{
  width:500px;height:500px;
  top:-100px;left:-80px;
  background:radial-gradient(circle,rgba(255,94,31,.14) 0%,transparent 70%);
  animation:glowPulse 4s ease-in-out infinite;
}
.ms-hero-glow-2{
  width:400px;height:400px;
  bottom:-80px;right:-60px;
  background:radial-gradient(circle,rgba(0,201,167,.12) 0%,transparent 70%);
  animation:glowPulse 5s ease-in-out infinite .5s;
}

.ms-hero>.container{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;
  gap:3rem;align-items:center;
}

/* ── Colonne gauche : visuel ──────────────────────────── */
.ms-hero-visual{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  animation:fadeUp .8s .2s var(--ease) both;
}

/* Anneau rotatif externe */
.ms-ring-outer{
  position:relative;
  width:380px;height:380px;
}

.ms-ring-svg{
  position:absolute;inset:0;
  animation:rotateRing 18s linear infinite;
  opacity:.18;
}

/* Photo / Avatar central */
.ms-avatar-wrap{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:220px;height:220px;
  border-radius:50%;
  background:var(--dark-3);
  border:2px solid var(--border);
  overflow:hidden;
  box-shadow:0 0 60px rgba(255,94,31,.2),0 0 0 8px rgba(255,94,31,.06);
  display:flex;align-items:center;justify-content:center;
}
.ms-avatar-wrap img{
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
}
/* Initiales si pas de photo */
.ms-avatar-initials{
  font-family:var(--font-hero);
  font-size:4rem;font-weight:800;
  color:var(--orange);letter-spacing:.05em;
}

/* Badge rôle sous la photo */
.ms-avatar-badge{
  position:absolute;
  bottom:-14px;left:50%;transform:translateX(-50%);
  padding:.35rem 1.1rem;
  background:var(--orange);
  color:#fff;
  font-family:var(--font-body);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 4px 20px rgba(255,94,31,.5);
}

/* Icônes flottantes autour */
.ms-icon-orbit{
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
}

.ms-icon-node{
  position:absolute;
  animation:floatY 3.5s ease-in-out infinite;
}
.ms-icon-node:nth-child(1){ transform:translate(-215px,-80px); animation-delay:0s; }
.ms-icon-node:nth-child(2){ transform:translate( 175px,-90px); animation-delay:.6s; }
.ms-icon-node:nth-child(3){ transform:translate(-230px, 80px); animation-delay:1.2s; }
.ms-icon-node:nth-child(4){ transform:translate( 165px, 90px); animation-delay:1.8s; }

.ms-icon-bubble{
  width:64px;height:64px;
  background:var(--dark-3);
  border:1px solid var(--w08);
  border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  transition:all var(--dur-m) var(--ease);
  cursor:default;
}
.ms-icon-bubble:hover{
  border-color:var(--orange);
  box-shadow:0 8px 30px rgba(255,94,31,.25);
  transform:scale(1.1);
}
.ms-icon-bubble .ico{font-size:1.4rem;line-height:1}
.ms-icon-bubble .ico-label{
  font-family:var(--font-body);font-size:.52rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--w60);
}
/* Variantes couleurs */
.ms-icon-bubble.orange{ border-color:rgba(255,94,31,.3); background:rgba(255,94,31,.08); }
.ms-icon-bubble.teal{   border-color:rgba(0,201,167,.3); background:rgba(0,201,167,.08); }

/* ── Colonne droite : texte ───────────────────────────── */
.ms-hero-content{
  animation:fadeUp .8s .05s var(--ease) both;
}

.ms-hero-pre{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-bottom:1.25rem;
}
.ms-hero-pre .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--orange);
  animation:blink 1.2s step-end infinite;
}
.ms-hero-pre span{
  font-family:var(--font-body);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);
}

/* Location tag */
.ms-hero-location{
  font-family:var(--font-body);font-size:.82rem;
  color:var(--w40);letter-spacing:.06em;
  margin-bottom:.5rem;
  display:flex;align-items:center;gap:.4rem;
}

.ms-hero-partenaire{
  font-family:var(--font-body);font-size:.8rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--w60);
  margin-bottom:1.2rem;
}
.ms-hero-partenaire strong{color:var(--teal)}

.ms-hero-name{
  font-family:var(--font-hero);
  font-size:clamp(3.5rem,7vw,6.5rem);
  font-weight:900;
  line-height:.95;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:.3rem;
}
.ms-hero-name .name-orange{color:var(--orange)}

/* Typed role */
.ms-hero-typed{
  font-family:var(--font-hero);
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--teal);
  min-height:3rem;
  margin-bottom:1.5rem;
  display:flex;align-items:center;gap:.4rem;
}
.ms-hero-typed .cursor{
  width:3px;height:1.1em;
  background:var(--teal);
  display:inline-block;vertical-align:middle;
  animation:blink .9s step-end infinite;
}

/* Valeurs */
.ms-hero-values{
  display:flex;gap:1.5rem;
  margin-bottom:1.75rem;
}
.ms-hero-values .val{
  display:flex;align-items:center;gap:.4rem;
  font-family:var(--font-body);font-size:.8rem;font-weight:600;
  letter-spacing:.06em;color:var(--w60);
}
.ms-hero-values .val::before{
  content:'★';font-size:.65rem;color:var(--orange);
}

/* CTA buttons */
.ms-hero-ctas{
  display:flex;flex-wrap:wrap;gap:.85rem;
  margin-bottom:2rem;
}

/* Stack tech */
.ms-hero-stack{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  border-top:1px solid var(--border);
  padding-top:1.25rem;
}
.ms-hero-stack-label{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--w40);
  margin-right:.25rem;
}
.ms-chip{
  padding:.28rem .75rem;
  background:var(--w04);
  border:1px solid var(--w08);
  font-family:var(--font-body);font-size:.72rem;font-weight:600;
  color:var(--w60);
  transition:all var(--dur-f) var(--ease);
}
.ms-chip:hover{background:rgba(255,94,31,.1);border-color:rgba(255,94,31,.3);color:var(--orange-l)}

/* ─── STATS ─────────────────────────────────────────────── */
.ms-stats{
  background:var(--dark-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:2.25rem 0;
}
.ms-stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.ms-stat{
  text-align:center;padding:1rem 0.5rem;
  position:relative;
}
.ms-stat+.ms-stat::before{
  content:'';position:absolute;left:0;top:15%;bottom:15%;
  width:1px;background:var(--border);
}
.ms-stat-n{
  display:block;
  font-family:var(--font-hero);
  font-size:clamp(2.2rem,4vw,3.5rem);
  font-weight:900;letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--orange);line-height:1;
  margin-bottom:.3rem;
}
.ms-stat-l{
  font-family:var(--font-body);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--w40);
}

/* ─── SERVICES ──────────────────────────────────────────── */
.ms-services{
  padding:6rem 0;
  background:var(--dark);
}
.ms-section-head{
  text-align:center;
  margin-bottom:4rem;
}
.ms-section-title{
  font-family:var(--font-hero);
  font-size:clamp(2.5rem,5vw,4.5rem);
  font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  line-height:1;color:var(--white);
}
.ms-section-title span{color:var(--orange)}
.ms-section-sub{
  font-size:.95rem;color:var(--w60);
  max-width:500px;margin:.85rem auto 0;line-height:1.8;
}

.ms-services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
}

.ms-service{
  background:var(--dark-3);
  border:1px solid var(--border);
  padding:2.25rem 1.75rem;
  position:relative;overflow:hidden;
  transition:all var(--dur-m) var(--ease);
  cursor:default;
}
/* Ligne accent en haut */
.ms-service::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-l));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-m) var(--ease);
}
.ms-service:hover::before{transform:scaleX(1)}
.ms-service:hover{
  border-color:rgba(255,94,31,.2);
  transform:translateY(-5px);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
/* Numéro de fond */
.ms-service-num{
  position:absolute;top:-10px;right:16px;
  font-family:var(--font-hero);font-size:5rem;font-weight:900;
  color:var(--w04);letter-spacing:.02em;line-height:1;
  pointer-events:none;user-select:none;
}

.ms-service-ico{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.5rem;
  font-size:1.6rem;
  background:var(--w04);
  border:1px solid var(--w08);
  transition:all var(--dur-m) var(--ease);
}
.ms-service:hover .ms-service-ico{
  background:var(--orange);border-color:var(--orange);
}

.ms-service-name{
  font-family:var(--font-hero);
  font-size:1.5rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--white);margin-bottom:.75rem;line-height:1.15;
}
.ms-service-desc{
  font-size:.88rem;color:var(--w60);
  line-height:1.75;margin-bottom:1.5rem;
}
.ms-service-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem}
.ms-tag{
  padding:.22rem .7rem;
  background:var(--w04);border:1px solid var(--border);
  font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--w40);
}
.ms-service-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-body);font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange);
  transition:gap var(--dur-f) var(--ease);
}
.ms-service-link:hover{gap:.9rem}

/* Couleurs des 3 services */
.ms-service:nth-child(2) .ms-service-ico{background:rgba(0,201,167,.08);border-color:rgba(0,201,167,.15)}
.ms-service:nth-child(2):hover .ms-service-ico{background:var(--teal);border-color:var(--teal)}
.ms-service:nth-child(2) .ms-service-link{color:var(--teal)}
.ms-service:nth-child(3) .ms-service-ico{background:rgba(240,165,0,.08);border-color:rgba(240,165,0,.15)}
.ms-service:nth-child(3):hover .ms-service-ico{background:#F0A500;border-color:#F0A500}
.ms-service:nth-child(3) .ms-service-link{color:#F0A500}

/* ─── À PROPOS ──────────────────────────────────────────── */
.ms-about{
  padding:6rem 0;
  background:var(--dark-2);
  position:relative;overflow:hidden;
}
/* Watermark MS */
.ms-about::after{
  content:'MS';
  position:absolute;right:-1rem;top:50%;transform:translateY(-50%);
  font-family:var(--font-hero);font-size:18rem;font-weight:900;
  color:var(--w04);line-height:1;pointer-events:none;user-select:none;
}
.ms-about>.container{
  display:grid;grid-template-columns:1fr 1fr;
  gap:5rem;align-items:center;
  position:relative;z-index:1;
}

/* Timeline */
.ms-timeline{position:relative;padding-left:1.75rem}
.ms-timeline::before{
  content:'';position:absolute;left:0;top:10px;bottom:10px;
  width:2px;
  background:linear-gradient(to bottom,var(--orange),var(--teal));
}
.ms-tl-item{position:relative;padding-bottom:2rem}
.ms-tl-item:last-child{padding-bottom:0}
.ms-tl-item::before{
  content:'';position:absolute;left:-2.1rem;top:8px;
  width:10px;height:10px;border-radius:50%;
  background:var(--orange);
  border:2px solid var(--dark-2);
  box-shadow:0 0 0 4px rgba(255,94,31,.18);
}
.ms-tl-period{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal);margin-bottom:.2rem;
}
.ms-tl-role{
  font-family:var(--font-hero);font-size:1.1rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--white);margin-bottom:.2rem;
}
.ms-tl-co{font-size:.82rem;color:var(--w40)}

/* Skills chips */
.ms-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.ms-chip-dark{
  padding:.32rem .9rem;
  background:var(--w04);border:1px solid var(--border);
  font-size:.75rem;font-weight:600;color:var(--w60);
  transition:all var(--dur-f) var(--ease);
}
.ms-chip-dark:hover{background:rgba(255,94,31,.1);border-color:rgba(255,94,31,.3);color:var(--orange-l)}

/* ─── PORTFOLIO ─────────────────────────────────────────── */
.ms-portfolio{padding:6rem 0;background:var(--dark)}
.ms-portfolio-head{
  display:flex;align-items:flex-end;
  justify-content:space-between;
  margin-bottom:3rem;flex-wrap:wrap;gap:1rem;
}

.ms-proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}

.ms-proj{
  background:var(--dark-3);
  border:1px solid var(--border);
  overflow:hidden;
  transition:all var(--dur-m) var(--ease);
}
.ms-proj:hover{border-color:rgba(255,94,31,.25);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.5)}

.ms-proj-thumb{
  height:190px;
  display:flex;align-items:center;justify-content:center;
  font-size:2.8rem;position:relative;overflow:hidden;
}
.ms-proj-t1{background:linear-gradient(135deg,#0A0F1C,#1C2438)}
.ms-proj-t2{background:linear-gradient(135deg,#003D35,#006354)}
.ms-proj-t3{background:linear-gradient(135deg,#150D2E,#2D1A5E)}

.ms-proj-overlay{
  position:absolute;inset:0;
  background:rgba(255,94,31,.88);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--dur-m) var(--ease);
}
.ms-proj:hover .ms-proj-overlay{opacity:1}
.ms-proj-overlay span{
  font-family:var(--font-hero);font-size:1rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
}

.ms-proj-body{padding:1.5rem}
.ms-proj-cat{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange);margin-bottom:.4rem;
}
.ms-proj-name{
  font-family:var(--font-hero);font-size:1.2rem;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;
  color:var(--white);margin-bottom:.4rem;
}
.ms-proj-desc{font-size:.84rem;color:var(--w60);line-height:1.65;margin-bottom:1rem}
.ms-proj-stack{display:flex;flex-wrap:wrap;gap:.35rem}
.ms-stag{
  padding:.18rem .6rem;background:var(--w04);border:1px solid var(--border);
  font-size:.65rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--w40);
}

/* ─── CTA ───────────────────────────────────────────────── */
.ms-cta{
  padding:6rem 0;
  background:var(--dark-2);
  text-align:center;position:relative;overflow:hidden;
}
.ms-cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(255,94,31,.10) 0%,transparent 70%);
  pointer-events:none;
}
.ms-cta>.container{position:relative;z-index:1}
.ms-cta-pre{
  font-family:var(--font-body);font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--teal);
  display:block;margin-bottom:.85rem;
}
.ms-cta-title{
  font-family:var(--font-hero);
  font-size:clamp(2.5rem,5vw,5rem);
  font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  line-height:1.0;color:var(--white);margin-bottom:1rem;
}
.ms-cta-title span{color:var(--orange)}
.ms-cta-sub{
  font-size:.97rem;color:var(--w60);
  max-width:480px;margin:0 auto 2.5rem;line-height:1.8;
}
.ms-cta-btns{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:1024px){
  .ms-hero>.container{grid-template-columns:1fr;gap:3rem}
  .ms-hero-visual{order:-1}
  .ms-ring-outer{width:300px;height:300px}
  .ms-avatar-wrap{width:180px;height:180px}
  .ms-icon-node:nth-child(1){transform:translate(-170px,-60px)}
  .ms-icon-node:nth-child(2){transform:translate(140px,-65px)}
  .ms-icon-node:nth-child(3){transform:translate(-180px,60px)}
  .ms-icon-node:nth-child(4){transform:translate(130px,65px)}
  .ms-services-grid{grid-template-columns:1fr 1fr}
  .ms-about>.container{grid-template-columns:1fr;gap:3rem}
  .ms-proj-grid{grid-template-columns:1fr 1fr}
  .ms-stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .ms-hero{padding:90px 0 50px}
  .ms-hero-name{font-size:3rem}
  .ms-hero-ctas{flex-direction:column}
  .ms-hero-ctas .btn{width:100%;justify-content:center}
  .ms-services-grid{grid-template-columns:1fr}
  .ms-proj-grid{grid-template-columns:1fr}
  .ms-portfolio-head{flex-direction:column;align-items:flex-start}
  .ms-ring-outer{width:260px;height:260px}
  .ms-icon-node:nth-child(3),.ms-icon-node:nth-child(4){display:none}
}