/* Mise en page seulement. Aucune couleur, aucun corps, aucun filet :
   tout ce qui porte une valeur vient du systeme, dans systeme/styles.css.

   Une seule chose ici merite d etre lue : .pt-pile.
   .pt-monstre n a aucune marge et son interlignage vaut 154,8 px pour un corps
   de 180. Deux blocs poses l un sous l autre ont des boites qui se touchent
   exactement, et pourtant les jambages du titre tombent dans la premiere ligne
   du bloc suivant. Ca se voit a l ecran et jamais dans une mesure de boites.
   Donc tout empilement vertical est un flex avec un gap, jamais une suite de
   blocs poses les uns sous les autres. */

.pt-pile{display:flex;flex-direction:column;gap:var(--pt-e-6)}
.pt-pile--serree{gap:var(--pt-e-4)}
.pt-pile--large{gap:var(--pt-e-8)}

/* L OUVERTURE.
   Sur telephone : une colonne, le titre puis le chapeau puis la photo.
   A partir de 62em : le titre traverse toute la colonne, et le chapeau se met
   a cote de la photo. Deux raisons, aucune decorative.
   1. Le titre ne peut PAS tenir dans une demi-colonne : son corps est cale sur
      la fenetre (clamp 68 a 180 px), pas sur son conteneur, donc a 1440 il
      ferait 180 px dans 480 px de large et deborderait. Il prend tout, ou rien.
   2. Sans ca, la photo est centree par .pt-solo pendant que le titre est fer a
      gauche : la section a deux bords gauches et la page se met a errer.
      Mesure : titre a 160, photo a 360, dans un conteneur qui commence a 160. */
.pt-ouverture{display:flex;flex-direction:column;gap:var(--pt-e-5)}
@media (min-width:48em){.pt-ouverture{gap:var(--pt-e-7)}}
@media (min-width:62em){
  .pt-ouverture{display:grid;grid-template-columns:minmax(0,1fr) 420px;
    column-gap:var(--pt-e-9);row-gap:var(--pt-e-8);align-items:start}
  .pt-ouverture > .pt-monstre{grid-column:1 / -1}
  .pt-ouverture > .pt-solo{margin-inline:0}
}

/* Un bloc structure de cette page : fer a gauche, et TOUS a la meme largeur,
   pour que leurs bords droits tombent les uns sur les autres. La prose, elle,
   garde sa mesure et n a pas de bord droit dessine. */
.pt-borne{inline-size:100%;max-inline-size:640px;margin-inline:0}

/* La liste des billets. Le dernier ne porte pas de filet : un filet en fin de
   liste separe une liste de rien. */
.pt-liste-billets > :last-child{border-block-end:0}

/* Le bloc de la mer se lit centre : c est le seul de la page. Un tableau de
   chasse vide n a rien a aligner a gauche. */
.pt-au-large{display:flex;flex-direction:column;align-items:center;
  gap:var(--pt-e-6);text-align:center}
.pt-au-large .pt-chapeau{margin-inline:auto}

/* Le compte. Il se lit comme un relevé, pas comme un chiffre d accueil. */
.pt-compte{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--pt-e-3) var(--pt-e-7)}

/* Les cartes de l accueil : trois de front en grand ecran, empilees sur
   telephone. Les trois dernieres photos sont toutes en portrait 3:4, donc une
   vraie grille aux colonnes egales convient ; le carnet, lui, melange les
   formats et garde le flux en colonnes. */
.pt-cartes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pt-e-7)}
@media (min-width:48em){.pt-cartes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pt-cartes .pt-figure img{aspect-ratio:3/4}

/* Le carnet : une GRILLE, pas un flux en colonnes, et c est un ecart assume au
   systeme. Sa grammaire ecarte la grille au motif qu une photo paysage y force
   la hauteur de toute sa rangee et creuse un vide qui se lit comme un oubli.
   C est vrai avec le comportement par defaut, align-items:stretch. Avec
   align-items:start, chaque carte se cale en haut de sa rangee et la difference
   de hauteur devient de l espace de galerie, pas un trou.
   Ce que la grille apporte en echange, et qui vaut l ecart : le flux en colonnes
   se lit colonne par colonne. Sur dix-sept entrees chronologiques, il fallait
   descendre toute la colonne de gauche puis remonter en haut pour la droite.
   Une grille se lit de gauche a droite, donc dans l ordre des dates. */
.pt-planche--lisible{display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--pt-e-8) var(--pt-e-6);align-items:start;column-count:auto}
@media (min-width:48em){.pt-planche--lisible{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pt-planche--lisible .pt-figure{margin-block-end:0}