/* ============================================================
   epigenetique.css — Code Caché
   Palette : #0d0f1a ardoise | #e040fb magenta | #18ffff cyan | #f3e5f5 texte
   Polices  : Outfit (display) + DM Serif Display (corps) + Fira Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;600;700;800;900&family=DM+Serif+Display:ital@0;1&family=Fira+Mono:wght@400;500&display=swap');

:root {
  --slate:   #0d0f1a;
  --slate2:  #131626;
  --slate3:  #1a1e33;
  --card:    #111428;
  --border:  #1e2440;
  --border2: #282e52;
  --mag:     #e040fb;
  --mag2:    #aa00ff;
  --mag3:    #ce93d8;
  --cyan:    #18ffff;
  --cyan2:   #00e5ff;
  --lime:    #76ff03;
  --gold:    #ffd740;
  --text:    #b0bec5;
  --text-hi: #f3e5f5;
  --muted:   #546e7a;
}

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

body {
  font-family: 'DM Serif Display', Georgia, serif;
  background: var(--slate);
  color: var(--text);
  line-height: 1.8;
  font-size: 1.02rem;
  overflow-x: hidden;
}

/* ── GEOMETRIC GRID OVERLAY ───────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(224,64,251,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,64,251,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none; z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  top: -150px; left: -150px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(224,64,251,.1), transparent 70%);
  border-radius: 50%;
  animation: mag-drift 14s ease-in-out infinite alternate;
  pointer-events: none; z-index: 0;
}
@keyframes mag-drift {
  0%  { transform: translate(0,0); }
  100%{ transform: translate(200px, 150px); }
}

/* ── PROGRESS BAR ─────────────────────────────── */
#progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--mag2), var(--mag), var(--cyan));
  z-index: 1000; box-shadow: 0 0 12px var(--mag);
  transition: width .1s linear;
}

/* ── NAV ──────────────────────────────────────── */
nav {
  position: fixed; top: 3px; left: 0; right: 0; z-index: 900;
  background: rgba(13,15,26,.95); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border2);
  display: flex; align-items: center; gap: 2px;
  padding: 0 32px; height: 54px; overflow-x: auto;
}
.nav-brand {
  font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 1rem;
  color: var(--mag); text-decoration: none; letter-spacing: .08em;
  text-transform: uppercase; margin-right: 24px; flex-shrink: 0;
}
nav a:not(.nav-brand) {
  font-family: 'Fira Mono', monospace; font-size: .67rem;
  color: var(--muted); text-decoration: none; padding: 5px 11px;
  border-radius: 4px; white-space: nowrap;
  transition: color .2s, background .2s; letter-spacing: .04em; text-transform: uppercase;
}
nav a:not(.nav-brand):hover, nav a.active {
  color: var(--cyan); background: rgba(24,255,255,.07);
}

/* ── HERO ─────────────────────────────────────── */
.hero {
  position: relative; padding: 116px 56px 76px;
  overflow: hidden; z-index: 1;
  border-bottom: 1px solid var(--border2);
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 85% 50%, rgba(224,64,251,.12), transparent),
    radial-gradient(ellipse 40% 50% at 5% 30%, rgba(24,255,255,.08), transparent);
  pointer-events: none;
}
/* Helix / DNA strand decoration */
.hero::after {
  content: '';
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 300px; background: var(--mag);
  border-radius: 3px; opacity: .15;
  box-shadow: 30px 0 0 var(--cyan), 60px 0 0 var(--mag), 90px 0 0 var(--cyan);
  pointer-events: none;
}

.hero-inner { max-width: 800px; position: relative; z-index: 2; }
.hero-code {
  font-family: 'Fira Mono', monospace; font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--mag); display: inline-block; margin-bottom: 20px;
  border: 1px solid rgba(224,64,251,.3); padding: 5px 16px; border-radius: 4px;
  background: rgba(224,64,251,.05);
}
.hero h1 {
  font-family: 'Outfit', sans-serif; font-weight: 900;
  font-size: clamp(3.2rem, 7.5vw, 7rem); line-height: .92;
  letter-spacing: -.02em; color: var(--text-hi); margin-bottom: 20px;
}
.hero h1 .mag   { color: var(--mag); }
.hero h1 .cyn   { color: var(--cyan); }
.hero .tagline  { font-size: 1.05rem; color: var(--text); max-width: 620px; line-height: 1.8; }

.kpi-strip {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px;
  padding-top: 28px; border-top: 1px solid var(--border2);
}
.kpi {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 10px; padding: 14px 20px; flex: 1; min-width: 130px;
  position: relative; overflow: hidden;
}
.kpi::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background: linear-gradient(90deg, var(--mag), var(--cyan)); }
.kpi .kv { font-family:'Outfit',sans-serif; font-weight:900; font-size:1.7rem; color:var(--mag); line-height:1; display:block; }
.kpi .kl { font-family:'Fira Mono',monospace; font-size:.62rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-top:4px; }

/* ── LAYOUT ───────────────────────────────────── */
.container { max-width: 1240px; margin: 0 auto; padding: 64px 40px; position: relative; z-index: 1; }
.two-col { display: grid; grid-template-columns: 1fr 300px; gap: 36px; }
@media (max-width: 940px) { .two-col { grid-template-columns: 1fr; } }

/* ── SECTIONS ─────────────────────────────────── */
.section { margin-bottom: 68px; opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.section.visible { opacity: 1; transform: none; }
.sec-tag { font-family:'Fira Mono',monospace; font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mag3); margin-bottom:8px; }
.section h2 {
  font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 2rem;
  color: var(--text-hi); padding-bottom: 14px;
  border-bottom: 1px solid var(--border2); margin-bottom: 22px; position: relative;
}
.section h2::after { content:''; position:absolute; bottom:-1px; left:0; height:2px; width:52px; background:var(--mag); }
.section h3 { font-family:'Outfit',sans-serif; font-weight:700; font-size:1.1rem; color:var(--cyan); margin:26px 0 10px; }

/* ── CARDS ────────────────────────────────────── */
.card { background:var(--card); border:1px solid var(--border2); border-radius:12px; padding:20px 24px; margin-bottom:16px; transition:border-color .2s, transform .2s; }
.card:hover { border-color:rgba(224,64,251,.4); transform:translateY(-2px); }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:18px 0; }

/* ── MECH TILES (mécanismes épigénétiques) ────── */
.mech-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:20px 0; }
.mech-tile {
  border-radius: 12px; padding: 20px; border: 1px solid; cursor: default;
  transition: transform .2s, box-shadow .2s;
}
.mech-tile:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.3); }
.mech-tile.methylation  { border-color:rgba(224,64,251,.35); background:rgba(224,64,251,.06); }
.mech-tile.histone      { border-color:rgba(24,255,255,.35);  background:rgba(24,255,255,.05);  }
.mech-tile.ncrna        { border-color:rgba(118,255,3,.35);   background:rgba(118,255,3,.04);   }
.mech-tile.chromatin    { border-color:rgba(255,215,64,.35);  background:rgba(255,215,64,.04);  }
.mech-icon { font-size:2rem; display:block; margin-bottom:10px; }
.mech-name { font-family:'Outfit',sans-serif; font-weight:800; font-size:1rem; color:var(--text-hi); margin-bottom:6px; }
.mech-tile.methylation .mech-name { color:var(--mag);  }
.mech-tile.histone     .mech-name { color:var(--cyan); }
.mech-tile.ncrna       .mech-name { color:var(--lime); }
.mech-tile.chromatin   .mech-name { color:var(--gold); }
.mech-desc { font-size:.85rem; color:var(--text); line-height:1.6; }

/* ── TAGS ─────────────────────────────────────── */
.tag { display:inline-block; padding:3px 10px; border-radius:4px; font-family:'Fira Mono',monospace; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.tag-mag  { background:rgba(224,64,251,.1); color:var(--mag);  border:1px solid rgba(224,64,251,.25); }
.tag-cyan { background:rgba(24,255,255,.1); color:var(--cyan); border:1px solid rgba(24,255,255,.25); }
.tag-lime { background:rgba(118,255,3,.08); color:var(--lime); border:1px solid rgba(118,255,3,.2);  }
.tag-gold { background:rgba(255,215,64,.08);color:var(--gold); border:1px solid rgba(255,215,64,.2); }

/* ── BOX ──────────────────────────────────────── */
.box { border-radius:10px; padding:14px 18px; margin:16px 0; border-left:4px solid; font-size:.96rem; }
.box-mag  { background:rgba(224,64,251,.05); border-color:var(--mag);  }
.box-cyan { background:rgba(24,255,255,.05); border-color:var(--cyan); }
.box-lime { background:rgba(118,255,3,.04);  border-color:var(--lime); }
.box-warn { background:rgba(255,215,64,.04); border-color:var(--gold); }

/* ── TABLE ────────────────────────────────────── */
table { width:100%; border-collapse:collapse; margin:14px 0; font-size:.92rem; }
th { background:var(--slate3); color:var(--cyan); font-family:'Fira Mono',monospace; font-size:.67rem; letter-spacing:.08em; text-transform:uppercase; padding:10px 14px; text-align:left; border-bottom:1px solid var(--border2); }
td { padding:10px 14px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:top; }
tr:hover td { background:rgba(224,64,251,.03); }

/* ── TIMELINE ─────────────────────────────────── */
.timeline { padding-left:30px; position:relative; }
.timeline::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:linear-gradient(to bottom, var(--mag), var(--cyan)); }
.tl-item { position:relative; margin-bottom:24px; }
.tl-item::before { content:''; position:absolute; left:-37px; top:5px; width:10px; height:10px; background:var(--mag); border-radius:50%; border:2px solid var(--slate); box-shadow:0 0 6px var(--mag); }
.tl-year  { font-family:'Fira Mono',monospace; font-size:.78rem; color:var(--mag); letter-spacing:.04em; }
.tl-title { font-family:'Outfit',sans-serif; font-weight:700; font-size:1rem; color:var(--text-hi); }
.tl-desc  { font-size:.9rem; color:var(--text); }

/* ── SIDEBAR ──────────────────────────────────── */
.sidebar { position:sticky; top:68px; }
.sb-card { background:var(--card); border:1px solid var(--border2); border-radius:12px; padding:18px 20px; margin-bottom:16px; }
.sb-card h3 { font-family:'Outfit',sans-serif; font-weight:800; font-size:.9rem; color:var(--mag); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.sb-toc a { display:block; padding:5px 8px; font-family:'Fira Mono',monospace; font-size:.67rem; color:var(--muted); text-decoration:none; border-radius:4px; transition:color .2s, background .2s; letter-spacing:.04em; }
.sb-toc a:hover, .sb-toc a.active { color:var(--mag); background:rgba(224,64,251,.07); }

ul { padding-left:22px; } li { margin:5px 0; }
ul li::marker { color:var(--mag); }
strong { color:var(--text-hi); font-weight:700; }
code { font-family:'Fira Mono',monospace; background:var(--slate3); color:var(--cyan); padding:2px 7px; border-radius:4px; font-size:.87em; }

#back-top { position:fixed; bottom:28px; right:28px; width:44px; height:44px; background:rgba(224,64,251,.15); border:1px solid var(--mag); color:var(--mag); border-radius:50%; cursor:pointer; font-size:1.2rem; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:800; }
#back-top.visible { opacity:1; pointer-events:auto; }
#back-top:hover { transform:translateY(-4px); background:rgba(224,64,251,.25); }

footer { border-top:1px solid var(--border); padding:28px 40px; text-align:center; color:var(--muted); font-family:'Fira Mono',monospace; font-size:.7rem; letter-spacing:.06em; position:relative; z-index:1; }

@media (max-width:768px) { .hero{padding:90px 22px 50px;} .container{padding:36px 18px;} nav{padding:0 14px;} }