/* ============================================
   PMCHS — Styles spécifiques : microbiote
   ============================================ */

:root {
      --navy: #0D1B2E;
      --navy2: #1A3A5C;
      --teal: #4A9ECA;
      --teal-dark: #1A6B6B;
      --gold: #C8A96E;
      --white: #F0F4F8;
      --text-muted: #8BA3BC;
      --border: rgba(74,158,202,0.15);
      --card-bg: rgba(26,58,92,0.5);
      --red: #c0392b;
      --red-dim: rgba(192,57,43,0.12);
      --green-dim: rgba(39,174,96,0.12);
      --green: #27ae60;
      --plain-bg: rgba(120,80,200,0.08);
      --plain-border: rgba(160,120,240,0.30);
      --plain-color: #b89eee;
      --accent: #4A9ECA;
      --accent-soft: #7dbfe0;
    }

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
      background: var(--navy);
      color: var(--white);
      font-family: 'Source Sans 3', sans-serif;
      font-size: 16px;
      line-height: 1.7;
    }

/* ── Language visibility ── */
    .lang-fr, .lang-en { display: block; }

/* ── Layout ── */
    .wrapper { max-width:820px; margin:0 auto; padding:0 24px; }

/* ── Hero ── */
    .hero {
      padding: 116px 0 48px;
      border-bottom: 1px solid var(--border);
    }

.hero-eyebrow {
      font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
      color:var(--teal); margin-bottom:16px;
    }

.hero h1 {
      font-family:'Playfair Display',Georgia,serif;
      font-size:clamp(2rem,5vw,3rem);
      font-weight:700; line-height:1.15;
      color:var(--white); margin-bottom:20px;
    }

.hero h1 em { font-style:italic; color:var(--teal); font-weight:400; }

.hero-lead {
      font-size:1.05rem; color:var(--text-muted);
      max-width:660px; line-height:1.8;
    }

/* ── Section nav ── */
    .section-nav {
      display:flex; flex-wrap:wrap; gap:8px;
      padding:24px 0; border-bottom:1px solid var(--border);
    }

.section-nav a {
      font-size:0.78rem; padding:5px 14px;
      border:1px solid var(--border); border-radius:99px;
      color:var(--text-muted); text-decoration:none;
      transition:all 0.2s;
    }

.section-nav a:hover { border-color:var(--teal); color:var(--teal); }

/* ── Main ── */
    main { padding:48px 0 80px; }

section { margin-bottom:56px; }

section:last-child { margin-bottom:0; }

.section-anchor { scroll-margin-top:80px; }

h2 {
      font-family:'Playfair Display',Georgia,serif;
      font-size:26px; font-weight:600;
      color:var(--white); margin-bottom:20px;
      padding-bottom:12px; border-bottom:1px solid var(--border);
    }

h2 .num {
      font-family:'Source Sans 3',sans-serif;
      font-size:0.68rem; font-weight:600;
      letter-spacing:0.16em; text-transform:uppercase;
      color:var(--teal); display:block; margin-bottom:6px;
    }

h3 {
      font-size:1rem; font-weight:600;
      color:var(--teal); margin:24px 0 10px;
      letter-spacing:0.02em;
    }

p { margin-bottom:14px; font-size:15px; line-height:1.85; color:var(--text-muted); }

p:last-child { margin-bottom:0; }

p strong, li strong { color:var(--white); font-weight:600; }

/* ── Cards ── */
    .card {
      background: var(--card-bg);
      border:1px solid var(--border);
      border-radius:10px;
      padding:20px 24px;
      margin-bottom:16px;
    }

.card.teal { border-color:rgba(74,158,202,0.4); background:rgba(74,158,202,0.08); }

.card.gold { border-color:rgba(200,169,110,0.4); background:rgba(200,169,110,0.08); }

.card.alert { border-color:rgba(192,57,43,0.4); background:var(--red-dim); }

.card.green { border-color:rgba(39,174,96,0.4); background:var(--green-dim); }

.card.plain { border-color:var(--plain-border); background:var(--plain-bg); }

.card-label {
      font-size:0.66rem; letter-spacing:0.16em;
      text-transform:uppercase; font-weight:600;
      margin-bottom:10px;
    }

.card.teal .card-label { color:var(--teal); }

.card.gold .card-label { color:var(--gold); }

.card.alert .card-label { color:#e74c3c; }

.card.green .card-label { color:var(--green); }

.card.plain .card-label { color:var(--plain-color); }

.card.plain p { font-size:0.97rem; line-height:1.8; }

/* ── Loop diagram ── */
    .loop {
      display:flex; flex-direction:column; gap:0;
      border:1px solid var(--border); border-radius:10px;
      overflow:hidden; margin:20px 0;
    }

.loop-step {
      display:flex; align-items:center; gap:16px;
      padding:14px 20px;
      border-bottom:1px solid var(--border);
    }

.loop-step:last-child { border-bottom:none; }

.loop-step:nth-child(even) { background:rgba(255,255,255,0.02); }

.loop-num {
      width:28px; height:28px; border-radius:50%;
      background:var(--teal); color:var(--navy);
      font-size:0.78rem; font-weight:700;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
    }

.loop-arrow {
      font-size:1.2rem; color:var(--teal); flex-shrink:0;
    }

.loop-body { flex:1; font-size:0.95rem; }

.loop-body strong { color:var(--teal); }

/* ── Strain table ── */
    .table-wrap { overflow-x:auto; margin:16px 0; }

table { width:100%; border-collapse:collapse; font-size:0.9rem; }

thead tr { background:rgba(26,58,92,0.8); }

th {
      text-align:left; padding:10px 14px;
      font-size:0.68rem; letter-spacing:0.1em;
      text-transform:uppercase; color:var(--teal);
      border-bottom:1px solid var(--border);
      font-weight:600;
    }

td {
      padding:10px 14px;
      border-bottom:1px solid var(--border);
      vertical-align:top; color:var(--white);
    }

tr:last-child td { border-bottom:none; }

tr:nth-child(even) td { background:rgba(255,255,255,0.02); }

.badge-ok  { color:var(--green); font-weight:600; }

.badge-no  { color:#e74c3c; font-weight:600; }

/* ── Grid ── */
    .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0; }

@media(max-width:580px) { .grid-2 { grid-template-columns:1fr; } }

/* ── Mech flow ── */
    .mech-flow { display:flex; flex-direction:column; gap:0; margin:16px 0; }

.mech-step { display:flex; align-items:flex-start; gap:14px; }

.mech-col { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:28px; }

.mech-dot { width:10px; height:10px; border-radius:50%; background:var(--teal); margin-top:6px; }

.mech-line { width:2px; flex:1; background:rgba(74,158,202,0.25); min-height:16px; }

.mech-body { flex:1; padding-bottom:14px; font-size:0.95rem; }

.mech-body strong { color:var(--teal); }

/* ── Cross-link ── */
    .crosslink {
      display:inline-flex; align-items:center; gap:6px;
      font-size:0.85rem; color:var(--teal);
      text-decoration:none;
      border:1px solid rgba(74,158,202,0.3);
      border-radius:99px; padding:5px 14px;
      transition:all 0.2s; margin-top:8px;
    }

.crosslink:hover { background:rgba(74,158,202,0.1); }

/* ── References ── */
    .ref-list { list-style:none; counter-reset:refs; font-size:13.5px; line-height:1.6; color:var(--text-muted); }

.ref-list li { counter-increment:refs; padding:8px 0 8px 36px; position:relative; border-bottom:1px solid var(--border); }

.ref-list li:last-child { border-bottom:none; }

.ref-list li::before { content:counter(refs)"."; position:absolute; left:0; top:8px; color:var(--teal); font-size:0.75rem; font-weight:600; }

.ref-list a { color:var(--teal); text-decoration:none; }

.ref-list a:hover { text-decoration:underline; }

/* ── Hypothesis box ── */
    .hypothesis-box {
      background:linear-gradient(135deg,rgba(74,158,202,0.08) 0%,rgba(13,27,46,0.9) 100%);
      border:1px solid rgba(74,158,202,0.3);
      border-radius:10px; padding:24px; margin-top:24px;
    }

.hypothesis-box .hyp-title {
      font-size:0.68rem; letter-spacing:0.16em;
      text-transform:uppercase; color:var(--teal);
      font-weight:600; margin-bottom:12px;
    }



cite { font-style:normal; font-size:0.76rem; color:var(--text-muted); vertical-align:super; }

/* TOPBAR */
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: 56px;
    background: rgba(13, 27, 46, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(74, 158, 202, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
  }

.topbar-left {
    display: flex;
    align-items: center;
    gap: 24px;
  }

.nav-logo {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    flex-shrink: 0;
  }

.nav-links {
    display: flex;
    gap: 16px;
  }

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }

.lang-toggle {
    display: flex;
    gap: 6px;
  }

.lang-btn {
    padding: 5px 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.2s;
  }

.lang-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
  }

.lang-btn:hover:not(.active) {
    border-color: var(--accent-soft);
    color: var(--accent-soft);
  }

/* HAMBURGER */
  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
  }

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-muted);
    border-radius: 2px;
    transition: all 0.3s;
  }

/* MOBILE MENU */
  .mobile-menu {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 199;
    background: rgba(13, 27, 46, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px;
    flex-direction: column;
    gap: 4px;
  }

/* PAGE TOP PADDING */
  .hero { padding-top: 116px !important; }

body > .container:first-of-type { padding-top: 72px; }

@media (max-width: 700px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
  }