.pricing-table-item-head {
  --ribbon-depth: .5rem;
  --ribbon-background: var(--primary);
  --ribbon-color: var(--white);
  --ribbon-font-size: .8rem;
}
.pricing-table-item-head.bg-primary {
  --ribbon-background: var(--quadrinary);
  --ribbon-color: var(--dark);
}

.pricing-table-item-head[data-ribbon]:before {
  content: attr(data-ribbon);
  font-size:var(--ribbon-font-size);
  color: var(--ribbon-color);
  /* I : position & coloration */
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(29.29%, -100%) rotate(45deg);
  transform-origin: bottom left;
  padding: 5px 35px calc(var(--ribbon-depth) + 5px);
  background: linear-gradient(rgba(0,0,0,0.5) 0 0) bottom/100% var(--ribbon-depth) no-repeat var(--ribbon-background);
  /* II : clipping */
  clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - var(--ribbon-depth)) calc(100% - var(--ribbon-depth)),var(--ribbon-depth) calc(100% - var(--ribbon-depth)) , 0 100%);
  /* III : masking */
  -webkit-mask: 
      linear-gradient( 135deg, transparent calc(50% - var(--ribbon-depth)*0.707),#fff 0) bottom left,
      linear-gradient(-135deg, transparent calc(50% - var(--ribbon-depth)*0.707),#fff 0) bottom right;
  -webkit-mask-size:300vmax 300vmax;
  -webkit-mask-composite: destination-in;
   mask-composite: intersect;
}



.packages__module .pricing-table-item {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.packages__module .pricing-table-item-body {
  padding: 2rem 1rem;
}

.packages__module .package--description {
  margin-bottom: auto;
  font-size: .8rem;
}

.packages__module .package--actions button {
  margin: auto;
  display: block;
}

.package--details {
  margin-top: 0;
  padding: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s, margin 1s, display 0s;
}
.package--details thead th:not(:first-of-type) {
  text-align: center;
}
.package--details td {
  text-align: center;
}
.package--details button.info span {
  color: var(--tertiary)
}
.package--details svg {
  height: 1ch;
  width: 1ch;
}

.package--details.open {
  padding: 2rem 0;
  display: block;
  opacity: 1;
  visibility: visible;
  height: auto;
}

.fineprint {
  text-align: center;
  margin: 4rem auto;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.fancybox__container {
  z-index:10500 !important;
}