:root{
  --bg: #060a12;
  --bg-2:#0b1220;
  --ink:#d7e3ff;
  --muted:#95a3c0;
  --accent:#2b77ff;
  --accent-2:#00b3ff;
  --card:#0e1626;
  --glass: rgba(10,16,28,.55);
  --ring: 0 0 0 1px rgba(43,119,255,.25), 0 10px 35px rgba(0,179,255,.07);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 80% -10%, #0d1a33 0%, var(--bg) 45%, #04070d 100%);
  color:var(--ink);
  font: 16px/1.5 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{color:inherit;text-decoration:none}

/* ===== NAV ===== */
.nav{
  position: absolute; inset: 0 0 auto 0; height:72px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2rem; z-index:4;
}
.brand{font-weight:700; letter-spacing:.3px}
.brand .accent{color:var(--accent)}

.nav__links{display:flex; gap:1.2rem; list-style:none; margin:0; padding:0}
.nav__links a{
  padding:.4rem .7rem; border-radius:.6rem; color:var(--muted);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.nav__links a:hover{
  color:var(--ink);
  background:rgba(255,255,255,.05);
  transform: translateY(-2px);
}

/* ===== HERO ===== */
.hero{
  --tiltX:0deg; --tiltY:0deg;
  position: relative; min-height: 92vh; isolation:isolate;
  background-image: url("hero.png");
  background-size: cover; background-position: center right;
  transform: perspective(1200px) rotateX(var(--tiltX)) rotateY(var(--tiltY));
  transition: transform .2s ease-out;
}
.hero::after{
  /* halo bleu en bord droit pour s'accorder à la photo sombre */
  content:""; position:absolute; inset:0;
  background: radial-gradient(900px 400px at 85% 35%, rgba(16,114,255,.18), transparent 60%);
  pointer-events:none;
}
.hero__scrim{
  position:absolute; inset:0;
  /* gradient pour s’assurer que le texte soit lisible à droite */
  background:
    linear-gradient(90deg, rgba(6,10,18,.65) 0%, rgba(6,10,18,.35) 35%, rgba(6,10,18,.25) 55%, rgba(6,10,18,.65) 100%);
  z-index:1;
}

.hero__content{
  position: relative; z-index:3;
  display:flex; flex-direction:column; gap:1.1rem;
  align-items:flex-end; text-align:right;
  padding: 9rem 5vw 4rem;
  max-width: 1200px; margin: 0 auto;
}
.eyebrow{color:var(--muted); text-transform:uppercase; letter-spacing:.16em; font-size:.8rem}
.hero h1{
  font-size: clamp(1.9rem, 2.4vw + 1.2rem, 3.4rem);
  line-height:1.15; margin:0; font-weight:700;
  text-shadow: 0 1px 0 #0008;
}
.glow{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
}
.mini-bio{max-width: 55ch; color:#c4d1f3}
.cta-row{display:flex; gap:.8rem; justify-content:flex-end}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.75rem 1rem; border-radius:.8rem;
  border:1px solid transparent; position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn--primary{
  background:linear-gradient(135deg, rgba(43,119,255,.15), rgba(0,179,255,.15));
  border-color:rgba(43,119,255,.35);
  box-shadow: var(--ring);
}
.btn--primary:hover{
  transform: translateY(-2px);
  background:linear-gradient(135deg, rgba(43,119,255,.22), rgba(0,179,255,.22));
}
.btn--ghost{
  color:var(--ink); border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.04);
}
.btn--ghost:hover{
  transform: translateY(-2px);
  background:rgba(255,255,255,.07);
}

.scroll-hint{
  position:absolute; left:50%; bottom:1.4rem; translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  color:var(--muted); font-size:.85rem; z-index:3; opacity:.9;
  transition: opacity .2s ease;
}
.scroll-hint:hover{opacity:1}
.scroll-hint svg{width:22px; height:22px; fill:currentColor}

/* ===== TEASERS ===== */
.section{padding: 4.5rem 5vw}
.grid{
  display:grid; gap:1.2rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 960px){
  .grid{grid-template-columns: 1fr}
  .hero__content{align-items:flex-start; text-align:left}
}

.card{
  position:relative; background:linear-gradient(180deg, rgba(17,27,46,.85), rgba(12,19,34,.85));
  border:1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 1.2rem 1.2rem 1rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  overflow:hidden; transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.card::before{
  /* lueur au suivi du survol */
  content:""; position:absolute; inset:-1px;
  background: radial-gradient(400px 120px at var(--mx,50%) var(--my,50%), rgba(0,179,255,.18), transparent 60%);
  filter: blur(20px); opacity:0; transition: opacity .25s ease;
  pointer-events:none;
}
.card:hover{
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(0,179,255,.35);
  box-shadow: 0 18px 60px rgba(0,179,255,.10);
}
.card:hover::before{opacity:1}

.card__icon{
  width:52px; height:52px; display:grid; place-items:center;
  border-radius:14px; margin-bottom:.6rem;
  background:linear-gradient(135deg, rgba(43,119,255,.15), rgba(0,179,255,.15));
  border:1px solid rgba(43,119,255,.35);
}
.card__icon svg{width:26px; height:26px; fill:#b9cdfa}
.card h3{margin:.2rem 0 .25rem; font-size:1.1rem}
.card p{margin:0; color:var(--muted)}
.card__cta{
  display:inline-block; margin-top:.8rem; font-weight:600; letter-spacing:.02em;
  color:#b9cdfa;
}

/* curseur lumineux contextuel sur cartes (sans lib) */
.card{
  --mx:50%; --my:50%;
}
.card:hover{cursor:pointer}
.card:where(:hover, :focus-visible){
  outline:none;
}
.card:focus-visible{box-shadow: 0 0 0 3px rgba(43,119,255,.4)}

/* ===== FOOTER ===== */
.footer{
  padding:2rem 5vw; color:var(--muted); text-align:center; border-top:1px solid rgba(255,255,255,.06);
}

/* petite amélioration d’accessibilité au clavier */
a:focus-visible{
  outline: 3px solid rgba(0,179,255,.6);
  outline-offset: 2px;
}

/* interaction : suivre la souris pour l’éclairage des cartes */
.grid .card{position:relative}
.grid.added-interaction .card{} /* hook possible */


/* ==== PAGE PROFIL ==== */
.sub-hero{
  background: var(--bg-2);
  text-align: center;
  padding: 3rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sub-hero h1{
  font-size: 2rem;
  font-weight: 700;
}

.about{
  max-width: 900px;
  margin: 3rem auto;
  padding: 0 1rem;
  line-height: 1.7;
  color: var(--ink);
}

/* ==== SKILLS ==== */
.skills{
  background: var(--bg-2);
  padding: 3rem 1rem;
}
.skills h2{
  text-align: center;
  margin-bottom: 2rem;
}
.skills-grid{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.skill-card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  padding: 1rem;
  border-radius: 14px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.skill-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--ring);
}
.skill-card h3{
  margin: 0 0 .8rem;
  color: var(--accent);
  font-size: 1.1rem;
}
.tags{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.tags span{
  background: rgba(43,119,255,.15);
  color: #b9cdfa;
  padding: .3rem .6rem;
  border-radius: 8px;
  font-size: .85rem;
  transition: background .25s ease;
}
.tags span:hover{
  background: rgba(0,179,255,.25);
}

/* ==== INTERESTS ==== */
.interests{
  padding: 3rem 1rem;
}
.interests h2{
  text-align: center;
  margin-bottom: 2rem;
}
.interest-cards{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.interest-card{
  background: linear-gradient(135deg, rgba(43,119,255,.15), rgba(0,179,255,.15));
  padding: .8rem 1.2rem;
  border-radius: 10px;
  color: var(--ink);
  border: 1px solid rgba(43,119,255,.35);
  transition: transform .25s ease, background .25s ease;
}
.interest-card:hover{
  transform: scale(1.05);
  background: linear-gradient(135deg, rgba(43,119,255,.25), rgba(0,179,255,.25));
}

/* Tilt hero */
.hero { transform: perspective(1200px) rotateX(var(--tiltX, 0)) rotateY(var(--tiltY, 0)); transform-style: preserve-3d; }

/* Reveal au scroll */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* Curseur "magnétique" déjà géré en JS, pas besoin d'autre CSS */