/* ==========================================================
   FFF - Top Section Ribbon (NO LAYOUT SHIFT)
   Class on section: fff-top-ribbon
   ========================================================== */

.et_pb_section.fff-top-ribbon{
  position: relative !important;
  overflow: hidden !important;
}

/* Ribbon overlay: does NOT affect layout */
.et_pb_section.fff-top-ribbon:before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 16px !important;        /* adjust if you want */
  z-index: 999 !important;
  pointer-events: none !important;

  background: linear-gradient(90deg,
    rgba(66,103,178,0.98),
    rgba(245,158,11,0.98),
    rgba(34,197,94,0.92)
  ) !important;
}

/* IMPORTANT: remove any extra padding/margins that were added */
.et_pb_section.fff-top-ribbon > .et_pb_row{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Mobile: slightly thicker if you like, still no shift */
@media (max-width: 767px){
  .et_pb_section.fff-top-ribbon:before{
    height: 18px !important;
  }
}

/* ==========================================================
   FFF - Instagram Top Ribbon (NO LAYOUT SHIFT)
   Class on section: fff-top-ribbon-ig
   ========================================================== */

.et_pb_section.fff-top-ribbon-ig{
  position: relative !important;
  overflow: hidden !important;
}

/* Ribbon overlay: does NOT affect layout */
.et_pb_section.fff-top-ribbon-ig:before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 16px !important;
  z-index: 999 !important;
  pointer-events: none !important;

  /* Instagram-ish gradient */
  background: linear-gradient(90deg,
    rgba(64,93,230,0.98),   /* blue */
    rgba(131,58,180,0.98),  /* purple */
    rgba(225,48,108,0.98),  /* pink/red */
    rgba(245,96,64,0.98),   /* orange */
    rgba(252,175,69,0.98)   /* yellow */
  ) !important;
}

/* IMPORTANT: remove any extra padding/margins that were added */
.et_pb_section.fff-top-ribbon-ig > .et_pb_row{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Mobile: slightly thicker, still no shift */
@media (max-width: 767px){
  .et_pb_section.fff-top-ribbon-ig:before{
    height: 18px !important;
  }
}

/* ==========================================================
   FFF - Bottom Section Ribbon (NO LAYOUT SHIFT)
   Class on section: fff-bottom-ribbon
   Background behind: #e5e7eb (Last Infos)
   ========================================================== */

.et_pb_section.fff-bottom-ribbon{
  position: relative !important;
  overflow: hidden !important;
}

/* Ribbon overlay at the BOTTOM: does NOT affect layout */
.et_pb_section.fff-bottom-ribbon:after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;

  height: 8px !important;       /* thinner */
  z-index: 999 !important;
  pointer-events: none !important;

  /* Slightly softer tones to sit nicely on #e5e7eb */
background: linear-gradient(90deg,
  rgba(66,103,178,0.78),
  rgba(245,158,11,0.78),
  rgba(34,197,94,0.72)
) !important;
}

/* IMPORTANT: no extra padding/margins added by the ribbon */
.et_pb_section.fff-bottom-ribbon > .et_pb_row{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Mobile: tiny bump, still no shift */
@media (max-width: 767px){
  .et_pb_section.fff-bottom-ribbon:after{
    height: 12px !important;
  }
}