/* GSForever : pages publiques hors accueil et calculateur (thème « Forge cyan »).
   En-têtes de page façon affiche, listes d'annonces et de guides, articles Markdown,
   agrandissement des images (guides), page Vidéos,
   404, connexion, activation et autorisation du bridge.
   S'appuie sur les variables et briques de site.css (.card, .btn, .chip, .tag, .kicker…). */

/* ---------- En-tête de page : bandeau affiche ---------- */
.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px max(24px, calc((100% - 1240px) / 2 + 24px)) 52px;
  border-bottom: 3px solid var(--ink-900);
  background: linear-gradient(180deg, var(--ink-800) 0%, var(--ink-850) 100%);
}
/* Rayures obliques en fond, côté droit, qui s'effacent vers le texte */
.page-head::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: min(560px, 55%);
  background: repeating-linear-gradient(-58deg, var(--ink-700) 0 14px, transparent 14px 34px);
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
  mask-image: linear-gradient(90deg, transparent, #000 70%);
}
/* Trait cyan en pied de bandeau */
.page-head::after {
  content: "";
  position: absolute;
  left: max(24px, calc((100% - 1240px) / 2 + 24px));
  bottom: -3px;
  width: 120px;
  height: 6px;
  border-radius: 3px 3px 0 0;
  background: var(--cyan);
}
.page-head > * { max-width: 860px; }
.page-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 14px;
  border: 2px solid var(--ink-900);
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink-900);
  box-shadow: 3px 3px 0 var(--ink-900);
  font-size: .78rem;
  letter-spacing: 2px;
}
.page-head h1 {
  margin: 0 0 16px;
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  line-height: .98;
  overflow-wrap: break-word;
  hyphens: auto;
}
.page-head .lead {
  max-width: 64ch;
  margin: 0;
  color: var(--text-soft);
  font-size: 1.12rem;
  line-height: 1.6;
}
.page-head .crumb-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 6px;
  color: var(--cyan-bright);
  font-size: .85rem;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.page-head .crumb-back:hover { color: var(--white); }
.page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 20px;
  color: var(--text-muted);
  font-size: .88rem;
  font-weight: 600;
}
.page-head .lead + .page-meta { margin-top: 22px; }

/* Contenu qui suit un bandeau : moins d'air en haut */
.site .page-head ~ .section { padding-top: 48px; padding-bottom: 88px; }

/* ---------- Fil d'Ariane ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 14px;
  color: var(--text-muted);
  font-size: .85rem;
  font-weight: 700;
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--cyan-bright);
  text-decoration: none;
}
.crumbs a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--text-soft); }

/* Filtres centrés par site.css : dans les pages, alignés à gauche comme les titres */
.site .page-head ~ .section .filters { justify-content: flex-start; }

/* ---------- Listes d'annonces ---------- */
.list { display: flex; flex-direction: column; gap: 24px; }
.list > .filters { margin-bottom: 8px; }
.annonce-card {
  position: relative;
  max-width: 920px;
  padding: 26px 28px 24px;
  gap: 0;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.annonce-card:hover,
.annonce-card:focus-within {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--cyan);
}
.annonce-card .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 14px;
}
.annonce-card .meta .muted { font-size: .84rem; }
.annonce-card h2 {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.15;
}
.annonce-card h2 a { color: var(--white); text-decoration: none; }
/* Toute la carte est cliquable via le lien du titre */
.annonce-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.annonce-card h2 a:hover { color: var(--cyan-bright); }
.annonce-card > p { margin: 0 0 14px; color: var(--text-soft); line-height: 1.65; }
.annonce-card .more { align-self: flex-start; }
.list time, .link-card time { white-space: nowrap; }

/* ---------- Guides : cartes ---------- */
.site .section > section + section { margin-top: 48px; }
.site .section > section > h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.site .section > section > h2::after {
  content: "";
  flex: 1 1 auto;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
}
.site .section > section > .grid { margin-top: 18px; }

.link-card {
  position: relative;
  justify-content: space-between;
  padding: 24px 24px 20px;
  color: var(--text);
  text-decoration: none;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.link-card:hover {
  color: var(--text);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--cyan);
}
.link-card strong {
  padding-right: 32px;
  color: var(--white);
  font-size: 1.22rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}
/* Flèche d'accès en coin */
.link-card::after {
  content: "→";
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--cyan);
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  transition: transform .15s var(--ease);
}
.link-card:hover::after { transform: translateX(4px); }
.link-card p { margin: 0; color: var(--text-soft); font-size: .95rem; line-height: 1.6; }
.link-card > .muted.small {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: .82rem;
}

/* ---------- État vide ---------- */
.empty-state {
  align-items: center;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px;
  border: 3px dashed var(--ink-600);
  background: var(--ink-800);
  box-shadow: none;
  text-align: center;
}
.empty-state p { margin: 0; }
.empty-state .actions { justify-content: center; margin-top: 4px; }

/* ---------- Article (annonce, guide) et Markdown rendu ---------- */
.site article.prose {
  width: calc(100% - 48px);
  max-width: 860px;
  margin: 48px auto 88px;
  padding: 40px 44px;
  border: 3px solid var(--ink-900);
  border-radius: var(--r-lg);
  background: var(--ink-800);
  box-shadow: var(--hard-cyan);
}
.prose {
  color: var(--text-soft);
  font-size: 1.02rem;
  line-height: 1.75;
  overflow-wrap: break-word;
}
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1em; }
.prose h2 {
  margin: 1.6em 0 .6em;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--line);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}
.prose h3 {
  margin: 1.4em 0 .5em;
  color: var(--cyan-bright);
  font-size: 1.2rem;
  text-transform: uppercase;
}
.prose h4 { margin: 1.2em 0 .4em; color: var(--white); font-size: 1.05rem; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 24px; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--cyan); font-weight: 800; }
.prose strong { color: var(--white); }
.prose a { color: var(--cyan-bright); text-underline-offset: 3px; }
.prose a:hover { color: var(--white); }
.prose img {
  display: block;
  max-height: 480px;
  height: auto;
  margin: 1.2em 0;
  border: 3px solid var(--ink-900);
  border-radius: var(--r-md);
  box-shadow: var(--hard);
}
.prose code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--ink-900);
  color: var(--cyan-bright);
  font-size: .88em;
}
.prose pre {
  overflow-x: auto;
  margin: 0 0 1.2em;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-900);
}
.prose pre code { padding: 0; background: none; }
.prose blockquote {
  margin: 1.4em 0;
  padding: 14px 20px;
  border-left: 5px solid var(--cyan);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--ink-750);
  color: var(--text);
  font-style: italic;
}
.prose blockquote > :last-child { margin-bottom: 0; }
.prose hr { margin: 2em 0; border: 0; border-top: 3px solid var(--line-soft); }
.prose table { width: 100%; margin: 0 0 1.2em; border-collapse: collapse; font-size: .92rem; }
.prose th, .prose td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.prose th { color: var(--cyan-bright); font-style: italic; text-transform: uppercase; }
.prose > .more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 18px;
}

/* ---------- Agrandissement des images (fenêtre créée par lightbox.js) ---------- */
.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}
.lightbox::backdrop { background: rgba(6, 16, 23, .92); }
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lightbox-open .18s ease-out;
}
.lightbox-stage {
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: 64px 16px 16px;
  overflow: auto;
}
.lightbox-stage img {
  width: auto;
  height: auto;
  max-width: min(1400px, 100%);
  max-height: calc(100vh - 88px);
  margin: auto;
  border: 3px solid var(--cyan);
  border-radius: var(--r-md);
  box-shadow: 10px 10px 0 var(--ink-900);
  cursor: zoom-in;
}
.lightbox.is-zoomed .lightbox-stage img { max-width: none; max-height: none; cursor: zoom-out; }
.lightbox-close {
  position: fixed;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--ink-900);
  border-radius: var(--r-md);
  background: var(--cyan);
  color: var(--ink-900);
  box-shadow: var(--hard);
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: var(--cyan-bright); }
@keyframes lightbox-open { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Page Vidéos ---------- */
/* Bandeau de chaîne : même affiche que les autres pages, boutons à droite */
.page-head.channel-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
}
.channel-bar > * { max-width: none; }
.channel-id { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.channel-id h1 { margin-bottom: 10px; }
.channel-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-soft);
  font-size: 1.05rem;
  font-weight: 600;
}
.channel-bar .actions { padding-bottom: 4px; }

.videos-page .streamer-card { padding: 28px; box-shadow: var(--hard-cyan); scroll-margin-top: 96px; }
.videos-page .streamer-card .video-embed { box-shadow: var(--hard); }
.videos-page .streamer-info .video-title { font-size: 1.35rem; line-height: 1.35; }
.link-arrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  color: var(--cyan-bright);
  font-weight: 800;
  text-decoration: none;
}
.link-arrow:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
#featured-label { transition: color .2s var(--ease); }

/* Grille de miniatures */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 28px 24px;
  margin-top: 44px;
}
.video-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.video-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--ink-900);
  border-radius: var(--r-md);
  background: var(--ink-900);
  box-shadow: var(--hard);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 16, 23, .35);
  color: var(--white);
  font-size: 1.8rem;
  opacity: 0;
  transition: opacity .15s var(--ease);
}
.video-card:hover .video-thumb,
.video-card:focus-visible .video-thumb {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--cyan);
}
.video-card:hover .video-play,
.video-card:focus-visible .video-play { opacity: 1; }
.video-card-title {
  color: var(--white);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.4;
}
.video-card:hover .video-card-title { color: var(--cyan-bright); }
.video-card-date { font-size: .8rem; }
/* Vidéo en lecture dans le lecteur du haut (classe posée par videos.js) */
.video-card.is-playing .video-thumb { border-color: var(--cyan); box-shadow: 7px 7px 0 var(--cyan); }
.video-card.is-playing .video-thumb::after {
  content: "En lecture";
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 10px;
  border: 2px solid var(--ink-900);
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink-900);
  font-size: .7rem;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.video-card.is-playing .video-card-title { color: var(--cyan-bright); }

/* ---------- 404 ---------- */
.not-found {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - 48px);
  max-width: 920px;
  margin: 64px auto 88px;
  padding: 64px 40px 56px;
  border: 3px solid var(--ink-900);
  border-radius: var(--r-lg);
  background: repeating-conic-gradient(from 0deg at 50% 115%, var(--ink-700) 0deg 8deg, var(--ink-750) 8deg 16deg);
  box-shadow: var(--hard-cyan);
  text-align: center;
}
/* Grand « 404 » en contour, derrière le texte */
.not-found-code {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -58%) skewX(-8deg);
  color: transparent;
  -webkit-text-stroke: 3px rgba(22, 212, 238, .22);
  font-size: clamp(9rem, 30vw, 17rem);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.not-found .kicker {
  display: inline-flex;
  margin: 0 0 18px;
  padding: 6px 14px;
  border: 2px solid var(--ink-900);
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink-900);
  box-shadow: 3px 3px 0 var(--ink-900);
  letter-spacing: 2px;
}
/* Pièce perdue (coins.js) : elle tombe et tourne sur sa tranche au-dessus du titre ; un clic la relance. */
.lost-coin { display: none; }
.lost-coin.is-3d { display: block; width: min(360px, 80%); aspect-ratio: 1.5; margin: -36px auto -8px; }
.lost-coin canvas { display: block; width: 100%; height: 100%; cursor: pointer; }
.not-found h1 { margin: 0 0 16px; font-size: clamp(2.1rem, 5vw, 3.6rem); }
.not-found .lead { max-width: 58ch; margin: 0 auto 30px; }
.not-found .actions { justify-content: center; }

/* ---------- Connexion, activation, autorisation du bridge ---------- */
.login {
  width: 460px;
  max-width: 100%;
  margin: 8px auto 24px;
  padding: 32px 30px 28px;
  gap: 16px;
  text-align: left;
}
/* Pastille au-dessus du titre, comme les en-têtes de page */
.login .kicker {
  align-self: flex-start;
  margin: 0;
  padding: 5px 12px;
  border: 2px solid var(--ink-900);
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink-900);
  font-size: .72rem;
}
.login h1, .login .h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.3rem); line-height: 1; }
.login > p { margin: 0; }
.login label { text-align: left; }
.login .btn { width: 100%; }
.login > a.muted {
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 44px;
  color: var(--text-muted);
  font-size: .9rem;
}
.login > a.muted:hover { color: var(--cyan-bright); }
.login .row-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .9rem;
}
.login .row-line > span:first-child { color: var(--text); font-weight: 700; }
.login .row-line > span:last-child { min-width: 0; overflow-wrap: anywhere; text-align: right; }

/* ---------- Page « Le bridge » (bridge pour tous, étape 4) ---------- */
.bridge-optional { max-width: 64ch; margin: 18px 0 0; color: var(--text); font-size: 1.02rem; }
.bridge-optional strong { color: var(--cyan-bright); }
.bridge-get { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px 32px; box-shadow: var(--hard-cyan); }
.bridge-get > p { margin: 0; }
.bridge-get-main { flex: 1 1 340px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.bridge-get-main p { margin: 0; }
.bridge-get-side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bridge-count { margin: 0; color: var(--text-soft); font-weight: 700; }
.bridge-count strong { color: var(--cyan-bright); font-size: 1.6rem; font-style: italic; font-weight: 900; }
.bridge-hash summary { min-height: 44px; display: flex; align-items: center; color: var(--cyan-bright); font-weight: 700; cursor: pointer; }
.bridge-hash p { margin: 6px 0; }
.bridge-sha { display: block; margin-top: 2px; overflow-wrap: anywhere; font-size: .78rem; }
.bridge-title { margin: 56px 0 18px; }
.bridge-intro { margin: -6px 0 0; color: var(--text-soft); font-size: 1.05rem; }
.bridge-page .card h3 { margin: 0; text-transform: uppercase; }
.bridge-page .card p { margin: 0; color: var(--text-soft); line-height: 1.6; }
.bridge-page .card .muted { color: var(--text-muted); }
.bridge-page .ticks { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; line-height: 1.55; }
.bridge-page .ticks li { position: relative; padding-left: 26px; }
.bridge-page .ticks li::before { content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 900; }
.bridge-promises { max-width: 900px; margin-top: 22px !important; color: var(--text-soft); }
.bridge-page .steps { display: flex; flex-direction: column; gap: 14px; margin: 0; list-style: none; counter-reset: etape; line-height: 1.6; }
.bridge-page .steps li { position: relative; padding-left: 40px; counter-increment: etape; color: var(--text-soft); }
.bridge-page .steps li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink-900);
  border-radius: 6px;
  background: var(--cyan);
  color: var(--ink-900);
  font-style: italic;
  font-weight: 900;
}
.bridge-warnings h3 { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.bridge-warnings h3:not(:first-child) { margin-top: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .page-head { padding: 44px 16px 36px; }
  .page-head::before { width: 70%; opacity: .35; }
  .page-head::after { left: 16px; width: 80px; }
  .page-head .lead { font-size: 1.02rem; }
  .site .page-head ~ .section { padding-top: 32px; padding-bottom: 64px; }
  .annonce-card { padding: 22px 18px 20px; }
  .site article.prose { width: calc(100% - 32px); margin: 32px auto 64px; padding: 26px 20px; }
  .channel-bar .actions { width: 100%; }
  .channel-bar .actions .btn { flex: 1 1 0; }
  .videos-page .streamer-card { padding: 18px; }
  .videos-grid { gap: 24px 18px; margin-top: 36px; }
  .not-found { width: calc(100% - 32px); margin: 40px auto 64px; padding: 48px 20px 40px; }
  .not-found .actions .btn { width: 100%; }
  .login { padding: 26px 18px 22px; }
  .bridge-get .btn.big { width: 100%; }
  .bridge-title { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox[open] { animation: none; }
}