/* =============================
 * Variables for this page
============================= */
:root {
    --icon-search: url('/themes/custom/einspe_bootstrap_sass/images/pictos/search.svg');
    --left-column-width: 420px;
}

/* =============================
 Grid for filters and results
============================= */
.parcours-search-results-grid {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
}

/* =============================
 * Search results
============================= */
.parcours-search-right-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 0 0;
}

/* Search results for 3 sections formations, dossiers and populars */
#div-cible {
    display: flex;
    padding: 40px 80px 40px 48px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    align-self: stretch;
}

#div-cible .parcours-search-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;
}

#div-cible .title-container {
    display: flex;
    /* max-width: 700px; */
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

#formations, #dossiers, #populars {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#formations {
    width: 100%;
}

/* ==================================
 * Search results: formations, populars
=================================== */
.parcours-search-results-grid h2 {
    color: var(--e-insp-Black-1, #1E202F);
    /* e-inspé/h2 */
    font-size: 40px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 40px !important;
    letter-spacing: -0.8px;
    margin-bottom: 0 !important;
}

.parcours-search-results-grid h4 {
    color: var(--e-insp-Black-1, #1E202F);
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    margin-bottom: 0 !important;
}

.parcours-search-results-grid p {
    color: #3A3A3A;
    /* e-inspé/Paragraph-3 */
    font-family: Marianne;
    font-size: 14px !important;
    font-style: normal;
    line-height: 20px !important; /* 142.857% */
    margin-bottom: 0 !important;
}

/***********************************************
 * LEFT COLUMN - FILTERS
 ***********************************************/
 .parcours-search-left-column {
    display: flex;
    width: var(--left-column-width);
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-right: 1px solid var(--e-insp-Gray, #D7D8DE);
    /* reduce width on smaller screens */
    @media (max-width: 1280px) {
        width: 320px;
    }
}

/* Filters global title */
.parcours-search-filters-title {
    display: flex;
    padding-bottom: 16px;
    /* justify-content: center;
    align-items: center; */
    gap: 8px;
    align-self: stretch;
    flex-direction: column;
    border-bottom: 1px solid var(--e-insp-Gray, #D7D8DE);
}

.parcours-search-filters-title h2 {
    flex: 1 0 0;
    color: var(--e-insp-Black-1, #1E202F) !important;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 24px !important; /* 120% */
}

/* Override default styles of details/summary to match design */
.filters details {
    border: none;
    margin: 0;
}

.filters details summary {
    padding: 0px;
    border-bottom: 1px solid var(--e-insp-Gray, #D7D8DE);
}

.filters details:open summary {
    background: var(--e-insp-Dark-Blue-Light, #EEF0F9);
}

/* Each filter's title container */
.search-filter-title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}

/* In order to create a flex container on the title with invisible separators on top and bottom */
.search-filter-title-invisible-separator {
    display: flex;
    height: 0;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: stretch;
}

.search-filter-title {
    display: flex;
    padding: 0 16px;
    align-items: center;
    gap: 16px;
    width: 100%;
    justify-content: space-between;
}

.search-filter-title h3 {
    width: var(--left-column-width);
    /* flex: 1 0 0; */
    /* 2.Corps de texte/MD - Texte standard/Desktop & Mobile - Medium */
    font-size: 16px !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 24px !important; /* 150% */
    margin-bottom: 0 !important;
}

/* Checkbox container */
.parcours-search-filters {
    display: flex;
    padding: 16px 0 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.parcours-search-filters .checkbox-container label {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;

    color: var(--e-insp-Black-1, #1E202F);
    font-family: Marianne;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}


/* =============================
    Close popup filters on mobil
============================= */
#close-filter {
    border: none;
    border-radius: 20px;
    font-size: larger;
    color: white;
    background-color: #5C64AB;
    width: 35px;
    height: 35px;
    margin: 4px 4px 0 0;
}

#close-popup {
    border: 1px solid var(--fourth);
    border-radius: 20px;
    font-size: larger;
    color: var(--fourth);
    background-color: white;
    width: 35px;
    height: 35px;
    margin: 15px;
    margin: 0;
}

/* Line with Filters mobil button */
.filter-btn {
    width: 100%;
}

/* =============================
 * Media queries
============================= */
@media (max-width: 1200px) {
    /* Reduce the gap beetwen foramtions, dossiers and populars*/
    #div-cible .parcours-search-container {
        align-items: center;
        gap: 12px;
    }

    /* Reduce the padding of result container*/
    #div-cible {
        padding: 40px;
    }

    /* Othervise the pager is too close to the Dossiers title */
    #formations {
        margin-bottom: 20px;
    }

    /* Filters button container for mobile*/
    .filter-btn button {
        width: 8%;
    }
}

@media (max-width: 768px) {
    .filter-btn button {
        width: 18%;
    }
}