/* ============================================================
   JOURNAL — gazette serrée
   Chargé uniquement par /fr/journal/ et les pages d'article.
   Les pages du site vendent, le Journal se lit : il se distingue
   par l'échelle et la mise en page, jamais par la police.
   Aucun élément du reste du site ici — ni bandeau, ni bouton
   plein, ni bloc de réassurance.
   Densité : aucun blanc décoratif. Le pas maximum est 40 px et
   il ne sert qu'avant l'encart final.
   ============================================================ */

.jn {
  /* Échelle d'espacement — quatre valeurs, pas une de plus. */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;              /* réservé à l'avant de l'encart final */

  --colonne: 680px;
  --j-ink: #33352e;          /* gris très foncé, jamais du noir pur */
  --j-gris: #6f7268;         /* légendes, surtitres, dates */
  --j-filet: #d8d4c9;        /* filets fins */
  --j-teinte: #f4f1ea;       /* fond de l'encart, à peine posé */

  color: var(--j-ink);
  font-family: var(--font-labeur);
  font-size: 16px;
  line-height: 1.55;         /* un seul interligne pour tout le texte courant */
  text-align: left;          /* jamais justifié */
  hyphens: none;

  /* Dégagement de la barre de navigation, qui est en position fixe sur
     ~100 px et que ces pages ne passent sous aucun hero. Ce n'est pas du
     blanc décoratif : sans lui le titre passe sous la barre. */
  padding-top: 104px;
}

/* ---------- La colonne ---------- */
.jn__col {
  max-width: var(--colonne);
  margin-inline: auto;
  padding-inline: var(--s3);
}

/* ---------- Texte courant ---------- */
.jn p {
  margin: 0 0 0.75em;
  /* Taille et interligne viennent de .jn par héritage : si on les repose ici,
     .jn p (0,1,1) l'emporte sur .jn__extrait ou .jn__r (0,1,0) et les écrase. */
}
.jn a { color: inherit; text-underline-offset: 3px; }

/* ---------- Titres ---------- */
.jn h1 {
  font-family: var(--font-editorial);
  font-size: 28px;
  font-weight: 400;          /* graisse normale, aucune capitale */
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 var(--s1);
  color: var(--j-ink);
}
.jn h2 {
  font-family: var(--font-editorial);
  font-size: 20px;
  font-weight: 400;          /* aucun titre en gras lourd */
  line-height: 1.3;
  margin: 1.8em 0 0.5em;
  color: var(--j-ink);
}

/* ---------- Tête d'article ----------
   Surtitre + titre + auteur + image + légende tiennent dans 600 px. */
.jn__surtitre {
  font-family: var(--font-interface);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--j-gris);
  margin: 0 0 var(--s1);
}
.jn__auteur {
  font-size: 14px;
  font-style: italic;
  color: var(--j-gris);
  margin: 0 0 var(--s2);
}

/* ---------- Image principale ---------- */
.jn__hero {
  margin: 0 0 var(--s3);
  text-align: center;
}
/* Largeur 480 px, mais en portrait c'est la hauteur qui commande : width et
   height restent auto pour que le rapport soit tenu, et les deux max bornent. */
.jn__hero img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(480px, 100%);
  max-height: 430px;
  margin-inline: auto;
}

.jn figcaption {
  font-size: 12px;
  line-height: 1.4;
  color: var(--j-gris);
  margin-top: var(--s1);
}

/* ---------- Vignettes secondaires, dans le texte ---------- */
.jn__vignette {
  float: right;
  width: 300px;
  margin: 0 0 var(--s3) var(--s3);
}
.jn__vignette img { display: block; width: 100%; height: auto; }

/* ---------- Lettrine ---------- */
.jn__chapeau::first-letter {
  float: left;
  font-family: var(--font-labeur);   /* même police que le corps */
  font-size: 3em;                    /* deux lignes de 16 px à 1,55 */
  line-height: 0.84;
  padding: 0.06em 0.08em 0 0;
  color: var(--j-ink);
}

/* ---------- Filet avant l'encart ---------- */
.jn__filet {
  width: 80px;
  height: 1px;
  border: 0;
  background: var(--j-filet);
  margin: var(--s4) auto;    /* le seul 40 px de la page */
  clear: both;
}

/* ---------- Encart final ---------- */
.jn__encart {
  background: var(--j-teinte);
  padding: var(--s2);
  margin: 0 0 var(--s3);
  font-size: 15px;
}
.jn__encart h2 { margin: 0 0 var(--s1); font-size: 20px; }
.jn__encart p { margin-bottom: var(--s2); }
.jn__bouton {
  display: inline-block;
  font-family: var(--font-interface);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--j-ink);
  border: 1px solid var(--j-ink);   /* contour, jamais de fond plein */
  background: none;
  padding: var(--s1) var(--s2);
  text-decoration: none;
}
.jn__bouton:hover { background: var(--j-ink); color: var(--j-teinte); }

/* ---------- FAQ ---------- */
.jn__faq { font-size: 15px; }
.jn__faq-titre {
  font-family: var(--font-interface);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--j-gris);
  font-weight: 400;
  margin: 0 0 var(--s2);
}
.jn__q {
  font-family: var(--font-labeur);
  font-size: 15px;
  font-weight: 600;
  margin: var(--s2) 0 var(--s1);
}
.jn__r { font-size: 15px; margin-bottom: var(--s2); }

/* ---------- Page Journal : liste éditoriale ---------- */
.jn__intro { font-size: 16px; font-style: italic; }

.jn__liste { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.jn__entree {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s3);
  align-items: start;
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--j-filet);
}
.jn__entree:last-child { border-bottom: 0; }
.jn__entree--sansimage { grid-template-columns: 1fr; }
.jn__entree img { display: block; width: 100%; height: auto; }
.jn__entree h2 { font-size: 20px; margin: var(--s1) 0; }
.jn__entree a { text-decoration: none; }
.jn__entree a:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.jn__extrait { font-size: 15px; margin: 0; }

/* ---------- Rythme vertical ---------- */
.jn__tete { padding-top: 0; }
.jn__corps { padding-bottom: var(--s3); }
.jn__faq { padding-bottom: var(--s3); }

/* ---------- Mobile ---------- */
@media (max-width: 680px) {
  .jn__entree { grid-template-columns: 1fr; gap: var(--s2); }
  /* Les vignettes reprennent la pleine colonne, hauteur plafonnée à 60 % de
     l'écran pour ne pas chasser le texte. */
  .jn__vignette {
    float: none;
    width: 100%;
    margin: var(--s3) 0;
    text-align: center;
  }
  .jn__vignette img {
    width: auto;
    max-width: 100%;
    max-height: 60vh;
    margin-inline: auto;
  }
  .jn__hero img { max-height: 60vh; }
}