@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

h1.pricing-titre {
  font-size: 26pt;
}

h2.pricing-titre {
  font-size: 20pt;
}

.pricing-titre {
  font-family: "Poppins";
  font-weight: 600;
  color: #032e58;
  margin-bottom: 20px;
  text-align: center;
}

.pricing-titre-formule {
  font-family: "Poppins";
  font-size: 14pt;
  text-align: center;
}

.pricing-prix-formule {
  font-family: "Poppins";
  font-weight: 600;
  font-size: 18pt;
  text-align: center;
}

.pricing-body-formule > ul {
  margin-top: 20px;
  margin-bottom: 30px;
}

.pricing-prix-formule-an {
  text-align: center;
  color: #aaa;
  font-size: 10pt;
  font-weight: 700;
}

.pricing-texte {
  font-size: 12pt;
}

li.check-o::before {
  font-family: "Glyphicons Halflings";
  content: "\e013";
  color: green;
  padding-right: 7px; 
}

li.check-oo::before {
  font-family: "Glyphicons Halflings";
  content: "\e013";
  color: orange;
  padding-right: 7px; 
}

li.check-x::before {
  font-family: "Glyphicons Halflings";
  content: "\e014";
  color: red;
  padding-right: 5px; 
}

li.check-x {
}

.btn-card {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.btn-card > a {
  padding-left: 25px;
  padding-right: 25px;
}

.row-cards {
  margin-top: 20px;
}

@media(min-width:992px) {
  .row-cards {
    display: flex;
  }

  .panel-card {
    width: 100%;
    height: 100%;
  }
}

.pricing-prix-formule > span.pricing-freq {
  color: #aaa;
  font-size: 10pt;
}

.pricingchoix a {
  text-decoration: none;
}

.choixtab {
  cursor: pointer;
}

.pricingchoix {
  margin-bottom: 30px;
}

.pricingchoix > div {
  background-color: #eeeeee;
  padding: 10px 10px 10px 10px;
  border: 4px solid white;
}

.encart-pricing {
  margin-top: 35px;
}

#frequence_3, #duree_3 {
  display: block;
}

#choix1, #choix2, #choix3, #choix4 {
  border: 5px solid #eeeeee;
  padding: 10px 10px 10px 10px;
}

a.tab:after {
  content: '';
  margin: auto;
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 25px solid #eeeeee;
}

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

#offres {
  cursor: pointer;
}

.offres-highlighted {
  background-color: #edf9ff;
}



.ribbon {
  position: absolute;
  right: var(--right, 30px);
  top: var(--top, -3px);
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
}

.ribbon > .content {
  color: white;
  font-size: 1.75rem;
  text-align: center;
  font-family: "Poppins";
  font-weight: 700;
  background: var(--color, #2ca7d8) linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
  padding: 8px 2px 4px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
  width: var(--width, 32px);
  min-height: var(--height, 36px);
  transition: clip-path 1s, padding 1s, background 1s;
}

.ribbon.down > .content {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 50% 100%, 0 calc(100% - 8px));
}



.radio-switch {
  position: relative;
  display: inline-block;
  display: inline-flex;
  padding: 3px;
  border-radius: 70em;
  background-color: #f0f0f0;
}

.radio-switch__item {
  position: relative;
  display: inline-block;
  height: 30px;
  width: 100px;
}

.radio-switch__label {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 50em;
  cursor: pointer;
  font-size: 10pt;
  -webkit-user-select: none;
          user-select: none;
  transition: all 0.3s;
}
.radio-switch__input:checked ~ .radio-switch__label {
  color: white;
}
.radio-switch__input:focus ~ .radio-switch__label {
  background-color: #ccc;
}
.radio-switch__label :not(*):focus-within, .radio-switch__input:focus ~ .radio-switch__label {
  background-color: transparent;
}

.radio-switch__marker {
  position: absolute;
  z-index: 1;
  top: 0;
  left: -100%;
  border-radius: 50em;
  background-color: #428bca;
  height: 30px;
  width: 100px;
  transition: transform 0.3s;
}
.radio-switch__input:checked ~ .radio-switch__marker {
  transform: translateX(100%);
}