/* ═══════════════════════════════════════
   RESET & VARIABLES
═══════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --accent:       #61dafb;
  --accent2:      #a78bfa;
  --green:        #22c55e;
  --text:         #f1f5f9;
  --muted:        #94a3b8;
  --faint:        #475569;
  --glass-bg:     rgba(15, 23, 42, 0.72);
  --glass-border: rgba(148, 163, 184, 0.18);
  --blur:         28px;
  --radius:       24px;
  --shadow:       0 24px 60px rgba(0,0,0,0.7);
}

html { scroll-behavior: smooth; }

body {
  font-family: system-ui, -apple-system, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  background: #020817;
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ═══════════════════════════════════════
   BACKGROUND
═══════════════════════════════════════ */
.bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: #020817;
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(100px); pointer-events: none;
}
.o1 { width:600px; height:600px; background:#1e40af; top:-200px; left:-200px; opacity:.45; }
.o2 { width:700px; height:700px; background:#6d28d9; bottom:-300px; right:-250px; opacity:.4; }
.o3 { width:450px; height:450px; background:#0e7490; top:45%; left:50%; transform:translate(-50%,-50%); opacity:.25; }

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 20px 100px; }

/* ═══════════════════════════════════════
   NAV
═══════════════════════════════════════ */
nav {
  position: sticky; top: 16px; z-index: 999;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(5, 10, 25, 0.75);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
  margin-bottom: 40px;
}
.nav-logo {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: var(--text);
}
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  font-size: 11px; text-transform: uppercase; letter-spacing: .18em;
  color: var(--muted); text-decoration: none;
  padding: 6px 13px; border-radius: 999px;
  transition: all .2s;
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* ═══════════════════════════════════════
   PULSE DOT
═══════════════════════════════════════ */
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--green);
  box-shadow: 0 0 10px rgba(34,197,94,.9);
  animation: blink 2s ease-in-out infinite;
}
.pulse-dot.small { width: 6px; height: 6px; }
@keyframes blink {
  0%,100% { opacity:1; box-shadow: 0 0 10px rgba(34,197,94,.9); }
  50%      { opacity:.6; box-shadow: 0 0 20px rgba(34,197,94,1); }
}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 26px;
  align-items: start;
  margin-bottom: 26px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(10,15,30,.8);
  border: 1px solid rgba(148,163,184,.25);
  font-size: 11px; color: var(--muted);
  margin-bottom: 20px;
}
.hero-title {
  font-size: clamp(32px, 3.8vw, 46px);
  line-height: 1.07; font-weight: 700;
  margin-bottom: 16px;
}
.hero-title .sub {
  display: block; font-size: .5em; font-weight: 400;
  color: var(--muted); letter-spacing: .06em; margin-bottom: 6px;
}
.hero-title .name {
  background: linear-gradient(120deg, #fff 20%, #bae6fd 55%, #61dafb 100%);
  -webkit-background-clip: text; color: transparent;
}
.hero-desc {
  font-size: 14px; color: var(--muted); line-height: 1.75;
  max-width: 500px; margin-bottom: 22px;
}
.hero-desc strong { color: var(--text); }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.tag {
  padding: 5px 13px; border-radius: 999px; font-size: 11px;
  border: 1px solid var(--glass-border);
  background: rgba(15,23,42,.75); color: var(--muted);
}
.tag.blue  { border-color: rgba(97,218,251,.3);  color: var(--accent); }
.tag.green { border-color: rgba(34,197,94,.3);   color: var(--green); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px; font-size: 13px;
  text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: all .22s;
}
.btn-fill {
  background: linear-gradient(135deg, #4338ca, #0891b2);
  color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.65);
}
.btn-fill:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.8); }
.btn-outline {
  border-color: rgba(148,163,184,.3);
  background: rgba(15,23,42,.6); color: var(--muted);
}
.btn-outline:hover { color: var(--text); border-color: rgba(148,163,184,.6); }

/* ═══════════════════════════════════════
   IDENTITY CARD (liquid glass)
═══════════════════════════════════════ */
.id-card {
  position: relative; border-radius: 28px; padding: 22px; overflow: hidden;
  background: linear-gradient(140deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 100%);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  
  box-shadow: var(--shadow);
}
.id-card::before {
  content: "";
  position: absolute; inset: -60%;
  background:
    radial-gradient(circle at 10% 10%, rgba(96,165,250,.45), transparent 50%),
    radial-gradient(circle at 110% 5%,  rgba(167,139,250,.4), transparent 50%),
    radial-gradient(circle at 5% 110%,  rgba(52,211,153,.35), transparent 50%);
  mix-blend-mode: screen; opacity: .5; pointer-events: none;
}
.id-inner { position: relative; display: flex; flex-direction: column; gap: 14px; }

.id-top { display: flex; align-items: center; gap: 14px; }
.avatar {
  width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0;
  background: linear-gradient(135deg, #e2e8f0, #94a3b8 40%, #0f172a);
  border: 1px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #0f172a;
  box-shadow: 0 10px 28px rgba(0,0,0,.7);
}
.id-name  { font-size: 16px; font-weight: 600; }
.id-role  { font-size: 11px; color: var(--muted); margin-top: 3px; }
.id-sep   { height: 1px; background: rgba(148,163,184,.18); }

.id-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  padding: 5px 11px; border-radius: 999px; font-size: 11px;
  background: rgba(15,23,42,.8); border: 1px solid rgba(148,163,184,.3);
  color: var(--muted);
}
.chip.c-blue   { border-color: rgba(97,218,251,.3);  color: var(--accent); }
.chip.c-purple { border-color: rgba(167,139,250,.3); color: var(--accent2); }
.chip.c-green  { border-color: rgba(34,197,94,.3);   color: var(--green); }

/* Langues */
.id-langs { display: flex; flex-direction: column; gap: 8px; }
.lang-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .18em;
  color: var(--faint); margin-bottom: 4px;
}
.lang-row { display: flex; flex-direction: column; gap: 8px; }
.lang-item {
  display: grid; grid-template-columns: 60px 1fr 60px;
  align-items: center; gap: 10px;
}
.lang-name  { font-size: 12px; color: var(--muted); }
.lang-level { font-size: 11px; color: var(--faint); text-align: right; }
.lang-bar {
  height: 4px; border-radius: 999px;
  background: rgba(148,163,184,.15); overflow: hidden;
}
.lang-fill {
  height: 100%; border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 8px rgba(34,197,94,.6);
}
.lang-fill.blue   { background: var(--accent);  box-shadow: 0 0 8px rgba(97,218,251,.6); }
.lang-fill.purple { background: var(--accent2); box-shadow: 0 0 8px rgba(167,139,250,.6); }

.id-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--muted);
  padding-top: 10px; border-top: 1px solid rgba(148,163,184,.18);
}
.status { display: flex; align-items: center; gap: 6px; }

/* ═══════════════════════════════════════
   SECTIONS
═══════════════════════════════════════ */
.section {
  margin-top: 22px; padding: 24px;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
}
.sec-title {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.sec-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(148,163,184,.25), transparent);
}

/* ═══════════════════════════════════════
   COMPÉTENCES
═══════════════════════════════════════ */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.skill-group-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); margin-bottom: 10px;
}
.skill-group-title.purple { color: var(--accent2); }
.skill-group-title.green  { color: var(--green); }
.skill-group-title.gray   { color: var(--muted); }

.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.sk {
  padding: 5px 12px; border-radius: 999px; font-size: 12px;
  background: rgba(97,218,251,.07);
  border: 1px solid rgba(97,218,251,.22);
  color: var(--text);
}
.sk.p { background: rgba(167,139,250,.07); border-color: rgba(167,139,250,.22); }
.sk.g { background: rgba(34,197,94,.07);   border-color: rgba(34,197,94,.22); }
.sk.n { background: rgba(148,163,184,.05); border-color: rgba(148,163,184,.18); color: var(--muted); }

/* ═══════════════════════════════════════
   SOFT SKILLS
═══════════════════════════════════════ */
.soft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.soft-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 18px 12px;
  border-radius: 18px;
  background: rgba(15,23,42,.6);
  border: 1px solid rgba(148,163,184,.15);
  text-align: center;
  transition: all .22s;
}
.soft-item:hover {
  border-color: rgba(97,218,251,.3);
  background: rgba(97,218,251,.05);
  transform: translateY(-2px);
}
.soft-icon  { font-size: 24px; }
.soft-label { font-size: 12px; color: var(--muted); }

/* ═══════════════════════════════════════
   TIMELINE
═══════════════════════════════════════ */
.timeline { display: flex; flex-direction: column; }
.tl-item {
  display: grid;
  grid-template-columns: 100px 20px 1fr;
  gap: 0 16px;
  padding-bottom: 28px;
}
.tl-item:last-child { padding-bottom: 0; }

.tl-date {
  font-size: 11px; color: var(--faint);
  text-align: right; padding-top: 3px; line-height: 1.6;
}
.tl-spine { display: flex; flex-direction: column; align-items: center; }
.tl-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(97,218,251,.7);
  margin-top: 4px;
}
.tl-dot.purple { background: var(--accent2); box-shadow: 0 0 12px rgba(167,139,250,.7); }
.tl-dot.green  { background: var(--green);   box-shadow: 0 0 12px rgba(34,197,94,.7); }
.tl-line {
  flex: 1; width: 1px; margin-top: 6px;
  background: linear-gradient(180deg, rgba(148,163,184,.25), transparent);
}
.tl-body { padding-top: 2px; }
.tl-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.tl-role    { font-size: 14px; font-weight: 600; }
.tl-company { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.tl-list {
  list-style: none; display: flex; flex-direction: column; gap: 5px;
  margin-bottom: 12px;
}
.tl-list li {
  font-size: 13px; color: var(--muted); padding-left: 14px; position: relative;
  line-height: 1.6;
}
.tl-list li::before {
  content: "–"; position: absolute; left: 0; color: var(--faint);
}
.tl-tags { display: flex; flex-wrap: wrap; gap: 7px; }

/* ═══════════════════════════════════════
   PROJETS
═══════════════════════════════════════ */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.project-card {
  padding: 20px; border-radius: 20px;
  background: rgba(15,23,42,.6);
  border: 1px solid rgba(148,163,184,.15);
  display: flex; flex-direction: column; gap: 12px;
  transition: all .22s;
}
.project-card:hover {
  border-color: rgba(97,218,251,.3);
  background: rgba(97,218,251,.04);
  transform: translateY(-2px);
}
.project-header { display: flex; align-items: center; justify-content: space-between; }
.project-icon   { font-size: 26px; }
.project-title  { font-size: 15px; font-weight: 600; }
.project-desc   { font-size: 13px; color: var(--muted); line-height: 1.65; }

/* ═══════════════════════════════════════
   ENGAGEMENT
═══════════════════════════════════════ */
.engage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.engage-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 16px;
  background: rgba(15,23,42,.6);
  border: 1px solid rgba(148,163,184,.15);
  transition: all .22s;
}
.engage-item:hover {
  border-color: rgba(167,139,250,.3);
  background: rgba(167,139,250,.05);
}
.engage-icon  { font-size: 22px; flex-shrink: 0; }
.engage-title { font-size: 13px; font-weight: 600; }
.engage-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ═══════════════════════════════════════
   CONTACT
═══════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.contact-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 22px 16px; border-radius: 20px;
  background: rgba(15,23,42,.6);
  border: 1px solid rgba(148,163,184,.15);
  text-decoration: none; text-align: center;
  transition: all .22s;
}
.contact-card:hover {
  border-color: rgba(97,218,251,.35);
  background: rgba(97,218,251,.05);
  transform: translateY(-2px);
}
.contact-icon  { font-size: 26px; }
.contact-label { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--faint); }
.contact-value { font-size: 12px; color: var(--accent); word-break: break-all; }

/* ═══════════════════════════════════════
   NOUVEAUX BLOCS (BTS SIO)
═══════════════════════════════════════ */

/* BTS Info (Profil) */
.bts-info {
  background: rgba(15,23,42,.6);
  border: 1px solid rgba(148,163,184,.2);
  padding: 14px 18px;
  border-radius: 16px;
  margin-bottom: 22px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.bts-info p { margin-top: 8px; }
.bts-info strong { color: var(--text); }
.bts-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--accent);
  font-size: 14px;
}

/* Projets & Stages Details */
.proj-details, .stage-details {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px;
}
.proj-detail-item, .stage-detail-item {
  font-size: 12px; color: var(--muted);
  background: rgba(0,0,0,.15);
  padding: 10px 14px;
  border-radius: 10px;
  border-left: 3px solid rgba(97,218,251,.4);
}
.proj-detail-item:nth-child(2), .stage-detail-item:nth-child(2) { border-left-color: rgba(167,139,250,.4); }
.proj-detail-item:nth-child(3), .stage-detail-item:nth-child(3) { border-left-color: rgba(34,197,94,.4); }

.proj-detail-item strong, .stage-detail-item strong {
  display: block; color: var(--text); margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
}

.doc-download {
  margin-top: 30px; display: flex; justify-content: center;
}

/* Veille Technologique */
.veille-container {
  display: grid; grid-template-columns: 1fr 350px; gap: 26px;
  align-items: start;
}
.veille-block { margin-bottom: 22px; }
.veille-subtitle {
  font-size: 14px; color: var(--accent); font-weight: 600;
  margin-bottom: 8px;
}
.veille-text {
  font-size: 13px; color: var(--muted); line-height: 1.7;
}
.veille-list {
  list-style: none; display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
}
.veille-list li {
  font-size: 13px; color: var(--muted); padding-left: 14px; position: relative;
}
.veille-list li::before {
  content: "»"; position: absolute; left: 0; color: var(--accent2); font-weight: bold;
}
.veille-iframe {
  background: rgba(15,23,42,.6);
  border: 1px solid rgba(148,163,184,.15);
  padding: 16px; border-radius: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.iframe-wrapper {
  background: #020817; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(148,163,184,.1);
  min-height: 300px; display: flex; align-items: center; justify-content: center;
}
.iframe-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; padding: 20px; color: var(--faint); font-size: 12px;
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.footer {
  margin-top: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; color: var(--faint); text-align: center;
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .id-card { order: -1; }
}
@media (max-width: 600px) {
  nav { padding: 8px 14px; }
  .nav-links { display: none; }
  .wrap { padding-inline: 14px; }
  .tl-item { grid-template-columns: 80px 16px 1fr; gap: 0 10px; }
}