:root {
          --sbisicfrance-light-blue-color: #D9F1F1;
          --sbisicfrance-blue-color: #41B9B9;
          --sbisicfrance-deep-blue-color: #3C4F6D;
          --sbisicfrance-grey-color: #444;
          --sbisicfrance-black-color: #000;
          --sbisicfrance-white-color: #FFF;
      }

      #wrapper {
        background-color: var(--sbisicfrance-white-color);
        position: relative;
      }

      #wrapper:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 160px;
        background: linear-gradient(to bottom, rgba(217, 241, 241, 1) 0%, rgba(255, 255, 255, 1) 100%);
        left: 0%;
        top: 0%;
      }

      #wrapper:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 160px;
        background: linear-gradient(to top, rgba(217, 241, 241, 1) 0%, rgba(255, 255, 255, 1) 100%);
        left: 0%;
        bottom: 0%;
      }

      .sbisicfrance-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        width: 64%;
        /* margin: 3.13rem auto 0; */
        margin: 0 auto;
      }

      #wrapper .container {
        padding: 3.13rem 0 5.47rem;
      }

      .sbisicfrance-header__badge {
        display: flex;
        align-items: center;
        gap: .31rem;
        background-color: var(--sbisicfrance-deep-blue-color);
        color: var(--sbisicfrance-white-color);
        padding: .31rem .63rem;
        font-size: .75rem;
        border-radius: 1.56rem;
        font-weight: 600;
        box-shadow: 0 4px 15px -8px rgba(60, 79, 109, .3);
      }

      .sbisicfrance-header__badge .material-icons {
        font-size: inherit;
      }

      .sbisicfrance-header__logo {
        flex: 1 0 auto;
        height: 7.50rem;
      }

      .sbisicfrance-header__text {
        flex: 1 0 auto;
        color: var(--sbisicfrance-deep-blue-color);
        font-size: 1.13rem;
        font-weight: 500;
        text-align: center;
      }

      .sbisicfrance-carousel {
        margin-top: 1.56rem;
        position: relative;
        height: 15.63rem;
        z-index: 1;
      }

      .sbisicfrance-carousel::before,
      .sbisicfrance-carousel::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50%;
        z-index: 2;
        pointer-events: none;
      }

      .sbisicfrance-carousel::before {
        left: 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, .05) 50%, transparent);
      }

      .sbisicfrance-carousel::after {
        right: 0;
        background: linear-gradient(to left, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, .05) 50%, transparent);
      }

      .sbisicfrance-carousel__inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: .63rem;
      }

      .sbisicfrance-carousel__item {
        display: inline-flex;
        border-radius: 1.56rem;
        justify-content: center;
        align-items: flex-end;
        flex-shrink: 0;
        overflow: hidden;
        position: relative;
      }

      .sbisicfrance-carousel__item:nth-child(1n) {
        height: 13.13rem;
        width: 9.50rem;
      }

      .sbisicfrance-carousel__item:nth-child(2n) {
        height: 14.38rem;
        width: 10.38rem;
        box-shadow:
          0px 86px 24px 0px rgba(0, 0, 0, 0),
          0px 55px 22px 0px rgba(0, 0, 0, 0.01),
          0px 31px 19px 0px rgba(0, 0, 0, 0.05),
          0px 14px 14px 0px rgba(0, 0, 0, 0.09),
          0px 3px 8px 0px rgba(0, 0, 0, 0.10);
      }

      .sbisicfrance-carousel__item:nth-child(3n) {
        height: 15.63rem;
        width: 11.25rem;
        box-shadow:
          0px 86px 24px 0px rgba(0, 0, 0, 0),
          0px 55px 22px 0px rgba(0, 0, 0, 0.01),
          0px 31px 19px 0px rgba(0, 0, 0, 0.05),
          0px 14px 14px 0px rgba(0, 0, 0, 0.09),
          0px 3px 8px 0px rgba(0, 0, 0, 0.10);
      }

      .sbisicfrance-carousel__item-body {
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 1rem;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%,  rgba(0, 0, 0, .9) 100%);
        text-align: center;
      }

      .sbisicfrance-carousel__item-title {
        color: var(--sbisicfrance-white-color);
        font-family: 'Fjalla One', sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: .31rem;
      }

      .sbisicfrance-carousel__item-text {
        color: var(--sbisicfrance-white-color);
        font-weight: 500;
        margin-bottom: 0;
      }

      .sbisicfrance-carousel__item:nth-child(1n) .sbisicfrance-carousel__item-title {
        font-size: 1.25rem;
      }

      .sbisicfrance-carousel__item:nth-child(2n) .sbisicfrance-carousel__item-title {
        font-size: 1.50rem;
      }

      .sbisicfrance-carousel__item:nth-child(3n) .sbisicfrance-carousel__item-title {
        font-size: 1.75rem;
      }      
      
      .sbisicfrance-carousel__item:nth-child(1n) .sbisicfrance-carousel__item-text {
        font-size: .56rem;
      }

      .sbisicfrance-carousel__item:nth-child(2n) .sbisicfrance-carousel__item-text {
        font-size: .63rem;
      }

      .sbisicfrance-carousel__item:nth-child(3n) .sbisicfrance-carousel__item-text {
        font-size: .75rem;
      }

      .sbisicfrance-information {
        display: flex;
        flex-direction: column;
        background-color: var(--sbisicfrance-light-blue-color);
        padding: 1.25rem;
        border-radius: 1.25rem;
        margin: 1.56rem auto 0;
        width: 80%;
        z-index: 1;
        position: relative;
        box-shadow: 0 10px 30px -8px rgba(217, 241, 241, 0.3);
      }

      .sbisicfrance-information h3 {
        display: flex;
        flex: 1 0 auto;
        gap: .25rem;
        align-items: center;
        font-size: 1rem;
        font-weight: bold;
        color: var(--sbisicfrance-black-color);
      }

      .sbisicfrance-information h3 .material-icons {
        font-size: inherit;
        color: var(--sbisicfrance-blue-color);
      }

      .sbisicfrance-information p {
        font-size: .88rem;
        color: var(--sbisicfrance-grey-color);
        margin-left: 1.25rem;
      }

      .sbisicfrance-information p:last-of-type {
        margin-bottom: 0;
      }

      .sbisicfrance-cta {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: fit-content;
        gap: .62rem;
        background-color: var(--sbisicfrance-deep-blue-color);
        color: var(--sbisicfrance-white-color);
        padding: .94rem 1.25rem;
        border-radius: 1.56rem;
        font-size: 1rem;
        font-weight: bold;
        margin: 3.13rem auto 0;
        transition: background-color .3s ease, color .3s ease;
        z-index: 1;
        position: relative;
        box-shadow: 0 5px 15px -8px rgba(0, 0, 0, 0.25);
      }

      .sbisicfrance-cta:hover {
        background-color: #1D2635;
        color: var(--sbisicfrance-white-color);
      }

      .sbisicfrance-cta .fto-angle-right::before {
        content: '\f105'!important;
      }

      .sbisicfrance-help {
        display: block;
          font-size: .88rem;
          color: var(--sbisicfrance-black-color);
          /* margin: .94rem auto 5.47rem; */
          margin: .94rem auto 0;
          width: fit-content;
          z-index: 1;
          position: relative;
      }

      .sbisicfrance-help a {
        color: var(--sbisicfrance-black-color);
      }

      .sbisicfrance-help a:hover {
        text-decoration: underline;
      }

/* --- Mobile (< 600px) --- */
@media only screen and (max-width: 599px) {
  .sbisicfrance-header {
    width: 90%;
    margin-top: 2rem;
  }

  .sbisicfrance-header__logo { height: 6rem; }

  .sbisicfrance-header__text { font-size: .9rem; }

  .sbisicfrance-carousel { height: auto; }

  .sbisicfrance-carousel::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, .05) 50%, transparent);
  }

  .sbisicfrance-carousel::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, .05) 50%, transparent);
  }

  .sbisicfrance-carousel__inner {
    width: 100%;
    justify-content: safe center;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .63rem;
    padding: 0 10%;
  }

  .sbisicfrance-carousel__item:first-child { margin-left: auto; }
  .sbisicfrance-carousel__item:last-child  { margin-right: auto; }

  .sbisicfrance-carousel__inner::-webkit-scrollbar { display: none; }

  .sbisicfrance-carousel__item:nth-child(1n), 
  .sbisicfrance-carousel__item:nth-child(2n), 
  .sbisicfrance-carousel__item:nth-child(3n) { 
    height: 14.38rem;
    width: 10.38rem;
  }

  .sbisicfrance-carousel__item:nth-child(1n) .sbisicfrance-carousel__item-title,
  .sbisicfrance-carousel__item:nth-child(2n) .sbisicfrance-carousel__item-title,
  .sbisicfrance-carousel__item:nth-child(3n) .sbisicfrance-carousel__item-title {
    font-size: 1.75rem;
  }
  
  .sbisicfrance-carousel__item:nth-child(1n) .sbisicfrance-carousel__item-text,
  .sbisicfrance-carousel__item:nth-child(2n) .sbisicfrance-carousel__item-text,
  .sbisicfrance-carousel__item:nth-child(3n) .sbisicfrance-carousel__item-text {
    font-size: .75rem;
  }

  .sbisicfrance-carousel__item-body {
    padding: .75rem;
  }

  .sbisicfrance-information { width: 90%; }

  .sbisicfrance-cta {
    width: 90%;
    box-sizing: border-box;
    justify-content: center;
    margin-top: 2rem;
  }
}

/* --- Tablettes et liseuses (600px - 767px) --- */
@media only screen and (min-width: 600px) and (max-width: 767px) {
  #sbisicfrance-svg-left  { height: 150px!important; }
  #sbisicfrance-svg-right { width:  150px!important; }

  .sbisicfrance-header    { width: 85%; }
  .sbisicfrance-information { width: 85%; }

  .sbisicfrance-carousel__item:nth-child(1n) { height: 8.5rem;  width: 6.3rem; }
  .sbisicfrance-carousel__item:nth-child(2n) { height: 9.9rem;  width: 7.4rem; }
  .sbisicfrance-carousel__item:nth-child(3n) { height: 11.6rem; width: 8.2rem; }

  .sbisicfrance-carousel {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .sbisicfrance-carousel::before {
    left: -15px;
    background: linear-gradient(to right, var(--sbisicfrance-white-color) 25%, transparent);
  }

  .sbisicfrance-carousel::after {
    right: -15px;
    background: linear-gradient(to left, var(--sbisicfrance-white-color) 25%, transparent);
  }
}

/* --- Tablettes en mode paysage (768px - 991px) --- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  #sbisicfrance-svg-left  { height: 200px!important; }
  #sbisicfrance-svg-right { width:  200px!important; }

  .sbisicfrance-header    { width: 75%; }
  .sbisicfrance-information { width: 75%; }

  .sbisicfrance-carousel__item:nth-child(1n) { height: 9.5rem;  width: 7.1rem; }
  .sbisicfrance-carousel__item:nth-child(2n) { height: 11rem;   width: 8.3rem; }
  .sbisicfrance-carousel__item:nth-child(3n) { height: 13rem;   width: 9.1rem; }
}

/* --- Ordinateurs portables (992px - 1199px) --- */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #sbisicfrance-svg-left  { height: 250px!important; }
  #sbisicfrance-svg-right { width:  250px!important; }

  .sbisicfrance-header    { width: 70%; }
  .sbisicfrance-information { width: 70%; }

  .sbisicfrance-carousel__item:nth-child(1n) { height: 10.5rem; width: 7.9rem; }
  .sbisicfrance-carousel__item:nth-child(2n) { height: 12.2rem; width: 9.2rem; }
  .sbisicfrance-carousel__item:nth-child(3n) { height: 14.3rem; width: 10.1rem; }
}

/* --- Grands écrans (1200px et +) --- */
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 100%;
    width: 1200px!important;
  }
}