/* Cette feuille ne sert plus la page dont elle porte le nom : recompenses.html
   a ete supprimee le 23 aout 2026 avec le volet Discord. Elle reste parce que
   dix autres fichiers en dependent, dont l'accueil, les pages de marque et le
   blog : ses classes « resource-* » portent la coquille commune de toutes ces
   pages. La supprimer en croyant faire le menage casserait le site entier.

   Ne pas la renommer non plus sans reprendre tous ses appels d'un coup. */

/* .resource-brand-name a rejoint base.css, avec le reste de
   l'en-tete : les pages qui ne chargent pas cette feuille en avaient
   besoin aussi. */

/* -------------------------------------------------------------------
   Reprise du 26 aout 2026, bloc 1 de la refonte. Trois changements,
   et aucun ne touche a la structure des pages :

   1. LES COULEURS PASSENT PAR LES JETONS. Elles etaient ecrites en dur,
      donc les pages restaient sombres quand le site bascule en mode
      jour. Les degrades sombres empiles ont ete remplaces par une
      teinte unique : la charte refuse « les degrades inutiles », et
      superposer deux fonds presque identiques en etait un.

   2. LES TAILLES REMONTENT. Le bouton principal du site etait ecrit en
      12 px, l'intitule de section en 10 px, et les zones cliquables
      faisaient moins de 44 px. Sept visiteurs sur dix ont plus de
      cinquante ans.

   3. LES TITRES QUITTENT ORBITRON, decision de Joris du 26 aout 2026.
      Elle reste sur le nom ASCENDRA de l'en-tete, ou elle fait logo.
   ------------------------------------------------------------------- */

.resource-shell {
  width: min(100%, 1280px);
  margin: auto;
  padding: 74px 16px 40px;
}

.resource-hero {
  min-height: 340px;
  padding: clamp(32px, 6vw, 76px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 34px;
  background: var(--surface);
  overflow: hidden;
}

.resource-eyebrow,
.resource-heading > span {
  color: var(--accent-ink);
  font: 700 13px/1.4 var(--ff-titre);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.resource-hero h1 {
  margin: 18px 0;
  font: 800 clamp(34px, 5vw, 58px) var(--ff-titre);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 820px;
  text-wrap: balance;
}

.resource-hero p,
.resource-heading p {
  color: var(--muted);
  font-size: var(--fs-lift);
  line-height: 1.7;
  max-width: 640px;
}

/* Le bouton principal du site. Il etait ecrit en 12 px : c'est
   l'element sur lequel on compte le plus pour convertir, et c'etait le
   plus petit texte de la page. Le fond plein remplace le degrade
   translucide, qui laissait le bouton se fondre dans la carte. */
.resource-primary {
  min-height: var(--tap);
  width: max-content;
  margin-top: 22px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font: 700 16px var(--ff-texte);
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}

.resource-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.resource-primary:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

.resource-section {
  margin-top: 18px;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--surface);
}

.resource-heading {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

/* La marge automatique n'est pas cosmetique : le paragraphe herite d'une
   largeur maximale de 640 px dans un conteneur de 760, et sans elle sa
   boite restait calee a gauche. Le texte etait donc centre dans une
   boite decentree, et tombait 60 px a gauche du titre. Mesure sur toutes
   les pages qui portent ce bloc le 23 aout 2026, apres que Joris a
   signale que les textes de l'accueil n'etaient pas alignes.
   Elle ne vaut que pour ce bloc : le paragraphe de .resource-hero est
   volontairement cale a gauche, et la partager le centrerait. */
.resource-heading p { margin-inline: auto; }

.resource-heading h2 {
  margin: 14px 0 12px;
  font: 800 clamp(28px, 4.5vw, 44px) var(--ff-titre);
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* --- Ce qui suit servait la page des recompenses, aujourd'hui retiree.
   Aucune page ne porte plus ces classes : elles partiront au bloc du
   menage, avec le reste du style mort, une fois verifie qu'aucune n'est
   construite au vol par du PHP ou du JavaScript. On ne supprime pas un
   fichier sur son nom, et on ne supprime pas une classe sur son air. */

.rewards-status {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 24px 0;
}

@media (max-width: 760px) {
  .resource-hero { padding: 28px; }
}