/*******************
 * General
 *******************/
body {
    color: #333;
}

/*******************
 * Flip card
 *******************/
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 250px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card-inner .flip-card-title h2 {
    font-size: 4em;
}

.flip-card-inner .flip-card-text p {
    font-size: 0.9em;
    text-align: center;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    align-content: center;
    border-radius: 15px;
    padding: 15px;
}

.flip-card-back {
    transform: rotateY(180deg);
}

.container.full-width {
    max-width: 100%;
}

/*******************
 * Navbar
 *******************/
.navbar .nav-item .active {
    border-bottom: 5px solid rgb(var(--bs-primary-rgb));
    color: inherit !important;
}

/*******************
 * Highlights
 *******************/
.highlights-title {
    margin-top: 2em;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 2em;
}

.highlights-line-title {
    position: relative;
    font-weight: bold;
    font-family: "Roboto Thin", sans-serif;
    --focus-bg-color: white;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
    white-space: normal;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.2),
    4px 4px 6px rgba(255, 255, 255, 0.1),
    6px 6px 8px rgba(255, 255, 255, 0.3);
}

.highlights-line-title.left {
    text-align: left;
}

.highlights-line-title.right {
    text-align: right;
}

.highlights-line-title.left:after {
    left: 0;
    margin-left: -1rem;
}

.highlights-line-title.right:after {
    right: 0;
    margin-right: -1rem;
    left: auto; /* Remettre à zéro la propriété left */
}

.highlights-line-title:after {
    background-color: var(--focus-bg-color);
    content: " ";
    height: 1.4em;
    position: absolute;
    left: 0;
    margin-left: -1rem;
    top: 40%;
    width: calc(100%);
}

/*******************
 * Container
 *******************/
:root {
    --bs-container-width: 100vw;
}
@media (min-width: 576px) {
    :root {
        --bs-container-width: 540px;
    }
}
@media (min-width: 768px) {
    :root {
        --bs-container-width: 720px;
    }
}
@media (min-width: 992px) {
    :root {
        --bs-container-width: 960px;
    }
}
@media (min-width: 1200px) {
    :root {
        --bs-container-width: 1140px;
    }
}

/*******************
 * Image grid / Popover / Modal
 *******************/
/** 2rem is for margin between image col */
.image-grid-1,
.popover-grid-1,
.modal-grid-1 {
    width: calc((20 * 2rem) - var(--bs-container-width) / 20);
    height: calc((20 * 2rem) - var(--bs-container-width) / 20);
}
.image-grid-2,
.popover-grid-2,
.modal-grid-2 {
    width: calc((14 * 2rem) - var(--bs-container-width) / 14);
    height: calc((14 * 2rem) - var(--bs-container-width) / 14);
}
.image-grid-3,
.popover-grid-3,
.modal-grid-3 {
    width: calc((12 * 2rem) - var(--bs-container-width) / 12);
    height: calc((12 * 2rem) - var(--bs-container-width) / 12);
}
.image-grid-4,
.popover-grid-4,
.modal-grid-4 {
    width: calc((10 * 2rem) - var(--bs-container-width) / 10);
    height: calc((10 * 2rem) - var(--bs-container-width) / 10);
}
.image-grid-5,
.popover-grid-5,
.modal-grid-5 {
    width: calc((9 * 2rem) - var(--bs-container-width) / 9);
    height: calc((9 * 2rem) - var(--bs-container-width) / 9);
}
.image-grid-6,
.popover-grid-6,
.modal-grid-6 {
    width: calc((8.5 * 2rem) - var(--bs-container-width) / 8.5);
    height: calc((8.5 * 2rem) - var(--bs-container-width) / 8.5);
}
.image-grid-7,
.popover-grid-7,
.modal-grid-7 {
    width: calc((8 * 2rem) - var(--bs-container-width) / 8);
    height: calc((8 * 2rem) - var(--bs-container-width) / 8);
}
.image-grid-8,
.popover-grid-8,
.modal-grid-8 {
    width: calc((7.8 * 2rem) - var(--bs-container-width) / 7.9);
    height: calc((7.8 * 2rem) - var(--bs-container-width) / 7.9);
}

/*******************
 * Popover
 *******************/
.popover-container {
    background-color: transparent;
    height: fit-content;
    margin: 24px 0;
}

.popover-button {
    text-align: center;
    width: 100%;
    height: fit-content;
    align-content: center;
    border-radius: 15px;
    padding: 15px;
}

.popover-button h2 {
    font-size: 4em;
}

.popover-button p {
    font-size: 0.9em;
    text-align: center;
}

.popover-button .text > * {
    color: inherit;
}

/*******************
 * Modal
 *******************/
.modal-container {
    background-color: transparent;
    height: fit-content;
    margin: 24px 0;
}

.modal-button {
    text-align: center;
    width: 100%;
    height: fit-content;
    align-content: center;
    border-radius: 15px;
    padding: 15px;
}

.modal-button .title {
    font-size: 4em;
}

.modal-button .text {
    font-size: 0.9em;
    text-align: center;
}

.modal-button .text > * {
    color: inherit;
}

/*******************
 * Swiper
 *******************/
.swiper.swiper-horizontal {
    padding-right: 60px!important;
}