/*
 * Grille du bento.
 *
 * Se dépose dans une section Webflow ordinaire : il ne déclare aucun token de
 * marque (§ 5). Il n'a ni fond ni bordure ni marge : il place, et la section
 * fournit le conteneur.
 *
 * ═══ LA CARTE RÈGLE SA PROPRE LARGEUR ═══
 *
 * La grille ne connaît pas ses cartes (§ 6.4). C'est la carte « Large » qui
 * déclare `grid-column: span 2` sur sa racine, et chaque carte qui pose sa
 * largeur de diapositive et son aimantation en carrousel. Dans l'ordre
 * Transactions (large), Conversation, Cartes, Factures (large), le placement
 * automatique redonne la mosaïque de la maquette.
 *
 * Paliers : la règle de base est celle de l'écran large, et les deux paliers
 * étroits la réécrivent. Mêmes bornes que la maquette (1100 et 600px), sans
 * trou entre deux plages pour une largeur fractionnaire.
 *
 * Webflow pose `display: contents` sur l'hôte d'un code component : l'item de
 * la section parente est notre `.root`, et c'est lui qui porte `min-width`.
 */
:host {
  display: contents !important;
}

.hsMpotppOiaiwEeFzBn3 {
  position: relative;
  /* Item de flex ou de grille chez le parent : sans ça, la largeur du carrousel
     déborderait sur la sienne au lieu de défiler. */
  min-width: 0;
  display: grid;
  grid-template-columns: 410fr 172fr 410fr;
  gap: 32px;
}

/* Le wrapper de slot de Webflow est rendu transparent : les cartes deviennent
   les items de NOTRE grille (§ 6.4). `!important` nécessaire, le wrapper
   appartient à l'arbre du document (§ 6.5). */
.hsMpotppOiaiwEeFzBn3 > slot {
  display: contents;
}

.hsMpotppOiaiwEeFzBn3 > slot::slotted(*) {
  display: contents !important;
}

@media (max-width: 1100px) {
  .hsMpotppOiaiwEeFzBn3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

/* Carrousel horizontal à défilement aimanté. Le retrait négatif fait déborder
   la piste jusqu'aux bords de l'écran, le padding le rend aux cartes. Il vaut
   la marge du conteneur du site (Lumos `u-container`, variable globale sur
   :root), 16px en repli. */
@media (max-width: 600px) {
  .hsMpotppOiaiwEeFzBn3 {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--site--margin, 16px));
    padding: 10px var(--site--margin, 16px) 4px;
    scrollbar-width: none;
  }

  .hsMpotppOiaiwEeFzBn3::-webkit-scrollbar {
    display: none;
  }
}