/* ═══════════════════════════════════════════════════════════════════
   PRESSE — en-tête, article à la une, filtres, grille, contact
   Dépend de : tokens.css, base.css, nav.css, theme.css

   La couleur n'entre ici que par un filet de rubrique : un trait court
   au-dessus de chacun des trois moments de la page — l'en-tête, la
   une, le contact. Rien d'autre. Les parutions restent en noir et
   blanc : ce sont elles qu'on vient lire, pas la mise en page.

   SOMMAIRE
   01. En-tête de page
   02. Filet de rubrique
   03. Filtres
   04. Grille des parutions
   05. Contact presse
   06. Responsive
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01. EN-TÊTE DE PAGE ────────────────────────────────────────────*/
.page-head {
  padding-top: calc(var(--nav-h) + var(--s-9));
  padding-bottom: var(--s-8);
}

.page-head-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-7);
}

.page-head .eyebrow { margin-bottom: var(--s-5); }

.page-title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-normal);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
}
.page-title em { font-style: italic; }

.head-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-4);
  text-align: right;
}

.count {
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: var(--tr-title);
  color: var(--c-ink-soft);
  white-space: nowrap;
}


/* ── 02. FILET DE RUBRIQUE ──────────────────────────────────────────
   Un trait court, posé au-dessus d'un surtitre. Il marque l'entrée
   d'un des trois moments de la page et c'est le seul endroit où la
   couleur apparaît : rouge l'en-tête, bleu la une, vert le contact.
   Trois traits sur toute la page — pas un de plus.               */
.rubrique {
  display: block;
  width: var(--s-8);
  height: var(--s-2);
  margin-bottom: var(--s-6);
  background: var(--rubrique-c, var(--c-ink));
}
.rubrique--vert  { --rubrique-c: var(--c-art-vert); }
.rubrique--rouge { --rubrique-c: var(--c-art-rouge); }
.rubrique--bleu  { --rubrique-c: var(--c-art-bleu); }


/* ── 03. FILTRES ────────────────────────────────────────────────────
   Collés sous la nav. Le tri est un outil, pas un motif : il reste
   en noir.                                                        */
.filters {
  position: sticky;
  top: var(--nav-h);
  z-index: var(--z-sticky);
  background: var(--c-page);
  border-block: 1px solid var(--c-line);
}

.filters-inner {
  display: flex;
  gap: var(--s-7);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--s-4);
}
.filters-inner::-webkit-scrollbar { display: none; }

.filter-btn {
  flex-shrink: 0;
  padding: var(--s-2) 0;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color var(--t);
}
.filter-btn:hover { color: var(--c-ink); }

.filter-btn[aria-pressed='true'] {
  color: var(--c-ink);
  border-bottom-color: var(--c-ink);
}


/* ── 04. GRILLE DES PARUTIONS ───────────────────────────────────────
   Sans cadre et sans filet : chaque parution est posée dans le blanc,
   séparée des autres par du vide. L'écart vertical est deux fois
   l'écart horizontal — c'est lui qui donne le rythme de lecture et
   qui empêche la grille de se refermer sur elle-même.            */
.press {
  padding-block: var(--s-9);
  border-bottom: 1px solid var(--c-line);
}

.press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--s-7);
  row-gap: var(--s-10);
}

.entry {
  display: flex;
  flex-direction: column;
}

.entry img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--c-surface);
}

.entry-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: var(--s-5);
}

.entry-meta {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

.entry-source { color: var(--c-ink); }

.entry-kind {
  color: var(--c-ink-soft);
  white-space: nowrap;
}
.entry-kind::before {
  content: '';
  display: inline-block;
  width: var(--s-4);
  height: var(--bw-hair);
  margin-right: var(--s-3);
  background: var(--c-line);
  vertical-align: middle;
}

.entry-title {
  margin-bottom: var(--s-5);
  font-size: var(--fs-h3);
  font-weight: var(--fw-normal);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-title);
}

/* Le lien se cale en bas de la colonne pour que les liens d'une même
   rangée s'alignent, mais son trait s'arrête au mot : sans cadre,
   un filet pleine largeur redessinerait la carte.               */
.entry .action {
  margin-top: auto;
  align-self: flex-start;
}

.entry.is-hidden { display: none; }

.grid-empty {
  padding-top: var(--s-7);
  font-size: var(--fs-body);
  color: var(--c-ink-soft);
}


/* ── 05. CONTACT PRESSE ─────────────────────────────────────────────
   Le seul fond sombre de la page. Le filet y est vert : c'est le
   troisième et dernier de la page.                                */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: start;
}

.contact-text .eyebrow { margin-bottom: var(--s-4); }
.contact-body p + p    { margin-top: var(--s-4); }
.contact-body          { margin-bottom: var(--s-7); }


/* ── 06. RESPONSIVE ─────────────────────────────────────────────────*/

@media (max-width: 1100px) {
  .press-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .press-grid   { grid-template-columns: 1fr; row-gap: var(--s-9); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-8); }

  .page-head-inner,
  .head-side {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-5);
    text-align: left;
  }

}