/* ===== Widget Colonnes numérotées (braillard-colonnes) =====
   Proposition Avrile (15.08.26) : grille 2-4 colonnes, numéro en PP Eiko
   italique (.1 .2 .3), titre en gras, paragraphe. Remplace les cartes
   bricolées (#64) et les listes à puces (#65). Le widget vit dans la colonne
   de contenu du gabarit (retrait 35 % conservé -> aligné sur les textes). */

.br-col{
  display: grid;
  grid-template-columns: repeat(var(--br-col-n, 4), minmax(0, 1fr));
  column-gap: clamp(16px, 1.85vw, 32px);   /* gouttière = grille du site */
  row-gap: clamp(28px, 2.8vw, 48px);
  font-family: var(--br-font-body);
  color: var(--br-black, #000);
}

/* Tête : numéro + titre sur la même ligne de base ; le titre peut passer sur 2 lignes. */
.br-col__head{
  display: flex; align-items: baseline; gap: clamp(8px, .7vw, 12px);
  margin: 0 0 clamp(10px, 1vw, 16px);
}
.br-col__num{
  flex: 0 0 auto;
  font-family: var(--br-font-display);     /* PP Eiko, comme le numéro des Missions */
  font-style: italic; font-weight: 300;
  font-size: clamp(22px, 1.85vw, 32px); line-height: 1;
  /* La Light Italic (seule italique PP Eiko disponible) paraît trop fine à
     cette taille (retour client) : on épaissit légèrement le trait par un
     contour, sans changer le dessin ni la graisse de la charte. */
  -webkit-text-stroke: 0.4px currentColor;
  paint-order: stroke fill;
}
.br-col__title{
  margin: 0;
  font-family: var(--br-font-body); font-weight: 500;   /* Helvetica Medium = « gras » charte */
  font-size: 20px; line-height: 1.25;   /* 20px fixe (retour client) */
}
.br-col__text{
  font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55;
}
.br-col__text p{ margin: 0 0 .6em; }
.br-col__text p:last-child{ margin-bottom: 0; }

/* Responsive : 4/3 colonnes -> 2 sur tablette, 1 sur mobile. */
@media (max-width: 900px){
  .br-col--4cols, .br-col--3cols{ --br-col-n: 2; }
}
@media (max-width: 560px){
  .br-col{ --br-col-n: 1; row-gap: clamp(22px, 5vw, 32px); }
}