/* ============================================================
   genetique.css — Blueprint Génomique
   Palette : #060c1f navy | #2563eb bleu électrique | #e879f9 magenta | #fbbf24 ambre
   Polices  : Syne (display) + EB Garamond (corps) + JetBrains Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --ink:     #060c1f;
  --ink2:    #0b1535;
  --ink3:    #101e48;
  --card:    #0a1230;
  --border:  #162050;
  --border2: #1e2e6a;
  --blue:    #2563eb;
  --blue2:   #3b82f6;
  --blue3:   #60a5fa;
  --magenta: #e879f9;
  --mag2:    #c026d3;
  --amber:   #fbbf24;
  --amber2:  #f59e0b;
  --teal:    #22d3ee;
  --red:     #f87171;
  --text:    #93a8d4;
  --text-hi: #e8eeff;
  --muted:   #3d5080;
  --grid:    rgba(37,99,235,.06);
}

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

body {
  font-family: 'EB Garamond', Georgia, serif;
  background: var(--ink);
  color: var(--text);
  line-height: 1.82;
  font-size: 1.05rem;
  overflow-x: hidden;
}

/* ── BLUEPRINT GRID ───────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, rgba(37,99,235,.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(232,121,249,.08) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(251,191,36,.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

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

/* ── NAV ──────────────────────────────────────── */
nav {
  position: fixed;
  top: 3px; left: 0; right: 0;
  z-index: 900;
  background: rgba(6,12,31,.96);
  backdrop-filter: blur(20px);
  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: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--blue3);
  text-decoration: none;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: 22px;
  flex-shrink: 0;
}
nav a:not(.nav-brand) {
  font-family: 'JetBrains Mono', monospace;
  font-size: .64rem;
  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(--blue3);
  background: rgba(37,99,235,.1);
}

/* ── HERO ─────────────────────────────────────── */
.hero {
  position: relative;
  padding: 116px 56px 80px;
  overflow: hidden;
  z-index: 1;
  border-bottom: 1px solid var(--border);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--magenta);
  border: 1px solid rgba(232,121,249,.3);
  padding: 5px 16px;
  border-radius: 4px;
  margin-bottom: 22px;
  background: rgba(232,121,249,.05);
}
.hero-eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--magenta);
  border-radius: 50%;
  animation: blink-gene 1.4s infinite;
}
@keyframes blink-gene { 0%,100%{ opacity:1; } 50%{ opacity:.2; } }

.hero h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(3.8rem, 8.5vw, 8rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--text-hi);
  margin-bottom: 20px;
}
.hero h1 .hi-blue { color: var(--blue3); }
.hero h1 .hi-mag  { color: var(--magenta); }

.hero p.lead {
  font-size: 1.1rem;
  color: var(--text);
  max-width: 640px;
  line-height: 1.82;
}

/* ── KPI STRIP ────────────────────────────────── */
.kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.kpi-box {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 14px 20px;
  flex: 1;
  min-width: 130px;
  position: relative;
  overflow: hidden;
}
.kpi-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--magenta));
}
.kpi-box .kv {
  font-family: 'Syne', sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--blue3);
  line-height: 1;
  display: block;
}
.kpi-box .kl {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  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: 70px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.section.visible { opacity: 1; transform: none; }

.sec-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 8px;
}
.section h2 {
  font-family: 'Syne', sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--text-hi);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border2);
  margin-bottom: 24px;
  position: relative;
  letter-spacing: -.01em;
}
.section h2::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  height: 2px; width: 52px;
  background: var(--blue);
}
.section h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--blue3);
  margin: 28px 0 10px;
}

/* ── CARDS ────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 14px;
  transition: border-color .25s, transform .25s;
}
.card:hover { border-color: rgba(37,99,235,.4); transform: translateY(-2px); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 13px;
  margin: 16px 0;
}

/* ── TAGS ─────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .63rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.tag-blue { background:rgba(37,99,235,.12); color:var(--blue3); border:1px solid rgba(37,99,235,.25); }
.tag-mag  { background:rgba(232,121,249,.1);color:var(--magenta);border:1px solid rgba(232,121,249,.22);}
.tag-amb  { background:rgba(251,191,36,.1); color:var(--amber);  border:1px solid rgba(251,191,36,.22);}
.tag-teal { background:rgba(34,211,238,.1); color:var(--teal);   border:1px solid rgba(34,211,238,.22);}
.tag-red  { background:rgba(248,113,113,.1);color:var(--red);    border:1px solid rgba(248,113,113,.22);}

/* ── BOX ──────────────────────────────────────── */
.box {
  border-radius: 8px;
  padding: 14px 18px;
  margin: 16px 0;
  border-left: 4px solid;
  font-size: .97rem;
}
.box-blue { background:rgba(37,99,235,.06);  border-color:var(--blue);    }
.box-mag  { background:rgba(232,121,249,.05);border-color:var(--magenta); }
.box-amb  { background:rgba(251,191,36,.05); border-color:var(--amber);   }
.box-warn { background:rgba(248,113,113,.05);border-color:var(--red);     }

/* ── CODE BLOCK ───────────────────────────────── */
.codon-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 6px;
  margin: 14px 0;
}
.codon {
  background: var(--ink3);
  border: 1px solid var(--border2);
  border-radius: 5px;
  padding: 6px 8px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
}
.codon .cod-seq { color: var(--blue3); font-weight: 700; display: block; }
.codon .cod-aa  { color: var(--amber); font-size: .65rem; }

/* ── TABLE ────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: .93rem;
}
th {
  background: var(--ink3);
  color: var(--blue3);
  font-family: 'JetBrains Mono', monospace;
  font-size: .64rem;
  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(37,99,235,.03); }

/* ── MENDEL CROSS ─────────────────────────────── */
.punnett {
  display: grid;
  grid-template-columns: 40px 1fr 1fr;
  grid-template-rows: 40px 1fr 1fr;
  gap: 3px;
  width: fit-content;
  margin: 16px auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: .85rem;
}
.punnett .ph { background: var(--ink3); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; width: 70px; height: 50px; color: var(--blue3); font-weight: 700; }
.punnett .pc { background: var(--card); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; width: 70px; height: 50px; color: var(--text-hi); }
.punnett .corner { width: 40px; height: 40px; }
.dom { color: var(--amber) !important; }

/* ── MUTATION TYPES ───────────────────────────── */
.mut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.mut-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 16px 18px;
  transition: transform .2s, border-color .2s;
}
.mut-card:hover { transform: translateY(-3px); }
.mut-card.substitution { border-top: 3px solid var(--blue2);   }
.mut-card.insertion    { border-top: 3px solid var(--magenta); }
.mut-card.deletion     { border-top: 3px solid var(--red);     }
.mut-card.inversion    { border-top: 3px solid var(--amber);   }
.mut-card.duplication  { border-top: 3px solid var(--teal);    }
.mut-name { font-family:'Syne',sans-serif; font-weight:700; font-size:1rem; color:var(--text-hi); margin-bottom:6px; }
.mut-desc { font-size:.86rem; color:var(--text); }

/* ── 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(--blue),var(--magenta)); }
.tl-item { position: relative; margin-bottom: 22px; }
.tl-item::before { content:''; position:absolute; left:-37px; top:6px; width:10px; height:10px; background:var(--blue2); border-radius:50%; border:2px solid var(--ink); box-shadow:0 0 8px var(--blue); }
.tl-year  { font-family:'JetBrains Mono',monospace; font-size:.76rem; color:var(--amber); letter-spacing:.04em; }
.tl-who   { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; 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:10px; padding:18px 20px; margin-bottom:14px; }
.sb-card h3 { font-family:'Syne',sans-serif; font-size:.9rem; font-weight:700; color:var(--blue3); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.sb-toc a { display:block; padding:5px 8px; font-family:'JetBrains Mono',monospace; font-size:.65rem; 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(--blue3); background:rgba(37,99,235,.1); }

ul { padding-left: 22px; }
li { margin: 5px 0; }
ul li::marker { color: var(--blue2); }
strong { color: var(--text-hi); font-weight: 600; }
code { font-family:'JetBrains Mono',monospace; background:var(--ink3); color:var(--blue3); padding:2px 7px; border-radius:3px; font-size:.87em; }
em { color: var(--text-hi); font-style: italic; }

#back-top { position:fixed; bottom:28px; right:28px; width:44px; height:44px; background:var(--ink3); color:var(--blue3); border:1px solid var(--border2); border-radius:4px; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s,transform .3s; z-index:800; font-family:'JetBrains Mono',monospace; }
#back-top.visible { opacity:1; pointer-events:auto; }
#back-top:hover { border-color:var(--blue2); transform:translateY(-4px); }

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

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