:root {
  --cv-bg: #020711;
  --cv-surface: #07111f;
  --cv-surface-2: #09182a;
  --cv-blue: #0878ff;
  --cv-text: #f5f8ff;
  --cv-muted: #9ba9bb;
  --cv-border: rgba(255, 255, 255, .10);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 82px;
}

body {
  background:
    radial-gradient(circle at 75% 8%, rgba(0, 102, 255, .16), transparent 28rem),
    radial-gradient(circle at 5% 45%, rgba(0, 102, 255, .08), transparent 24rem),
    var(--cv-bg);
  color: var(--cv-text);
  overflow-x: hidden;
}

.section-anchor { scroll-margin-top: 82px; }
.section-padding { padding: 100px 0; }

#mainNav {
  background: rgba(2, 7, 17, .90);
  backdrop-filter: blur(16px);
}

.navbar-brand { letter-spacing: .04em; }
.navbar-brand small { font-size: .62rem; letter-spacing: .02em; }
.nav-link { color: rgba(255,255,255,.78) !important; }
.nav-link:hover,
.nav-link.active { color: #fff !important; }

.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  width: 35rem;
  height: 35rem;
  right: -12rem;
  top: 6rem;
  border-radius: 50%;
  background: rgba(0, 102, 255, .12);
  filter: blur(50px);
  pointer-events: none;
}

.hero-portrait-wrap {
  width: min(100%, 520px);
  padding: 1.2rem;
}

.portrait-frame {
  background: #030914;
  box-shadow: 0 30px 100px rgba(0,0,0,.55), 0 0 60px rgba(0,102,255,.14) !important;
}

.hero-portrait {
  max-height: 650px;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.98) contrast(1.03);
}

.hero-glow {
  position: absolute;
  inset: 10% 5% 5%;
  border-radius: 50%;
  background: rgba(0, 110, 255, .18);
  filter: blur(45px);
  z-index: -1;
}

.hero-ring {
  position: absolute;
  border: 1px solid rgba(25, 132, 255, .32);
  border-radius: 50%;
  pointer-events: none;
}

.hero-ring-one { width: 92%; height: 45%; left: 4%; top: 28%; transform: rotate(-12deg); }
.hero-ring-two { width: 105%; height: 54%; left: -2%; top: 22%; transform: rotate(-12deg); opacity: .45; }

.portrait-caption { z-index: 4; }

.glass-card {
  background: linear-gradient(145deg, rgba(7, 17, 31, .94), rgba(3, 10, 20, .90));
  border: 1px solid var(--cv-border);
  box-shadow: 0 25px 70px rgba(0,0,0,.20);
}

.info-pill {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--cv-border);
  border-radius: .8rem;
  padding: .8rem 1rem;
  color: #dce5f0;
}

.info-list { display: grid; gap: 1.2rem; }
.info-list div { display: flex; flex-direction: column; gap: .2rem; }
.info-list span { color: var(--cv-blue); font-size: .78rem; }
.info-list strong { font-size: .95rem; overflow-wrap: anywhere; }

.project-placeholder {
  min-height: 250px;
  background:
    radial-gradient(circle at 30% 25%, rgba(0,120,255,.16), transparent 30%),
    linear-gradient(145deg, var(--cv-surface-2), #030914);
  border: 1px solid var(--cv-border);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.project-image {
  height: 180px;
  background: linear-gradient(145deg, #10243a, #030914);
  border: 1px solid var(--cv-border);
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-image.image-error::after {
  content: "Image introuvable";
  height: 100%;
  display: grid;
  place-items: center;
  color: #8d98a8;
  font-size: .8rem;
}

.project-placeholder:hover {
  transform: translateY(-6px);
  border-color: rgba(0,120,255,.55);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.project-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 1.1rem;
  background: rgba(0,120,255,.10);
  border: 1px solid rgba(0,120,255,.28);
  font-size: 1.35rem;
}

.contact-card {
  background: rgba(0, 0, 0, .16);
}

.btn-primary {
  box-shadow: 0 12px 30px rgba(0, 110, 255, .22);
}

@media (max-width: 991.98px) {
  .section-padding { padding: 78px 0; }
  .hero-section .min-vh-100 { min-height: auto !important; padding-top: 110px !important; }
  .hero-portrait-wrap { max-width: 450px; }
}

@media (max-width: 575.98px) {
  .section-padding { padding: 64px 0; }
  .display-2 { font-size: 3.5rem; }
  .hero-portrait-wrap { padding: .35rem; }
  .portrait-caption { font-size: .7rem; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
}