* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #0d1117; color: #e8edf2; font-family: 'Helvetica Neue', Arial, sans-serif; }
a { color: #5a9ab8; text-decoration: none; }

nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem 3rem;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  background: #0d1117;
  position: sticky; top: 0; z-index: 100;
}
.nav-logo { font-size: 18px; font-weight: 500; letter-spacing: 0.12em; color: #e8edf2; }
.nav-sub { font-size: 11px; letter-spacing: 0.18em; color: #6b8fa8; text-transform: uppercase; margin-top: 2px; }
.nav-cta {
  background: transparent; border: 0.5px solid rgba(100,160,210,0.5);
  color: #8ab8d8; padding: 8px 20px; font-size: 13px; letter-spacing: 0.08em;
  cursor: pointer; border-radius: 2px; transition: all 0.2s; text-decoration: none;
  display: inline-block;
}
.nav-cta:hover { background: rgba(100,160,210,0.1); border-color: #8ab8d8; }

.hero {
  min-height: 92vh; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  padding: 4rem 2rem; background: #0a1520;
  border-bottom: 0.5px solid rgba(100,160,210,0.12);
}
.hero-eyebrow { font-size: 11px; letter-spacing: 0.3em; color: #5a8fa8; text-transform: uppercase; margin-bottom: 2rem; }
.hero-title { font-size: 40px; font-weight: 500; line-height: 1.15; color: #ddeaf4; letter-spacing: 0.02em; margin-bottom: 1.5rem; max-width: 700px; }
.hero-accent { color: #4a8fba; }
.hero-tagline { font-size: 17px; color: #7a9fb8; line-height: 1.7; max-width: 480px; margin-bottom: 3rem; font-style: italic; }
.hero-version { font-size: 13px; color: #3a5a70; letter-spacing: 0.05em; font-style: italic; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.btn-primary {
  background: #1a3a52; border: 0.5px solid #3a7090;
  color: #a8cfe0; padding: 14px 32px; font-size: 14px;
  letter-spacing: 0.1em; cursor: pointer; border-radius: 2px; transition: all 0.2s;
  text-decoration: none; display: inline-block;
}
.btn-primary:hover { background: #224460; border-color: #5a9ab8; color: #c8e4f0; }
.btn-secondary {
  background: transparent; border: 0.5px solid rgba(255,255,255,0.15);
  color: #8a9fae; padding: 14px 32px; font-size: 14px;
  letter-spacing: 0.1em; cursor: pointer; border-radius: 2px; transition: all 0.2s;
  text-decoration: none; display: inline-block;
}
.btn-secondary:hover { border-color: rgba(255,255,255,0.3); color: #c0d0da; }
.hero-photo {
  width: 100%; max-width: 900px; height: 320px;
  margin: 3rem auto 0;
  border: 0.5px dashed rgba(100,160,210,0.2); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.02);
  color: #3a5a70; font-size: 13px; letter-spacing: 0.1em;
  flex-direction: column; gap: 8px; overflow: hidden;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

.content {
  max-width: 820px; margin: 0 auto;
  padding: 4rem 3rem 6rem;
}
.content .divider {
  width: 40px; height: 0.5px;
  background: rgba(100,160,210,0.3);
  margin: 3rem 0;
}

.doc-section { margin-bottom: 2.5rem; }
.doc-section h2 {
  font-size: 16px; font-weight: 600; letter-spacing: 0.06em;
  color: #8ab8cc; text-transform: uppercase;
  padding-bottom: 0.6rem;
  border-bottom: 0.5px solid rgba(100,160,210,0.2);
  margin-bottom: 1.2rem;
}
.doc-section h3 {
  font-size: 14px; font-weight: 600; color: #6a9ab0;
  margin: 1.4rem 0 0.6rem; letter-spacing: 0.04em;
}
.doc-section p {
  font-size: 14px; color: #7a9fb8; line-height: 1.85;
  margin-bottom: 1rem;
}
.doc-section ul {
  list-style: none; padding: 0; margin-bottom: 1rem;
}
.doc-section ul li {
  font-size: 14px; color: #7a9fb8; line-height: 1.85;
  padding-left: 1.2rem; position: relative; margin-bottom: 0.3rem;
}
.doc-section ul li::before {
  content: "—"; position: absolute; left: 0;
  color: #3a6a80;
}
.doc-section .divider {
  width: 40px; height: 0.5px;
  background: rgba(100,160,210,0.3);
  margin: 3rem 0;
}

.section { padding: 5rem 3rem; }
.section-center { text-align: center; }
.section-label { font-size: 10px; letter-spacing: 0.3em; color: #4a7a94; text-transform: uppercase; margin-bottom: 1rem; }
.section-title { font-size: 28px; font-weight: 500; color: #c8dce8; margin-bottom: 1rem; letter-spacing: 0.03em; }
.section-body { font-size: 15px; color: #6a8fa8; line-height: 1.8; max-width: 560px; margin: 0 auto; }
.divider { width: 40px; height: 0.5px; background: rgba(100,160,210,0.3); margin: 1.5rem auto; }

.materials { background: #080f15; border-top: 0.5px solid rgba(100,160,210,0.08); border-bottom: 0.5px solid rgba(100,160,210,0.08); }
.materials-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; max-width: 960px; margin: 3rem auto 0;
  border: 0.5px solid rgba(100,160,210,0.1); border-radius: 4px; overflow: hidden;
}
.material-card { background: #0c1620; padding: 1.5rem 1rem; text-align: center; }
.material-icon { max-width: 40px; margin-bottom: 0.75rem; border-radius: 50%; }
.material-name { font-size: 13px; font-weight: 500; color: #a0bfd0; margin-bottom: 0.25rem; }
.material-origin { font-size: 11px; color: #3a5a6a; letter-spacing: 0.05em; }

.creations { background: #0d1117; }
.creations-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem; max-width: 960px; margin: 3rem auto 0;
}
.creation-card {
  border: 0.5px solid rgba(100,160,210,0.12); border-radius: 4px;
  overflow: hidden; background: #0a1420; transition: border-color 0.2s;
}
.creation-card:hover { border-color: rgba(100,160,210,0.3); }
.creation-photo {
  height: 200px; background: #0c1c28;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 0.5px solid rgba(100,160,210,0.08);
  color: #2a4a5a; font-size: 12px; letter-spacing: 0.1em;
  flex-direction: column; gap: 6px; overflow: hidden;
}
.creation-photo img { width: 100%; height: 100%; object-fit: cover; }
.creation-body { padding: 1.25rem; }
.creation-name { font-size: 16px; font-weight: 500; color: #8ab8cc; margin-bottom: 0.25rem; letter-spacing: 0.08em; }
.creation-desc { font-size: 12px; color: #4a7a8a; line-height: 1.7; margin-bottom: 1rem; font-style: italic; }
.creation-stones { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1rem; }
.stone-pill {
  font-size: 10px; letter-spacing: 0.06em; padding: 3px 10px;
  border: 0.5px solid rgba(100,160,210,0.2); border-radius: 20px;
  color: #5a8a9a; background: rgba(100,160,210,0.04);
}
.creation-detail { font-size: 11px; color: #2a4a5a; letter-spacing: 0.05em; }
.creation-cta {
  width: 100%; margin-top: 1rem;
  background: transparent; border: 0.5px solid rgba(100,160,210,0.2);
  color: #6a9ab0; padding: 9px; font-size: 12px; letter-spacing: 0.1em;
  cursor: pointer; border-radius: 2px; transition: all 0.2s;
  text-decoration: none; display: block; text-align: center;
}
.creation-cta:hover { background: rgba(100,160,210,0.08); border-color: rgba(100,160,210,0.4); color: #9ac8d8; }

.contact { background: #080f15; border-top: 0.5px solid rgba(100,160,210,0.1); border-bottom: 0.5px solid rgba(100,160,210,0.1); }
.social { margin-top: 1.4rem; }
.social img { width: 32px; }
.email-form { display: flex; gap: 12px; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.email-input {
  background: #0d1a24; border: 0.5px solid rgba(100,160,210,0.25);
  color: #c0d8e8; padding: 12px 20px; font-size: 14px;
  border-radius: 2px; width: 300px; outline: none; font-family: inherit;
}
.email-input::placeholder { color: #2a4a5a; }
.email-input:focus { border-color: rgba(100,160,210,0.5); }
.email-submit {
  background: #1a3a52; border: 0.5px solid #3a7090;
  color: #a8cfe0; padding: 12px 24px; font-size: 13px;
  letter-spacing: 0.08em; cursor: pointer; border-radius: 2px; transition: all 0.2s;
}
.email-submit:hover { background: #224460; }

footer { padding: 2rem 3rem; text-align: center; border-top: 0.5px solid rgba(100,160,210,0.06); background: #0d1117; }
.footer-logo { font-size: 14px; letter-spacing: 0.15em; color: #3a5a70; margin-bottom: 0.5rem; }
.footer-updated { font-size: 10px; color: #2a3f4a; letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.footer-copy { font-size: 11px; color: #2a3f4a; letter-spacing: 0.05em; }
.footer-copy a { color: #3a5a70; }

/* Blog – navigation */
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-link { font-size: 13px; letter-spacing: 0.1em; color: #6a8fa8; transition: color 0.2s; text-decoration: none; }
.nav-link:hover { color: #8ab8d8; }

/* Blog – index */
.blog-list { max-width: 720px; margin: 3rem auto 0; text-align: left; }
.blog-card {
  border-bottom: 0.5px solid rgba(100,160,210,0.1);
  padding: 2rem 0;
}
.blog-card:first-of-type { padding-top: 0; }
.blog-card-body { }
.blog-card-meta {
  font-size: 11px; color: #3a5a70; letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.blog-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-pill {
  font-size: 9px; letter-spacing: 0.06em; padding: 2px 8px;
  border: 0.5px solid rgba(100,160,210,0.2); border-radius: 10px;
  color: #4a7a8a; background: rgba(100,160,210,0.04);
}
.blog-card-title { font-size: 22px; font-weight: 500; margin-bottom: 0.4rem; }
.blog-card-title a { color: #c8dce8; text-decoration: none; transition: color 0.2s; }
.blog-card-title a:hover { color: #8ab8d8; }
.blog-card-subtitle { font-size: 14px; color: #5a8a9a; font-style: italic; margin-bottom: 0.75rem; }
.blog-card-excerpt { font-size: 14px; color: #6a8fa8; line-height: 1.8; margin-bottom: 1rem; }
.blog-card-link { font-size: 12px; letter-spacing: 0.06em; color: #5a9ab8; text-decoration: none; }
.blog-card-link:hover { color: #8ac8e0; }

/* Blog – pagination */
.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 1.5rem; margin-top: 3rem; padding-top: 2rem;
  border-top: 0.5px solid rgba(100,160,210,0.1);
}
.pagination-link { font-size: 13px; letter-spacing: 0.06em; color: #5a9ab8; text-decoration: none; }
.pagination-link:hover { color: #8ac8e0; }
.pagination-disabled { color: #2a4a5a; cursor: default; }
.pagination-page { font-size: 12px; color: #3a5a70; letter-spacing: 0.05em; }

/* Blog – article individuel */
.blog-post { max-width: 720px; margin: 0 auto; padding: 4rem 3rem 6rem; }
.blog-post-header { margin-bottom: 3rem; text-align: center; }
.blog-post-meta {
  font-size: 12px; color: #3a5a70; letter-spacing: 0.06em;
  display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.blog-post-title { font-size: 32px; font-weight: 500; color: #c8dce8; line-height: 1.2; margin-bottom: 0.75rem; }
.blog-post-subtitle { font-size: 17px; color: #5a8a9a; font-style: italic; line-height: 1.6; }
.blog-post-content {
  font-size: 16px; color: #b0c8d8; line-height: 1.9;
}
.blog-post-content h2 {
  font-size: 20px; font-weight: 500; color: #8ab8cc;
  margin: 2.5rem 0 1rem; letter-spacing: 0.02em;
}
.blog-post-content h3 {
  font-size: 17px; font-weight: 500; color: #6a9ab0;
  margin: 2rem 0 0.75rem;
}
.blog-post-content p { margin-bottom: 1.2rem; }
.blog-post-content ul, .blog-post-content ol { margin-bottom: 1.2rem; padding-left: 1.5rem; }
.blog-post-content li { margin-bottom: 0.4rem; }
.blog-post-content strong { color: #c8dce8; }
.blog-post-content em { color: #7a9fb8; }
.blog-post-content a { color: #5a9ab8; }
.blog-post-content a:hover { color: #8ac8e0; }
.blog-post-footer { margin-top: 4rem; padding-top: 2rem; border-top: 0.5px solid rgba(100,160,210,0.1); }
.blog-back-link { font-size: 13px; letter-spacing: 0.06em; color: #5a9ab8; text-decoration: none; }
.blog-back-link:hover { color: #8ac8e0; }

/* Blog – tag links (clickable pills) */
.tag-pill-link { text-decoration: none; display: inline-block; }
.tag-pill-link:hover .tag-pill { border-color: #5a9ab8; color: #8ac8e0; background: rgba(100,160,210,0.1); }

/* Blog – article hero image */
.blog-post-hero { max-width: 720px; margin: 0 auto 2rem; padding: 0 3rem; }
.blog-post-hero-img { width: 100%; height: auto; max-height: 400px; object-fit: cover; border-radius: 4px; border: 0.5px solid rgba(100,160,210,0.12); }

/* Tags – page listing */
.tags-cloud { max-width: 600px; margin: 2rem auto 3rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.tags-cloud-link {
  font-size: 13px; letter-spacing: 0.08em; color: #5a9ab8; text-decoration: none;
  border: 0.5px solid rgba(100,160,210,0.2); border-radius: 20px;
  padding: 6px 16px; transition: all 0.2s;
}
.tags-cloud-link:hover { border-color: #5a9ab8; color: #8ac8e0; background: rgba(100,160,210,0.08); }
.tags-lists { max-width: 600px; margin: 0 auto; text-align: left; }
.tag-section { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 0.5px solid rgba(100,160,210,0.1); }
.tag-section:last-of-type { border-bottom: none; }
.tag-section-title { font-size: 22px; font-weight: 500; color: #8ab8cc; margin-bottom: 1.5rem; scroll-margin-top: 6rem; }
.tag-post-card { padding: 1rem 0; border-bottom: 0.5px solid rgba(100,160,210,0.06); }
.tag-post-card:last-of-type { border-bottom: none; }
.tag-post-date { font-size: 11px; color: #3a5a70; letter-spacing: 0.06em; display: block; margin-bottom: 0.3rem; }
.tag-post-title { font-size: 17px; font-weight: 500; }
.tag-post-title a { color: #c8dce8; text-decoration: none; }
.tag-post-title a:hover { color: #8ab8d8; }
.tag-post-subtitle { font-size: 13px; color: #5a8a9a; font-style: italic; margin-top: 0.25rem; }
.tag-back-top { font-size: 11px; letter-spacing: 0.06em; color: #3a5a70; text-decoration: none; display: inline-block; margin-top: 1rem; }
.tag-back-top:hover { color: #5a9ab8; }
.tags-back { text-align: center; margin-top: 3rem; }

.doc-section { margin-bottom: 2.5rem; }

@media (max-width: 768px) {
  nav { padding: 1.2rem 1.5rem; }
  .hero-title { font-size: 32px; }
  .section { padding: 3.5rem 1.5rem; }
}