@media screen and (max-width: 600px) {
  .colonnes-blocs-mobile {
    display: block !important;
  }
  .colonnes-blocs-mobile.menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: auto;
    max-width: 300px;
  }
  .colonnes-blocs-mobile.menu li {
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }
  .bloc-infographie {
    /*
			  margin-left: -16px!important;
			  margin-right: -16px!important
			  */
  }
  .mob600-img100 {
    width: 100% !important;
    height: auto !important;
  }
  .infographie-cic .etiquette p {
    font-size: 10px !important;
    padding-left: 6px !important;
  }
  .mob-pad0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .mob-pad5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .mob-pad5 .borduredeg {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .mob-pad5 .colonnes {
    gap: 4px;
  }
  .main-svg {
    position: relative !important;
  }
  .mobcenter {
    text-align: center !important;
  }
  .mob-padtop0 {
    padding-top: 0 !important;
  }
  .mob-pad10 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .fleche1 {
    right: 0px !important;
    top: 210px;
    transform: rotate(90deg) !important;
    width: 80px !important;
  }
  .fleche2 {
    transform: rotate(-120deg) !important;
    top: -290px !important;
    bottom: unset !important;
    right: 0px !important;
    width: 60px !important;
  }
  .fleche3 {
    transform: rotate(45deg) !important;
    top: -230px !important;
    bottom: unset !important;
    left: -10px !important;
    width: 80px !important;
  }
  .confort {
    position: absolute !important;
    top: 94px !important;
    right: 20px !important;
    width: 100px !important;
  }
  .mob-width100 {
    width: 100px !important;
  }
  .mobile_hide {
    display: none !important;
  }
  .infographie-cic .colonnes-mobile {
    display: flex !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .infographie-cic .epargne {
    max-width: 150px !important;
    margin: auto !important;
  }

  .infographie-cic .epargne .epargne_details {
    /* border: 1px solid; */
    width: 100px;
  }

  .infographie-cic .epargne .etiquette {
    /* pousse icône + texte à droite */
    /* justify-content: flex-start !important;  */
  }

  .infographie-cic .epargne .etiquette p {
    /* texte aligné à droite */
    /* text-align: right !important;  */
    width: 120px;
  }
  .infographie-cic .epargne h3 {
    text-align: right !important; /* texte aligné à droite */
  }
  .font-40 {
    font-size: 42px !important;
  }
  .mob-w100 {
    width: 100% !important;
  }
  .mob-w85 {
    width: 85% !important;
  }
  #exemple {
    margin-top: 20px !important;
  }
}

@media screen and (max-width: 430px) {
  .mob430-img100 {
    width: 90% !important;
    height: auto !important;
  }
}
.borduredeg {
  position: relative;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  padding: 10px;
}

.borduredeg::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px; /* épaisseur bordure */
  border-radius: 10px;

  background: linear-gradient(
    to top right,
    #3f9fd9,
    #c05eac,
    #ff4083,
    #ff6a2d,
    #fea933,
    #fde941
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}
@media screen and (max-width: 600px) {
  .despots {
    width: auto !important;
  }
  .mob-mtop0 {
    margin-top: 0 !important;
  }
  .fleches {
    margin-top: 20px !important;
  }
  .inlineblock {
    display: inline-block !important;
  }
  .justifyleft {
    justify-content: left !important;
  }
  .infographie-cic nav ul li p {
    /* margin-top: 12px !important; */
  }
  .borduredeg::before {
    padding: 2px !important;
  }
}