/* Graphen Studio — Publication
   Deux moitiés d'écran : à gauche le titre de la page et l'inscription à la
   lettre, collés pendant tout le défilement ; à droite la pile des articles.

   Les articles n'arrivent pas à leur taille définitive : chacun entre par la
   droite, réduit, et se déplie au fur et à mesure qu'il monte dans l'écran.
   L'échelle est posée par publication.js dans --s ; la translation en découle,
   de sorte que le bord droit de l'article reste au même endroit. */

.page--pub { --card-w: 710; }

/* ---------- Colonne de gauche ---------- */

.pub-side {
  grid-column: 1 / 4;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  padding-bottom: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.pub-side__gap { height: 10px; }
.pub-side h1 {
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
}

/* Inscription à la lettre : un champ souligné et un bouton, rien d'autre */
.pub-form { display: flex; flex-direction: column; gap: 3px; width: 60%; }
.pub-form input {
  width: 100%;
  padding: 0 0 1px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink);
}
.pub-form input::placeholder { color: var(--grey); }
.pub-form input:focus { outline: none; border-bottom-color: var(--ink); }
.pub-form button { padding: 1px 1px 0; }

/* ---------- Pile des articles ---------- */

.pub-list {
  grid-column: 4 / 7;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 40px;
  padding-top: 10px;
}

/* Le cadre garde la place de l'article à sa taille pleine : c'est son contenu
   qui est réduit, donc la hauteur de la pile ne bouge pas pendant le
   défilement et le calcul de l'échelle reste stable. */
.pub-card {
  --s: 1;
  transform: translateX(calc((1 - var(--s)) * 70.4%)) scale(var(--s));
  will-change: transform;
}
.pub-card a { display: flex; flex-direction: column; gap: 10px; }

.pub-card__media {
  aspect-ratio: 1.32 / 1;
  overflow: hidden;
  background: var(--line);
}
.pub-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pub-card__cap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 4px;
}
.pub-card__cat { color: var(--grey); }
.pub-card__date { color: var(--grey); text-align: right; }
.pub-card__title {
  grid-column: 1 / 3;
  max-width: 76%;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
}
@media (hover: hover) {
  .pub-card a:hover .pub-card__title { color: var(--grey); transition: color .3s var(--ease); }
}

@media (max-width: 1199px) {
  .page--pub { padding-top: 152px; }
  .pub-side, .pub-list { grid-column: 1 / -1; }
  .pub-side {
    position: static;
    height: 142px;
    padding-bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    align-content: start;
    align-items: start;
  }
  .pub-side__gap { display: none; }
  .pub-side h1 { font-size: 18px; }
  .pub-form { width: 100%; gap: 0; }
  /* Le champ passe à 16 px : en dessous, Safari sur iPhone agrandit toute la
     page quand on le touche. Plus d'air sous le trait, et le bouton en 14 px. */
  .pub-form input {
    font-size: 16px;
    line-height: 20px;
    padding: 4px 0 7px;
  }
  .pub-form button { margin-top: 8px; font-size: 14px; line-height: 18px; }
  .pub-list { row-gap: 40px; padding-top: 0; }
  
  .pub-card { transform: none !important; }
  .pub-card__title { max-width: 90%; line-height: 1; }

  .page--pub { padding-bottom: 60px; }
}

@media (max-width: 809px) {
  .pub-card { transform: translateX(var(--x, 0px)) scale(var(--s)) !important; }
}