@charset "UTF-8";
/*
couleurs des planches unity
*/
/*
autres couleurs
*/
/* = #666666 rajouté de 50% de blanc US503519*/
/* boosted */
/* ONE-i*/
/* info ob1 Orange / Sosh*/
.hero-zone-img {
  height: 366px;
  background-position: left top;
  background-position-x: 35%;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 736px) {
  .hero-zone-img {
    background-position-x: 31%;
    height: 200px;
  }
}
@media (max-width: 480px) {
  .hero-zone-img {
    height: 150px;
  }
}

.alert-container.ob1-notification-message .alert-icon.icon-error-severe::before {
  color: #DE2554 !important;
}

.heroZone-djingo-img {
  height: 60px;
  width: 60px;
}

.hero-zone-login {
  position: absolute;
  bottom: -70px;
  transform: translateY(-50%);
  max-width: calc(100% - 660px);
  width: 42%;
  left: 5%;
  border-bottom: 10px solid #4BB4E6;
}
@media (max-width: 1085px) {
  .hero-zone-login {
    bottom: -90px;
  }
}
@media (max-width: 960px) {
  .hero-zone-login {
    max-width: 500px;
    width: 500px;
    right: 45px;
    left: auto;
    top: 30%;
    bottom: unset;
  }
}
@media (max-width: 735px) {
  .hero-zone-login {
    position: inherit;
    left: 10%;
    right: 10%;
    width: 85%;
    max-width: 85%;
    padding-bottom: 0px !important;
  }
}
.hero-zone-login .o-link-arrow {
  margin-left: 55px;
}

.ob1-sosh .hero-zone-login {
  border-bottom: 10px solid #DE2554;
  z-index: 1;
}

#heroZone-djingo-input {
  border: 1px solid #CCC;
  max-width: 450px;
}
#heroZone-djingo-input input {
  color: #555555;
  font-size: 14px;
}
#heroZone-djingo-input .form-control::placeholder {
  opacity: 1 !important;
}

#djingoHP {
  padding-top: 10px;
  border-radius: 15px;
}

.djingo {
  width: 570px;
  border-radius: 15px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
  position: absolute;
  bottom: -60px;
  top: -60px;
  right: 30px;
  z-index: 2;
}
@media (max-width: 960px) {
  .djingo {
    width: 500px;
  }
}

@media (min-width: 736px) and (max-width: 960px) {
  .djingo-notifications-herozone {
    margin-bottom: 170px !important;
  }
}
@media (max-width: 960px) {
  .djingo-notifications-herozone .djingo {
    top: 210px !important;
    bottom: -340px !important;
  }
}

#djingoLoader {
  border-radius: 15px;
}

#botmanapp_iframe_botman {
  border-radius: 15px;
}

#hpBlockNoDjingo {
  width: 570px;
  border-radius: 15px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
  position: absolute;
  bottom: -30px;
  right: 30px;
  z-index: 2;
}
@media (max-width: 960px) {
  #hpBlockNoDjingo {
    width: 500px;
  }
}
@media (max-width: 960px) and (min-width: 735px) {
  #hpBlockNoDjingo {
    bottom: -120px !important;
  }
}

@media (max-width: 960px) and (min-width: 735px) {
  .ob1-sosh #hpBlockNoDjingo {
    bottom: -102px !important;
  }
}

.isSosh-djingo a .icon {
  color: #DE2554 !important;
}

@media (max-width: 736px) {
  .ob1-sosh .hero-zone-container {
    height: 240px;
  }
}

#floatingDjingo {
  animation: appear 0.7s cubic-bezier(0.19, 1, 0.22, 1) both;
  position: fixed;
  right: 30px;
  bottom: 45px;
  font-size: 400%;
  max-width: 56px;
  z-index: 2;
  background-color: #FF7900;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
#floatingDjingo a .icon {
  color: #FF7900;
}
#floatingDjingo .back-div {
  height: 36px;
  width: 26px;
  background-color: white;
  position: absolute;
  top: 10px;
  left: 15px;
  z-index: -1;
}

.ob1-sosh #floatingDjingo {
  background-color: #DE2554 !important;
}

#floatingDjingo:hover {
  background-color: #555;
}
#floatingDjingo:hover a .icon {
  color: #555;
}

.hero-zone-container {
  height: 366px;
  background: #ffcd0b;
  position: relative;
}
@media (max-width: 480px) {
  .hero-zone-container {
    height: 200px;
  }
}
@media (max-width: 360px) {
  .hero-zone-container {
    height: 150px;
  }
}
.hero-zone-container::before, .hero-zone-container::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero-zone-container::before {
  background: transparent url(../../../img/hero-zone-sosh/lignes-droite-480.png) no-repeat right top;
}
.hero-zone-container::after {
  background: transparent url(../../../img/hero-zone-sosh/lignes-gauche-480.png) no-repeat left bottom;
  bottom: 0;
}
@media (min-width: 736px) {
  .hero-zone-container::before {
    background: transparent url(../../../img/hero-zone-sosh/lignes-droite-768.png) no-repeat right top;
  }
  .hero-zone-container::after {
    background: transparent url(../../../img/hero-zone-sosh/lignes-gauche-768.png) no-repeat left bottom;
  }
}
@media (min-width: 960px) {
  .hero-zone-container::before {
    background: transparent url(../../../img/hero-zone-sosh/lignes-droite-1024.png) no-repeat right top;
  }
  .hero-zone-container::after {
    background: transparent url(../../../img/hero-zone-sosh/lignes-gauche-1024.png) no-repeat left bottom;
  }
}
@media (min-width: 1200px) {
  .hero-zone-container::before {
    background: transparent url(../../../img/hero-zone-sosh/lignes-droite-1280.png) no-repeat right top;
    background-position: right -2px top -1px;
  }
  .hero-zone-container::after {
    background: transparent url(../../../img/hero-zone-sosh/lignes-gauche-1280.png) no-repeat left bottom;
  }
}

.hero-zone-sosh-img {
  height: 365px;
  width: 386px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  top: 45px;
  left: 18%;
  z-index: 1;
}
@media (max-width: 1200px) {
  .hero-zone-sosh-img {
    left: 14%;
  }
}
@media (max-width: 960px) {
  .hero-zone-sosh-img {
    left: 8%;
  }
}
@media (max-width: 736px) {
  .hero-zone-sosh-img {
    height: 308px;
    width: 325px;
    margin-left: auto;
    margin-right: auto;
    left: 0%;
  }
}
@media (max-width: 480px) {
  .hero-zone-sosh-img {
    height: 234px;
    width: 247px;
    top: 15px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 360px) {
  .hero-zone-sosh-img {
    height: 189px;
    width: 184px;
  }
}

.hero-zone-push {
  position: absolute;
  bottom: -70px;
  transform: translateY(-30px);
  max-width: calc(100% - 660px);
  width: 42%;
  left: 5%;
}

@media (max-width: 1085px) {
  .hero-zone-push {
    bottom: -90px;
  }
}
@media (max-width: 960px) {
  .hero-zone-push {
    max-width: 500px;
    width: 500px;
    right: 45px;
    left: auto;
    top: 30%;
    bottom: unset;
  }
}
@media (max-width: 735px) {
  .hero-zone-push {
    position: inherit;
    left: 10%;
    right: 10%;
    width: 85%;
    max-width: 85%;
    padding-bottom: 0px !important;
  }
}
#menu {
  height: auto !important;
}

.nav-item {
  flex: 1 1 0;
}
@media (min-width: 736px) {
  .nav-item {
    min-width: 180px !important;
  }
}

.ob1-menu-page-dropdown {
  margin-top: auto;
  margin-bottom: auto;
}

.sosh-brand-img {
  width: 70px;
  margin-bottom: 6px;
}

.orange-brand-img {
  width: 50px;
  margin-bottom: 6px;
}

.icon-selector {
  font-size: 2rem;
}

.selector-desktop-icon {
  font-size: 30px;
}

.selector-container-icon {
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selector-container-text {
  padding: 0px 10px;
}
.selector-container-text .small {
  font-size: 14px !important;
  font-weight: 500;
}
.selector-container-text .font-weight-bold {
  font-size: 16px !important;
}

.swiper-slide {
  height: auto !important;
}

@media (max-width: 735px) {
  .swiper-container .swiper-slide {
    width: calc((100vw - 30px) * 0.4) !important;
  }
}
@media (max-width: 478px) {
  .swiper-container .swiper-slide {
    width: calc((100vw - 30px) * 0.5) !important;
  }
}

@media (max-width: 735px) {
  .swiper-container .swiper-slide-active {
    width: calc((100vw - 30px) * 0.4) !important;
  }
}
@media (max-width: 478px) {
  .swiper-container .swiper-slide-active {
    width: calc((100vw - 30px) * 0.5) !important;
  }
}

.swiper-box .swiper-slide:first-child {
  margin-left: calc((100vw - 30px) * -0.25) !important;
}

.swiper {
  height: 100%;
  border-bottom: 1px solid #cccccc;
}

.swiper-content {
  height: 100% !important;
}

.swiper-slide-active {
  border-bottom: 5px solid #f16e00 !important;
}

.ob1-sosh .swiper-slide-active {
  border-bottom: 5px solid #de2554 !important;
}

.device-item-img {
  max-height: 70px !important;
}

.overflow-item-address {
  overflow: hidden;
  text-overflow: ellipsis;
}

.selector-container {
  position: relative;
  border-bottom: 1px solid #cccccc;
}

@media (min-width: 736px) {
  .selector-padding {
    padding: 0px 67px;
  }
}

.swiper-button-next {
  right: -20px !important;
  width: 64px !important;
  height: 64px !important;
}

.swiper-button-prev {
  left: 20px !important;
  margin-top: 0px;
  width: 64px !important;
  height: 64px !important;
}

.swiper-button-next::after, .swiper-button-prev::after {
  content: unset !important;
}

.swiper-button-next::before, .swiper-button-prev::before {
  color: black;
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
  opacity: 0 !important;
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-3d .swiper-wrapper {
  transform-style: unset !important;
}

.ob1-menu-page {
  border-bottom: 1px solid #cccccc;
}

@media (min-width: 479px) and (max-width: 735px) {
  .selector-tablette .nav-item {
    width: calc((100vw - 30px) * 0.4) !important;
  }
}
@media (min-width: 479px) and (max-width: 735px) {
  .selector-tablette .nav-item .nav-link {
    width: calc((100vw - 30px) * 0.4) !important;
  }
}
@media (min-width: 479px) and (max-width: 735px) {
  .selector-tablette ul.nav.o-nav-light {
    width: fit-content;
    margin: 0 calc((100vw - 30px) * 0.1);
  }
}

.header {
  position: relative;
  height: 140px;
}

.solution-bloc {
  border-radius: 4px;
}
.solution-bloc .item-icon.icon-error-severe {
  color: black !important;
}

.last-solution-link {
  border-bottom: none !important;
}

.card-header-img {
  position: absolute;
  width: 100%;
  height: 170px;
  bottom: 15px;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.ob1-sosh .card-header-img {
  bottom: 5px;
}
.ob1-sosh .card-header-img.hp {
  bottom: 15px;
}

.card-header-img-sosh {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 0;
  height: 172px;
}

.icon-mobile-diagnostic::before {
  display: block;
  text-align: center;
  width: 32px;
}

.solution-nb {
  top: -15px;
}

.btn-djingo-sosh.ob1-capsule {
  max-width: 21.875rem;
  white-space: normal;
  outline-offset: 0.25rem;
  transition: outline-offset 0.15s ease-in-out;
  border-color: #000;
  color: #000;
  border-radius: 0.875rem;
  font-weight: 700;
  padding: 0.1875rem 0.9375rem 0.3125rem;
  border-width: 1px;
}

.btn-djingo-sosh.ob1-capsule:not(:disabled):not(.disabled):active {
  color: #de2554;
}

.sau-container {
  height: 420px;
  position: relative;
}

.sau-text-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 30%;
}

.sau-container-img {
  position: absolute;
  width: 100%;
  height: calc(100% + 45px);
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sau-container-inner {
  height: 180px;
}

.sauMobile-container-img {
  max-width: 50%;
  height: 100%;
}

@media (min-width: 736px) {
  .sau-title {
    font-size: 30px !important;
  }
}

.ob1-sosh .helpSau-block {
  border: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.contact-container {
  position: relative;
  margin-top: 60px;
}
@media (max-width: 960px) {
  .contact-container {
    margin-top: 45px;
  }
}
@media (max-width: 736px) {
  .contact-container {
    margin-top: 30px;
  }
}

.contact-img-orange {
  height: 200px;
  width: 260px;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 735px) {
  .contact-img-orange {
    height: 115px;
    width: 140px;
    right: 15px;
    position: absolute;
    top: 30px;
  }
}
@media (max-width: 479px) {
  .contact-img-orange {
    position: unset;
    margin-left: auto;
    margin-right: auto;
  }
}

.ctc-btn {
  max-width: 300px;
  width: 100%;
}

#community .ctc-btn {
  padding-top: 24px;
  padding-bottom: 24px;
}

.contact-img-sosh {
  height: 200px;
  width: 260px;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 735px) {
  .contact-img-sosh {
    height: 142px;
    width: 190px;
    right: 15px;
    position: absolute;
    top: 0;
  }
}
@media (max-width: 479px) {
  .contact-img-sosh {
    position: unset;
    margin-left: auto;
    margin-right: auto;
  }
}

.community-container {
  border: solid 1px #CCCCCC;
}
@media (max-width: 959px) {
  .community-container {
    border: none;
  }
}
.community-container .contact-img-container {
  width: 250px;
  position: relative;
  margin-right: 65px;
  margin-top: 15px;
}
.community-container .contact-text-container {
  max-width: calc(69% - 250px);
}
@media (max-width: 1199px) {
  .community-container .contact-text-container {
    max-width: calc(100% - 250px);
    flex: 1;
  }
}
.community-container .community-button {
  display: flex;
  max-width: 31%;
  padding-right: 15px;
  padding-left: 15px;
  flex: 1 1 0;
}
@media (max-width: 1199px) {
  .community-container .community-button {
    display: none;
  }
}
.community-container .contact-orange-text-container {
  max-width: calc(100% - 235px);
  padding-right: 15px;
}
@media (max-width: 735px) {
  .community-container .contact-orange-text-container {
    max-width: calc(100% - 165px);
  }
}
@media (max-width: 479px) {
  .community-container .contact-orange-text-container {
    max-width: 100%;
  }
}
.community-container .contact-orange-img-container {
  max-width: 248px;
}
@media (max-width: 479px) {
  .community-container .contact-orange-img-container {
    position: relative;
    max-width: 100%;
    margin-bottom: 15px;
  }
}
@media (max-width: 479px) {
  .community-container .contact-orange-text-container-other {
    flex-direction: column-reverse;
  }
}
@media (max-width: 959px) {
  .community-container .contact-img-orange {
    height: 185px;
  }
}
@media (max-width: 735px) {
  .community-container .contact-img-orange {
    position: initial;
    height: 160px;
  }
}
@media (max-width: 479px) {
  .community-container .contact-img-orange {
    position: relative;
    top: 0;
  }
}
.community-container .contact-img-orange:before {
  max-width: 189px;
  max-height: 189px;
  flex-shrink: 0;
  content: "";
  background: #F4F4F4;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  z-index: 2;
}
@media (max-width: 959px) {
  .community-container .contact-img-orange:before {
    max-width: 145px;
    max-height: 145px;
    bottom: 28px;
  }
}
@media (max-width: 735px) {
  .community-container .contact-img-orange:before {
    max-width: 112px;
    max-height: 112px;
    bottom: 0;
  }
}
.community-container .contact-img-orange .contact-img-orange-svg {
  position: absolute;
  right: -35px;
  bottom: 15px;
}
@media (max-width: 959px) {
  .community-container .contact-img-orange .contact-img-orange-svg {
    bottom: 20px;
    right: 30px;
  }
}
@media (max-width: 735px) {
  .community-container .contact-img-orange .contact-img-orange-svg {
    bottom: -7px;
    right: 0;
  }
}
@media (max-width: 479px) {
  .community-container .contact-img-orange .contact-img-orange-svg {
    bottom: 1px;
    right: -20px;
  }
}
.community-container .contact-img-orange .contact-img-orange-svg svg {
  position: relative;
  z-index: 2;
}
@media (max-width: 959px) {
  .community-container .contact-img-orange .contact-img-orange-svg svg {
    width: 201px;
    height: 195px;
  }
}
@media (max-width: 735px) {
  .community-container .contact-img-orange .contact-img-orange-svg svg {
    width: 148px;
    height: 148px;
  }
}
.community-container .contact-img-orange .contact-img-orange-svg:before {
  background: white;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.ob1-sosh .community-container .contact-orange-img-container {
  width: 100%;
}
@media (max-width: 735px) and (min-width: 480px) {
  .ob1-sosh .community-container .contact-orange-img-container {
    max-width: 200px;
  }
}
@media (max-width: 735px) and (min-width: 480px) {
  .ob1-sosh .community-container .contact-orange-text-container {
    max-width: calc(100% - 200px);
  }
}
.ob1-sosh .community-container .contact-img-container {
  width: 28%;
  margin-right: 0;
  margin-top: 0;
  overflow: hidden;
}
@media (max-width: 1124px) and (min-width: 1124px) {
  .ob1-sosh .community-container .contact-img-container {
    padding-top: 1px;
  }
}
.ob1-sosh .community-container .community-button {
  width: 25%;
}
.ob1-sosh .community-container .community-button div, .ob1-sosh .community-container .community-button a {
  width: 100%;
}
.ob1-sosh .community-container .contact-text-container {
  max-width: 47%;
}
@media (max-width: 1199px) {
  .ob1-sosh .community-container .contact-text-container {
    max-width: 72%;
  }
}
@media (min-width: 960px) {
  .ob1-sosh .community-container .contact-img-sosh {
    height: 100%;
    width: 100%;
  }
}

.prefooter {
  height: auto;
  margin-top: 90px;
}
@media (min-width: 736px) {
  .prefooter {
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .prefooter {
    margin-top: 60px;
  }
}

.ob1-loader {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.ob1-loader {
  align-items: start;
}
.ob1-loader .ob1-spinner-undetermined {
  margin-top: 85px;
}