.card {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
}

.card__content {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.card__actions {
  margin-top: auto;
}

/* ─────────────── « L'essentiel en un coup d'œil » — proposition B, 29 août 2026

   Cinq colonnes égales pour cinq faits de longueurs incomparables : « Aucun »
   avait la même largeur que la phrase du handicap, et le cadre n'avait ni
   bordure droite ni bordure basse — c'est ce tableau ouvert que Léon a vu.

   Une ligne par définition, l'intitulé à gauche, le contenu à droite. Le cadre
   se ferme par la bordure du conteneur, jamais par celles des cellules : c'est
   la seule façon qu'il tienne quel que soit le nombre de lignes.

   L'INTITULÉ NE DESCEND PAS SOUS 8 rem et ne monte pas au-dessus de 13 : plus
   étroit, « Pré-requis » se couperait ; plus large, le contenu se retrouve
   trop loin de son étiquette pour qu'on relie les deux d'un coup d'œil. */
.training-timeline{margin:clamp(2rem,5vw,4rem) 0;border:1px solid var(--color-sage);border-radius:16px;overflow:hidden;background:rgb(255 255 255 / 55%)}
.training-timeline__row{display:grid;grid-template-columns:minmax(8rem,13rem) 1fr;gap:clamp(1rem,3vw,2.5rem);padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.2rem,2.6vw,1.9rem)}
.training-timeline__row+.training-timeline__row{border-top:1px solid var(--color-sage)}
.training-timeline dt{font-family:var(--font-title);font-size:var(--step-1);font-weight:700;line-height:1.3}
.training-timeline dd{margin:0;color:var(--muted)}
.training-timeline dd p{margin:0}
.training-timeline dd p+p{margin-top:.3rem}
/* Le bouton en bas de case, détaché du texte qui le précède. */
.training-timeline dd .button,.training-timeline dd .button-secondary{margin-top:.95rem}
@media(max-width:560px){.training-timeline__row{grid-template-columns:1fr;gap:.45rem}
@media(max-width:560px){.training-timeline{grid-template-columns:1fr}.training-timeline li{border-left:1px solid var(--color-sage)}}

/* ─────────────── La vignette « Programme complet » — commune aux deux pages

   Elle n'était décrite que dans la feuille de la page neuro. Sur la page
   psychologie de l'habitat, la même classe ne rencontrait aucune règle : le
   lien tombait en texte nu de 23 px, sans cadre, collé au bord. Une classe que
   deux pages emploient appartient à la feuille partagée.

   Le survol épaissit le cadre plutôt que de le colorer : le terracotta est déjà
   la couleur du cadre au repos, l'appuyer ne se verrait pas. */
.program-download{display:grid;align-content:start;padding:1.4rem;border:1px solid var(--terra);color:var(--ink);text-decoration:none;transition:border-color .2s ease,background .2s ease}
.program-download:hover{border-color:var(--terra-text);background:rgb(207 143 117 / 8%)}
.program-download span{color:var(--terra-text);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.1em}
.program-download strong{margin:.45rem 0;font-size:var(--step-1)}
.program-download small{color:var(--muted)}
@media (prefers-reduced-motion: reduce){.program-download{transition:none}}