/* page-content.css — bloc de contenu editorial en bas de page.
   Reprend a l'identique le style deja utilise en dur par echo.html, brume.html,
   focus.html & co., pour que les pages qui en manquaient n'introduisent pas un
   second look. Les couleurs passent par les variables deja definies par chaque
   page (--gold / --gold-light cote LoL, --red / --cream cote VALORANT), avec
   une valeur de repli pour les pages qui ne les declarent pas. */

.page-content {
  position: relative;
  z-index: 10;
  max-width: 780px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
  border-top: 1px solid rgba(200, 170, 110, .12);
  background: transparent;
}

.page-content h2 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(.85rem, 1.8vw, 1rem);
  color: var(--gold, #C8AA6E);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  font-weight: 600;
}

.page-content h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(.75rem, 1.5vw, .85rem);
  color: var(--gold, #C8AA6E);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 1.5rem 0 .6rem;
  font-weight: 600;
  opacity: .85;
}

.page-content p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(.82rem, 1.5vw, .92rem);
  color: var(--gold-light, #F0E6D3);
  opacity: .78;
  line-height: 1.8;
  margin: 0 0 .85rem;
}

.page-content a { color: var(--gold, #C8AA6E); }

/* Edition VALORANT : meme structure, typo et palette de l'edition. */
.page-content--valo { border-top-color: rgba(255, 70, 85, .18); }

.page-content--valo h2,
.page-content--valo h3 {
  font-family: 'Oswald', 'Rajdhani', Impact, sans-serif;
  color: var(--red, #FF4655);
  letter-spacing: .1em;
}

.page-content--valo p {
  font-family: 'Rajdhani', Georgia, serif;
  font-size: clamp(.88rem, 1.6vw, 1rem);
  color: var(--cream, #ECE8E1);
  opacity: .72;
}

.page-content--valo a { color: var(--red, #FF4655); }

/* Ligne « a decouvrir aussi » : les liens sont des elements distincts pour que
   l'i18n de la page puisse les traduire un par un (les appliers ecrivent du
   textContent, donc pas de <a> a l'interieur d'un paragraphe traduit). */
.page-content .pc-more {
  margin-top: 1.4rem;
  font-size: clamp(.78rem, 1.4vw, .86rem);
  opacity: .7;
}

.page-content .pc-more a { text-decoration: underline; text-underline-offset: 3px; }