/* Bloc "Carte formation" (acf/infocob-formation-card)
   La carte reutilise les classes de l'archive (.wrapper-archives-formation > .entry-formation)
   pour heriter du skin SBD (palette + typo + bouton). Ici on neutralise la bande de
   section (fond gris + padding 50px), on contraint la largeur d'une carte isolee, et on
   rend la carte robuste quand elle devient etroite (ex. 4 colonnes en tablette) grace a
   une container query : la carte s'adapte a SA propre largeur, quel que soit le nombre
   de colonnes Gutenberg autour. */

.wrapper-archives-formation.bloc-formation-une {
  background: transparent;
  padding: 0;
}

.bloc-formation-une .bloc-formation-une__inner {
  width: 100%;
  max-width: 300px;
  /* Contexte de container query : la carte se mesure elle-meme. */
  container-type: inline-size;
  container-name: formationcard;
}

/* Centrage / alignement optionnels via les alignements Gutenberg standards. */
.bloc-formation-une.aligncenter .bloc-formation-une__inner {
  margin-left: auto;
  margin-right: auto;
}

.bloc-formation-une.alignright .bloc-formation-une__inner {
  margin-left: auto;
}

/* Pleine largeur si demande explicitement. */
.bloc-formation-une.alignwide .bloc-formation-une__inner,
.bloc-formation-une.alignfull .bloc-formation-une__inner {
  max-width: 100%;
}

/* Le libelle (Duree / Financement) garde sa largeur naturelle et ne se coupe jamais
   sur plusieurs lignes : c'est la valeur qui passe a la ligne si la place manque. */
.bloc-formation-une .entry-formation .content-absolute .list-info .une-info .libelle {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Carte etroite : on repasse le bloc d'infos en flux normal (fin du positionnement
   absolu) et on empile chaque info (libelle au-dessus de la valeur) pour eviter que la
   valeur soit ecrasee et coupee lettre par lettre. */
@container formationcard (max-width: 220px) {
  .bloc-formation-une .entry-formation {
    padding-bottom: 0;
  }
  .bloc-formation-une .entry-formation .content-absolute {
    position: static;
    width: auto;
    left: auto;
    bottom: auto;
    padding: 0 20px 20px;
  }
  .bloc-formation-une .entry-formation .content-absolute .list-info .une-info {
    flex-direction: column;
    align-items: flex-start;
    margin: 12px 0;
  }
  .bloc-formation-une .entry-formation .content-absolute .list-info .une-info:before {
    display: none;
  }
  .bloc-formation-une .entry-formation .content-absolute .list-info .une-info > span {
    padding: 0;
    background: transparent;
  }
  .bloc-formation-une .entry-formation .content-absolute .list-info .une-info .value {
    text-align: left;
  }
}