/* =========
   Styles — Portfolio BTS (original, non copié) — Yanis
   ========= */
:root{
  --bg: #0d0f12;
  --bg-alt: #12151a;
  --text: #e7eaee;
  --muted: #a7b0bb;
  --primary: #6aa7ff;
  --primary-600: #4e90ff;
  --card: #171b22;
  --border: #202630;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius: 14px;
  --wrap: min(1100px, 92vw);
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
}

.wrap { width: var(--wrap); margin-inline: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: #fff;
  padding: .5rem .75rem;
  border-radius: 8px;
}
.skip-link:focus{ left: 1rem; top: 1rem; z-index: 1000; }

/* Header */
.site-header{
  position: sticky; top: 0; z-index: 999;
  background: rgba(13,15,18,.8); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: .6rem 0; gap: .75rem; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:.2px; }
.brand-text{ font-size: 1rem; }
.site-nav ul{ list-style:none; display:flex; gap: 1rem; padding:0; margin:0; }
.site-nav a{ text-decoration:none; color: var(--muted); padding:.5rem .6rem; border-radius: 8px; }
.site-nav a:hover{ color: var(--text); background: #161a20; }

.nav-toggle{ display:none; width:42px; height:42px; border:1px solid var(--border); background:#12161d; border-radius:10px; color:var(--text); }
.nav-toggle-bar{ width: 20px; height: 2px; background: var(--text); display:block; margin: auto; box-shadow: 0 6px 0 var(--text), 0 -6px 0 var(--text); }

.theme-toggle{ border:1px solid var(--border); background:#12161d; border-radius:10px; padding:.5rem .6rem; color:var(--text); }

/* Sections */
.section{ padding: 80px 0; }
.section.alt{ background: var(--bg-alt); }
.hero{ padding-top: 96px; }
.hero-inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items:center; }
.hero-title{ font-size: clamp(2rem, 3.2vw, 3rem); margin: 0 0 .3rem; }
.hero-subtitle{ color: var(--muted); margin: 0 0 .5rem; }
.hero-desc{ max-width: 56ch; }

.hero-cta{ display:flex; gap: .8rem; margin-top: 1rem; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1rem; border-radius: 12px; text-decoration:none; border: 1px solid var(--border); color: var(--text); background: #12161d; }
.btn.primary{ background: var(--primary); border-color: var(--primary-600); color: #0b1017; font-weight: 700; }
.btn.primary:hover{ filter: brightness(1.05); }
.btn.ghost{ background: transparent; }
.btn.small{ padding: .5rem .7rem; font-size: .95rem; }

.hero-media{ justify-self:end; }
.avatar{ display:block; width: 200px; height: 200px; border-radius: 50%; border: 2px solid var(--border); box-shadow: var(--shadow); background: radial-gradient(80% 80% at 60% 30%, #2a3240, #12161d); }
.quick-facts{ list-style:none; padding:0; margin: 1rem 0 0; color: var(--muted); }
.quick-facts li{ margin: .25rem 0; }

.grid-2{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items:start; }

.card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.card-title{ margin-top:0; }

.keypoints{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;}
.facts{ display:grid; grid-template-columns: max-content 1fr; gap: .4rem .8rem; margin: .4rem 0 1rem; color: var(--muted); }
.facts dt{ color: var(--text); }

.skills{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.skill{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.skill h3{ margin-top: 0; font-size: 1.05rem; }
.skill ul{ margin: .4rem 0 0 1rem; }

.projects-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.project-card{ display:grid; grid-template-rows: 160px auto; background: var(--card); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.project-media{ background: radial-gradient(120% 80% at -10% -10%, #1f2630, #0f1217); border-bottom:1px solid var(--border); }
.project-content{ padding: 1rem; }
.project-content h3{ margin-top: 0; }
.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:.6rem 0 .6rem; }
.tags li{ font-size: .85rem; color: var(--muted); border: 1px solid var(--border); padding: .2rem .5rem; border-radius: 999px; }
.links{ display:flex; gap:.6rem; }
.links a{ color: var(--text); text-decoration:none; border-bottom: 1px dashed var(--primary-600); }

.timeline{ display:grid; gap: 1rem; }
.tl-item{ display:grid; grid-template-columns: 24px 1fr; gap: .8rem; align-items:start; }
.tl-dot{ width: 12px; height: 12px; border-radius: 50%; background: var(--primary); margin-top: .5rem; }
.tl-content .meta{ color: var(--muted); margin-top:.2rem; }

.veille-list{ list-style:none; padding:0; margin:0; display:grid; gap: 1rem; }
.veille-item{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.veille-item .meta{ color: var(--muted); }

.contact-form{ display:grid; gap:.8rem; }
.field{ display:grid; gap:.3rem; }
input, textarea{
  background:#12161d; color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:.7rem .8rem; width:100%;
}
input:focus, textarea:focus{ outline: 2px solid var(--primary-600); }

.contact-list{ list-style:none; padding:0; margin:0; color: var(--muted); }
.contact-list li{ margin: .4rem 0; }

.site-footer{ border-top: 1px solid var(--border); background: #0b0d10; }
.footer-inner{ padding: 1.2rem 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.6rem; }
.small{ color: var(--muted); font-size: .95rem; }

/* Reveal animations */
.reveal{ opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 980px){
  .hero-inner, .grid-2{ grid-template-columns: 1fr; }
  .hero-media{ justify-self: start; }
  .skills{ grid-template-columns: 1fr 1fr; }
  .projects-grid{ grid-template-columns: 1fr 1fr; }
  .site-nav{ display:none; position: absolute; right: .75rem; top: 60px; background:#0f1319; border:1px solid var(--border); padding:.5rem; border-radius:12px; }
  .site-nav.open{ display:block; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}
@media (max-width: 640px){
  .skills, .projects-grid{ grid-template-columns: 1fr; }
  .brand-text{ display:none; }
}
/* Dark/Light themes */
html[data-theme="light"]{
  --bg: #f7f8fb;
  --bg-alt: #ffffff;
  --text: #111318;
  --muted: #5c6773;
  --primary: #2a7cff;
  --primary-600: #2064cc;
  --card: #ffffff;
  --border: #e6e9ef;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}