/* Habillage de la page d'accueil publique — mise en page et typographie reprises de
   rackhamator.cloud, couleurs empruntées au thème Forgejo actif.
   Chargé par custom/templates/home.tmpl uniquement : aucune autre page n'y touche.

   Les jetons de couleur du site (vert dominant) juraient avec l'orange de Forgejo :
   ΔE76 de 101 entre le vert #07916a et le --color-primary #c2410c. Plutôt que de
   figer une teinte, la page consomme directement les variables du thème
   (--color-primary & co) : le raccord est exact, et il le reste si le thème par
   défaut change ou si un visiteur en choisit un autre. Vérifié présent sur
   forgejo-auto, forgejo-light, forgejo-dark et gitea-auto.

   Ce qui vient encore du site : la grille de fond, les lueurs, l'échelle
   typographique, les rayons, le mouvement, et la police.

   Tout est scopé sous `.rk-home` : rien ne fuit vers le reste de l'instance, et si
   le template saute à une montée de version, il ne reste que du CSS mort. */

/* Servie depuis custom/public/assets/fonts/ : pas de requête tierce, comme sur le
   site. Sous-ensemble latin, axes 100→900 réels. */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

/* Sélecteur doublé pour passer devant le padding de `.page-content` sans dépendre
   de l'ordre des feuilles de style. */
.page-content.rk-home {
  /* Bloc conteneur du calque de grille ci-dessous : posé en `absolute` et non en
     `fixed`, il ne peut donc jamais déborder sur la barre de navigation, qui est
     hors de `.rk-home` et plus haut dans le DOM. */
  position: relative;
  padding: 0;
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-optical-sizing: auto;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Une lueur ne se voit pas en plein jour : plutôt que de retirer les box-shadow
     thème par thème, le halo devient transparent en clair — l'ombre reste déclarée
     mais ne peint rien. `light-dark()` se résout sur le `color-scheme` que Forgejo
     pose lui-même sur :root, donc ces deux jetons suivent le sélecteur de thème
     natif au même titre que les couleurs empruntées. */
  --rk-glow: 0 0 34px -12px light-dark(transparent, color-mix(in srgb, var(--color-primary) 55%, transparent));
  --rk-glow-strong: 0 0 42px -6px
    light-dark(transparent, color-mix(in srgb, var(--color-primary) 72%, transparent));
  --rk-glow-text: light-dark(transparent, color-mix(in srgb, var(--color-primary) 55%, transparent));

  --rk-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --rk-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Grille fine estompée vers le bas par un masque radial. Purement décoratif.
   Teintée à 10 % du primaire via le jeton alpha natif de Forgejo. */
.rk-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--color-primary-alpha-10) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-primary-alpha-10) 1px, transparent 1px);
  background-size:
    64px 64px,
    64px 64px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% -10%, #000 30%, transparent 95%);
  mask-image: radial-gradient(120% 80% at 50% -10%, #000 30%, transparent 95%);
}

.rk-wrap {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.4rem) clamp(3rem, 8vw, 5rem);
}

/* ── Hero ────────────────────────────────────── */
.rk-hero {
  max-width: 46rem;
  padding: clamp(2.6rem, 8vw, 5.5rem) 0 2.4rem;
}

.rk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
  color: var(--color-primary);
  font-family: var(--rk-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 18px var(--rk-glow-text);
}

.rk-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--color-primary);
  box-shadow: 0 0 10px var(--rk-glow-text);
}

.rk-home h1.rk-title {
  display: flex;
  align-items: baseline;
  gap: 0.12em;
  margin: 0;
  border: none;
  padding: 0;
  font-weight: 800;
  font-size: clamp(3.4rem, 11vw, 6.6rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

/* Le point du titre : `--color-accent` et non `--color-primary`, soit un cran plus
   clair dans la même famille — le rappel bicolore du site sans sortir de l'orange. */
.rk-title__dot {
  width: 0.16em;
  height: 0.16em;
  border-radius: 999px;
  background: var(--color-accent);
  box-shadow: 0 0 24px -4px var(--color-accent);
}

.rk-tagline {
  margin: 1.3rem 0 0;
  max-width: 24ch;
  color: var(--color-text);
  font-weight: 600;
  font-size: clamp(1.25rem, 3.2vw, 1.9rem);
  line-height: 1.15;
  text-wrap: balance;
}

.rk-lede {
  margin: 1.1rem 0 0;
  max-width: 46ch;
  color: var(--color-text-light-2);
  font-size: 1rem;
}

.rk-cta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}

.rk-home .rk-btn {
  padding: 0.65rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  font-family: var(--rk-mono);
  font-size: 0.8125rem;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 120ms var(--rk-ease),
    border-color 120ms var(--rk-ease),
    box-shadow 120ms var(--rk-ease);
}

/* Même couple fond/texte que les boutons primaires de Forgejo : `-contrast` est
   précisément le jeton prévu pour rester lisible sur `--color-primary` (blanc en
   clair, noir en sombre, où le primaire s'éclaircit). */
.rk-home .rk-btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 600;
  box-shadow: var(--rk-glow);
}

.rk-home .rk-btn--primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--rk-glow-strong);
}

/* Sur fond primaire plein, un anneau primaire disparaîtrait : on reprend la couleur
   de contraste, qui est par construction lisible sur ce fond. */
.rk-home .rk-btn--primary:focus-visible {
  outline: 2px solid var(--color-primary-contrast);
  outline-offset: 2px;
}

.rk-home .rk-btn--ghost {
  border-color: var(--color-primary-alpha-40);
}

.rk-home .rk-btn--ghost:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--rk-glow);
}

/* ── Cartes ──────────────────────────────────── */
.rk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.rk-card {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--fancy-card-border);
  border-radius: 12px;
  background: var(--fancy-card-bg);
  transition:
    transform 120ms var(--rk-ease),
    border-color 120ms var(--rk-ease),
    box-shadow 120ms var(--rk-ease);
}

.rk-card:hover {
  border-color: var(--color-primary-alpha-40);
  transform: translateY(-2px);
  box-shadow: var(--rk-glow);
}

.rk-home .rk-card h2 {
  margin: 0 0 0.5rem;
  border: none;
  padding: 0;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
}

.rk-card p {
  margin: 0;
  color: var(--color-text-light-2);
  font-size: 0.875rem;
}

.rk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.rk-home .rk-tag {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--color-primary-alpha-40);
  border-radius: 999px;
  background: var(--color-primary-alpha-10);
  /* `-dark-2` et non `-primary` : à 12 px sur le fond teinté du tag, le primaire ne
     tient que 4,09:1 en thème clair. Ce jeton s'assombrit en clair et s'éclaircit en
     sombre (l'échelle Forgejo est relative au fond, pas absolue) — 5,78:1 et 6,21:1. */
  color: var(--color-primary-dark-2);
  font-family: var(--rk-mono);
  font-size: 0.75rem;
  text-decoration: none;
}

.rk-home .rk-tag--link:hover {
  border-color: var(--color-primary);
}

.rk-home :focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .rk-home .rk-btn,
  .rk-card {
    transition: none;
  }

  .rk-home .rk-btn:hover,
  .rk-card:hover {
    transform: none;
  }
}