/* ================= TOKENS ================= */
:root{
  --primary:#679DC8;
  --secondary:#8797FF;
  --ink:#0F1A24;
  --ink-soft:#3E4E5C;
  --surface: rgba(255,255,255,0.86);
  --surface-solid:#FFFFFF;
  --line: rgba(15,26,36,0.08);
  --radius-lg:34px;
  --radius-md:24px;
  --radius-sm:16px;
  --shadow: 0 20px 50px -20px rgba(15,26,36,0.35);
  --ff-display:'Space Grotesk', sans-serif;
  --ff-body:'Inter', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--ff-body);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
}
.cloud-defs{position:absolute; width:0; height:0; overflow:hidden;}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* fixed mountain background, shared across the whole page like the sketch */
.bg-fixed{
  position:fixed; inset:0; z-index:-2;
  background-image:
    linear-gradient(180deg, rgba(234,241,249,0.55), rgba(234,241,249,0.88) 55%, #EAF1F9 100%),
    url("../images/banner-lyven.jpg");
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
@media (max-width:900px){
  .bg-fixed{background-attachment:scroll;}
}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media (max-width:600px){ .wrap{padding:0 20px;} }

.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-d1{transition-delay:.08s;}
.reveal-d2{transition-delay:.16s;}
.reveal-d3{transition-delay:.24s;}
.reveal-d4{transition-delay:.32s;}

h1,h2,h3{font-family:var(--ff-display); font-weight:700; letter-spacing:-0.01em;}

/* ================= AMBIENT CLOUDS ================= */
.cloud{
  position:absolute; z-index:-1;
  pointer-events:none; user-select:none;
  filter:drop-shadow(0 10px 18px rgba(15,26,36,0.16));
  animation:cloud-float 7s ease-in-out infinite;
}
@keyframes cloud-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

.cloud--hero-a{top:4%; left:-3%; width:110px; animation-duration:8s;}
.cloud--hero-b{bottom:8%; right:2%; width:64px; animation-duration:6.5s; animation-delay:.6s;}
.cloud--profil-a{top:-26px; right:8%; width:76px; animation-duration:7.5s;}
.cloud--competences-a{top:-28px; left:-3%; width:64px; transform:scaleX(-1); animation-duration:6.8s; animation-delay:.3s;}
.cloud--experiences-a{top:-22px; left:-3%; width:56px; animation-duration:7.2s; animation-delay:.9s;}
.cloud--experiences-b{bottom:-18px; right:4%; width:96px; animation-duration:8.4s; animation-delay:.4s;}
.cloud--contact-a{top:-20px; left:10%; width:78px; animation-duration:7s;}
.cloud--contact-b{bottom:0; right:2%; width:60px; transform:scaleX(-1); animation-duration:6.4s; animation-delay:.7s;}

@media (max-width:760px){
  .cloud{opacity:.7;}
  .cloud--hero-a{width:80px;}
  .cloud--hero-b{width:48px;}
  .cloud--experiences-b{width:70px;}
}

/* ================= NAV ================= */
.nav{
  position:sticky; top:0; z-index:50;
  max-width:1180px; margin:0 auto;
  padding:18px 32px;
}
@media (max-width:600px){ .nav{padding:18px 20px;} }
.nav-inner{
  background:var(--surface);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:99px;
  padding:10px 14px 10px 10px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--shadow);
}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--ff-display); font-weight:700; font-size:18px;}
.brand .logo-pic{
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  border:2px solid #fff; box-shadow:0 4px 12px rgba(15,26,36,0.18);
}
.brand .logo-pic img{width:100%; height:100%; object-fit:cover;}
.nav-links{display:flex; gap:8px;}
.nav-links a{
  font-weight:700; font-size:14.5px; color:var(--ink);
  padding:10px 18px; border-radius:99px;
  transition:background .25s ease, color .25s ease;
}
.nav-links a:hover{background:rgba(103,157,200,0.14);}
.nav-toggle{display:none; background:none; border:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px;}
.nav-toggle span{width:22px; height:2px; background:var(--ink); border-radius:2px;}
@media (max-width:760px){
  .nav-links{display:none; position:absolute; top:62px; left:20px; right:20px; background:var(--surface-solid); flex-direction:column; padding:14px; border-radius:var(--radius-md); box-shadow:var(--shadow);}
  .nav-links.open{display:flex;}
  .nav-toggle{display:flex;}
}

/* ================= HERO ================= */
.hero{position:relative; padding:70px 0 60px; min-height:88vh; display:flex; align-items:center;}
.hero-inner{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:40px; align-items:center; width:100%;
}
.hero-photo{
  position:relative;
  width:100%; aspect-ratio:1/1;
  max-width:440px; margin:0 auto;
}
.hero-photo .avatar-frame{
  position:absolute; inset:0;
  border-radius:50%; overflow:hidden;
  border:8px solid #fff; box-shadow:var(--shadow);
}
.hero-photo .avatar-frame img{width:100%; height:100%; object-fit:cover;}
.hero-photo .avatar-decoration{
  position:absolute; inset:-9%;
  width:118%; height:118%;
  pointer-events:none;
}

.hero-card{
  background:var(--surface); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:var(--radius-lg);
  padding:48px 46px;
  box-shadow:var(--shadow);
}
.hero-card .eyebrow{
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary); margin-bottom:14px;
}
.hero-card h1{font-size:clamp(30px,4vw,46px); line-height:1.08; margin-bottom:18px;}
.hero-card h1 .accent{color:var(--secondary);}
.hero-card p{font-size:16.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:26px; max-width:480px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
.btn{
  font-weight:700; font-size:14.5px; padding:14px 26px; border-radius:99px;
  display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.btn-ghost{background:#fff; color:var(--ink); border:2px solid var(--line);}
.btn-ghost:hover{transform:translateY(-3px); border-color:var(--primary);}

.scroll-suite{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-weight:700; font-size:13px; color:var(--ink);
  margin-top:56px; width:fit-content;
}
.scroll-suite .arrow{animation:bounce 1.8s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);}}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-photo{order:-1; max-width:280px;}
  .hero-card{padding:34px 26px;}
}

/* ================= SECTION SHARED ================= */
.section{position:relative; padding:90px 0;}
.section-head{margin-bottom:44px;}
.section-head .eyebrow{
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); margin-bottom:10px; display:block;
}
.section-head h2{font-size:clamp(28px,4vw,40px);}
.section-head p{color:var(--ink-soft); font-size:16px; max-width:520px; margin-top:12px; line-height:1.6;}

.panel{
  background:var(--surface); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
}

/* ---- presentation ---- */
.about-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:22px;}
.about-main{padding:42px;}
.about-main p{color:var(--ink-soft); font-size:16.5px; line-height:1.8; margin-bottom:14px;}
.about-main p:last-child{margin-bottom:0;}
.about-main strong{color:var(--ink);}
.about-side{display:grid; gap:22px; grid-template-rows:1fr 1fr;}
.stat{padding:28px; display:flex; flex-direction:column; justify-content:center; gap:6px;}
.stat .num{font-family:var(--ff-display); font-size:34px; font-weight:700; color:var(--primary);}
.stat .lbl{font-size:13px; color:var(--ink-soft);}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr;} }

/* ---- skills ---- */
.skills-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.skill{padding:32px 28px;}
.skill .ico{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; background:#fff; box-shadow:0 8px 20px -6px rgba(15,26,36,0.16), 0 0 0 1px rgba(15,26,36,0.04);
  overflow:hidden; flex-shrink:0;
}
.skill .ico img{width:100%; height:100%; object-fit:cover; object-position:center;}
.skill h3{font-size:19px; margin-bottom:8px;}
.skill p{font-size:14.5px; color:var(--ink-soft); line-height:1.6;}
@media (max-width:860px){ .skills-grid{grid-template-columns:1fr;} }

/* ---- experiences (croquis: pdp + nom + rôle + séparateur + description) ---- */
.exp-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.exp-card{
  position:relative; overflow:hidden;
  padding:26px 28px 30px;
  display:flex; flex-direction:column; gap:20px;
  transition:transform .35s cubic-bezier(.16,.8,.3,1), box-shadow .35s ease;
}
.exp-card:hover{transform:translateY(-6px);}
.exp-top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px;}
.exp-left{display:flex; align-items:center; gap:16px;}
.exp-join{
  flex-shrink:0;
  font-size:12px; font-weight:700;
  padding:9px 16px; border-radius:99px;
  background:rgba(103,157,200,0.12); color:var(--primary-deep,var(--primary));
  border:1px solid rgba(103,157,200,0.3);
  white-space:nowrap;
  transition:background .25s ease, transform .25s ease, color .25s ease;
}
.exp-join:hover{background:var(--primary); color:#fff; transform:translateY(-2px);}
.exp-pdp{
  width:58px; height:58px; border-radius:50%; overflow:hidden;
  border:3px solid #fff; box-shadow:0 6px 16px rgba(15,26,36,0.18); flex-shrink:0;
}
.exp-pdp img{width:100%; height:100%; object-fit:cover;}
.exp-titles{display:flex; flex-direction:column; gap:8px;}
.exp-name{
  font-family:var(--ff-display); font-weight:700; font-size:19px; letter-spacing:-0.01em; color:var(--ink);
}
.exp-role{
  font-size:11.5px; font-weight:700; letter-spacing:.03em;
  background:rgba(103,157,200,0.14); color:var(--primary);
  padding:5px 14px; border-radius:99px; width:fit-content;
}
.exp-sep{height:1px; width:100%; background:linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);}
.exp-desc{
  text-align:center; font-weight:700; font-size:16px; color:var(--ink);
  line-height:1.5; padding:4px 6px 2px;
}
@media (max-width:760px){ .exp-grid{grid-template-columns:1fr;} }

/* ---- réseaux ---- */
.discord-feature{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  padding:38px 42px; margin-bottom:22px;
  border:1px solid rgba(103,157,200,0.35);
  background:linear-gradient(120deg, rgba(103,157,200,0.14), rgba(135,151,255,0.14));
}
.discord-feature-left{display:flex; align-items:center; gap:20px;}
.discord-feature .ico{
  width:68px; height:68px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:0 12px 28px -8px rgba(103,157,200,0.45), 0 0 0 1px rgba(103,157,200,0.12);
  overflow:hidden;
}
.discord-feature .ico img{width:100%; height:100%; object-fit:cover; object-position:center;}
.discord-feature .tag{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--secondary);
  margin-bottom:6px; display:block;
}
.discord-feature h3{font-size:22px; margin-bottom:6px;}
.discord-feature p{color:var(--ink-soft); font-size:14.5px; max-width:360px;}
@media (max-width:760px){ .discord-feature{padding:30px 24px;} }

.socials-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.social-card{
  display:flex; align-items:center; gap:16px;
  padding:22px 24px;
  transition:transform .3s cubic-bezier(.16,.8,.3,1), box-shadow .3s ease;
}
.social-card:hover{transform:translateY(-5px);}
.social-card .ico{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:0 6px 16px -4px rgba(15,26,36,0.14), 0 0 0 1px rgba(15,26,36,0.04);
  overflow:hidden; transition:transform .3s cubic-bezier(.16,.8,.3,1);
}
.social-card .ico img{width:100%; height:100%; object-fit:cover; object-position:center;}
.social-card:hover .ico{transform:scale(1.08);}
.social-card .txt{flex:1; min-width:0;}
.social-card .s-name{font-weight:700; font-size:14.5px; color:var(--ink);}
.social-card .s-handle{font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.social-card .arrow{color:var(--ink-soft); font-size:16px; transition:transform .3s ease;}
.social-card:hover .arrow{transform:translate(3px,-3px); color:var(--primary);}
@media (max-width:860px){ .socials-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .socials-grid{grid-template-columns:1fr;} .discord-feature{flex-direction:column; align-items:flex-start;} }

footer{padding:34px 0 44px; text-align:center; font-size:12.5px; color:var(--ink-soft); font-weight:600;}