/* --- Luuse / Figures — vivid graphic style --- */

:root{
    --pad: 22px;
    --max: 1120px;
  
    /* couleurs vives */
    --bg: #07070c;
    --ink: #f7f7ff;
  
    --a: #00D4FF;   /* cyan */
    --b: #FF2BD6;   /* magenta */
    --c: #A6FF00;   /* acid green */
    --d: #FF7A00;   /* orange */
    --e: #7B5CFF;   /* violet */
  
    --line: rgba(255,255,255,.12);
    --glass: rgba(255,255,255,.06);
    --glass2: rgba(255,255,255,.10);
    --shadow: 0 18px 60px rgba(0,0,0,.45);
  }
  
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    overflow-x:hidden;
  }
  
  /* fond graphique : halos */
  body::before{
    content:"";
    position:fixed;
    inset:-20vh;
    z-index:-1;
    background:
      radial-gradient(900px 600px at 10% 10%, rgba(255,43,214,.35), transparent 60%),
      radial-gradient(900px 600px at 90% 25%, rgba(0,212,255,.30), transparent 60%),
      radial-gradient(900px 600px at 20% 85%, rgba(166,255,0,.22), transparent 60%),
      radial-gradient(900px 600px at 80% 90%, rgba(123,92,255,.20), transparent 60%);
    filter: blur(2px);
  }
  
  /* grain léger */
  body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    opacity:.08;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    pointer-events:none;
  }
  
  a{
    color:inherit;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-decoration-color: rgba(255,255,255,.35);
  }
  a:hover{ text-decoration-color: rgba(255,255,255,.9); }
  
  img, iframe{
    max-width:100%;
    display:block;
    border-radius: 22px;
  }
  
  /* ----- Header / Hero ----- */
  .hero{
    max-width: var(--max);
    margin: 0 auto;
    padding: calc(var(--pad) * 2.2) var(--pad) var(--pad);
    display:grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--pad);
    align-items:start;
  }
  
  .kicker{
    display:inline-flex;
    gap:10px;
    align-items:center;
    padding: 8px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0,212,255,.16), rgba(255,43,214,.12));
    border: 1px solid var(--line);
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size:12px;
    opacity:.95;
    width: fit-content;
  }
  .kicker::before{
    content:"";
    width:10px; height:10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, var(--b));
    box-shadow: 0 0 18px rgba(255,43,214,.6);
  }
  
  h1{
    font-size: clamp(44px, 7vw, 84px);
    line-height: .92;
    margin: .35em 0 .15em;
    letter-spacing:-0.02em;
  }
  .lede{
    font-size: 18px;
    max-width: 54ch;
    opacity:.92;
  }
  
  .tags{
    list-style:none;
    padding:0;
    margin: 18px 0 10px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .tags li{
    border-radius: 999px;
    padding: 7px 12px;
    font-size:12px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(8px);
  }
  .tags li:nth-child(1){ border-color: rgba(0,212,255,.55); }
  .tags li:nth-child(2){ border-color: rgba(255,43,214,.55); }
  .tags li:nth-child(3){ border-color: rgba(166,255,0,.50); }
  .tags li:nth-child(4){ border-color: rgba(255,122,0,.50); }
  
  .hero__media{
    background: linear-gradient(135deg, rgba(0,212,255,.14), rgba(123,92,255,.10));
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 12px;
    box-shadow: var(--shadow);
  }
  .hero__media img{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
  }
  .hero__media figcaption{
    font-size: 12px;
    opacity:.78;
    margin-top: 10px;
  }
  
  /* ----- nav sticky (projection-friendly) ----- */
  .navbar{
    position: sticky;
    top: 10px;
    z-index: 5;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
  }
  .navbar__inner{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(10,10,18,.55);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
  }
  .navbar__brand{
    display:flex;
    gap:10px;
    align-items:center;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.04);
  }
  .pill a{
    text-decoration:none;
    opacity:.9;
    font-size: 13px;
  }
  .pill a:hover{ opacity:1; }
  
  .section{
    max-width: var(--max);
    margin: 0 auto;
    padding: 54px var(--pad);
  }
  
  .section h2{
    font-size: 30px;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
  }
  
  /* section alternée */
  .section--alt{
    border-top: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00));
  }
  
  .grid2{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: var(--pad);
    align-items:start;
  }
  
  .box{
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    padding: 16px 16px 14px;
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }
  .box h3{ margin:0 0 10px; font-size: 16px; }
  .box p{ margin:0; opacity:.9; }
  
  .facts{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    margin: 0 0 14px;
  }
  .facts div{
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    border-radius: 16px;
    padding: 12px;
  }
  .facts dt{
    opacity:.75;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
  }
  .facts dd{ margin: 6px 0 0; font-weight: 600; }
  
  /* ----- projects ----- */
  .project{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pad);
    padding: 26px 0;
    border-top: 1px solid rgba(255,255,255,.10);
  }
  .project:first-of-type{ border-top:none; }
  
  .project__media{
    position:relative;
    border-radius: 26px;
    padding: 12px;
    background:
      radial-gradient(400px 240px at 20% 10%, rgba(0,212,255,.18), transparent 60%),
      radial-gradient(400px 240px at 80% 90%, rgba(255,43,214,.14), transparent 60%),
      rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow);
  }
  .project__media::after{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.12);
    pointer-events:none;
  }
  .project__text h3{
    margin:0 0 10px;
    font-size: 22px;
  }
  .meta{ opacity:.75; font-weight: 500; }
  .bullets{ margin: 0 0 10px; padding-left: 18px; opacity:.92; }
  .links a{ text-decoration:none; }
  .links a::after{ content:" ↗"; opacity:.75; }
  
  .badge{
    display:inline-block;
    margin-left: 8px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
  }
  
  /* refs */
  .refs{ padding-left: 18px; }
  .refs li{ margin: 8px 0; }
  
  .footer{
    max-width: var(--max);
    margin: 0 auto;
    padding: 26px var(--pad) 70px;
    opacity:.85;
    border-top: 1px solid rgba(255,255,255,.10);
  }
  
  /* responsive */
  @media (max-width: 900px){
    .hero{ grid-template-columns: 1fr; }
    .grid2{ grid-template-columns: 1fr; }
    .project{ grid-template-columns: 1fr; }
    .navbar__inner{ gap: 12px; }
  }