/* Footer at the bottom of short pages */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}

.cms-post-list {
    display: grid;
    gap: 1.25rem;
}

.cms-post-card {
    border-bottom: 1px solid #e2e8ec;
    padding-bottom: 1.25rem;
}

.navbar > .container {
    position: relative;
}

.top-search {
    inset: 0;
    position: absolute;
    z-index: -1;
    background: var(--bs-dark);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

body.top-search-open .top-search {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
}

.top-search .navbar-form {
    margin: 0;
    width: calc(100% - 3.5rem) !important;
}

.top-search .query {
    appearance: none;
    border: 0;
    border-radius: 0;
    font-size: 1.25rem;
    -webkit-appearance: none;
}

.top-search .query::-webkit-search-cancel-button,
.top-search .query::-webkit-search-decoration,
.top-search .query::-webkit-search-results-button,
.top-search .query::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}

.cms-top-search-close {
    color: #fff;
    height: 35px;
    position: absolute !important;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    z-index: 1;
}

.cms-top-search-close i {
    font-size: 1.125rem;
}

#search-autocomplete {
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    /* List 17px below the search bar like the old website; the gap holds the arrow (qs-search.css). */
    top: calc(100% + 5px);
    transform: translateY(-0.5rem);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    visibility: hidden;
    z-index: 4;
}

body.top-search-open #search-autocomplete {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
}

#search-autocomplete .container {
    max-height: min(70vh, 36rem);
    overflow-y: auto;
    padding-top: 12px;
}

#search-autocomplete .list-group {
    margin-bottom: 0 !important;
}

/* "More results": link hover like the old website (green, underlined), grey background stays. */
#search-suggestion-all:hover {
    color: #007d06;
}

/* Pagination: wraps on small screens instead of widening the page. */
.pagination {
    flex-wrap: wrap;
}

.cms-search-empty-icon {
    font-size: 120px;
}

/* Keyboard selection: light background and dark text, so the green highlight stays readable. */
#search-autocomplete-result .list-group-item.active {
    background-color: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.125);
    color: #212529;
}

.cms-dropdown-menu-min-full {
    min-width: 100%;
}

.cms-dropdown-menu-login {
    min-width: 300px;
}

.border-outline-primary {
    border-color: var(--bs-primary);
    border-width: 1px;
    border-style: solid;
}

.cms-footer-brand {
    min-height: 60px;
}

.cms-footer-brand-icon {
    max-height: 45px;
}

.cms-footer-brand-text {
    color: var(--bs-primary);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 0.75rem;
}

.home-hero {
    min-height: 145px;
    overflow: hidden;
    position: absolute;
    width: 100%;
}

.home-ambiance {
    min-height: 145px;
    opacity: 0.22;
    position: relative;
}

.home-ambiance::before,
.home-ambiance::after {
    background: var(--bs-primary);
    content: "";
    display: block;
    position: absolute;
}

.home-ambiance-left::before {
    border-radius: 65% 35% 58% 42%;
    height: 108px;
    left: 10%;
    top: 18px;
    transform: rotate(-18deg);
    width: 170px;
}

.home-ambiance-left::after {
    border-radius: 55% 45% 62% 38%;
    height: 58px;
    left: 42%;
    top: 70px;
    transform: rotate(22deg);
    width: 108px;
}

.home-ambiance-right::before {
    border-radius: 42% 58% 36% 64%;
    height: 124px;
    right: 12%;
    top: 20px;
    transform: rotate(15deg);
    width: 170px;
}

.home-ambiance-right::after {
    border-radius: 60% 40% 50% 50%;
    height: 70px;
    right: 40%;
    top: 64px;
    transform: rotate(-24deg);
    width: 108px;
}

.home-actions {
    padding-top: 0.5rem;
    position: relative;
    z-index: 1;
}

.home-action-button {
    min-width: 250px;
}

.tplSearchJobPosting .btn.active {
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.home-news-thumb {
    align-items: center;
    background: var(--bs-info);
    color: var(--bs-white);
    display: flex;
    font-size: 2rem;
    font-weight: 700;
    justify-content: center;
    text-decoration: none;
}

.home-newsletter-card {
    overflow: hidden;
}

.home-newsletter-icon {
    color: rgba(255, 255, 255, 0.18);
    font-size: 7.5rem;
    line-height: 1;
    position: absolute;
    right: 1.5rem;
    top: 5.75rem;
    z-index: 0;
}

.home-swiss-map {
    position: relative;
}

.map-suisse {
    background-image: none;
}

.btn-map {
    border-radius: 999px;
    font-weight: 700;
    height: 48px;
    line-height: 48px;
    position: absolute;
    width: 48px;
    z-index: 1;
}

.bg-grey-aaa {
    background-color: #aaa;
}

.btn-map-fr {
    left: 25%;
    top: 46%;
}

.btn-map-de {
    left: 55%;
    top: 28%;
}

.btn-map-it {
    left: 63%;
    top: 68%;
}

.cms-legal-content p {
    margin-bottom: 1rem;
}

.cms-legal-content p > strong:first-child {
    color: var(--bs-body-color);
}

.btn-recommanded.invisible {
    pointer-events: none;
}

.fa-solid,
.fas,
.fal {
    display: inline-block;
    /* Size of the text around, like the Font Awesome kit of the old website */
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-circle-info::before {
    content: "\f05a";
}

.fa-xmark::before {
    content: "\f00d";
}

.price-compare .accordion-button {
    width: 100%;
}

.price-compare .accordion-button::after {
    flex-shrink: 0;
}

.price-compare .bg-row:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.015);
}

.cms-quicksite-content img,
.cms-post-body img {
    height: auto;
    max-width: 100%;
}

/* Caption of images inserted in the editor: only the alt text (see QuicksitePageResource::imageAlts()) */
.attachment__caption {
    display: none;
}

/* Embedded videos (YouTube iframe 560px) no wider than the screen */
.cms-quicksite-content iframe,
.cms-post-body iframe {
    max-width: 100%;
}

/* YouTube videos (blocked until consent, see CmsContent): stored width, always 16:9 */
iframe[data-consent-vendor="youtube"] {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    /* No gap below for the descenders of the text line */
    vertical-align: top;
}

.cms-quicksite-content table {
    max-width: 100%;
}

.newsletter-privacy-consent a {
    color: #fff;
    text-decoration-color: currentColor;
}

@media (min-width: 1200px) {
    .price-compare .accordion-button {
        cursor: default;
        pointer-events: none;
    }

    .price-compare .accordion-button::after {
        display: none;
    }

    .price-compare .accordion-collapse {
        height: auto !important;
    }
}

.icon-search-open::before {
    font-size: 18px;
    color: white;
}

/* Placeholder of embeds blocked until cookie consent (cms.js), same size as the video; inside .ratio the wrapper sizes it. */
.cms-consent-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* In a container (e.g. the job map, only min-height) it fills the container instead of being 16:9. */
[data-consent-placeholder]:has(> .cms-consent-placeholder) {
    display: grid;
}

[data-consent-placeholder] > .cms-consent-placeholder {
    aspect-ratio: auto;
}

/* Not with .d-flex: its display: flex !important would win over [hidden] once the video loads. */
.cms-consent-placeholder[hidden] {
    display: none;
}

/* Space of the Facebook "like" button above the news title on the old website */
.cms-news-title {
    padding-top: 35px;
}