/* Base + thèmes par site */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=IBM+Plex+Mono&family=Cormorant+Garamond:ital,wght@0,400;0,600&family=Share+Tech+Mono&display=swap');

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.6;
  background: #0f0f0f;
  color: #888;
  font-family: 'IBM Plex Mono', monospace;
}
body .nav a { color: #6a6; }

a {
  color: inherit;
  text-decoration: none;
}
a:hover { text-decoration: underline; }

.nav { margin-bottom: 1.5rem; font-size: 12px; }
.nav a { margin-right: 1rem; }

.container { max-width: 640px; margin: 0 auto; padding: 2rem; }

.fragment {
  font-size: 11px;
  margin-top: 2rem;
  padding: 0.25rem 0;
  border-top: 1px dashed currentColor;
  opacity: 0.7;
}
.fragment code {
  background: rgba(0,0,0,0.2);
  padding: 0.1em 0.3em;
}

.site-img {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  margin: 1rem 0 1.5rem;
  border: 1px solid currentColor;
  opacity: 0.9;
}
.site-img.thumb { max-width: 200px; margin: 0.5rem 0 1rem; }
.section { margin: 2rem 0; }
.section-title { font-size: 0.85rem; margin-bottom: 0.75rem; opacity: 0.9; }
ul.services { list-style: none; padding-left: 0; }
ul.services li { margin: 0.5rem 0; padding-left: 1rem; border-left: 2px solid currentColor; opacity: 0.85; }
.footer-note { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid currentColor; font-size: 0.8rem; opacity: 0.7; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 520px) { .grid-2 { grid-template-columns: 1fr; } }
blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid currentColor; opacity: 0.9; font-style: italic; }
.disclaimer { font-size: 0.75rem; opacity: 0.6; margin-top: 1.5rem; }

/* ——— SITE 1 : Document officiel (passeports) ——— */
body.theme-doc {
  background: #e8e4df;
  color: #1a1a1a;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
body.theme-doc .nav a { color: #2c5282; }
body.theme-doc h1 {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 0.5rem;
  color: #1a1a1a;
}
body.theme-doc .container {
  background: #f5f2ee;
  border: 1px solid #c4beb6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
body.theme-doc .fragment { color: #444; border-color: #999; }
body.theme-doc .site-img { border-color: #c4beb6; filter: brightness(0.95); }

/* ——— SITE 2 : Matrix / terminal (hacking) ——— */
body.theme-matrix {
  background: #0a0a0a;
  color: #00ff41;
  font-family: 'Share Tech Mono', 'JetBrains Mono', monospace;
}
body.theme-matrix .nav a { color: #00ff41; }
body.theme-matrix h1 {
  color: #00ff41;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-bottom: 1px solid #003300;
  padding-bottom: 0.5rem;
}
body.theme-matrix .container { max-width: 580px; }
body.theme-matrix .fragment { color: #00aa2a; }
body.theme-matrix .site-img { border-color: #00ff41; filter: hue-rotate(80deg) brightness(0.6) saturate(0.3); }

/* ——— SITE 3 : Brutaliste minimal (tueur) ——— */
body.theme-brutal {
  background: #0d0d0d;
  color: #e0e0e0;
  font-family: 'JetBrains Mono', monospace;
}
body.theme-brutal .nav a { color: #888; }
body.theme-brutal h1 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.05em;
  border: none;
  padding: 0;
  margin-bottom: 2rem;
}
body.theme-brutal p { font-size: 15px; }
body.theme-brutal .fragment { color: #555; border-color: #333; }
body.theme-brutal .site-img { border-color: #333; filter: brightness(0.7); }

/* ——— SITE 4 : Industriel / technique (bombes) ——— */
body.theme-tech {
  background: #1c1c1e;
  color: #a0a0a0;
  font-family: 'IBM Plex Mono', monospace;
}
body.theme-tech .nav a { color: #6b6b6b; }
body.theme-tech h1 {
  color: #808080;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  border: 1px solid #404040;
  padding: 0.5rem 0.75rem;
  display: inline-block;
}
body.theme-tech .container { border-left: 3px solid #505050; padding-left: 2rem; }
body.theme-tech .fragment { color: #505050; border-color: #404040; }
body.theme-tech .site-img { border-color: #404040; filter: brightness(0.75); }

/* ——— SITE 5 : Catalogue / liste (armes) ——— */
body.theme-catalog {
  background: #141414;
  color: #b8b8b8;
  font-family: 'IBM Plex Mono', monospace;
}
body.theme-catalog .nav a { color: #7a7a7a; }
body.theme-catalog h1 {
  color: #8a8a8a;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-bottom: 1px solid #333;
  padding-bottom: 0.5rem;
}
body.theme-catalog .catalog-list { margin: 1.5rem 0; }
body.theme-catalog .catalog-list p {
  border-left: 2px solid #3a3a3a;
  padding-left: 1rem;
  margin: 0.75rem 0;
}
body.theme-catalog .fragment { color: #4a4a4a; border-color: #2a2a2a; }
body.theme-catalog .site-img { border-color: #333; filter: brightness(0.8); }

/* ——— SITE 6 : Sobre rouge (drogues) ——— */
body.theme-red {
  background: #160a0a;
  color: #c8b4b4;
  font-family: 'JetBrains Mono', monospace;
}
body.theme-red .nav a { color: #8b6363; }
body.theme-red h1 {
  color: #a05050;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-bottom: 1px solid #4a2020;
  padding-bottom: 0.5rem;
}
body.theme-red .fragment { color: #5a3030; border-color: #3a2020; }
body.theme-red .site-img { border-color: #4a2020; filter: brightness(0.7) sepia(0.2); }
/* Site 6 : fragment en fond d'écran géant */
body.theme-red { position: relative; }
.bg-fragment {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(35vw, 280px);
  font-weight: 700;
  color: #000000;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
}
body.theme-red .container { position: relative; z-index: 1; }

/* ——— SITE 7 : Organique / nature (poisons) ——— */
body.theme-organic {
  background: #0f1410;
  color: #a8b8a8;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
body.theme-organic .nav a { color: #6b8b6b; }
body.theme-organic h1 {
  color: #7a9a7a;
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #2a3a2a;
  padding-bottom: 0.5rem;
}
body.theme-organic .site-img { border-color: #2a3a2a; filter: brightness(0.8) saturate(0.9); }
body.theme-organic .fragment { color: #4a5a4a; border-color: #2a3a2a; }

/* ——— SITE 8 : Casino / clôture ——— */
body.theme-casino {
  background: #1a0a0a;
  color: #e8d8c8;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
body.theme-casino .nav a { color: #c4a070; }
body.theme-casino h1 {
  color: #d4b080;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.1em;
  border: none;
  text-align: center;
  margin-bottom: 2rem;
}
body.theme-casino .container { text-align: center; }
body.theme-casino .closing-text { font-size: 1.1rem; line-height: 1.9; margin: 1rem 0; }
body.theme-casino .site-img {
  margin-left: auto;
  margin-right: auto;
  border-color: #4a3020;
  filter: brightness(0.85);
}

/* Fragment invisible — même couleur que le fond, visible au surlignage (sites 5 et 6) */
.hidden-fragment {
  font-size: 14px;
}
body.theme-red .hidden-fragment { color: #160a0a; }
body.theme-catalog .hidden-fragment { color: #141414; }