/* Pages ZastTranslate (/zasttranslate/ et /en/zasttranslate/) — chargé en plus de styles.css */

.zt-main { padding-top: 1.5rem; }
.nav .nav-current { color: var(--neon-cyan); }

.zt-crumb { font-size: 0.85rem; color: var(--muted); margin: 0 0 1.5rem; }
.zt-crumb a { color: var(--muted); text-decoration: none; }
.zt-crumb a:hover { color: var(--neon-cyan); }

/* Hero */
.zt-hero { padding: 1rem 0 3rem; }
.zt-hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.1; margin: 0.5rem 0 0.75rem; }
.zt-tagline { font-size: clamp(1.1rem, 2.4vw, 1.4rem); color: #fff; max-width: 46rem; margin: 0 0 1rem; }
.zt-lead { color: #d4d4d4; max-width: 46rem; line-height: 1.7; margin: 0 0 1.75rem; }
.zt-lead a, .zt-note a, .zt-author a, .zt-creds a { color: var(--neon-cyan); }
.zt-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.zt-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}
.zt-badge.hot { color: var(--neon-cyan); border-color: rgba(0, 242, 254, 0.4); }
.zt-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Vidéo (miniature cliquable, sans iframe pour rester léger) */
.zt-video {
  position: relative;
  display: block;
  max-width: 880px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  text-decoration: none;
  color: inherit;
}
.zt-thumb { position: relative; display: block; }
.zt-video img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.zt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--neon-cyan);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease;
}
.zt-play svg { width: 2rem; height: 2rem; fill: #fff; }
.zt-video:hover .zt-play { transform: translate(-50%, -50%) scale(1.08); }
.zt-video-cap { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.25rem 1.25rem; }
.zt-video-cap strong { color: #fff; font-size: 1.05rem; }
.zt-video-cap span { color: var(--muted); font-size: 0.9rem; }
.zt-video-cap em { color: var(--neon-cyan); font-style: normal; font-weight: 600; font-size: 0.9rem; }

/* Fonctionnalités */
.zt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.zt-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
}
.zt-card h3 { font-size: 1.02rem; margin: 0 0 0.5rem; color: #fff; }
.zt-card p { margin: 0; font-size: 0.92rem; color: #b8b8b8; line-height: 1.6; }

/* Étapes numérotées */
.zt-steps, .zt-install { list-style: none; counter-reset: zt; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.zt-steps li, .zt-install li {
  counter-increment: zt;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem 1.1rem 4rem;
  color: #d4d4d4;
  line-height: 1.6;
}
.zt-steps li::before, .zt-install li::before {
  content: counter(zt);
  position: absolute;
  left: 1.1rem;
  top: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neon-cyan);
  border: 1.5px solid rgba(0, 242, 254, 0.5);
}
.zt-steps h3 { margin: 0 0 0.25rem; font-size: 1.02rem; color: #fff; }
.zt-steps p { margin: 0; font-size: 0.92rem; color: #b8b8b8; }
.zt-install a { color: var(--neon-cyan); }

/* Configuration */
.zt-req { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.zt-req h3 { margin: 0 0 1rem; font-size: 1.1rem; color: #fff; }
.zt-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.zt-table th, .zt-table td { text-align: left; vertical-align: top; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.zt-table th { width: 7.5rem; color: var(--muted); font-weight: 500; padding-right: 1rem; }
.zt-table td { color: #e5e5e5; }
.zt-note { color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin: 1rem 0 0; }

.zt-limits { margin: 0; padding-left: 1.25rem; color: #d4d4d4; line-height: 1.8; }

/* FAQ */
.zt-faq { display: grid; gap: 0.6rem; max-width: 52rem; }
.zt-faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 0 1.2rem; }
.zt-faq-item summary { cursor: pointer; padding: 1rem 0; font-weight: 600; color: #fff; list-style: none; }
.zt-faq-item summary::-webkit-details-marker { display: none; }
.zt-faq-item summary::after { content: '+'; float: right; color: var(--neon-cyan); font-family: var(--font-mono); }
.zt-faq-item[open] summary::after { content: '–'; }
.zt-faq-item p { margin: 0 0 1.1rem; color: #c8c8c8; line-height: 1.7; }

/* Historique */
.zt-hist { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.75rem; }
.zt-hist li { border-left: 2px solid rgba(0, 242, 254, 0.35); padding: 0.2rem 0 0.2rem 1rem; }
.zt-ver { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.zt-ver strong { color: #fff; font-family: var(--font-mono); }
.zt-ver span { color: var(--muted); font-size: 0.82rem; }
.zt-hist p { margin: 0.25rem 0 0; color: #b8b8b8; font-size: 0.92rem; line-height: 1.6; }

/* Crédits */
.zt-creds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 1.5rem; }
.zt-creds span { color: var(--muted); }

/* Auteur */
.zt-author { display: flex; gap: 1.5rem; align-items: flex-start; }
.zt-author img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(0, 242, 254, 0.4); flex: none; }
.zt-author p { margin: 0 0 1rem; color: #d4d4d4; line-height: 1.7; }

@media (max-width: 900px) {
  .zt-grid { grid-template-columns: repeat(2, 1fr); }
  .zt-req { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .zt-grid, .zt-creds { grid-template-columns: 1fr; }
  .zt-author { flex-direction: column; padding: 1.5rem; }
  .zt-steps li, .zt-install li { padding-left: 3.6rem; }
  .zt-play { width: 3.5rem; height: 3.5rem; }
}