/* ============================================================
   embryologie.css — Cahier Anatomique
   Palette : #120810 nuit bordeaux | #f5c842 or | #ffb3c6 rose chair | #c084fc lilas
   Polices  : Bodoni Moda (display) + Spectral (corps) + Fira Code
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,700;0,6..96,900;1,6..96,400;1,6..96,700&family=Spectral:ital,wght@0,400;0,600;1,400&family=Fira+Code:wght@400;500&display=swap');

:root {
  --ink:    #120810;
  --ink2:   #1d0f1a;
  --ink3:   #2a1628;
  --card:   #1a0d17;
  --border: #3a1f36;
  --border2:#4d2a48;
  --gold:   #f5c842;
  --gold2:  #d4a820;
  --rose:   #ffb3c6;
  --rose2:  #f472b6;
  --lilac:  #c084fc;
  --lilac2: #a855f7;
  --coral:  #fb7185;
  --sage:   #86efac;
  --text:   #c9a4bb;
  --text-hi:#f8eef4;
  --muted:  #6b4060;
}

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

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

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 15% 20%, rgba(245,200,66,.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 80%, rgba(192,132,252,.07) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(255,179,198,.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--lilac), var(--gold), var(--rose));
  z-index: 1000;
  transition: width .1s linear;
  box-shadow: 0 0 10px var(--gold);
}

nav {
  position: fixed;
  top: 3px; left: 0; right: 0;
  z-index: 900;
  background: rgba(18,8,16,.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: 'Bodoni Moda', serif;
  font-weight: 900;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold);
  text-decoration: none;
  margin-right: 22px;
  flex-shrink: 0;
}
nav a:not(.nav-brand) {
  font-family: 'Fira Code', monospace;
  font-size: .67rem;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 4px;
  white-space: nowrap;
  transition: color .2s, background .2s;
  text-transform: uppercase;
}
nav a:not(.nav-brand):hover, nav a.active {
  color: var(--gold);
  background: rgba(245,200,66,.08);
}

.hero {
  position: relative;
  padding: 116px 56px 80px;
  overflow: hidden;
  z-index: 1;
  border-bottom: 1px solid var(--border);
}
.hero::after {
  content: '';
  position: absolute;
  right: -80px; top: 50%;
  transform: translateY(-50%);
  width: 420px; height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(245,200,66,.08);
  box-shadow:
    0 0 0 40px rgba(245,200,66,.05),
    0 0 0 80px rgba(245,200,66,.03),
    0 0 0 130px rgba(192,132,252,.03);
  pointer-events: none;
  animation: embryo-pulse 8s ease-in-out infinite;
}
@keyframes embryo-pulse {
  0%,100%{ transform: translateY(-50%) scale(1); opacity:1; }
  50%    { transform: translateY(-50%) scale(1.04); opacity:.7; }
}

.hero-inner { max-width: 820px; position: relative; z-index: 2; }
.hero-eyebrow {
  font-family: 'Fira Code', monospace;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rose);
  border: 1px solid rgba(255,179,198,.25);
  padding: 5px 16px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 24px;
  background: rgba(255,179,198,.04);
}
.hero h1 {
  font-family: 'Bodoni Moda', serif;
  font-weight: 900;
  font-size: clamp(3rem, 7vw, 6.2rem);
  line-height: .92;
  color: var(--text-hi);
  margin-bottom: 20px;
}
.hero h1 em { color: var(--gold); font-style: italic; }
.hero p.lead { font-size: 1.08rem; color: var(--text); max-width: 620px; line-height: 1.82; font-style: italic; }

.stats-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.stat {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 14px 20px;
  flex: 1;
  min-width: 130px;
  position: relative;
  overflow: hidden;
}
.stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, var(--gold), var(--rose));
}
.stat .sv {
  font-family: 'Bodoni Moda', serif;
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  display: block;
}
.stat .sl {
  font-family: 'Fira Code', monospace;
  font-size: .62rem;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 4px;
}

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

.section {
  margin-bottom: 68px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.section.visible { opacity: 1; transform: none; }
.sec-label {
  font-family: 'Fira Code', monospace;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rose2);
  margin-bottom: 8px;
}
.section h2 {
  font-family: 'Bodoni Moda', serif;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--text-hi);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border2);
  margin-bottom: 24px;
  position: relative;
}
.section h2::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  height: 2px; width: 56px;
  background: var(--gold);
}
.section h3 {
  font-family: 'Bodoni Moda', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--rose);
  margin: 26px 0 10px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
  transition: border-color .25s, transform .25s;
}
.card:hover { border-color: rgba(245,200,66,.3); transform: translateY(-2px); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 18px 0; }

.stage-flow { display: flex; flex-direction: column; gap: 0; margin: 20px 0; position: relative; }
.stage-flow::before {
  content: '';
  position: absolute;
  left: 22px; top: 28px; bottom: 28px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), var(--lilac), var(--rose));
}
.stage { display: flex; gap: 18px; margin-bottom: 22px; align-items: flex-start; }
.stage-day {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fira Code', monospace;
  font-size: .7rem;
  position: relative; z-index: 1;
  border: 2px solid;
  text-align: center;
  line-height: 1.2;
}
.stage:nth-child(1) .stage-day { background: rgba(245,200,66,.12); border-color: var(--gold);   color: var(--gold);   }
.stage:nth-child(2) .stage-day { background: rgba(245,200,66,.10); border-color: var(--gold2);  color: var(--gold2);  }
.stage:nth-child(3) .stage-day { background: rgba(192,132,252,.1); border-color: var(--lilac2); color: var(--lilac2); }
.stage:nth-child(4) .stage-day { background: rgba(192,132,252,.1); border-color: var(--lilac);  color: var(--lilac);  }
.stage:nth-child(5) .stage-day { background: rgba(255,179,198,.1); border-color: var(--rose2);  color: var(--rose2);  }
.stage:nth-child(6) .stage-day { background: rgba(255,179,198,.1); border-color: var(--rose);   color: var(--rose);   }
.stage:nth-child(7) .stage-day { background: rgba(134,239,172,.1); border-color: var(--sage);   color: var(--sage);   }
.stage-name { font-family: 'Bodoni Moda', serif; font-weight: 700; color: var(--text-hi); font-size: 1.05rem; }
.stage-detail { font-size: .9rem; color: var(--text); margin-top: 3px; }

.box { border-radius: 10px; padding: 14px 18px; margin: 16px 0; border-left: 4px solid; font-size: .96rem; }
.box-gold  { background: rgba(245,200,66,.05); border-color: var(--gold);  }
.box-rose  { background: rgba(255,179,198,.05);border-color: var(--rose);  }
.box-lilac { background: rgba(192,132,252,.05);border-color: var(--lilac); }
.box-warn  { background: rgba(251,113,133,.05);border-color: var(--coral); }

.tag { display:inline-block; padding:3px 10px; border-radius:3px; font-family:'Fira Code',monospace; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.tag-gold  { background:rgba(245,200,66,.1);  color:var(--gold);  border:1px solid rgba(245,200,66,.25); }
.tag-rose  { background:rgba(255,179,198,.1); color:var(--rose2); border:1px solid rgba(255,179,198,.3); }
.tag-lilac { background:rgba(192,132,252,.1); color:var(--lilac); border:1px solid rgba(192,132,252,.25);}
.tag-sage  { background:rgba(134,239,172,.1); color:var(--sage);  border:1px solid rgba(134,239,172,.25);}

table { width:100%; border-collapse:collapse; margin:14px 0; font-size:.92rem; }
th { background:var(--ink3); color:var(--gold); font-family:'Fira Code',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(245,200,66,.02); }

.layer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0; }
@media (max-width:600px) { .layer-grid { grid-template-columns:1fr; } }
.layer-card { border-radius:12px; padding:18px; border:1px solid; }
.layer-card.ecto { background:rgba(192,132,252,.07); border-color:rgba(192,132,252,.3); }
.layer-card.meso { background:rgba(245,200,66,.06);  border-color:rgba(245,200,66,.3);  }
.layer-card.endo { background:rgba(255,179,198,.06); border-color:rgba(255,179,198,.3); }
.layer-card .lc-icon { font-size:1.8rem; display:block; margin-bottom:8px; }
.layer-card .lc-name { font-family:'Bodoni Moda',serif; font-weight:700; font-size:1rem; margin-bottom:6px; }
.layer-card.ecto .lc-name { color:var(--lilac); }
.layer-card.meso .lc-name { color:var(--gold);  }
.layer-card.endo .lc-name { color:var(--rose);  }
.layer-card .lc-list { font-size:.8rem; color:var(--text); line-height:1.55; }

.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(--gold),var(--lilac)); }
.tl-item { position:relative; margin-bottom:22px; }
.tl-item::before { content:''; position:absolute; left:-37px; top:7px; width:10px; height:10px; background:var(--gold); border-radius:50%; border:2px solid var(--ink); box-shadow:0 0 6px var(--gold); }
.tl-yr   { font-family:'Fira Code',monospace; font-size:.78rem; color:var(--rose2); }
.tl-who  { font-family:'Bodoni Moda',serif; font-weight:700; color:var(--text-hi); font-size:1rem; }
.tl-desc { font-size:.9rem; color:var(--text); }

.sidebar { position:sticky; top:68px; }
.sb-card { background:var(--card); border:1px solid var(--border2); border-radius:12px; padding:18px 20px; margin-bottom:14px; }
.sb-card h3 { font-family:'Bodoni Moda',serif; font-size:.9rem; font-weight:700; color:var(--gold); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.sb-toc a { display:block; padding:5px 8px; font-family:'Fira Code',monospace; font-size:.67rem; color:var(--muted); text-decoration:none; border-radius:4px; transition:color .2s,background .2s; }
.sb-toc a:hover, .sb-toc a.active { color:var(--gold); background:rgba(245,200,66,.07); }

ul { padding-left:22px; } li { margin:5px 0; } ul li::marker { color:var(--gold2); }
strong { color:var(--text-hi); }
code { font-family:'Fira Code',monospace; background:var(--ink3); color:var(--rose); padding:2px 7px; border-radius:4px; font-size:.87em; }

#back-top { position:fixed; bottom:28px; right:28px; width:44px; height:44px; background:rgba(245,200,66,.15); border:1px solid var(--gold); color:var(--gold); border-radius:50%; 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; }
#back-top.visible { opacity:1; pointer-events:auto; }
#back-top:hover { transform:translateY(-4px); }

footer { border-top:1px solid var(--border); padding:28px 40px; text-align:center; color:var(--muted); font-family:'Fira Code',monospace; font-size:.7rem; 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; } }