/*
 * Scène « Cartes » de la carte bento — maquette « 2 · Cartes ».
 *
 * Posée en absolu dans le cadre `.vz` de la carte, qu'elle remplit. Valeurs
 * recopiées de la maquette (règles `.cc` de base et `.bx-qs`).
 */
.C7oTQKcW7o0L8iBR67iw {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.C7oTQKcW7o0L8iBR67iw,
.C7oTQKcW7o0L8iBR67iw * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.LUMKhzkVWFuTyINfrt1H {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 102px;
  margin-top: -51px;
}

.L4QYQ9MIF9WQ9IclVU29 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 158.182px;
  height: 102px;
  margin: -51px 0 0 -79.091px;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 2.176px 18.496px rgba(79, 65, 119, 0.5);
  transition:
    transform 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.6s,
    box-shadow 0.9s;
  will-change: transform;
}

.Z8nHJobTLGeHtMSGQCKj {
  background: #e0fa00;
}

.RS97x7tZcESfoj423Yvz {
  background: #5fe0fc;
}

/* Places du carrousel. */
.L4QYQ9MIF9WQ9IclVU29[data-pos="c"] {
  transform: scale(1.45);
  z-index: 3;
  box-shadow: 0 14px 30px -10px rgba(8, 5, 18, 0.75);
}

.L4QYQ9MIF9WQ9IclVU29[data-pos="l"] {
  transform: translateX(-196px) scale(1.05);
  z-index: 2;
}

.L4QYQ9MIF9WQ9IclVU29[data-pos="r"] {
  transform: translateX(196px) scale(1.05);
  z-index: 2;
}

.L4QYQ9MIF9WQ9IclVU29[data-pos="ll"] {
  transform: translateX(-360px) scale(0.8);
  opacity: 0;
  z-index: 1;
}

.L4QYQ9MIF9WQ9IclVU29[data-pos="rr"] {
  transform: translateX(360px) scale(0.8);
  opacity: 0;
  z-index: 1;
}

.L4QYQ9MIF9WQ9IclVU29[data-pos="rrr"] {
  transform: translateX(480px) scale(0.8);
  opacity: 0;
  z-index: 0;
}

/* La carte qui fait le tour saute à droite sans traverser le carrousel. */
.qhsk2x6INWf77CVbS0Xt.L4QYQ9MIF9WQ9IclVU29 {
  transition: none;
  opacity: 0;
}

/* Corps aubergine de la carte, sous le bandeau de couleur. */
.yNaxJhfgBQrZYf7ZYSdg {
  position: absolute;
  left: 0;
  right: 0;
  top: 8.16px;
  bottom: 0;
  border-radius: 6.123px 6.123px 0 0;
  background: radial-gradient(66.4px 61.6px at 50% 50%, #3f335e, #2a2240);
}

/* Les images reçoivent leurs dimensions ici : le CSS du site atteint nos
   balises `img` (§ 6.6), une classe le bat. */
.ErQFPLtBBuypj5ttBEOf {
  position: absolute;
  left: 7.65px;
  top: 15.82px;
  display: block;
  width: 22.452px;
  height: 22.452px;
  max-width: none;
}

.xhsqENVVcEiHaXr29hxS {
  position: absolute;
  left: 76.93%;
  top: 50%;
  width: 20.079px;
  height: 14.754px;
}

.J8E5qB9T7aPx0IKvtcOC,
.R82GVxdQmfyyTbLOu3vg,
.nMDjvOtfnFKScO6kgdWy {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  max-width: none;
}

.J8E5qB9T7aPx0IKvtcOC {
  width: 20.079px;
  height: 14.754px;
}

/* Le masque lui-même est posé en style inline (cardsArt.ts). */
.R82GVxdQmfyyTbLOu3vg {
  width: 20.112px;
  height: 14.834px;
  top: -0.06px;
  -webkit-mask-position: 0.014px -0.052px;
  mask-position: 0.014px -0.052px;
  -webkit-mask-size: 20.079px 14.754px;
  mask-size: 20.079px 14.754px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.nMDjvOtfnFKScO6kgdWy {
  width: 20.158px;
  height: 14.834px;
  left: -0.04px;
  top: -0.04px;
}

.XDUGnnE8Za_d_IgbgHPJ {
  position: absolute;
  left: 77%;
  top: 78.3%;
  display: block;
  width: 18.16%;
  height: 14.2%;
  max-width: none;
}

.RS97x7tZcESfoj423Yvz .XDUGnnE8Za_d_IgbgHPJ {
  left: 77.11%;
  top: 83.45%;
  width: 18.05%;
  height: 9.05%;
}

.LwYPmVocq7j5szLL0SjD {
  position: absolute;
  left: calc(100% - 34.2px);
  top: 15.82px;
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  font-weight: 700;
  font-size: 7.14px;
  line-height: 1;
  color: #5fe0fc;
  white-space: nowrap;
}

/* Reflet qui balaie la carte arrivée au centre. Rendu sur elle seule, et
   remonté à chaque étape : l'animation repart à chaque nouvelle carte. */
.vcL_dBimfAd9VfbycjkU {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
  animation: WDThH_oU8Qxit6oHb_3x 1.2s 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes WDThH_oU8Qxit6oHb_3x {
  to {
    transform: translateX(120%);
  }
}

/* Même carrousel que sur ordinateur, réduit à la largeur du cadre. */
/* Sans borne basse : le palier mobile, écrit après, l'écrase par l'ordre source. */
/*
 * Réduction par palier en `transform: scale()`, et non en `zoom` : Safari
 * applique `zoom` autrement que Chrome, et le texte y sortait plus gros que
 * son cadre (constaté sur iPhone). Une transformation ne change pas la boîte
 * de mise en page : ici l'échelle part du centre du cadre, où le
 * carrousel est déjà centré.
 */
@media (max-width: 1100px) {
  .C7oTQKcW7o0L8iBR67iw {
    transform: scale(0.78);
    transform-origin: 50% 50%;
  }
}

@media (max-width: 600px) {
  .C7oTQKcW7o0L8iBR67iw {
    transform: scale(0.69);
  }
}

@media (prefers-reduced-motion: reduce) {
  .L4QYQ9MIF9WQ9IclVU29 {
    transition: none;
  }

  .vcL_dBimfAd9VfbycjkU {
    display: none;
    animation: none;
  }
}

/*
 * Scène « Conversation » de la carte bento — maquette « 4 · Conversation ».
 *
 * Posée en absolu dans le cadre `.vz` de la carte ; seul le bas déborde du
 * cadre, qui le coupe. Valeurs recopiées de la maquette (règles `.bx-qs`).
 * Chaque élément porte sa classe : le CSS du site atteint nos balises (§ 6.6),
 * un sélecteur de balise ne suffirait pas.
 */
.HxQhe8P4InBXBHiOgJTI {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 48px;
  bottom: -24px;
  border-radius: 20px;
  overflow: hidden;
  background: #f7f5fb;
  display: flex;
  flex-direction: column;
  box-shadow: 0 22px 44px -22px rgba(8, 5, 18, 0.55);
  font-family: var(--lcl-font-body, Inter, sans-serif);
}

.HxQhe8P4InBXBHiOgJTI,
.HxQhe8P4InBXBHiOgJTI * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.zqWUSfRjPD0905YAbgqo {
  flex: none;
  background: #372d54;
  text-align: center;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.FmzVTZdXZ6tBSU_WrEjJ {
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 19px;
  color: #fff;
}

.rGEEKJFPCuwe29lFyJ0N {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* Pastille « en ligne ». */
.rGEEKJFPCuwe29lFyJ0N::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ccf6e;
}

.WtpuvsYRis2TKBdSvwBw {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
}

/* Liseré de 1 px qui suit l'arrondi du logo. */
.Jv6EwgpEZJFtnI8n03Ux {
  width: 32px;
  height: 32px;
  flex: none;
  display: block;
  border-radius: 8.7px;
  box-shadow: 0 0 0 1px rgba(42, 34, 64, 0.16);
}

.paHpB3NeSUSjGEtFAbpc {
  width: 32px;
  height: 32px;
  display: block;
  max-width: none;
}

.lsHptGc2lJyTkVU5HIIx {
  max-width: calc(100% - 42px);
  background: #372d54;
  color: #fff;
  border-radius: 4px 14px 14px 14px;
  padding: 9px 14px;
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    opacity 0.3s,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* La bulle s'efface le temps de changer de question. */
.MONy7SHhCKHXWTgY_viD.lsHptGc2lJyTkVU5HIIx {
  opacity: 0;
  transform: translateY(6px);
}

.qtOaX_inTXaiWPlfi8wo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-top: 1px solid #ebe8f0;
  padding: 10px 10px 34px 16px;
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: #2a2240;
}

.w9FBdKYSVPCTwPy8GNYy {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.j5bIWR3cTIzBcaHbjNqT {
  display: inline-block;
  flex: none;
  width: 1.5px;
  height: 18px;
  margin-left: 1px;
  background: #2a2240;
  vertical-align: -2px;
  animation: EiNPt1LwNMxfq9CrOvqU 1s steps(1) infinite;
}

@keyframes EiNPt1LwNMxfq9CrOvqU {
  50% {
    opacity: 0;
  }
}

.dlc0Eq1CUM9Z3Bx7LpvX {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #2a2240;
  display: grid;
  place-items: center;
  flex: none;
}

._DL3UEcCArUzJA2gVisW {
  display: block;
  width: 18px;
  height: 18px;
}

/* Sans borne basse : le palier mobile, écrit après, l'écrase par l'ordre source. */
/*
 * Réduction par palier en `transform: scale()`, et non en `zoom` : Safari
 * applique `zoom` autrement que Chrome, et le texte y sortait plus gros que
 * son cadre (constaté sur iPhone). Une transformation ne change pas la boîte
 * de mise en page : positions et tailles sont donc écrites en px réels, la
 * valeur « design » de la maquette multipliée par l'échelle.
 */
/* La fenêtre est tendue entre ses bords : sous une transformation, la largeur
   et la hauteur s'écrivent divisées par l'échelle pour retomber sur les marges
   de la maquette (24 × 0,78 sur les côtés, 48 × 0,78 en haut, 24 × 0,78 de
   débord en bas). */
@media (max-width: 1100px) {
  .HxQhe8P4InBXBHiOgJTI {
    left: 18.72px;
    right: auto;
    top: 37.44px;
    bottom: auto;
    width: calc((100% - 37.44px) / 0.78);
    height: calc((100% - 18.72px) / 0.78);
    transform: scale(0.78);
    transform-origin: 0 0;
  }
}

/* Mobile : 30,8 × 0,65 = 20px à gauche, à droite et en haut ; seul le bas
   déborde (24 × 0,65). */
@media (max-width: 600px) {
  .HxQhe8P4InBXBHiOgJTI {
    left: 20.02px;
    top: 20.02px;
    width: calc((100% - 40.04px) / 0.65);
    height: calc((100% - 4.42px) / 0.65);
    transform: scale(0.65);
  }
}

@media (prefers-reduced-motion: reduce) {
  .j5bIWR3cTIzBcaHbjNqT {
    animation: none;
  }

  .lsHptGc2lJyTkVU5HIIx {
    transition: none;
  }

  .MONy7SHhCKHXWTgY_viD.lsHptGc2lJyTkVU5HIIx {
    transform: none;
  }
}

/*
 * Scène « écran Kolecto », posée dans le cadre de la carte.
 *
 * Valeurs relevées sur la maquette. Les couleurs sont celles de l'écran de
 * l'app, pas celles du thème : elles ne suivent pas la section.
 *
 * Aucune balise `p` ni `b` / `small` / `em` : le CSS global du site atteint
 * nos shadow roots par ses sélecteurs de balises (§ 6.6). Tout passe par des
 * classes.
 */
.T7YdFKHWsdBDfrhp4O4_,
.T7YdFKHWsdBDfrhp4O4_ *,
.T7YdFKHWsdBDfrhp4O4_ *::before,
.T7YdFKHWsdBDfrhp4O4_ *::after {
  box-sizing: border-box;
  margin: 0;
}

.T7YdFKHWsdBDfrhp4O4_ {
  position: absolute;
  left: 48px;
  top: 48px;
  width: 469px;
  padding: 24px 22px;
  border-radius: 24px;
  background: var(--lcl-white, #fff);
  color: var(--lcl-eggplant-900, #2a2240);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.QRxkyze91AHP00Hhi3GK {
  font: 600 19px/24px var(--lcl-font-body, Inter, sans-serif);
}

.No3ZgT2TSZdtSbD32U9j {
  display: flex;
  flex-direction: column;
}

.BEgES3hzphAOKVCUNGZC {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 16px 20px;
  border: 1px solid #ebe8f0;
  border-radius: 16px;
  margin-bottom: 12px;
  max-height: 130px;
  transition:
    max-height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin 0.6s,
    padding 0.6s,
    opacity 0.45s,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.6s,
    box-shadow 0.6s;
}

.BEgES3hzphAOKVCUNGZC.xc7BNryeP1Yzrod_qjNQ {
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-14px);
}

.BEgES3hzphAOKVCUNGZC.oUHHHbDInIRawdXjE6Wb {
  border-color: var(--lcl-eggplant-400, #7c5ed1);
  box-shadow: 0 0 0 3px rgba(124, 94, 209, 0.15);
}

.y9Tym_6Y_c_f7fHnZwwQ {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.jnGQvP7bC9M2UWpELZ1l,
.IHXszXQ4AA_si1c9jD1l {
  font: 600 18px/24px var(--lcl-font-body, Inter, sans-serif);
}

.LJQVCZJsZDKSgvzj_Vz8 {
  font: 400 15px/20px var(--lcl-font-body, Inter, sans-serif);
  color: #6b6780;
}

.KUPdGLvSB1wfbBfhm7Yi {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.v3KpnTsyat3x1qS77pM3 {
  font: 600 14px/18px var(--lcl-font-body, Inter, sans-serif);
  padding: 2px 8px;
  border-radius: 6px;
  transition:
    opacity 0.3s,
    transform 0.3s,
    background 0.4s,
    color 0.4s;
}

.v3KpnTsyat3x1qS77pM3.AJ1m_WH_TfrCndfB_MXg {
  background: var(--lcl-whiteegg-100, #f3f2ef);
  color: var(--lcl-eggplant-600, #4f4177);
}

.v3KpnTsyat3x1qS77pM3.ejGC9sLVCgao1b2VJOBw {
  background: #f6ffb3;
  color: var(--lcl-eggplant-900, #2a2240);
}

.v3KpnTsyat3x1qS77pM3.HNfYr1yBAFO5eaQ8izbN {
  background: #e2f7ea;
  color: #1d7a43;
}

.v3KpnTsyat3x1qS77pM3.HNfYr1yBAFO5eaQ8izbN::before {
  content: "✓ ";
}

.v3KpnTsyat3x1qS77pM3._MwOsLOd1EVBWn31KUT4 {
  opacity: 0;
  transform: translateY(4px);
}

.F8UHLEhdFiOfY7e3T3Rm {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
}

/* Paliers de la maquette : la scène est réduite d'un bloc, ses proportions restent celles du bureau. */
/* Sans borne basse : le palier mobile, écrit après, l'écrase par l'ordre source. */
/*
 * Réduction par palier en `transform: scale()`, et non en `zoom` : Safari
 * applique `zoom` autrement que Chrome, et le texte y sortait plus gros que
 * son cadre (constaté sur iPhone). Une transformation ne change pas la boîte
 * de mise en page : positions et tailles sont donc écrites en px réels, la
 * valeur « design » de la maquette multipliée par l'échelle.
 */
@media (max-width: 1100px) {
  /* 24 et 48 × 0,78 depuis le coin haut gauche. */
  .T7YdFKHWsdBDfrhp4O4_ {
    left: 18.72px;
    top: 37.44px;
    transform: scale(0.78);
    transform-origin: 0 0;
  }
}

@media (max-width: 600px) {
  /* 38,1 × 0,525 = 20px de marge. */
  .T7YdFKHWsdBDfrhp4O4_ {
    width: 400px;
    left: 20px;
    top: 20px;
    transform: scale(0.525);
  }
}

@media (prefers-reduced-motion: reduce) {
  .BEgES3hzphAOKVCUNGZC,
  .v3KpnTsyat3x1qS77pM3 {
    transition: none;
  }

  .BEgES3hzphAOKVCUNGZC.xc7BNryeP1Yzrod_qjNQ,
  .v3KpnTsyat3x1qS77pM3._MwOsLOd1EVBWn31KUT4 {
    transform: none;
  }
}

/*
 * Scène « Dernières transactions », posée dans le cadre de la carte.
 *
 * Valeurs relevées sur la maquette, à l'échelle 1,37 du composant de l'app.
 * Les couleurs sont celles de l'écran de l'app, pas celles du thème : elles
 * ne suivent pas la section.
 *
 * Aucune balise `p` ni `b` / `small` : le CSS global du site atteint nos
 * shadow roots par ses sélecteurs de balises (§ 6.6). Tout passe par des
 * classes.
 */
.gKVFp5VK5n9d4FlMPJeQ,
.gKVFp5VK5n9d4FlMPJeQ *,
.gKVFp5VK5n9d4FlMPJeQ *::before,
.gKVFp5VK5n9d4FlMPJeQ *::after {
  box-sizing: border-box;
  margin: 0;
}

.gKVFp5VK5n9d4FlMPJeQ {
  position: absolute;
  left: 50%;
  top: 48px;
  width: 470px;
  margin-left: -235px;
  padding: 21.92px;
  border-radius: 24px;
  background: var(--lcl-white, #fff);
  display: flex;
  flex-direction: column;
  gap: 27.4px;
  color: var(--lcl-eggplant-900, #2a2240);
}

.RLKruNU3S5xH0r0PKWA2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 500 19.18px/24.67px var(--lcl-font-body, Inter, sans-serif);
  color: var(--lcl-eggplant-600, #4f4177);
}

.u2IrcuobsIocMm3IHKUx {
  display: block;
  width: 21.92px;
  height: 21.92px;
  flex: none;
}

.yRHvhZb3DZve3MFJENMe {
  display: flex;
  flex-direction: column;
}

.RzIYXXRprQl0_t8zZxSj {
  display: flex;
  align-items: center;
  gap: 10.96px;
  padding-bottom: 21.92px;
  max-height: 80px;
  transition:
    max-height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 0.6s,
    opacity 0.45s,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.RzIYXXRprQl0_t8zZxSj.fLf2itrYv0CxB71Gyub7 {
  max-height: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-14px);
}

.fC37tnxuWuzRIn2SA97R {
  width: 54.81px;
  height: 54.81px;
  flex: none;
  border-radius: 50%;
  background: var(--lcl-whiteegg-100, #f3f2ef);
  display: grid;
  place-items: center;
  font: 900 24.66px/1 var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  text-transform: uppercase;
  transition: background 0.6s;
}

.RzIYXXRprQl0_t8zZxSj.ID4llnNkAIsempD0vbUN .fC37tnxuWuzRIn2SA97R {
  background: var(--lcl-yellow-400, #e0fa00);
}

.SQldzOmzZfMReKq0fV4z {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2.74px;
}

.oXTLGHWRN9qsMBPdpTv9 {
  font: 600 19.18px/24.67px var(--lcl-font-body, Inter, sans-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ICQ26r2JHuPnv9D1U5qZ {
  font: 400 16.44px/21.92px var(--lcl-font-body, Inter, sans-serif);
}

.Wm_cGioXhvbhnI4MIOah {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5.48px;
  white-space: nowrap;
}

.N4PL_TVuKw7_vMKbvAiq {
  font: 900 21.92px/27.4px var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.Wm_cGioXhvbhnI4MIOah.twdPEDyu6SFKdeTE3_4C .N4PL_TVuKw7_vMKbvAiq {
  color: var(--lcl-eggplant-400, #7c5ed1);
}

.RjMkXxL0GSIUeIhzh2YR {
  font: 400 16.44px/19.18px var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  color: #5b5953;
}

/* Paliers de la maquette : la scène est réduite d'un bloc, ses proportions restent celles du bureau. */
/* Sans borne basse : le palier mobile, écrit après, l'écrase par l'ordre source. */
/*
 * Réduction par palier en `transform: scale()`, et non en `zoom` : Safari
 * applique `zoom` autrement que Chrome, et le texte y sortait plus gros que
 * son cadre (constaté sur iPhone). Une transformation ne change pas la boîte
 * de mise en page : positions et tailles sont donc écrites en px réels, la
 * valeur « design » de la maquette multipliée par l'échelle.
 */
@media (max-width: 1100px) {
  /* 0,78 autour du milieu du bord haut : la carte reste centrée, 48 × 0,78 du haut. */
  .gKVFp5VK5n9d4FlMPJeQ {
    top: 37.44px;
    transform: scale(0.78);
    transform-origin: 50% 0;
  }
}

@media (max-width: 600px) {
  /* 0,62 depuis le coin haut gauche : 32,3 × 0,62 = 20px de marge. */
  .gKVFp5VK5n9d4FlMPJeQ {
    width: 339px;
    left: 20px;
    top: 20px;
    margin-left: 0;
    transform: scale(0.62);
    transform-origin: 0 0;
  }

  .ICQ26r2JHuPnv9D1U5qZ {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  .RzIYXXRprQl0_t8zZxSj,
  .fC37tnxuWuzRIn2SA97R {
    transition: none;
  }

  .RzIYXXRprQl0_t8zZxSj.fLf2itrYv0CxB71Gyub7 {
    transform: none;
  }
}

/*
 * Carte du bento.
 *
 * Composant déposé dans un SLOT (celui de « LBYLCL Bento ») : il ne déclare
 * aucun token de marque, il lit avec repli (§ 5).
 *
 * ═══ C'EST `.root` QUI EST L'ITEM DE LA GRILLE, PAS L'HÔTE ═══
 *
 * Constaté sur le site : Webflow pose `style="display: contents"` sur l'hôte
 * d'un code component (`<code-island>`) et sur la racine interne qu'il
 * interpose. L'hôte n'a donc pas de boîte, et une règle sur `:host` (largeur,
 * `grid-column`, `flex`) ne place rien. Le placement s'écrit sur `.root`, qui
 * est dans notre shadow root : rien d'extérieur ne l'atteint, pas besoin
 * d'`!important`. `:host` est forcé en `contents` pour que ce soit vrai partout.
 */
:host {
  display: contents !important;
}

/* Grand écran : la carte Large prend deux colonnes de la mosaïque. */
.DU0MQJsNWZl2FwsImpEI[data-format="large"] {
  grid-column: span 2;
}

/* Sans borne basse : le palier mobile, écrit après, prend le relais par l'ordre
   source, et aucune largeur fractionnaire ne tombe entre les deux. */
@media (max-width: 1100px) {
  .DU0MQJsNWZl2FwsImpEI[data-format] {
    grid-column: span 1;
  }
}

/* Carrousel : diapositive de 290px, aimantée au centre. */
@media (max-width: 600px) {
  .DU0MQJsNWZl2FwsImpEI[data-format] {
    flex: 0 0 290px;
    scroll-snap-align: center;
  }
}

.DU0MQJsNWZl2FwsImpEI {
  box-sizing: border-box;
  /* Item de grille étiré par défaut : des cartes de même hauteur par rangée. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  padding: 24px;
  border-radius: 32px;
  border: 1px solid transparent;
  background: var(--lcl-eggplant-800, #372d54);
  color: var(--lcl-white, #fff);
  font-family: var(--lcl-font-body, Inter, sans-serif);
  /* `text-align` est hérité : une section centrée centrerait la carte. */
  text-align: start;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.5s;
}

.DU0MQJsNWZl2FwsImpEI[data-clickable="true"] {
  cursor: pointer;
}

.DU0MQJsNWZl2FwsImpEI[data-clickable="true"]:focus-visible {
  outline: 2px solid var(--lcl-yellow-400, #e0fa00);
  outline-offset: 3px;
}

.DU0MQJsNWZl2FwsImpEI *,
.DU0MQJsNWZl2FwsImpEI *::before,
.DU0MQJsNWZl2FwsImpEI *::after {
  box-sizing: border-box;
}

/* La carte en cours d'animation. */
.DU0MQJsNWZl2FwsImpEI[data-live="true"] {
  border-color: rgba(243, 242, 239, 0.6);
}

/* — Texte — */

.gPB0JH6jVb_i8W9JmUe8 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Titre et flèche sur une rangée ; la flèche reste à droite même sans titre. */
.f8AX1qQ31lMZnZtjdrDE {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Flèche des cartes cliquables : elle apparaît au survol et au focus clavier,
   jaune et avancée. Sur un écran tactile, sans survol, elle reste affichée :
   c'est la seule marque que la carte mène quelque part. */
.dt0SESt_u8n9GlkKzGUb {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--lcl-white, #fff);
  transition:
    opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
  .dt0SESt_u8n9GlkKzGUb {
    opacity: 0;
    transform: translateX(-6px);
  }

  .DU0MQJsNWZl2FwsImpEI[data-clickable="true"]:hover .dt0SESt_u8n9GlkKzGUb {
    opacity: 1;
    transform: none;
  }
}

.DU0MQJsNWZl2FwsImpEI[data-clickable="true"]:focus-visible .dt0SESt_u8n9GlkKzGUb {
  opacity: 1;
  transform: none;
}

.dt0SESt_u8n9GlkKzGUb svg {
  display: block;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.DU0MQJsNWZl2FwsImpEI[data-clickable="true"]:hover .dt0SESt_u8n9GlkKzGUb,
.DU0MQJsNWZl2FwsImpEI[data-clickable="true"]:focus-visible .dt0SESt_u8n9GlkKzGUb {
  background: var(--lcl-yellow-400, #e0fa00);
  color: var(--lcl-eggplant-900, #2a2240);
}

.DU0MQJsNWZl2FwsImpEI[data-clickable="true"]:hover .dt0SESt_u8n9GlkKzGUb svg,
.DU0MQJsNWZl2FwsImpEI[data-clickable="true"]:focus-visible .dt0SESt_u8n9GlkKzGUb svg {
  transform: translateX(2px);
}

.u2sdP9wbn0JnN1_zKsMZ {
  margin: 0;
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  /* « Cstm Neighbor » n'existe qu'en 400/700/900. */
  font-weight: 900;
  font-size: 24px;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--lcl-white, #fff);
  white-space: nowrap;
}

/*
 * Le texte est un `props.RichText` : son contenu arrive SLOTTÉ, donc
 * `.sub p` ne matche rien (§ 6.3). Typographie par héritage, espacement des
 * paragraphes par une grille sur le nœud slotté.
 */
.HBcMpn5MitztgExYAO8x {
  margin: 0;
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--lcl-white, #fff);
}

.HBcMpn5MitztgExYAO8x > slot::slotted(*) {
  display: grid !important;
  row-gap: 1.25em !important;
  row-gap: 1lh !important;
  margin: 0 !important;
}

/* — Visuel — */

/* La scène se place dans ce cadre ; ses réductions par palier sont les siennes. */
.MQA3WMUb984KZAW6kSDZ {
  position: relative;
  flex: none;
  height: 250px;
  margin-top: auto;
  border-radius: 24px;
  background: var(--lcl-eggplant-900, #2a2240);
  overflow: hidden;
}

/* — Paliers — */

@media (max-width: 1100px) {
  .u2sdP9wbn0JnN1_zKsMZ {
    font-size: 20px;
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .DU0MQJsNWZl2FwsImpEI {
    padding: 20px;
    gap: 18px;
    cursor: pointer;
  }

  .DU0MQJsNWZl2FwsImpEI:not([data-live="true"]):active {
    transform: scale(0.98);
  }

  .HBcMpn5MitztgExYAO8x {
    font-size: 14px;
    line-height: 19px;
  }

  .MQA3WMUb984KZAW6kSDZ {
    height: 220px;
  }
}

/* — Mouvement réduit — */

@media (prefers-reduced-motion: reduce) {
  .DU0MQJsNWZl2FwsImpEI {
    transition: none;
  }

  .DU0MQJsNWZl2FwsImpEI:not([data-live="true"]):active {
    transform: none;
  }

  .dt0SESt_u8n9GlkKzGUb,
  .dt0SESt_u8n9GlkKzGUb svg {
    transition: none;
  }

  .dt0SESt_u8n9GlkKzGUb {
    transform: none !important;
  }

  .DU0MQJsNWZl2FwsImpEI[data-clickable="true"]:hover .dt0SESt_u8n9GlkKzGUb svg,
  .DU0MQJsNWZl2FwsImpEI[data-clickable="true"]:focus-visible .dt0SESt_u8n9GlkKzGUb svg {
    transform: none;
  }
}