:root {
  --bg:      #1C1E22;
  --surface: #23262B;
  --surface2:#2A2D33;
  --text:    #DDDBD6;
  --muted:   #999;
  --border:  #2E3138;
  --ocre:    #C8A86C;
  --cyan:    #5BC8C0;
  --violet:  #9B8EC4;
  --fs-body: 0.95rem;
  --lh-body: 1.8;
  --fs-card: 0.85rem;
  --lh-card: 1.7;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Syne',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; font-size:18px; }

html { font-size:18px; }

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 3rem;
  background:rgba(28,30,34,0.92);
  border-bottom:0.5px solid var(--border);
  backdrop-filter:blur(8px);
}
.nav-logo {
  font-family:'DM Mono',monospace;
  font-size:1rem; letter-spacing:0.08em;
  color:var(--ocre); cursor:pointer;
}
.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a {
  font-size:0.82rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--muted); cursor:pointer; transition:color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--text); }
.nav-dot {
  width:5px; height:5px; border-radius:50%;
  display:inline-block; margin-right:6px;
  opacity:0; transition:opacity 0.2s;
}
.nav-links a.active .nav-dot { opacity:1; }
#nav-home .nav-dot { background:var(--ocre); }
#nav-portfolio .nav-dot { background:var(--cyan); }
#nav-about .nav-dot { background:var(--violet); }
#nav-home.active { color:var(--ocre) !important; }
#nav-portfolio.active { color:var(--cyan) !important; }
#nav-about.active { color:var(--violet) !important; }
.lang-toggle {
  font-family:'DM Mono',monospace; font-size:0.72rem; letter-spacing:0.15em;
  background:none; border:0.5px solid var(--border); color:var(--muted);
  padding:0.25rem 0.6rem; cursor:pointer; transition:color 0.2s, border-color 0.2s;
}
.lang-toggle:hover { color:var(--text); border-color:var(--muted); }

/* PAGES */
.page { display:none; padding-top:60px; min-height:100vh; }
.page.active { display:block; }

/* BG PATTERN — vertices 3D + connexions */
.bg-pattern {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:1;
}

/* ===== PAGE 1 ===== */

.hero {
  position:relative; z-index:1;
  min-height:calc(100vh - 60px);
  display:grid; grid-template-columns:1fr 1fr;
}
.hero-left {
  display:flex; flex-direction:column; justify-content:center;
  padding:5rem 4rem 5rem 5rem;
}
.hero-name {
  font-family:'DM Mono',monospace;
  font-size:2rem; letter-spacing:0em; text-transform:uppercase;
  color:var(--ocre); margin-bottom:0.4rem;
}
.hero-tag {
  font-family:'DM Mono',monospace;
  font-size:0.82rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ocre); margin-bottom:1.5rem;
}
.hero-title {
  font-size:clamp(2.8rem,4.5vw,4.4rem);
  font-weight:500; line-height:1.1;
  color:var(--text); margin-bottom:1rem;
}
.hero-title span { color:var(--cyan); }
.hero-title em { font-style:normal; color:var(--violet); }
.hero-sub {
  font-size:var(--fs-body); line-height:var(--lh-body); color:var(--muted);
  max-width:420px; margin-bottom:2.5rem;
  font-weight:300;
}
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-p {
  padding:0.85rem 2rem;
  background:var(--cyan); color:var(--bg);
  font-size:0.85rem; letter-spacing:0.15em; text-transform:uppercase;
  border:none; cursor:pointer; font-family:'Syne',sans-serif;
  font-weight:500; transition:background 0.2s;
}
.btn-p:hover { background:var(--violet); }
.btn-s {
  padding:0.85rem 2rem;
  background:transparent; color:var(--muted);
  font-size:0.85rem; letter-spacing:0.15em; text-transform:uppercase;
  border:0.5px solid var(--border); cursor:pointer; font-family:'Syne',sans-serif;
  transition:all 0.2s;
}
.btn-s:hover { border-color:var(--cyan); color:var(--cyan); }

.hero-right {
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:3rem;
}
.hero-visual {
  width:100%; max-width:420px;
  display:flex; flex-direction:column; gap:0.6rem;
}
.hv-card {
  background:var(--surface);
  border:0.5px solid var(--border);
  padding:1.2rem 1.5rem;
  display:flex; align-items:center; gap:1rem;
  transition:border-color 0.3s;
  cursor:default;
}
.hv-card:hover { border-color:var(--cyan); }
.hv-num {
  font-family:'DM Mono',monospace;
  font-size:0.65rem; color:var(--muted); min-width:20px;
}
.hv-title { font-size:0.82rem; font-weight:500; color:var(--text); }
.hv-tag {
  margin-left:auto; font-family:'DM Mono',monospace;
  font-size:0.6rem; padding:2px 8px;
  border:0.5px solid; border-radius:2px;
}
.t-ocre { color:var(--ocre); border-color:var(--ocre); }
.t-cyan { color:var(--cyan); border-color:var(--cyan); }
.t-violet { color:var(--violet); border-color:var(--violet); }

/* SECTION */
.section { position:relative; z-index:1; padding:6rem 5rem; }
.s-label {
  font-family:'DM Mono',monospace;
  font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:0.8rem;
}
.s-title {
  font-size:clamp(2rem,2.8vw,2.8rem); font-weight:500;
  color:var(--text); margin-bottom:3rem; line-height:1.2;
}

/* OFFRES */
.offres { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:0.5px solid var(--border); }
.offre {
  padding:2.5rem 2rem; border-right:0.5px solid var(--border);
  position:relative; overflow:hidden; transition:background 0.3s;
}
.offre:last-child { border-right:none; }
.offre:hover { background:var(--surface); }
.offre-n {
  font-family:'DM Mono',monospace;
  font-size:0.78rem; color:var(--muted); margin-bottom:1.2rem;
}
.offre-title { font-size:1.05rem; font-weight:500; color:var(--text); margin-bottom:0.8rem; }
.offre-desc { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--muted); margin-bottom:1.5rem; font-weight:300; }
.offre-tags { display:flex; flex-wrap:wrap; gap:0.4rem; }
.otag {
  font-family:'DM Mono',monospace;
  font-size:0.7rem; letter-spacing:0.08em;
  padding:3px 9px; border:0.5px solid var(--border); color:var(--muted);
}
.offre-bar {
  position:absolute; bottom:0; left:0; right:0; height:2px;
  transform:scaleX(0); transform-origin:left; transition:transform 0.3s;
}
.offre:hover .offre-bar { transform:scaleX(1); }
.bar-ocre { background:var(--ocre); }
.bar-cyan { background:var(--cyan); }
.bar-violet { background:var(--violet); }

/* CONTACT */
.contact-s {
  position:relative; z-index:1;
  background:var(--surface); padding:6rem 5rem;
  border-top:0.5px solid var(--border);
  display:grid; grid-template-columns:1fr 1fr; gap:5rem;
}
.contact-s h2 { font-size:2.2rem; font-weight:500; color:var(--text); margin-bottom:1rem; line-height:1.2; }
.contact-s p { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--muted); font-weight:300; }
.contact-link {
  display:inline-flex; align-items:center; gap:0.4rem;
  margin-top:1.5rem; color:var(--cyan); font-family:'DM Mono',monospace;
  font-size:0.85rem; text-decoration:none; letter-spacing:0.1em;
}
.cform { display:flex; flex-direction:column; gap:1rem; }
.fg { display:flex; flex-direction:column; gap:0.3rem; }
.fg label { font-family:'DM Mono',monospace; font-size:0.6rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); }
.fg input, .fg textarea, .fg select {
  background:var(--bg); border:0.5px solid var(--border);
  padding:0.7rem 1rem; color:var(--text);
  font-family:'Syne',sans-serif; font-size:0.82rem;
  outline:none; transition:border-color 0.2s; resize:none;
}
.fg input:focus, .fg textarea:focus { border-color:var(--cyan); }
.fg select option { background:var(--surface); }
.btn-send {
  padding:0.8rem 1.8rem; background:var(--violet); color:var(--bg);
  font-family:'Syne',sans-serif; font-size:0.72rem;
  letter-spacing:0.15em; text-transform:uppercase;
  border:none; cursor:pointer; align-self:flex-start;
  transition:background 0.2s; font-weight:500;
}
.btn-send:hover { background:var(--cyan); }

/* ===== PAGE 2 PORTFOLIO ===== */
.port-header {
  position:relative; z-index:1;
  padding:3.5rem 5rem 2rem;
  border-bottom:0.5px solid var(--border);
  display:flex; align-items:flex-end; justify-content:space-between;
}
.port-header h1 { font-size:2.5rem; font-weight:500; color:var(--text); }
.port-header small {
  font-family:'DM Mono',monospace; font-size:0.65rem; color:var(--muted);
}
.filters {
  position:relative; z-index:1;
  display:flex; gap:0.4rem; flex-wrap:wrap;
  padding:1.5rem 5rem; border-bottom:0.5px solid var(--border);
}
.fb {
  font-family:'DM Mono',monospace;
  padding:0.4rem 1rem; font-size:0.65rem; letter-spacing:0.1em;
  text-transform:uppercase; border:0.5px solid var(--border);
  background:transparent; color:var(--muted); cursor:pointer;
  transition:all 0.2s;
}
.fb:hover, .fb.active { background:var(--surface2); color:var(--text); border-color:var(--cyan); }
.pgrid {
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr);
  padding:3rem 5rem; gap:1.5rem;
}
.ptile {
  background:var(--surface); border:0.5px solid var(--border);
  cursor:pointer; transition:border-color 0.3s, transform 0.3s;
  overflow:hidden;
}
.ptile:not(.ptile-wip):hover { border-color:var(--cyan); transform:translateY(-3px); }
.ptile-vis { height:200px; position:relative; overflow:hidden; }
.ptile-vis svg { width:100%; height:100%; }
.ptile-body { padding:1.2rem; }
.ptile-year {
  font-family:'DM Mono',monospace; font-size:0.6rem;
  color:var(--muted); margin-bottom:0.4rem;
}
.ptile-name { font-size:0.9rem; font-weight:500; color:var(--text); margin-bottom:0.4rem; }
.ptile-desc { font-size:var(--fs-card); line-height:var(--lh-card); color:var(--muted); margin-bottom:0.8rem; font-weight:300; }
.ptile-tags { display:flex; gap:0.3rem; flex-wrap:wrap; }
.ptag {
  font-family:'DM Mono',monospace; font-size:0.58rem;
  padding:2px 6px; border:0.5px solid var(--border); color:var(--muted);
}
.study-b {
  position:absolute; top:0.8rem; right:0.8rem;
  font-family:'DM Mono',monospace; font-size:0.58rem;
  background:var(--violet); color:var(--bg);
  padding:2px 8px; letter-spacing:0.05em;
}

/* ===== PAGE 3 À PROPOS ===== */
.about-header {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 2fr; gap:4rem; align-items:start;
  padding:4rem 5rem 4rem;
  border-bottom:0.5px solid var(--border);
}
.about-header-left { display:flex; flex-direction:column; gap:1.2rem; }
.about-header-left-bottom {
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start;
}
.about-header h1 { font-size:clamp(1.8rem,2.8vw,2.8rem); font-weight:500; line-height:1.15; }
.about-header h1 .a-cyan { color:var(--cyan); }
.about-header h1 .a-violet { color:var(--violet); }
.about-header-sub { display:flex; flex-direction:column; justify-content:center; height:100%; }
.about-header-sub p { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--muted); font-weight:300; margin-bottom:0.7rem; }
.about-header-sub p:last-child { margin-bottom:0; }

.about-portrait {
  position:relative; width:150px; aspect-ratio:3/4;
  border:0.5px solid var(--border);
  clip-path:inset(0); transform:translateZ(0);
  overflow:hidden; flex-shrink:0;
}

.about-content {
  position:relative; z-index:1;
  padding:4rem 5rem 3rem;
}
.parcours-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.parcours-grid > div > .s-label { margin-bottom:1.2rem; }

/* Skills catégories */
.skills { display:flex; flex-direction:column; gap:1.2rem; }
.skill-cat { display:flex; flex-direction:column; gap:0.5rem; }
.skill-cat-label {
  font-family:'DM Mono',monospace; font-size:0.6rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
}

/* Timeline */
.timeline { display:flex; flex-direction:column; }
.tl-item {
  display:grid; grid-template-columns:90px 1fr; gap:1rem;
  padding:0.8rem 0; border-bottom:0.5px solid var(--border);
}
.tl-item:last-child { border-bottom:none; }
.tl-year {
  font-family:'DM Mono',monospace; font-size:0.6rem;
  color:var(--muted); padding-top:0.18rem; line-height:1.4; white-space:nowrap;
}
.tl-body { display:flex; flex-direction:column; gap:0.15rem; }
.tl-title { font-size:var(--fs-card); font-weight:500; color:var(--text); }
.tl-detail { font-size:0.75rem; color:var(--muted); font-weight:300; line-height:1.5; }
.tl-current .tl-title { color:var(--ocre); }
.tl-edu .tl-title { color:var(--violet); }
.skills { margin-top:1.5rem; display:flex; flex-direction:column; gap:1.2rem; }
.skill-cat { display:flex; flex-direction:column; gap:0.5rem; }
.skill-cat-label {
  font-family:'DM Mono',monospace; font-size:0.62rem;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--muted); margin-bottom:0.1rem;
}
.ski {
  display:flex; justify-content:space-between; align-items:center;
  padding:0.6rem 0; border-bottom:0.5px solid var(--border);
  font-size:0.78rem;
}
.ski-n { color:var(--muted); font-weight:300; }
.dots { display:flex; gap:4px; }
.dot { width:5px; height:5px; border-radius:50%; background:var(--border); }
.dot.on { background:var(--cyan); }
.dot.on2 { background:var(--violet); }

.val-cards { display:flex; flex-direction:column; gap:0.8rem; }
.val-card {
  background:var(--surface); border:0.5px solid var(--border);
  padding:1rem 1.2rem; border-left:2px solid;
}
.val-card.vc1 { border-left-color:var(--ocre); }
.val-card.vc2 { border-left-color:var(--cyan); }
.val-card.vc3 { border-left-color:var(--violet); }
.val-card h4 { font-size:0.78rem; font-weight:500; color:var(--text); margin-bottom:0.3rem; }
.val-card p { font-size:var(--fs-card); color:var(--muted); line-height:var(--lh-card); font-weight:300; }

/* Galerie maker */
.maker-s { position:relative; z-index:1; padding:0 5rem 5rem; }
.maker-layout {
  display:grid; grid-template-columns:1fr 2fr; gap:3rem;
  margin-top:2rem;
}
.maker-left { display:flex; flex-direction:column; gap:0; }
.mgrid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:170px 170px 170px;
  gap:0.6rem;
}
.mtile {
  position:relative; overflow:hidden;
  background:var(--surface); border:0.5px solid var(--border);
  transition:border-color 0.3s;
}
.mtile:hover { border-color:var(--violet); }
.mtile:first-child { grid-column:span 2; grid-row:span 2; }
.mtile:last-child { grid-column:span 2; grid-row:span 1; }
.mtile svg { width:100%; height:100%; }
.mlabel {
  position:absolute; bottom:0.6rem; left:0.8rem;
  font-family:'DM Mono',monospace; font-size:0.58rem;
  color:var(--muted); background:rgba(28,30,34,0.85);
  padding:2px 8px; letter-spacing:0.08em;
}

/* FOOTER */
footer {
  position:relative; z-index:1;
  background:var(--surface); padding:1.5rem 5rem;
  display:flex; justify-content:space-between; align-items:center;
  border-top:0.5px solid var(--border);
}
footer span { font-family:'DM Mono',monospace; font-size:0.65rem; color:var(--muted); }
footer .fdot { color:var(--cyan); }

/* RESPONSIVE */
@media(max-width:768px){
  nav { padding:1rem 1.5rem; }
  .nav-links { gap:1rem; }
  .hero { grid-template-columns:1fr; }
  .hero-left { padding:3rem 1.5rem 2rem; }
  .hero-right { padding:2rem 1.5rem; }
  .section { padding:3rem 1.5rem; }
  .offres { grid-template-columns:1fr; }
  .offre { border-right:none; border-bottom:0.5px solid var(--border); }
  .contact-s { grid-template-columns:1fr; gap:2.5rem; padding:3rem 1.5rem; }
  .port-header { padding:2.5rem 1.5rem 1.5rem; flex-direction:column; align-items:flex-start; gap:0.5rem; }
  .filters { padding:1rem 1.5rem; }
  .pgrid { grid-template-columns:1fr; padding:2rem 1.5rem; }
  .about-header { grid-template-columns:1fr; padding:3rem 1.5rem 2rem; gap:2rem; }
  .about-portrait { width:80px; }
  .about-content { padding:3rem 1.5rem 2rem; }
  .parcours-grid { grid-template-columns:1fr; gap:2.5rem; }
  .maker-s { padding:0 1.5rem 3rem; }
  .maker-layout { grid-template-columns:1fr; }
  .mgrid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .mtile:first-child { grid-column:span 2; }
  footer { padding:1.5rem; flex-direction:column; gap:0.3rem; }
}

/* ===== MODAL PROJET ===== */
.pmodal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.85);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 0.25s;
}
.pmodal-overlay.open { opacity:1; pointer-events:all; }
.pmodal {
  position:relative;
  background:var(--surface); border:0.5px solid var(--border);
  width:90vw; max-width:920px; max-height:88vh;
  overflow-y:auto; padding:3rem;
  transform:translateY(24px);
  transition:transform 0.25s;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.pmodal-overlay.open .pmodal { transform:translateY(0); }
.pmodal-close {
  position:absolute; top:1.2rem; right:1.5rem;
  background:none; border:none; color:var(--muted);
  font-size:1.4rem; cursor:pointer; line-height:1; padding:0;
  transition:color 0.2s;
}
.pmodal-close:hover { color:var(--text); }
.pmodal-header { margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:0.5px solid var(--border); }
.pmodal-year { font-family:'DM Mono',monospace; font-size:0.62rem; color:var(--muted); margin-bottom:0.4rem; }
.pmodal-name { font-size:1.8rem; font-weight:500; color:var(--text); margin-bottom:0.8rem; }
.pmodal-section-label {
  font-family:'DM Mono',monospace; font-size:0.62rem;
  color:var(--ocre); letter-spacing:0.12em; text-transform:uppercase; margin-bottom:0.8rem;
}
/* Galerie mosaïque */
.pmodal-gallery {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:0.4rem; margin-bottom:2rem;
}
.pmodal-gallery:empty { display:none; }
.gallery-img {
  width:100%; aspect-ratio:16/9; object-fit:cover;
  cursor:zoom-in; display:block;
  transition:opacity 0.2s, transform 0.2s;
}
.gallery-img:first-child:last-child { aspect-ratio:16/7; }
.gallery-img:hover { opacity:0.8; transform:scale(1.01); }
/* Vidéo */
.pmodal-video { margin-bottom:2rem; }
.pmodal-video:empty { display:none; }
.pmodal-video video { width:100%; display:block; background:#000; }

/* Description */
.pmodal-desc { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--muted); font-weight:300; margin-bottom:2rem; }
.pmodal-desc p { margin-bottom:0.8rem; }
.pmodal-desc strong { color:var(--text); font-weight:500; }
.pmodal-desc ul { padding-left:1.2rem; margin-bottom:0.8rem; }
.pmodal-desc li { margin-bottom:0.3rem; }
/* Tech */
.pmodal-tech { margin-bottom:2rem; }
.tech-tags { display:flex; gap:0.4rem; flex-wrap:wrap; }
.tech-tag {
  font-family:'DM Mono',monospace; font-size:0.62rem;
  padding:3px 10px; border:0.5px solid var(--border);
  color:var(--muted); background:var(--surface2);
}
/* Liens */
.pmodal-links { margin-bottom:0.5rem; }
.pmodal-links-list { display:flex; gap:0.6rem; flex-wrap:wrap; }
.plink {
  font-family:'DM Mono',monospace; font-size:0.62rem; letter-spacing:0.05em;
  padding:0.4rem 1rem; border:0.5px solid var(--border);
  color:var(--muted); text-decoration:none;
  transition:all 0.2s;
}
.plink:hover { color:var(--text); border-color:var(--cyan); }
.plink-github:hover { border-color:var(--violet); color:var(--violet); }
.plink-youtube:hover { border-color:var(--ocre); color:var(--ocre); }

/* ===== LIGHTBOX ===== */
.lightbox {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,0.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 0.2s;
}
.lightbox.open { opacity:1; pointer-events:all; }
#lb-img { max-width:90vw; max-height:90vh; object-fit:contain; }
.lb-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--muted);
  font-size:3rem; cursor:pointer; padding:1rem 1.5rem;
  transition:color 0.2s; user-select:none; line-height:1;
}
.lb-nav:hover { color:var(--text); }
.lb-prev { left:0; }
.lb-next { right:0; }

@media(max-width:700px) {
  .pmodal { padding:2rem 1.5rem; width:100vw; max-height:100vh; }
  .pmodal-name { font-size:1.4rem; }
  .pmodal-gallery { grid-template-columns:1fr 1fr; }
}

@media(max-width:480px) {
  nav { padding:0.8rem 1rem; }
  .nav-logo { font-size:0.7rem; letter-spacing:0.06em; }
  .nav-links { gap:0.6rem; }
  .nav-links a { font-size:0.72rem; letter-spacing:0.06em; }
}