/* ==================================================================
   LE BLOG — direction « LE KIOSQUE » (planche 25, retenue le 20/09).

   Chaque article est un NUMERO : une couverture portrait, posee comme
   sur un presentoir. Le blog est une publication, pas une rubrique du
   site.

   LA TYPOGRAPHIE EST CELLE DU SITE. La planche montrait des titres en
   Instrument Serif ; c'etait une faute contre la charte, qui reserve le
   serif a UN seul endroit — le nom de l'enseigne sur la carte du membre
   (`encore-enseigne`). Le kiosque tient sans lui : ce sont le format
   portrait, le halo et le rythme qui font la direction, pas la police.

   Les jetons viennent de `objet-base.css` — aucun hex de charte en dur
   (regle du projet, grepee en validation de sprint).

   DEUX RISQUES connus de cette direction, traites ici :
     - le format portrait COUPE les titres longs -> taille fluide et
       un garde-fou a huit lignes, qui degrade proprement ;
     - l'etal a l'air VIDE avec deux articles -> les couvertures ne
       s'etirent pas, elles se centrent.
   ================================================================== */

/* ── La page ─────────────────────────────────────────────────────
   Le blog portait `.wrap.tunnel` — une classe definie dans
   `inscription.css`, que cette page ne charge PAS. Resultat : aucun
   espacement, le titre collait a la navigation. Une classe absente
   n'est pas rouge, elle est invisible ; c'est la meme famille de
   defaut qu'un jeton de charte qui n'existe pas. */
.blog-page { padding-block: clamp(30px, 5vw, 68px) clamp(56px, 7vw, 104px); max-width: 1180px; }

/* ── La tete du kiosque : un filet epais, comme un ours de journal ── */
.blog-tete { border-bottom: 2px solid var(--encre); padding-bottom: clamp(14px, 2vw, 20px);
  margin-bottom: clamp(26px, 3.5vw, 40px); }
.blog-tete h1 { font-family: var(--dis); font-size: clamp(32px, 5vw, 50px); font-weight: 800;
  line-height: 1.02; letter-spacing: -.035em; margin: 0; text-wrap: balance; color: var(--encre); }
.blog-tete .lead { font-size: clamp(14px, 1.5vw, 16px); line-height: 1.6; color: var(--encre-3);
  max-width: 58ch; margin: 10px 0 0; }

/* ── L'etal ──────────────────────────────────────────────────────
   `auto-fit` avec une largeur MAXIMALE : a deux articles, les deux
   couvertures gardent leur taille et se centrent, au lieu de s'etirer
   sur toute la largeur — ce qui se verrait davantage que le vide. */
.billets { display: grid; gap: clamp(16px, 2.2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 300px)); justify-content: center; }

/* L'etal ne part du bord QUE s'il a de quoi le remplir. A une, deux ou trois
   couvertures, elles se centrent : une seule couverture collee au bord avec
   un metre de vide a cote se voit bien plus qu'un etal centre. C'est le
   risque connu de cette direction, et il se regle en une ligne. */
@media (min-width: 900px) {
  .billets:has(.numero:nth-child(4)) { justify-content: start; }
}

/* ── Un numero ─────────────────────────────────────────────────── */
.numero { position: relative; aspect-ratio: 3 / 4; border-radius: 5px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(16px, 2vw, 22px) clamp(15px, 1.8vw, 20px) clamp(17px, 2vw, 22px);
  background: var(--encre); isolation: isolate;
  box-shadow: 0 1px 0 rgba(16, 30, 54, .2), 0 10px 26px rgba(16, 30, 54, .16);
  transition: transform .2s ease, box-shadow .2s ease; }
.numero:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(16, 30, 54, .2), 0 18px 40px rgba(16, 30, 54, .22); }

/* Le halo safran : c'est lui qui fait l'image quand il n'y a pas de photo. */
.numero::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(125% 92% at 50% 0, rgba(240, 168, 28, .5), transparent 62%); }

/* Une couverture sur trois passe en papier : sans ce rythme, l'etal est un mur. */
.numero.papier { background: var(--blanc); border: 1px solid var(--ligne);
  box-shadow: 0 1px 0 var(--ligne-2), 0 8px 20px rgba(16, 30, 54, .07); }
.numero.papier::before { background: radial-gradient(125% 92% at 50% 0, var(--safran-soft), transparent 60%); }

/* La photo, quand il y en a une : elle passe DERRIERE, assombrie, pour que
   le titre reste lisible. Une couverture ne se lit pas a moitie. */
.numero .photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; }
.numero.avec-photo::before { background:
  linear-gradient(to top, rgba(16, 30, 54, .92) 18%, rgba(16, 30, 54, .55) 52%, rgba(16, 30, 54, .15)); }
.numero.avec-photo.papier { background: var(--encre); border: 0; }

.numero .rubrique { font-family: var(--txt); font-size: 9.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--safran); margin-bottom: 8px; }
.numero.papier:not(.avec-photo) .rubrique { color: var(--safran-fonce); }

.numero h2, .numero h3 { font-family: var(--dis); font-weight: 700; color: var(--blanc);
  font-size: clamp(18px, 2vw, 23px); line-height: 1.18; letter-spacing: -.022em; margin: 0;
  text-wrap: balance;
  /* Le garde-fou : un titre trop long s'arrete proprement plutot que de
     pousser la rubrique hors du cadre. Huit lignes, c'est deja trop — mais
     ca ne casse pas la page le jour ou quelqu'un ecrit long. */
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.numero.papier:not(.avec-photo) h2, .numero.papier:not(.avec-photo) h3 { color: var(--encre); }

.numero a.titre { color: inherit; text-decoration: none; }
.numero a.titre::after { content: ''; position: absolute; inset: 0; }

.numero .pied { display: flex; align-items: center; gap: 7px; margin-top: 11px;
  font-family: var(--txt); font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.numero.papier:not(.avec-photo) .pied { color: var(--encre-4); }

.blog-vide { text-align: center; color: var(--encre-3); padding: clamp(44px, 9vw, 96px) 0;
  font-family: var(--dis); font-weight: 600; font-size: clamp(18px, 2.2vw, 23px); }

/* ── L'article ───────────────────────────────────────────────────
   Le kiosque s'arrete a la porte : une fois l'article ouvert, il n'y a
   plus qu'une colonne de 66 caracteres et du serif. */
.article { max-width: 66ch; margin: 0 auto; }
.article .fil { font-family: var(--txt); font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--encre-4); }
.article .fil .rubrique { color: var(--safran-fonce); }
.article h1 { font-family: var(--dis); font-weight: 800; font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.06; letter-spacing: -.035em; margin: 14px 0 0; text-wrap: balance; color: var(--encre); }
.article .chapo { font-family: var(--txt); font-size: clamp(17px, 1.9vw, 20px); line-height: 1.55;
  color: var(--encre-2); margin: 14px 0 0; }
.article .signature { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--txt); font-size: 12px; color: var(--encre-4);
  padding: 15px 0; margin: 20px 0 clamp(22px, 3vw, 32px); border-block: 1px solid var(--ligne); }
.article .couverture { width: 100%; border-radius: 6px; display: block;
  margin: 0 0 clamp(22px, 3vw, 32px); }

.prose { font-size: clamp(16px, 1.7vw, 17.5px); line-height: 1.78; color: var(--encre-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--dis); font-weight: 700; font-size: clamp(20px, 2.3vw, 25px);
  line-height: 1.25; letter-spacing: -.02em; color: var(--encre); margin-top: 1.7em; text-wrap: balance; }
.prose h3 { font-family: var(--dis); font-size: 17px; font-weight: 700; color: var(--encre); margin-top: 1.5em; }
.prose strong { color: var(--encre); font-weight: 600; }
.prose a { color: var(--safran-fonce); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose li + li { margin-top: .45em; }
.prose blockquote { font-size: 1.05em; line-height: 1.6;
  border-inline-start: 2px solid var(--safran); padding-inline-start: 18px; color: var(--encre-2); font-style: normal; }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--safran-voile);
  border: 1px solid var(--ligne); border-radius: 4px; padding: 1px 6px; }
.prose img { max-width: 100%; border-radius: 6px; }
.prose hr { border: 0; border-top: 1px solid var(--ligne); margin: 2.2em 0; }

/* ── La suite : trois autres numeros, en petit ─────────────────── */
.suite { max-width: 66ch; margin: clamp(38px, 5vw, 62px) auto 0;
  padding-top: clamp(24px, 3vw, 34px); border-top: 2px solid var(--encre); }
.suite h2 { font-family: var(--dis); font-weight: 700; font-size: 19px; letter-spacing: -.02em;
  margin: 0 0 14px; color: var(--encre); }
.suite ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.suite li + li { border-top: 1px solid var(--ligne); }
.suite a { display: flex; align-items: baseline; gap: 12px; padding: 13px 2px; color: var(--encre);
  text-decoration: none; }
.suite a:hover b { color: var(--safran-fonce); }
.suite a b { font-family: var(--dis); font-weight: 700; font-size: 16px; line-height: 1.3;
  letter-spacing: -.015em; flex: 1; }
.suite a span { font-family: var(--txt); font-size: 11.5px; color: var(--encre-4); white-space: nowrap; }

/* ── L'arabe ─────────────────────────────────────────────────────
   Instrument Serif ne dessine PAS l'arabe : sans cette regle, les
   couvertures et les titres arabes tombent sur une police de repli et
   la direction s'effondre, sans que rien ne le signale. */
[dir="rtl"] .blog-tete h1,
[dir="rtl"] .numero h2, [dir="rtl"] .numero h3,
[dir="rtl"] .article h1, [dir="rtl"] .article .chapo,
[dir="rtl"] .prose h2, [dir="rtl"] .suite h2, [dir="rtl"] .suite a b,
[dir="rtl"] .blog-vide { font-family: var(--kufi); letter-spacing: 0; line-height: 1.4; }
[dir="rtl"] .numero h2, [dir="rtl"] .numero h3 { font-size: clamp(17px, 1.9vw, 21px); -webkit-line-clamp: 7; }
[dir="rtl"] .article h1 { font-size: clamp(27px, 4.2vw, 42px); line-height: 1.3; }
[dir="rtl"] .article .chapo { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.75; }
[dir="rtl"] .prose { font-family: var(--kufi); line-height: 1.95; }
[dir="rtl"] .prose h2 { font-size: clamp(19px, 2.2vw, 24px); }