/* ══════════════════════════════════════════════════════════════════
   ROARY — le rythme de la page d'accueil, étendu à tout le site

   L'accueil respire mieux que les pages intérieures pour deux raisons
   mesurables, et une seule d'entre elles saute aux yeux.

   1. La respiration verticale. L'accueil donne cent quatre-vingts
      pixels au-dessus de chaque section et cent vingt en dessous ; les
      pages intérieures s'arrêtaient à cent cinquante et cent dix. Trente
      pixels, ce n'est rien sur une section, mais c'est ce qui manque à
      la sixième pour qu'elle continue de paraître posée plutôt
      qu'entassée.

   2. La longueur de ligne — la vraie coupable. L'accueil contraint sa
      prose à cinquante-deux caractères ; les pages intérieures la
      laissaient courir sur toute la largeur de la carte, soit près de
      cent dix. Au-delà de quatre-vingts, l'œil perd le début de la
      ligne suivante en revenant à gauche, et le texte se lit deux fois
      plus lentement sans qu'on sache pourquoi. C'est ce qui donnait aux
      pages intérieures leur air de mur.

   Le remède n'est pas de rétrécir les blocs — une colonne étroite
   perdue dans une carte large fait pauvre. C'est de couper la prose
   longue en deux colonnes : la carte garde sa largeur, la ligne
   retrouve sa mesure. Le texte se lit de gauche à droite, colonne après
   colonne, comme dans un journal.

   Chargé après `roary-raffinements.css`, dont il reprend et corrige le
   rythme vertical.
   ══════════════════════════════════════════════════════════════════ */


/* ── 1. La respiration, alignée sur l'accueil ──────────────────── */

@media (min-width: 861px){
  .stack-card > .card-inner{
    padding-top: 180px !important;
    padding-bottom: 120px !important;
  }
  .stack-card > .plateforme-inner,
  .plateforme-inner{
    padding-top: 180px !important;
    padding-bottom: 120px !important;
  }
}

/* Une remarque sur ce qui n'est PAS fait ici.

   J'ai d'abord voulu porter toutes les cartes à 1160 pixels et borner
   chaque paragraphe à soixante-huit caractères, comme sur l'accueil.
   Les deux règles cassaient des pages : `candidature` et
   `devenir-partenaire` tiennent volontairement sur 680 pixels parce
   qu'elles portent un formulaire, et la moitié des cartes du site sont
   centrées — y borner un paragraphe l'aurait décalé du titre placé
   au-dessus.

   La largeur de ligne se règle donc là où le problème existe vraiment :
   dans les quatre blocs de prose longue, par les colonnes ci-dessous.
   Ailleurs, les paragraphes étaient déjà courts. */


/* ── 3. La prose longue, en deux colonnes ──────────────────────── */

.colonnes{
  columns: 2;
  column-gap: clamp(38px, 4.5vw, 76px);
  /* Un filet fin entre les colonnes : il tient le regard sur la bonne
     ligne au moment du retour à gauche, sans se voir comme une bordure. */
  column-rule: 1px solid var(--camel-pale, #E8C9A0);
  margin-top: 26px;
}

.colonnes > p{
  margin: 0 0 20px !important;
  /* Un paragraphe coupé en deux par un saut de colonne oblige à
     chercher sa suite. On préfère une colonne légèrement plus courte. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
.colonnes > p:last-child{ margin-bottom: 0 !important; }

/* Les deux colonnes ne se justifient que si chacune reste lisible.
   Sous neuf cents pixels, deux colonnes de trente-cinq caractères
   seraient pires que le mur qu'on cherchait à éviter. */
@media (max-width: 900px){
  .colonnes{ columns: 1; column-rule: none; }
  .colonnes > p{ max-width: 68ch; }
}

/* Sur les très grands écrans, la colonne redevient longue : on desserre
   plutôt que d'ajouter une troisième colonne, qui ferait dépliant. */
@media (min-width: 1400px){
  .colonnes{ column-gap: 88px; }
}


/* ── 4. Les blocs déjà en deux colonnes ────────────────────────── */

/* `.two-col` existait avant ce fichier, avec son propre écart. On
   l'aligne sur celui des colonnes de prose pour que le site n'ait
   qu'une seule valeur de gouttière. */
@media (min-width: 901px){
  .two-col{ gap: clamp(38px, 4.5vw, 76px) !important; }
}


/* ── 5. Le titre et son intitulé ───────────────────────────────── */

/* Sur l'accueil, l'intitulé de section est suivi d'un intervalle franc
   avant le titre. Les pages intérieures les collaient, ce qui les
   faisait lire comme une seule ligne à deux graisses. */
.stack-card > .card-inner > .label{ display: inline-block; margin-bottom: 18px; }
.stack-card > .card-inner > h2{ margin-bottom: 26px !important; }