/* accueil.css — page de vitrine, esprit labyrinthorum (RGB agressif) plutot
   que l'esthetique "archives 1998" du reste du site. Feuille dediee, ne
   touche pas a style.css utilise par les chapitres. */

:root {
  --bg: #060404;
  --panel: rgba(255, 255, 255, 0.03);
  --panel-border: rgba(255, 255, 255, 0.12);
  --ink: rgb(240, 235, 225);
  --muted: rgba(230, 220, 210, 0.66);
  --r: #ff2b3d;
  --g: #33e07a;
  --b: #3d8bff;
}

* { box-sizing: border-box; }

body.accueil {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 15%, rgba(255, 43, 61, 0.16), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(51, 224, 122, 0.14), transparent 28%),
    radial-gradient(circle at 45% 90%, rgba(61, 139, 255, 0.16), transparent 32%),
    var(--bg);
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  overflow-x: hidden;
}

.acc-page {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 32px) clamp(12px, 4vw, 24px) 60px;
}

.logo-plaque {
  position: relative;
  display: inline-block;
  padding: 9px 14px;
  border-radius: 3px;
  text-decoration: none;
  background-image:
    linear-gradient(135deg, #3a3a3a, #141414),
    radial-gradient(circle at 7px 7px, #999 0%, #555 55%, transparent 70%),
    radial-gradient(circle at calc(100% - 7px) 7px, #999 0%, #555 55%, transparent 70%),
    radial-gradient(circle at 7px calc(100% - 7px), #999 0%, #555 55%, transparent 70%),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #999 0%, #555 55%, transparent 70%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.15s;
}
.logo-plaque:hover { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.7), 0 0 16px rgba(51, 224, 122, 0.5); }
.logo-plaque .logo { display: block; height: 34px; width: auto; }

.acc-logo-mid {
  text-align: center;
  margin: 48px 0;
}

.acc-hero .logo-plaque { margin-bottom: 18px; }

.acc-hero {
  text-align: center;
  padding: clamp(28px, 8vw, 56px) 0 clamp(20px, 5vw, 32px);
}

.acc-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-shadow: 0 0 6px rgba(255, 43, 61, 0.5), 0 0 22px rgba(51, 224, 122, 0.3), 0 0 40px rgba(61, 139, 255, 0.25);
  animation: acc-flicker 6s ease-in-out infinite;
}

.acc-hero p {
  margin: 0 auto;
  max-width: 60ch;
  color: var(--muted);
  font-size: clamp(0.85rem, 2.4vw, 0.98rem);
  line-height: 1.6;
}

.acc-hero .acc-cta {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.acc-btn {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: border-color 0.15s, transform 0.15s;
  background: var(--panel);
}
.acc-btn:hover { transform: translateY(-1px); }
.acc-btn.r:hover { border-color: var(--r); color: var(--r); }
.acc-btn.g:hover { border-color: var(--g); color: var(--g); }
.acc-btn.b:hover { border-color: var(--b); color: var(--b); }
.acc-btn.gold:hover { border-color: #e0a840; color: #e0a840; }

.acc-render.photo {
  padding: 0;
  overflow: hidden;
}
.acc-render.photo img {
  display: block;
  width: 100%;
  height: auto;
}
.acc-render.photo .acc-tag {
  margin: 10px 14px 8px;
}

.acc-section-label {
  text-align: center;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 48px 0 18px;
}

/* ---- galerie de rendus texte ---- */
.acc-renders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.acc-render {
  position: relative;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  border-radius: 6px;
  padding: 16px;
  overflow: hidden;
}

.acc-render .acc-tag {
  display: block;
  font-size: 0.68rem;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 10px;
}

.acc-render pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.78rem;
  line-height: 1.5;
  max-height: 220px;
  overflow: hidden;
}

.acc-render a { color: inherit; }

.acc-render.tilt-l { transform: rotate(-1.4deg); }
.acc-render.tilt-r { transform: rotate(1.6deg); }

.acc-render.glow-r pre { color: var(--r); text-shadow: 0 0 10px rgba(255, 43, 61, 0.35); }
.acc-render.glow-g pre { color: var(--g); text-shadow: 0 0 10px rgba(51, 224, 122, 0.35); }
.acc-render.glow-b pre { color: var(--b); text-shadow: 0 0 10px rgba(61, 139, 255, 0.35); }
.acc-render.glow-ink pre { color: var(--ink); }

.acc-render.pulse pre { animation: acc-pulse 2.6s ease-in-out infinite; }
.acc-render.drift pre { animation: acc-drift 9s linear infinite; }

.acc-render.vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.acc-render.vertical pre {
  max-height: none;
  max-width: 220px;
}

/* ---- galerie de gifs ---- */
.acc-gifs {
  display: grid;
  grid-template-columns: repeat(auto-fit, 110px);
  justify-content: center;
  gap: 10px;
}
.acc-gifs img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  filter: saturate(1.15) contrast(1.05);
}
.acc-gifs-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* ---- reseaux sociaux ---- */
.acc-socials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.acc-social {
  display: block;
  padding: 16px;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  background: var(--panel);
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  transition: border-color 0.15s, transform 0.15s;
}
.acc-social:hover { transform: translateY(-2px); }
.acc-icon { display: block; width: 30px; height: 30px; margin: 0 auto 10px; color: var(--muted); transition: color 0.15s; }
.acc-social:hover .acc-icon { color: inherit; }
.acc-social .name { display: block; font-weight: 900; font-size: 0.95rem; margin-bottom: 3px; }
.acc-social .handle { display: block; font-size: 0.72rem; color: var(--muted); }
.acc-social .acc-live {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--panel-border);
  font-size: 0.7rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.4;
}
.acc-social.fb:hover { border-color: var(--b); }
.acc-social.ig:hover { border-color: var(--r); }
.acc-social.mastodon:hover { border-color: var(--g); }
.acc-social.bsky:hover { border-color: var(--b); }
.acc-social.tumblr:hover { border-color: var(--b); }

.acc-foot {
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 56px;
  line-height: 1.7;
}
.acc-foot a { color: var(--g); text-decoration: none; }
.acc-foot a:hover { color: var(--r); }

@keyframes acc-flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.75; }
  94% { opacity: 1; }
  95% { opacity: 0.6; }
  96% { opacity: 1; }
}

@keyframes acc-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

@keyframes acc-drift {
  0% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .acc-hero h1, .acc-render.pulse pre, .acc-render.drift pre { animation: none; }
}