:root {
    --rotated-margin: 100px;
    --margin-containers: 150px;
    --padding-containers: 100px;
    --text-gap: 6px;
    --items-gap: 24px;
    --container-padding: 32px;
    --padding-item: 0px;

    --box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.25);

    --grid-columns: 12;
    --column-width: calc((min(var(--dvw, 100dvw), 1920px) - var(--margin) * 2 - var(--gap) * (var(--grid-columns) - 1)) / var(--grid-columns));
}

/* GRID */
@media only screen and (min-width: 1920px) {
    .span-max {
        max-width: calc(1920px - var(--margin) * 2);
        margin: 0 auto;
        position: relative;
    }
}

.span-12,
.span-max {
    --item-columns: 12;
}

.span-8 {
    --item-columns: 8;
}

.span-7 {
    --item-columns: 7;
}

.span-6 {
    --item-columns: 6;
}

.span-5 {
    --item-columns: 5;
}

.span-4 {
    --item-columns: 4;
}

.span-3 {
    --item-columns: 3;
}

[class*="span-"] {
    width: calc(var(--item-columns) * var(--column-width) + (var(--item-columns) - 1) * var(--gap) - var(--padding-item) * 2);
    min-width: calc(var(--item-columns) * var(--column-width) + (var(--item-columns) - 1) * var(--gap) - var(--padding-item) * 2);
}

/* Extras */
.topic-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.topic-container.align-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.topic-container .topic-title {
    text-align: center;
    margin-bottom: var(--container-padding);
}

.blue-container .content-container {
    color: white;
}

.topic-container.align-left .topic-title {
    text-align: left;
}

/* CONTAINER */
div.container {
    position: relative;
    width: 100%;
}

div.container:has(+ div.container),
div.topic-container:has(+ div.container),
div.container:has(+ div.topic-container),
div.topic-container:has(+ div.topic-container) {
    margin-bottom: var(--margin-containers);
}

/* ROTATED CONTAINER*/
div.rotated-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

div.rotated-container.negative-margin {
    padding-bottom: var(--rotated-margin);
    min-height: calc(var(--rotated-margin) * 3);
}

div.rotated-container:not(.negative-margin) .content-container {
    padding: var(--rotated-margin) 0;
}

div.rotated-container.negative-margin::before {
    margin-top: var(--rotated-margin);
    height: calc(100% - var(--rotated-margin));
}

div.rotated-container.right-rotation::before {
    clip-path: polygon(0 0px, 100% 30px, 100% 100%, 0% 100%);
}

div.rotated-container.left-rotation::before {
    clip-path: polygon(0 30px, 100% 0px, 100% 100%, 0% 100%);
}

div.rotated-container.blue-container::before {
    background-color: var(--blue1);
}

div.rotated-container.grey-container::before {
    background-color: var(--lightgrey);
}

div.block-container {
    padding: var(--padding-containers) 0;
    gap: var(--items-gap);
}

div.block-container .margin-inner {
    display: flex;
    flex-direction: column;
    gap: var(--items-gap);
}

div.container .container-title {
    text-align: center;
    margin-bottom: var(--items-gap);
    margin-right: auto;
    margin-left: auto;
}

div.block-container.grey-container {
    background-color: var(--lightgrey);
}

div.block-container .content-container .item {
    background-color: var(--purewhite);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

div.block-container .content-container .item .item-cover {
    border-radius: unset;
    box-shadow: unset;
}

div.block-container .content-container .item .item-info {
    padding: var(--items-gap);
    padding-top: 0;
}

div.float-container .content-container {
    flex-direction: column;
    gap: 0;
}

div.float-container .content-container .image-container img {
    width: 100%;
    height: 100%;
    aspect-ratio: 5/3;
    object-fit: cover;
    display: block;
}

div.float-container .content-container .card-container {
    display: flex;
    justify-content: flex-end;
    margin-top: calc(var(--padding-containers) * -1);
}

div.float-container .content-container .card-item {
    background-color: var(--blue1);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: var(--items-gap);
    color: var(--white1);

    display: flex;
    flex-direction: column;
    gap: var(--items-gap);
    min-height: calc(var(--padding-containers) * 2);

    --padding-item: var(--items-gap);
}

div.float-container .content-container .card-text {
    display: flex;
    flex-direction: column;
    gap: var(--items-gap);
}

div.comments-container .item {
    background-color: var(--blue1);
    color: var(--white1);
    padding: var(--items-gap);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    --padding-item: var(--items-gap);
    ;
}

/* CONTENT */

.content-container {
    display: flex;
    gap: var(--gap);
}

.scrollable {
    overflow-x: scroll;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.margin-inner .scrollable {
    margin-left: calc(var(--margin) * -1);
    padding: 0 var(--margin);
    width: 100%;
}

.content-container .item {
    display: flex;
    flex-direction: column;
    gap: var(--items-gap);

    margin-bottom: 1rem;
}

.content-container .item:first-of-type {
    margin-left: auto;
}

.content-container .item:last-of-type {
    margin-right: auto;
}

.content-container .item .item-cover {
    aspect-ratio: 16/9;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.content-container .item .item-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

div.blue-container .item-info {
    color: var(--white1);
    display: flex;
    flex-direction: column;
    gap: var(--text-gap);
}

.item-info .item-title {
    font-weight: 600;
}

/* Offer */

div.blue-container .offer-item {
    background-color: var(--purewhite);
    padding: var(--items-gap);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    --padding-item: var(--items-gap);
    margin: 0 auto;
}

div .item-info {
    text-align: left;
}

div.blue-container .offer-item .item-info {
    color: var(--black1);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
}

div.blue-container .offer-item h3 {
    color: var(--blue1);
}

div.blue-container .offer-item svg {
    fill: var(--blue2);
}

div .offer-details-container {
    width: 100%;
}

div.blue-container .offer-details-item {
    display: flex;
    flex-direction: row;
    gap: var(--gap);

    border-top: 1px solid var(--lightgrey);
    padding: var(--gap) 0;
}

div.blue-container .offer-buttons {
    margin-top: var(--items-gap);
}

div.container .main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--items-gap);
}

div.blue-container .container-extra-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--items-gap);
    width: 100%;
}

div.blue-container .container-extra-text {
    text-align: center;
    color: var(--white1);
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--text-gap);
}

.content-container.offer-container {
    flex-wrap: wrap;
}

/* Tarifs Container */
div.container .tarifs-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--gap);
    flex-wrap: wrap;
    align-items: flex-start;
}

div.container .tarifs-container .tarif-type-container {
    display: flex;
    flex-direction: column;
}

div.container .tarifs-container .tarifs-item {
    border-bottom: 1px solid var(--blue1);
    padding-bottom: calc(var(--items-gap) / 2);
    cursor: pointer;
}

div.container .tarifs-container .tarifs-item.active {
    color: var(--blue1);
}

div.container .tarifs-container .tarifs-item+.tarifs-item {
    padding-top: calc(var(--items-gap) / 2);
}

div.container .tarifs-container .tarifs-info-item:not(.active) {
    display: none;
}

div.container .tarifs-container .tarifs-info-item,
div.container .tarifs-container .tarifs-info-text,
.content-container.default-container {
    display: flex;
    flex-direction: column;
    gap: var(--items-gap);
}

div.container .tarifs-container .tarifs-info-text strong {
    color: var(--blue1);
}

.content-container.center-container {
    flex-direction: column;
    align-items: center;
}

/* Social Tarifs */
.content-container .social-tarifs-text {
    width: 50%;
    text-wrap-style: balance;
}

.content-container .social-tarifs-title {
    color: var(--blue1);
    cursor: pointer;
}

.content-container .social-tarifs-container {
    margin-top: var(--margin-elements);
}

.content-container .social-item-text {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height .4s ease, opacity .4s ease;
    margin-bottom: 1rem;
}

.content-container .social-item-text.active {
    opacity: 1;
}

.content-container .social-item {
    text-align: center;
}

.fq-inner {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-top: 1em;
}

/* Frequent Questions */

.frequent-questions {
    margin: 150px 0;

    width: calc(100% - (var(--margin) * 2));
}

.frequent-questions-item {
    padding: 20px;
    background-color: var(--purewhite);
    border-radius: var(--border-radius);
}

.frequent-questions-item.sub-questions {
    background-color: var(--white1);
    width: auto;
}

.frequent-questions-item:not(.active):hover {
    background-color: var(--lightgrey);
}

.frequent-questions-title {
    display: flex;
    width: 100%;
    justify-content: space-between;
    cursor: pointer;
}

.frequent-questions-text {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height .4s ease, opacity .4s ease;
}

.fq-inner {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-top: 1em;
}

.frequent-questions-item.active .frequent-questions-text {
    opacity: 1;
}

.frequent-questions-plus {
    transition: transform .3s ease;
}

.frequent-questions-plus.open {
    transform: rotate(45deg);
}

.frequent-questions-plus {
    color: var(--blue1);
}

.frequent-questions-button {
    display: flex;
    justify-content: center;
    margin-top: var(--margin-elements);
}

.frequent-questions-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* Communication Tarifs */
.content-container.offer-container .offer-title,
.content-container.offer-container .price,
.content-container.offer-container .old-price {
    text-align: center;
    color: var(--black1);
}

.content-container.offer-container .price {
    color: var(--blue1);
}

.content-container.offer-container .old-price {
    text-decoration: line-through;
    color: var(--black1);
}

.content-container.offer-container .other-options {
    width: 100%;
}

.content-container.offer-container .other-options .option {
    border: 1px solid var(--black1);
    padding: .5rem 1rem;
    border-radius: var(--border-radius);
    width: fit-content;
}

/* Special Numbers */
div.rotated-container .item-block {
    background-color: var(--purewhite);
    color: var(--black1);
    padding: var(--items-gap);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: left;

    min-height: calc(var(--rotated-margin) + var(--items-gap) * 2);

    margin: 0 auto;

    --padding-item: var(--items-gap);
}

div.rotated-container .item-block h1,
div.rotated-container .item-block h2,
div.rotated-container .item-block h3 {
    color: var(--blue1);
}

div.container .content-container.wrap {
    flex-wrap: wrap;
}

div.rotated-container .item-block .item-text {
    display: flex;
    flex-direction: column;
    gap: var(--text-gap);
}

/* Text + Image Container */
div.rotated-container .text-image-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

div.rotated-container .text-image-container .item-img {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

div.rotated-container .text-image-container .item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

div.rotated-container .text-image-container .item-text {
    padding-top: calc(var(--rotated-margin) * 2);
    padding-bottom: var(--rotated-margin);

    display: flex;
    flex-direction: column;
    gap: var(--items-gap);
}

div.rotated-container .item-table {
    background-color: var(--purewhite);
    margin-top: calc(var(--rotated-margin) * 2);
    margin-bottom: var(--rotated-margin);
    padding: var(--container-padding);

    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);

    --padding-item: var(--container-padding);
}

.item-table {
    display: flex;
    flex-direction: column;
    text-align: center;
    height: fit-content;
}

.item-table .row {
    display: flex;
    flex-direction: row;
}

.item-table .row:not(:first-of-type) {
    border-top: 1px solid var(--blue1);
    padding: calc(var(--items-gap) / 2) 0;
}

.item-table .row:first-of-type {
    padding-bottom: calc(var(--items-gap) / 2);
}

.item-table .col {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item-table .col .col-content {
    display: flex;
    flex-direction: column;
    gap: var(--items-gap);
}

/* Block Container */
div.topic-container .group-container {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: var(--container-padding);

    display: flex;
    flex-direction: column;
    gap: var(--items-gap);
    align-items: center;

    --padding-item: var(--container-padding);
}

div.topic-container .group-container .contacts-item-info {
    width: 100%;
    text-align: left;

    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

div.topic-container .group-container .contacts-sub-item {
    display: flex;
    flex-direction: column;
    gap: var(--text-gap);
}

div.topic-container .group-container .button-flex {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
}

div.topic-container .group-container.blue-container {
    background-color: var(--blue1);
    color: var(--white1);
}

div.topic-container .group-container.white-container {
    background-color: var(--purewhite);
    color: var(--black1);
}

main > .topic-container:first-child,
div.info-content{
    margin-top: var(--margin-containers);
}

div.group-main-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
    justify-content: center;
}

div.tarifs-tables-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
    row-gap: calc(var(--items-gap) * 2);
    justify-content: space-between;
}

div.tarifs-tables-container .tarifs-description {
    text-align: left;
    margin-left: auto;
}

div.tarifs-tables-container .tarifs-item-container {
    display: flex;
    flex-direction: column;
}

div.tarifs-tables-container .tarifs-item {
    border-bottom: 1px solid var(--blue1);
    padding: calc(var(--items-gap) / 2) 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

div.tarifs-tables-container .tarifs-item:first-child {
    padding-top: 0;
}

div.tarifs-tables-container .tarifs-item.active {
    color: var(--blue1);
}

div.tarifs-tables-container .item-table:not(.active) {
    display: none;
}

div.container .rotated-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.container .fill-container {
    width: 100%;
}

@media only screen and (max-width: 1200px) {
    .m-span-12 {
        --item-columns: 12;
    }

    .m-span-9 {
        --item-columns: 9;
    }

    .m-span-6 {
        --item-columns: 6;
    }

    .m-span-5 {
        --item-columns: 5;
    }

    .m-span-4 {
        --item-columns: 4;
    }
    
    div.blue-container .offer-item {
        min-width: unset;
        max-width: 350px;
    }
}

@media only screen and (max-width: 950px) {
    :root {
        --margin-containers: 100px;
    }
    
    .s-span-12 {
        --item-columns: 12;
    }

    .s-span-10 {
        --item-columns: 10;
    }

    .s-span-8 {
        --item-columns: 8;
    }

    .s-span-6 {
        --item-columns: 6;
    }

    div.float-container .content-container {
        gap: var(--items-gap);
    }

    div.float-container .content-container .card-container {
        margin-top: 0;
    }

    div.container .tarifs-container,
    div.tarifs-tables-container {
        gap: calc(var(--items-gap) * 2);
    }
    

    div.rotated-container .text-image-container .item-text {
        padding: var(--gap) 0;
    }

    div.rotated-container .text-image-container.reverse {
        flex-direction: column-reverse;
    }
    
    div.rotated-container:not(.negative-margin) .content-container {
        padding: calc(var(--rotated-margin) * 2) 0;
    }
}

@media only screen and (max-width: 750px) {
    :root {
        --rotated-margin: 50px;
    }
}

@media only screen and (max-width: 480px) {
    .x-span-12 {
        --item-columns: 12;
    }
}