/*****************************
 * Page de recherche
 *****************************/

.parent.recherche input[type="text"] {
    width: max(50pt, calc(50% + 45pt));
}

#recherche-avancee input[type="text"],
#recherche-avancee label {
    margin-bottom: 10pt;
}

#recherche-avancee label {
    display: inline-block;
    min-width: 80pt;
}

#txt_recherche_globale {
    margin: 3pt;
    width: 80%
}

.recherche .submit {
    vertical-align: middle;
    font-size: 24pt;
    padding: 8pt 8pt 6pt 8pt;
}

#recherche_liste {
    margin-top: 25pt;
}

#recherche_liste td,
#recherche_liste th {
    padding: 10pt;
}

.search-results-list {
    max-width: min(1100px, 100%);
}

.search-results-heading {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.decouvrir-list {
    overflow: visible;
}

.decouvrir-list > .search-results-heading {
    position: -webkit-sticky;
    position: sticky;
    top: 32pt;
    z-index: 97;
    background: #fff;
    padding-bottom: 0.45em;
    box-shadow: 0 6px 10px rgba(255, 255, 255, 0.95);
}

@media screen and (max-width: 768px) {
    .decouvrir-list > .search-results-heading {
        top: 60px;
        z-index: 108;
    }

    body.header-hidden .decouvrir-list > .search-results-heading {
        top: 8px;
    }
}

.search-results-cards {
    display: inline-grid;
    grid-template-columns: 80pt fit-content(520px) minmax(210px, 280px);
    gap: 0 18px;
    width: auto;
    max-width: 100%;
}

.search-results-columns,
.search-result-card {
    display: contents;
}

.search-results-columns {
    color: #555;
    font-size: 0.9em;
    font-weight: 700;
    text-align: left;
}

.search-results-columns > div {
    padding: 0 0 4px 0;
}

.search-results-columns > div:first-child {
    justify-self: center;
}

.search-results-separator {
    grid-column: 1 / -1;
    border-bottom: 2px solid #d8d8d8;
}

.search-result-cover {
    position: relative;
    width: 60pt;
    align-self: center;
    justify-self: center;
    flex-shrink: 0;
    padding: 6px 0;
}

.search-result-main {
    min-width: 0;
    align-self: center;
    padding: 6px 0;
    text-align: left;
}

.search-result-main .title,
.search-result-main .author {
    overflow-wrap: anywhere;
}

.search-result-metrics {
    display: grid;
    grid-template-columns: auto max-content;
    align-content: center;
    align-items: center;
    justify-self: start;
    gap: 6px 8px;
    align-self: center;
    padding: 6px 0;
    min-width: 0;
    text-align: left;
}

.search-result-metric {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.search-result-metric-personal {
    grid-column: 2;
}

@media screen and (max-width: 700px) {
    .search-results-cards {
        grid-template-columns: 80pt fit-content(520px) minmax(205px, 220px);
    }

    .search-result-metrics {
        grid-template-columns: max-content;
        justify-items: center;
    }

    .search-result-metric-personal {
        grid-column: 1;
    }
}

@media screen and (max-width: 520px) {
    .search-results-list {
        max-width: 100%;
    }

    .search-results-heading {
        justify-content: center;
    }

    .search-results-cards {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0 10px;
        width: 100%;
    }

    .search-results-columns {
        display: none;
    }

    .search-result-card {
        display: contents;
    }

    .search-result-main {
        text-align: left;
    }

    .search-result-metrics {
        display: flex;
        flex-wrap: wrap;
        grid-column: 1 / -1;
        align-content: start;
        align-items: center;
        justify-content: center;
        height: auto;
        min-width: 0;
        margin-left: 0;
        padding-top: 4px;
    }

    .search-result-metric {
        display: inline-flex;
    }

    .search-result-metric-personal {
        grid-column: 1;
    }
}

.cover {
    display: inline-block;
    width: 96pt;
    height: 144pt;
    white-space: normal;
}

.cover a:link {
    text-decoration: none;
}

.cover a:visited {
    text-decoration: none;
}

.cover a:hover {
    text-decoration: none;
}

.cover a:active {
    text-decoration: none;
}

.p_imgerror {
    transform: translate(0, -135pt);
    position: absolute;
    text-align: center;
    width: 90pt;
    color: gray;
    margin: 0 3pt 0pt 3pt;
}

.cover_img {
    opacity: 1;
    display: block;
    transition: .5s ease;
    backface-visibility: hidden;
    width: 96pt;
    height: 144pt;
    border: 1px solid silver;
}

.cover_middle {
    transition: .3s ease;
    opacity: 0;
    position: absolute;
    transform: translate(0, -135pt);
    -ms-transform: translate(0, -135pt);
    text-align: center;
    display: inline-block;
    width: 96pt;
    white-space: normal;
}

.cover:hover .cover_img {
    filter: brightness(30%);
    -moz-filter: brightness(30%);
    -webkit-filter: brightness(30%);
}

.cover:hover .cover_middle {
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .cover:hover .cover_img {
        filter: none;
        -moz-filter: none;
        -webkit-filter: none;
    }

    .cover:hover .cover_middle {
        opacity: 0;
    }
}

.cover_text {
    color: white;
    font-size: 8pt;
}

.cover_img_podium {
    width: 25pt;
}

.cercle {
    width: 10pt;
    height: 10pt;
    border-radius: 5pt;
    transform: translate(46pt, -15pt);
    position: absolute;
}

.cercle2 {
    width: 10pt;
    height: 10pt;
    border-radius: 5pt;
    transform: translate(80pt, -15pt);
    position: absolute;
}

.cercle_lu {
    background: green;
}

.cercle_alire {
    background: rgb(255, 157, 56);
}

.cercle_encours {
    background: rgb(62, 114, 255);
}

.cover .container {
    position: relative;
}

.voir_plus {
    float: right;
    text-transform: uppercase;
    font-size: 8pt;
    font-weight: 800;
    color: rgb(59, 78, 248);
}

.voir_plus_shadow {
    height: 100px;
    margin-top: -100px;
    background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
    position: relative;
}

.scroll {
    height: 160pt;
    max-width: 100%;
    margin: auto;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    position: relative;
}