/* ===================================================================
   PAGES PROJET — style partagé (dark theme, cohérent avec index)
   =================================================================== */
:root {
  --color-bg:#0a0e16;--color-bg-alt:#0d1320;--color-surface:#121927;
  --color-surface-2:#1a2333;--color-border:#232e42;--color-text:#eaeef5;
  --color-text-muted:#8b95ac;--color-accent:#34e0c4;
  --color-accent-dim:rgba(52,224,196,.12);--color-accent-2:#ff8a4c;
  --font-display:"Space Grotesk",sans-serif;--font-body:"Manrope",sans-serif;
  --font-mono:"JetBrains Mono",monospace;--radius:14px;--radius-sm:8px;
  --transition:220ms ease;--max-width:1100px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---- Nav ---- */
.pnav{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,14,22,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border);padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;height:68px}
.pnav-logo{font-family:var(--font-mono);font-size:.95rem}
.pnav-logo span{color:var(--color-accent)}
.pnav-back{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;
  color:var(--color-text-muted);border:1px solid var(--color-border);
  padding:8px 16px;border-radius:999px;transition:border-color var(--transition),color var(--transition)}
.pnav-back:hover{border-color:var(--color-accent);color:var(--color-accent)}

/* ---- Conteneur ---- */
.proj-wrap{max-width:var(--max-width);margin:0 auto;padding:100px 32px 80px}

/* ---- Header ---- */
.proj-header{text-align:center;margin-bottom:56px}
.proj-eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-accent);margin-bottom:16px}
.proj-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--color-accent);
  box-shadow:0 0 0 4px var(--color-accent-dim)}
.proj-title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.02em;margin-bottom:16px;
  line-height:1.1}
.proj-subtitle{color:var(--color-text-muted);max-width:680px;margin:0 auto 28px;font-size:1.05rem}
.proj-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.meta-badge{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--color-accent);background:var(--color-accent-dim);
  border-radius:999px;padding:6px 16px}

/* ---- Layout contenu ---- */
.proj-layout{display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:start}
@media(max-width:860px){.proj-layout{grid-template-columns:1fr}}

/* ---- Corps principal ---- */
.proj-section{margin-bottom:48px}
.proj-section h2{font-family:var(--font-display);font-size:1.45rem;font-weight:600;
  margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--color-border)}
.proj-section p{color:var(--color-text-muted);margin-bottom:14px;font-size:.97rem}
.proj-section img,.proj-section video{border-radius:var(--radius);margin:20px 0;
  border:1px solid var(--color-border);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
  transition:transform var(--transition)}
.proj-section img:hover{transform:scale(1.015)}

.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:20px 0}
.feature-card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:20px}
.feature-card i{color:var(--color-accent);font-size:1.4rem;margin-bottom:12px;display:block}
.feature-card h3{font-family:var(--font-display);font-size:1rem;font-weight:600;margin-bottom:6px}
.feature-card p{color:var(--color-text-muted);font-size:.88rem}

/* ---- Sidebar ---- */
.proj-sidebar{position:sticky;top:80px}
.sidebar-card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:24px;margin-bottom:20px}
.sidebar-card h3{font-family:var(--font-display);font-size:1rem;font-weight:600;
  margin-bottom:18px;color:var(--color-text)}
.tech-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tech-tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em;
  color:var(--color-accent);background:var(--color-accent-dim);border-radius:999px;padding:5px 12px}
.proj-links{display:flex;flex-direction:column;gap:10px}
.proj-link{display:inline-flex;align-items:center;gap:10px;
  background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);padding:12px 16px;font-size:.88rem;font-weight:600;
  transition:border-color var(--transition),color var(--transition)}
.proj-link:hover{border-color:var(--color-accent);color:var(--color-accent)}
.proj-link i{color:var(--color-accent);font-size:1rem}
.sidebar-card p{color:var(--color-text-muted);font-size:.88rem;margin-bottom:8px}

/* ---- Bouton retour bas de page ---- */
.proj-back{text-align:center;margin-top:64px;padding-top:40px;border-top:1px solid var(--color-border)}
.back-btn{display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--color-border);border-radius:999px;padding:12px 24px;
  font-size:.9rem;font-weight:600;transition:border-color var(--transition),color var(--transition)}
.back-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}