/* pages.css — ce que la banque de blocs de la home ne fournit pas : l'en-tête
   d'une page intérieure, la prose des pages légales, la fiche d'un auteur et
   les listes du plan du site.

   Comme home.css et da.css : AUCUNE couleur ni police en dur, uniquement les
   jetons --c-*, --f-*, --t*, --e*, --r-*. Les grilles, les cartes, les
   pastilles, les tableaux et les boutons, eux, restent ceux de home.css :
   cette feuille ne les redéfinit pas. */

/* ─── en-tête de page intérieure ───────────────────────────────────────── */

.pg-hero {
  background: var(--c-fond-2);
  border-bottom: 1px solid var(--c-bord);
  padding-block: var(--e6) var(--e5);
}
.pg-hero .bh-ad17-int {
  display: grid;
  gap: var(--e3);
}
.pg-kicker {
  margin: 0;
  font-size: var(--tm);
  letter-spacing: 0.08em;
  text-transform: var(--f-casse-kicker);
  font-weight: 600;
  color: var(--c-primaire-texte);
}
.pg-titre {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: var(--f-graisse-titre);
  font-size: clamp(var(--t4), 5vw, var(--t6));
  line-height: 1.05;
  color: var(--c-texte);
  max-width: 22ch;
}
.pg-chapeau {
  margin: 0;
  font-size: var(--t2);
  line-height: 1.5;
  color: var(--c-texte-2);
  max-width: 62ch;
}
.pg-meta {
  margin: 0;
  font-size: var(--tm);
  color: var(--c-texte-2);
}
.pg-meta a {
  color: var(--c-primaire-texte);
  font-weight: 600;
}
.pg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  margin-top: var(--e3);
}

/* Le visuel d'un article : large, net, sans déformation. */
.pg-visuel {
  margin: 0;
}
.pg-visuel img {
  width: 100%;
  height: auto;
  border-radius: var(--r-image);
  display: block;
}
.pg-entete-article .pg-meta a {
  color: var(--c-primaire-texte);
  font-weight: 600;
}

/* ─── sections d'une page intérieure ───────────────────────────────────── */

/* Le pas vertical d'une page intérieure est plus court que celui de la home :
   les sections s'enchaînent (portrait, méthode, articles signés, renvoi) et un
   pas de --e7 par section faisait une page inutilement longue. */
.pg-section {
  padding-block: var(--e6);
}
.pg-section + .pg-section {
  border-top: 1px solid var(--c-bord);
}
.pg-h2 {
  margin: 0 0 var(--e5);
  font-family: var(--f-titre);
  font-weight: var(--f-graisse-titre);
  font-size: clamp(var(--t3), 3vw, var(--t4));
  line-height: 1.15;
  color: var(--c-texte);
  max-width: 48ch;
}
.pg-sous-titre {
  margin: 0 0 var(--e3);
  font-family: var(--f-titre);
  font-weight: var(--f-graisse-titre);
  font-size: var(--t2);
  color: var(--c-texte);
}

/* ─── prose : pages légales, à propos, confidentialité ─────────────────── */

.pg-prose {
  max-width: 72ch;
  display: grid;
  gap: var(--e4);
}
.pg-prose h2 {
  margin: var(--e5) 0 0;
  font-family: var(--f-titre);
  font-weight: var(--f-graisse-titre);
  font-size: var(--t2);
  color: var(--c-texte);
}
.pg-prose h2:first-child {
  margin-top: 0;
}
.pg-prose p {
  margin: 0;
  color: var(--c-texte-2);
  font-size: var(--t1);
}
.pg-prose a {
  color: var(--c-primaire-texte);
  font-weight: 600;
}
.pg-prose ul {
  margin: 0;
  padding-left: var(--e5);
  display: grid;
  gap: var(--e2);
  color: var(--c-texte-2);
}
.pg-prose li::marker {
  color: var(--c-primaire-texte);
}

/* ─── fiche d'un auteur ────────────────────────────────────────────────── */

.pg-fiche {
  display: grid;
  gap: var(--e5);
  align-items: start;
}
.pg-fiche-portrait {
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  object-fit: cover;
}
.pg-fiche-corps {
  display: grid;
  gap: var(--e3);
}
.pg-fiche-role {
  margin: 0;
  font-size: var(--tm);
  letter-spacing: 0.06em;
  text-transform: var(--f-casse-kicker);
  color: var(--c-primaire-texte);
  font-weight: 600;
}
.pg-fiche-nom {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: var(--f-graisse-titre);
  font-size: var(--t3);
  color: var(--c-texte);
}
.pg-fiche-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  font-size: var(--tm);
  color: var(--c-texte-2);
}
@media (min-width: 48rem) {
  .pg-fiche {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--e6);
  }
}

/* ─── plan du site et 404 ──────────────────────────────────────────────── */

.pg-plan {
  display: grid;
  gap: var(--e6);
}
.pg-plan-colonne {
  display: grid;
  gap: var(--e3);
  align-content: start;
}
.pg-plan-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e2);
}
.pg-plan-liste a {
  color: var(--c-texte-2);
  text-decoration: none;
}
.pg-plan-liste a:hover {
  color: var(--c-primaire-texte);
  text-decoration: underline;
}
/* Quatre groupes, jamais trois : deux colonnes sur tablette, quatre en ligne
   sur un grand écran, pour ne laisser aucune colonne orpheline. */
@media (min-width: 48rem) {
  .pg-plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .pg-plan {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* La page 404 ne range que deux groupes : elle garde deux colonnes même sur un
   grand écran, sinon la seconde moitié de la rangée resterait vide. */
@media (min-width: 64rem) {
  .pg-plan-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ─── note : ce qui n'est pas une carte ────────────────────────────────── */

.pg-note {
  margin: 0;
  padding: var(--e4) var(--e5);
  background: var(--c-doux);
  color: var(--c-sur-doux);
  border-radius: var(--r-carte);
  max-width: 62ch;
}
.pg-note a {
  color: inherit;
}