:root{
    --bg:#0A0A0C;
    --bg-rgb:10,10,12;
    --panel: rgba(255,255,255,0.045);
    --panel-border: rgba(255,255,255,0.10);
    --ink:#F6F6F3;
    --ink-soft:#9A9AA1;
    --line: rgba(255,255,255,0.10);
    --accent:#57BEE2;
    --accent-rgb:95,240,199;
  }

  /* ---------- LIGHT THEME (suit automatiquement les réglages système) ---------- */
  @media (prefers-color-scheme: light){
    :root{
      --bg:#F6F6F3;
      --bg-rgb:246,246,243;
      --panel: rgba(10,10,12,0.04);
      --panel-border: rgba(10,10,12,0.12);
      --ink:#0A0A0C;
      --ink-soft:#6B6B72;
      --line: rgba(10,10,12,0.12);
      --accent:#1C90B4;
      --accent-rgb:28,144,180;
    }
    #cursor-dot{background:#000000;}
    #cursor-ring{border-color:#000000;}
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}

  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    cursor:none;
    overflow-x:hidden;
  }
  body.has-touch{cursor:auto;}

  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.06em;
    text-transform:uppercase;
    font-size:0.7rem;
    color:var(--ink-soft);
  }

  h1,h2,h3{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    line-height:1.02;
    letter-spacing:-0.02em;
  }

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

  /* ---------- CUSTOM CURSOR (difference blend) ---------- */
  #cursor-dot, #cursor-ring{
    position:fixed; top:0; left:0;
    pointer-events:none;
    z-index:999;
    border-radius:50%;
    transform:translate(-50%,-50%);
    will-change:transform;
    mix-blend-mode:difference;
  }
  #cursor-dot{width:6px; height:6px; background:#ffffff;}
  #cursor-ring{width:34px; height:34px; border:1px solid #ffffff; transition:width .25s,height .25s;}
  #cursor-ring.hover{width:64px; height:64px;}
  body.has-touch #cursor-dot, body.has-touch #cursor-ring{display:none;}

  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(var(--bg-rgb),0.72);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 40px; max-width:1440px; margin:0 auto;
  }
  .logo{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1rem; letter-spacing:0.01em;}
  .logo span{color:var(--accent);}
  .nav-links{display:flex; gap:36px;}
  .nav-links a{
    font-family:'IBM Plex Mono', monospace; font-size:0.7rem;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);
    transition:color .2s;
  }
  .nav-links a:hover{color:var(--accent);}

  /* ---------- STAGE (sticky 3D + scrolling content) ---------- */
  .stage{
    display:grid;
    grid-template-columns:1fr 1fr;
    max-width:1440px;
    margin:0 auto;
    position:relative;
  }
  .content-col{padding-top:160px; padding-left:96px; min-width:0;}
  .scene-col{
    position:sticky;
    top:0;
    height:100vh;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  #bg-canvas{width:100%; height:100%; display:block;}
  .scene-caption{
    position:absolute;
    bottom:56px; left:50%;
    transform:translateX(-50%);
    text-align:center;
  }
  .scene-caption .act-num{color:var(--accent); font-size:0.85rem;}
  .scene-caption .act-label{margin-top:6px; font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:1.15rem; color:var(--ink);}

  /* thread rail — sits in the content-col gutter, never under the text */
  .rail{
    position:fixed;
    left:max(40px, calc((100vw - 1440px)/2 + 40px));
    top:50%; transform:translateY(-50%);
    z-index:90;
  }
  .rail-line{width:1px; height:220px; background:var(--line); position:relative;}
  .rail-fill{position:absolute; top:0; left:0; width:1px; background:var(--accent); height:0%; transition:height .1s linear;}
  .rail-dots{position:absolute; top:0; left:-3px; height:100%; width:7px; display:flex; flex-direction:column; justify-content:space-between;}
  .rail-dots span{width:7px; height:7px; border-radius:50%; background:var(--bg); border:1px solid var(--line); transition:background .3s,border-color .3s;}
  .rail-dots span.active{background:var(--accent); border-color:var(--accent);}

  /* ---------- SECTIONS ---------- */
  .section{
    padding:56px 64px 56px 0;
    max-width:600px;
  }
  .section-inner{
    background:var(--panel);
    backdrop-filter:blur(10px);
    padding:36px 38px;
    border:1px solid var(--panel-border);
    border-radius:4px;
  }
  .hero-inner{background:transparent; border:none; padding:0;}

  .section-head{display:flex; align-items:baseline; gap:14px; margin-bottom:26px;}
  .section-head h2{font-size:1.9rem;}

  /* HERO */
  .hero-panel{padding-top:0; padding-bottom:120px; min-height:88vh; display:flex; align-items:center;}
  .hero-panel .tag{margin-bottom:24px; display:flex; align-items:center; gap:10px;}
  .hero-panel .tag .dot{width:6px; height:6px; background:var(--accent); border-radius:50%; display:inline-block; box-shadow:0 0 12px rgba(var(--accent-rgb),0.8);}
  .hero-panel h1{font-size:clamp(2.2rem, 4.2vw, 3.4rem);}
  .hero-panel h1 span{color:var(--accent);}
  .hero-panel p.lede{margin-top:26px; max-width:480px; font-size:1.02rem; color:var(--ink-soft);}
  .hero-meta{margin-top:54px; display:grid; grid-template-columns:repeat(2,1fr); gap:22px 20px; border-top:1px solid var(--line); padding-top:22px;}
  .hero-meta .val{font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:1.15rem; margin-top:5px;}

  /* SKILLS */
  .skill-row{display:grid; grid-template-columns:38px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);}
  .skill-row:last-child{border-bottom:none;}
  .skill-row .num{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--accent);}
  .skill-row h4{font-weight:600; font-size:0.96rem; margin-bottom:5px;}
  .skill-row p{font-size:0.86rem; color:var(--ink-soft);}

  /* CASE STUDY */
  .case-intro p{color:var(--ink-soft); font-size:0.95rem; margin-bottom:22px;}
  .spec-table{border-top:1px solid var(--line);}
  .spec-row{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-family:'IBM Plex Mono', monospace; font-size:0.72rem;}
  .spec-row span:first-child{color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap;}
  .spec-row span:last-child{color:var(--ink); text-align:right;}
  .case-note{margin-top:18px; font-family:'IBM Plex Mono', monospace; font-size:0.66rem; color:var(--ink-soft); display:flex; align-items:center; gap:8px;}
  .case-note .dot{width:5px; height:5px; background:var(--accent); border-radius:50%;}

  /* SERVICES */
  .service-item{padding:18px 0; border-bottom:1px solid var(--line);}
  .service-item:last-child{border-bottom:none;}
  .service-item h4{font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:1.2rem; margin-bottom:6px;}
  .service-item p{font-size:0.85rem; color:var(--ink-soft);}

  /* CONTACT */
  .contact-panel{min-height:70vh; display:flex; align-items:center;}
  .contact-inner h2{font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:26px;}
  .contact-links{display:flex; flex-direction:column; gap:13px;}
  .contact-links a{
    font-family:'IBM Plex Mono',monospace; font-size:0.85rem; letter-spacing:0.02em;
    border-bottom:1px solid var(--ink); padding-bottom:3px; width:fit-content;
    transition:color .2s, border-color .2s;
  }
  .contact-links a:hover{color:var(--accent); border-color:var(--accent);}

  .legal-content ul{margin:0 0 14px 20px; color:var(--ink-soft); font-size:0.94rem;}
  .legal-content li{margin-bottom:6px;}

  footer{
    padding:28px 40px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between;
    font-family:'IBM Plex Mono',monospace; font-size:0.66rem; color:var(--ink-soft);
    position:relative; z-index:5; background:var(--bg);
  }

  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  @media (max-width: 1040px){
    .content-col{padding-left:56px;}
    .section{max-width:520px; padding-right:40px;}
  }

  @media (max-width: 860px){
    body{cursor:auto;}
    #cursor-dot,#cursor-ring{display:none;}
    .rail{display:none;}
    nav{padding:18px 22px;}
    .nav-links{display:none;}
    .stage{grid-template-columns:1fr; max-width:100%;}
    .scene-col{ order:-1; position:static; height:52vh; margin-top:64px; }
    .content-col{padding-top:20px; padding-left:0;}
    .section{padding:36px 22px; max-width:100%;}
    .hero-panel{min-height:auto; padding-bottom:40px;}
    .hero-meta{grid-template-columns:repeat(2,1fr);}
  }

/* ============================================================
   SHARED SUB-PAGE COMPONENTS (travaux.html / experience.html)
   ============================================================ */

.case-link{
  display:inline-block;
  margin-top:16px;
  color:var(--accent);
  letter-spacing:0.05em;
  transition:opacity .2s;
}
.case-link:hover{opacity:0.7;}

/* simple page header for sub-pages (no 3D scene) */
.page-header{
  max-width:1440px;
  margin:0 auto;
  padding:190px 40px 70px;
  border-bottom:1px solid var(--line);
}
.page-header .mono{margin-bottom:18px; display:block;}
.page-header h1{font-size:clamp(2.2rem, 5vw, 3.6rem);}
.page-header p{margin-top:20px; max-width:560px; color:var(--ink-soft); font-size:1.02rem;}

.page-body{
  max-width:1440px;
  margin:0 auto;
  padding:70px 40px 100px;
}

/* ---------------- TRAVAUX: work card grid ---------------- */
.work-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:2px;
  background:var(--line);
  border:1px solid var(--line);
}
.work-card{
  background:var(--bg);
  padding:36px;
  min-height:340px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:background .25s;
}
.work-card:hover{background:var(--panel);}
.work-card .work-visual{
  width:100%;
  height:160px;
  border:1px dashed var(--panel-border);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  position:relative;
  overflow:hidden;
}
.work-card .work-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.work-card .work-visual:empty::before{
  content:'MOCKUP';
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.08em;
  color:var(--ink-soft);
}
.work-card .work-visual:empty::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, transparent 48%, var(--panel-border) 49%, var(--panel-border) 51%, transparent 52%);
  opacity:0.5;
}
.work-card .work-tag{color:var(--accent); margin-bottom:10px; display:block;}
.work-card h3{font-size:1.5rem; margin-bottom:8px;}
.work-card p{color:var(--ink-soft); font-size:0.9rem; margin-bottom:18px;}
.work-card .work-meta{
  display:flex; justify-content:space-between;
  font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--ink-soft);
  border-top:1px solid var(--line); padding-top:14px;
}

@media (max-width: 860px){
  .work-grid{grid-template-columns:1fr;}
  .page-header{padding:140px 22px 50px;}
  .page-body{padding:50px 22px 70px;}
}

/* ---------------- EXPERIENCE: CV timeline ---------------- */
.timeline{
  position:relative;
  max-width:820px;
  padding-left:40px;
}
.timeline::before{
  content:'';
  position:absolute;
  left:5px; top:6px; bottom:6px;
  width:1px;
  background:var(--line);
}
.timeline-entry{
  position:relative;
  padding-bottom:56px;
}
.timeline-entry:last-child{padding-bottom:0;}
.timeline-entry::before{
  content:'';
  position:absolute;
  left:-40px; top:4px;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--accent);
}
.timeline-entry .t-date{margin-bottom:8px; display:block;}
.timeline-entry .t-tag{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.64rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:20px;
  padding:3px 10px;
  margin-bottom:12px;
}
.timeline-entry h3{font-size:1.5rem; margin-bottom:4px;}
.timeline-entry .t-org{color:var(--ink-soft); font-size:0.92rem; margin-bottom:12px;}
.timeline-entry p{color:var(--ink-soft); font-size:0.9rem; max-width:560px;}

@media (max-width: 860px){
  .timeline{padding-left:30px;}
  .timeline::before{left:4px;}
  .timeline-entry::before{left:-30px;}
}

/* ---------------- PAGE LOADER ---------------- */
body.loading{ overflow:hidden; }

#loader{
  position:fixed; inset:0; z-index:1000;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px;
  transition:opacity .6s ease;
}
#loader .loader-ring{
  width:38px; height:38px;
  border:1px solid var(--line);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:loader-spin 0.85s linear infinite;
}
#loader .loader-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
#loader .loader-label span{color:var(--accent);}
@keyframes loader-spin{ to{ transform:rotate(360deg); } }

body.loaded #loader{opacity:0; pointer-events:none;}