/* ==========================================================================
   Cégep virtuel — feuille de styles personnalisée
   ========================================================================== */

/* ==========================================================================
   1. GÉNÉRIQUE
   ========================================================================== */

.bg-darkblue {
    background-color: #253163;
}

.uppercase,
.customcalendar tr th,
.texte h4,
.texte h5 {
    text-transform: uppercase;
}

.texte h4,
.texte h5 {
    color: #1da695;
}

.texte h4 {
    font-size: 26px;
    font-weight: 300;
}

.texte h5 {
    font-size: 14px;
    font-weight: 300;
}

h2.titre-h2 {
    margin: 0;
    color: #222;
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.42;
}

.fs-26 {
    font-size: 26px !important;
    font-weight: 700 !important;
}

.pr p:first-child {
    text-align: justify;
}

.btn-hover:hover {
    color: #1da695 !important;
}

.img-rs {
    padding-left: 0 !important;
}

.img-rs img {
    max-width: 270px !important;
    margin-left: -10px !important;
}

.contenu-pm p {
    font-size: 24px;
    line-height: 1.2;
}

body.template-color-7 a.brook-btn.dark-btn-theme,
body.template-color-7 button.brook-btn.dark-btn-theme {
    background: #005469;
    color: #fff;
}

.bk-accordion .card-header h5 a.acc-btn {
    background-color: #e7eff0;
}

.domain-item .icon-box .inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.domain-item .icon-box .inner::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 5px;
    border-color: #ddd;
}

.domains-list {
    row-gap: 30px;
}

/* ==========================================================================
   2. HEADER ELEMENTOR
   ========================================================================== */

body,
#wrapper,
.rvbody,
.page-content {
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
    overflow: visible !important;
}

/* ==========================================================================
   3. TYPOGRAPHIE
   Typekit et museo-sans sont retirés : la typographie vient d'Elementor.
   style.min.css impose museo-sans dans 65 règles qu'on ne peut pas éditer
   sans risquer de les perdre à la mise à jour du thème. On les redirige ici
   vers Roboto. Pas de !important : cette feuille se charge après
   style.min.css, la même spécificité suffit.
   ========================================================================== */

body,
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6,
.body-font, .heading-font, .primary-font,
.heading,
p.bk_pra,
a.bk-btn, a.brook-btn, button.bk-btn, button.brook-btn,
.contact-form input[type="submit"],
.bk-accordion .card-header h5 a.acc-btn,
.bk-accordion .card-body,
.breadcaump-area.breadcaump-title-bar .breadcaump-inner .heading,
.footer-widget h2.widgettitle,
.footer-nav,
.btn-section-moodle,
.btn-section-moodle:visited,
h2.titre-h2,
.form_connexion input[type="submit"],
._form-thank-you,
.elementor {
    font-family: 'Roboto', sans-serif;
}

/* ==========================================================================
   4. BANNIÈRE DE TITRE DE PAGE
   La bannière est affichée par cv_afficher_banniere() dans functions.php,
   accrochée à l'action elementor/theme/after_do_header.
   ========================================================================== */

/* Le h1 est seul dans la bannière : sa marge basse ne sert à rien. */
.breadcaump-area.breadcaump-title-bar .breadcaump-inner .heading {
    margin-bottom: 0;
}

/* Bannière compacte : gabarits Cours offerts, Formations offertes,
   Tutoriels et FAQ. Posée par cv_afficher_banniere() dans functions.php.
   !important pour battre les classes utilitaires du thème si l'une d'elles
   se retrouvait aussi sur le bloc. */
.breadcaump-area.breadcaump-title-bar.cv-banniere-compacte {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

/* ==========================================================================
   5. FORMULAIRE DE CONNEXION
   ========================================================================== */

.form_connexion input[type="password"],
.form_connexion input[type="text"] {
    margin-bottom: 20px;
    border-radius: 0;
}

.form_connexion input[type="checkbox"] {
    width: 20px;
    height: 20px;
    top: 2px;
    left: 15px;
    margin: 0;
}

.form_connexion input[type="checkbox"] + label {
    margin-left: 30px;
}

.form_connexion input[type="submit"] {
    display: inline-block;
    width: auto;
    margin-top: 10px;
    padding: 0 20px;
    border-radius: 0;
    background: #1da695;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 40px;
}

/* ==========================================================================
   6. CALENDRIER
   ========================================================================== */

.fc-col-header,
.fc-scrollgrid-sync-table {
    margin-bottom: 0;
}

.customcalendar tr td,
.customcalendar tr th {
    padding: 4px 0;
    border: 1px solid #ededed;
    text-align: center;
}

.customcalendar tr td.colored {
    background: #1da695;
    color: #fff;
}

.titrecalendar {
    text-align: center;
}

/* ==========================================================================
   7. TABLEAUX DATATABLES — ÉLÉMENTS MASQUÉS
   ========================================================================== */

#table_contacts_info,
#table_contacts_length,
#table_contacts_paginate,
#table_formations_filter,
#table_formations_info,
#table_formations_length,
#table_formations_paginate,
#table_moodle_info,
.logo-res {
    display: none;
}

#table_formations_wrapper .dt-search,
#table_moodle_wrapper .dt-search {
    display: none !important;
}

#table_contacts_filter {
    display: flex;
    justify-content: flex-end;
}

#table_contacts_filter label {
    margin: 0 0 15px;
    padding: 0;
    color: #1da695;
    text-transform: uppercase;
}

#table_moodle .les-title {
    background: none;
}

@media only screen and (max-width: 1200px) {
    div.dt-container div.dt-layout-cell {
        overflow: auto;
    }
}

/* ==========================================================================
   8. TABLEAU DES COURS — AFFICHAGE EN LIGNES
   ========================================================================== */

.cart-table.lesson-table .table thead {
    background-color: #1DA695;
    z-index: 999;
}

.cart-table.lesson-table .table thead .dt-orderable-asc .dt-column-order::before {
    content: "\f106";
    padding-left: 5px;
    opacity: 0.3;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.cart-table.lesson-table .table thead .dt-orderable-desc .dt-column-order::after {
    content: "\f107";
    padding-left: 5px;
    opacity: 0.3;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.cart-table.lesson-table .table thead .dt-ordering-asc .dt-column-order::before,
.cart-table.lesson-table .table thead .dt-ordering-desc .dt-column-order::after {
    opacity: 1;
}

.cart-table.lesson-table .table tbody .group-row td {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #00727A !important;
    color: #fff;
    font-size: 22px;
    font-weight: 700 !important;
}

.cart-table.lesson-table .table tbody td {
    color: #00205B;
    font-size: 14px;
    font-weight: 400;
}

.cart-table.lesson-table .table tbody td.les-num {
    opacity: 0.65;
}

.cart-table.lesson-table .table tbody td.les-title {
    font-weight: 600;
}

.cart-table.lesson-table .table tbody .les-cegep-wrapper {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
}

.cart-table.lesson-table .table tbody td.les-cegep .info {
    display: flex;
    position: relative;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border: 1px solid #1DA695;
    border-radius: 50%;
    color: #1DA695;
    font-size: 12px;
}

.cart-table.lesson-table .table tbody td.les-cegep .bubble {
    position: absolute;
    top: -5px;
    left: 50%;
    width: fit-content;
    padding: 2px 4px;
    transform: translate(-50%, -100%);
    border-radius: 4px;
    background-color: #1DA695;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.cart-table.lesson-table .table tbody td.les-cegep .info:hover .bubble {
    opacity: 1;
}

/* Le nom complet du cégep ne sert qu'en mode carte. */
.cart-table.lesson-table .table tbody td.les-cegep .les-cegep-complet {
    display: none;
}

/* Colonnes Dates et Horaire fusionnées. */
.cart-table.lesson-table .table tbody td.les-dates,
.cart-table.lesson-table .table tbody td.les-horaire {
    line-height: 1.4;
    white-space: nowrap;
}

.cart-table.lesson-table .table tbody td.les-dates .les-date-sep {
    padding: 0 2px;
    opacity: 1;
}

.cart-table.lesson-table .table tbody td.les-horaire .les-plage {
    display: block;
}

.cart-table.lesson-table .table tbody td.les-horaire .les-jour {
    display: inline-block;
    min-width: 34px;
    color: #1DA695;
    font-weight: 600;
}

.cart-table.lesson-table .table tbody td.les-horaire .les-horaire-vide {
    opacity: 1;
}

.course_link.closed-course {
    background-color: rgba(0, 0, 0, 0.2);
    opacity: 0.7;
}

/* ==========================================================================
   9. TABLEAU DES COURS — AFFICHAGE EN CARTES SOUS 1200 px
   ========================================================================== */

@media only screen and (max-width: 1199.98px) {

    /* DataTables fixe une largeur en pixels sur la table : on la neutralise. */
    .cart-table.lesson-table .table {
        display: block;
        width: 100% !important;
        max-width: 100%;
        table-layout: auto;
    }

    .cart-table.lesson-table .table tbody,
    .cart-table.lesson-table .table tbody tr,
    .cart-table.lesson-table .table tbody td {
        display: block;
        width: auto !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cart-table.lesson-table .table thead {
        display: none;
    }

    /* Le min-width de la table la fait dépasser de son conteneur. */
    .cart-table.lesson-table table.table,
    .cart-table.lesson-table table.table.dataTable {
        min-width: 0 !important;
    }

    /* Le conteneur DataTables rognait ce qui dépassait, bord droit compris. */
    .cart-table.lesson-table,
    .cart-table.lesson-table div.dt-container,
    .cart-table.lesson-table div.dt-container div.dt-layout-row,
    .cart-table.lesson-table div.dt-container div.dt-layout-cell {
        overflow: visible !important;
    }

    /* colgroup impose des largeurs en pixels, inutiles en mode carte. */
    .cart-table.lesson-table table.table colgroup {
        display: none;
    }

    .cart-table.lesson-table .table tbody tr.course_link {
        display: block;
        position: relative;
        margin-bottom: 16px;
        padding: 20px 24px;
        border: 1px solid #91B6BF;
        border-radius: 0;
        background: #fff;
        cursor: pointer;
    }

    .cart-table.lesson-table .table tbody tr.course_link.closed-course {
        background-color: rgba(0, 0, 0, 0.06);
    }

    /* Valeurs. */
    .cart-table.lesson-table .table tbody td {
        padding: 6px 0;
        border: none !important;
        color: #00205B;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        opacity: 1;
    }

    /* Étiquettes. */
    .cart-table.lesson-table .table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: #1DA695;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.3;
        text-transform: none;
    }

    /* Numéro et titre du cours coiffent la carte, sans étiquette. */
    .cart-table.lesson-table .table tbody td.les-num::before,
    .cart-table.lesson-table .table tbody td.les-title::before {
        display: none;
    }

    .cart-table.lesson-table .table tbody td.les-title {
        font-size: 20px;
        line-height: 1.3;
    }

    /* Espace réservé à la pastille de statut. */
    .cart-table.lesson-table .table tbody td.les-num,
    .cart-table.lesson-table .table tbody td.les-title {
        padding-right: 120px;
    }

    /* Le statut devient une pastille dans le coin supérieur droit. */
    .cart-table.lesson-table .table tbody td.les-statut {
        position: absolute;
        top: 20px;
        right: 24px;
        padding: 6px 14px;
        border-radius: 999px;
        background: #E7EFF0;
        color: #00556A;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.3px;
        line-height: 1;
        text-transform: uppercase;
    }

    .cart-table.lesson-table .table tbody td.les-statut::before {
        display: none;
    }

    .cart-table.lesson-table .table tbody td.les-statut.statut-ouvert {
        background: #21AC99;
        color: #fff;
    }

    .cart-table.lesson-table .table tbody td.les-statut.statut-complet {
        background: #F2F4BF;
        color: #00205B;
    }

    .cart-table.lesson-table .table tbody td.les-statut.statut-ferme,
    .cart-table.lesson-table .table tbody td.les-statut.statut-annule {
        background: #C6CAD9;
        color: #00205B;
    }

    /* « Horaire à venir » est une valeur comme les autres en mode carte. */
    .cart-table.lesson-table .table tbody td.les-horaire .les-horaire-vide {
        color: #00205B;
        font-size: 16px;
        font-weight: 400;
        opacity: 1;
    }

    /* Sur mobile le survol n'existe pas : on affiche le nom complet du cégep. */
    .cart-table.lesson-table .table tbody td.les-cegep .les-cegep-wrapper {
        justify-content: flex-start;
    }

    .cart-table.lesson-table .table tbody td.les-cegep .les-cegep-abbr,
    .cart-table.lesson-table .table tbody td.les-cegep .info {
        display: none;
    }

    .cart-table.lesson-table .table tbody td.les-cegep .les-cegep-complet {
        display: inline;
    }

    /* Les bandeaux de discipline restent des séparateurs pleine largeur. */
    .cart-table.lesson-table .table tbody tr.group-row,
    .cart-table.lesson-table .table tbody tr.group-row td {
        display: block;
        width: auto;
    }

    .cart-table.lesson-table .table tbody tr.group-row td {
        padding: 10px 16px !important;
        font-size: 18px;
    }

    .cart-table.lesson-table .table tbody tr.group-row td::before {
        display: none;
    }
}

/* Deux colonnes de cartes en tablette pour limiter la hauteur de page. */
@media only screen and (min-width: 768px) and (max-width: 1199.98px) {

    .cart-table.lesson-table .table tbody {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 16px;
    }

    .cart-table.lesson-table .table tbody tr.group-row {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   10. FILTRES DES COURS ET DES FORMATIONS
   ========================================================================== */

.moodle-course-filter-wrapper {
    margin-bottom: 16px;
    padding: 32px;
    border-radius: 4px;
    background: #E7EFF0;
}

.moodle-course-filter-wrapper form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.moodle-course-filter-wrapper > h3,
.moodle-course-filter-wrapper form h3 {
    margin-bottom: 24px;
    color: #00556A;
    font-size: 24px;
}

.moodle-course-filter-wrapper form h3 {
    margin-bottom: 16px;
}

.moodle-course-filter-wrapper form h2 {
    margin-bottom: 24px;
    color: #00556A;
    font-size: 40px;
}

.moodle-course-filter-wrapper form .form-group {
    margin-bottom: 0;
    color: #00556A;
}

/* Libellés des filtres uniquement : le > évite d'attraper les <label>
   des cases à cocher générées dans les listes déroulantes. */
.moodle-course-filter-wrapper .input > label,
#lesson-type .input > label,
#posts-filters .input > label {
    margin-bottom: 6px;
    color: #1da695;
    font-size: 18px;
    font-weight: 700;
    text-transform: none;
}

.moodle-course-filter-wrapper .input select,
.moodle-course-filter-wrapper .input .ms-options-wrap,
.moodle-course-filter-wrapper .input .ms-options-wrap > button {
    width: 100%;
}

#posts-filters .input input {
    border: 1px solid #aaa;
    color: #aaa;
}

#posts-filters .input input::placeholder {
    color: #aaa;
}

/* Cinq colonnes de filtres de largeur égale sur toute la largeur du bloc.
   Type de cours occupe 20 %, les quatre autres 25 % des 80 % restants. */
@media only screen and (min-width: 992px) {
    .moodle-course-filter-wrapper .cv-col-type {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .moodle-course-filter-wrapper .cv-col-filtres {
        flex: 0 0 80%;
        max-width: 80%;
    }
}

/* Sous 992 px, Type de cours occupe toute la largeur sur sa propre ligne.
   Il forme un formulaire distinct des quatre autres filtres, il ne peut donc
   pas entrer dans leur rangée de colonnes. */
@media only screen and (max-width: 991.98px) {
    .moodle-course-filter-wrapper .cv-col-type,
    .moodle-course-filter-wrapper .cv-col-filtres {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .moodle-course-filter-wrapper .cv-col-type #lesson-type {
        width: 100%;
    }
}

/* Choix des filtres : champ fermé, liste déroulante et cases à cocher.
   !important nécessaire : plusieurs règles du thème et des plugins
   ciblent ces éléments avec une spécificité élevée. */
.ms-options-wrap > button,
.ms-options-wrap > button span,
.ms-options-wrap .ms-options ul li,
.ms-options-wrap .ms-options ul li label,
#type-choice,
#lesson-type select,
.select2-container .select2-selection,
.select2-container .select2-selection__rendered,
.select2-container .select2-results,
.select2-container .select2-results__option,
.select2-dropdown .select2-results__option,
.select2-results__option {
    font-size: 16px !important;
    font-weight: 400 !important;
    text-transform: none !important;
}

.ms-options-wrap > button,
.ms-options-wrap > button span,
.ms-options-wrap .ms-options ul li label {
    color: #00205B !important;
}

/* Select2 génère un span avec un identifiant propre au champ. */
#select2-type-choice-container {
    color: #00205B !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    text-transform: none !important;
}

/* Filtres en accordéon (page Formations offertes). */
.filter-box {
    margin-bottom: 16px;
}

.filter-box .filter-box-heading,
.filter-box .filter-box-heading h2 {
    display: flex;
    width: 100%;
}

.filter-box-collapse-content-wrapper {
    height: auto;
    padding: 16px 8px 0;
}

#moodleFiltersAccordion .filter-box:last-child {
    margin-bottom: 8px;
}

.moodle-course-filter-wrapper .filter-box .btn.btn-link {
    position: relative;
    width: 100%;
    padding: 0 20px 0 0;
    color: #00556A;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    white-space: normal;
}

.moodle-course-filter-wrapper .filter-box .btn.btn-link:hover,
.moodle-course-filter-wrapper .filter-box .btn.btn-link:active,
.moodle-course-filter-wrapper .filter-box .btn.btn-link:focus {
    text-decoration: none;
}

.moodle-course-filter-wrapper .filter-box .btn.btn-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
}

.moodle-course-filter-wrapper .filter-box .btn.btn-link:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cstyle%3E .s0 %7B fill: %2300556a %7D %3C/style%3E%3Cpath class='s0' d='m21.38 12c0 0.3-0.12 0.58-0.33 0.8-0.22 0.21-0.5 0.32-0.8 0.32h-16.5c-0.3 0-0.58-0.11-0.8-0.32-0.21-0.22-0.32-0.5-0.32-0.8 0-0.3 0.11-0.58 0.32-0.8 0.22-0.21 0.5-0.32 0.8-0.32h16.5c0.3 0 0.58 0.11 0.8 0.32 0.21 0.22 0.33 0.5 0.33 0.8z'/%3E%3C/svg%3E");
}

.moodle-course-filter-wrapper .filter-box .btn.btn-link.collapsed::after {
    background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cstyle%3E .s0 %7B fill: %2300556a %7D %3C/style%3E%3Cpath class='s0' d='m21.38 12c0 0.3-0.12 0.58-0.33 0.8-0.22 0.21-0.5 0.32-0.8 0.32h-7.12v7.13c0 0.3-0.12 0.58-0.33 0.8-0.22 0.21-0.5 0.33-0.8 0.33-0.3-0.01-0.58-0.12-0.8-0.33-0.21-0.22-0.32-0.5-0.32-0.8v-7.13h-7.13c-0.3 0-0.58-0.11-0.8-0.32-0.21-0.22-0.32-0.5-0.32-0.8 0-0.3 0.11-0.58 0.32-0.8 0.22-0.21 0.5-0.32 0.8-0.32h7.13v-7.13c0-0.3 0.11-0.58 0.32-0.8 0.22-0.21 0.5-0.33 0.8-0.33 0.3 0.01 0.58 0.12 0.8 0.33 0.21 0.22 0.33 0.5 0.33 0.8v7.13h7.12c0.3 0 0.58 0.11 0.8 0.32 0.21 0.22 0.33 0.5 0.33 0.8z'/%3E%3C/svg%3E");
}

.moodle-course-filter-wrapper .custom-control-label {
    color: #00556A;
    font-weight: 500;
    line-height: 1.2;
}

.moodle-course-filter-wrapper .custom-checkbox .custom-control-label::before {
    content: "";
    position: absolute;
    display: block;
    top: 1px;
    left: -1.5rem;
    width: 16px;
    height: 16px;
    border: 2px solid #91B6BF;
    border-radius: 0;
    background-color: transparent;
    pointer-events: none;
    user-select: none;
}

.moodle-course-filter-wrapper .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #00556A;
    background-color: #00556A;
}

.moodle-course-filter-wrapper .custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

.moodle-course-filter-wrapper .custom-control-label::after {
    top: 1px;
}

.moodle-course-filter-wrapper .filter-box .custom-control.custom-checkbox {
    margin-bottom: 8px;
}

/* Champ de recherche des formations. */
.moodle-course-filter-wrapper input[type="text"] {
    padding-right: 0;
    border: 1px solid #BFD5DA;
    border-right: none;
    font-size: 14px;
}

.moodle-course-filter-wrapper input[type="text"]:focus {
    outline: none;
    border-color: #91B6BF;
    box-shadow: none;
}

.moodle-course-filter-wrapper #button-addon2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid #BFD5DA;
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #fff;
    color: #003375;
}

.moodle-course-filter-wrapper #button-addon2:hover {
    background: rgba(231, 239, 240, 0.5);
}

.moodle-course-filter-wrapper input[type="text"]:focus + div > button#button-addon2 {
    outline: none;
    border-color: #91B6BF;
    box-shadow: none;
}

/* Modale de filtres en mobile (page Formations offertes). */
@media only screen and (max-width: 991.98px) {
    .moodle-filter-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
    }

    .moodle-filter-modal.is-open {
        display: block;
    }

    .moodle-filter-modal__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    .moodle-filter-modal__panel {
        display: flex;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        max-height: 85vh;
        flex-direction: column;
        overflow: hidden;
        border-radius: 16px 16px 0 0;
        background: #fff;
    }

    .moodle-filter-modal__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 1px solid #e5e7eb;
    }

    .moodle-filter-modal__close {
        border: 0;
        background: transparent;
        color: #003375;
        font-size: 28px;
        line-height: 1;
    }

    .moodle-filter-modal__body {
        padding: 16px;
        overflow-y: auto;
    }
}

/* ==========================================================================
   11. BOUTONS
   ========================================================================== */

.btn-section-moodle,
.btn-section-moodle:visited,
.btn-section-moodle:hover {
    color: #FFF;
}

.btn-section-moodle,
.btn-section-moodle:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-radius: 4px;
    background: #21AC99;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

/* Le bouton de réinitialisation reste calé à gauche du bloc de filtres.
   Le !important contre la règle « .container a » du thème, qui colore
   tous les liens en #055169 et en #464646 au survol. */
.moodle-course-filter-wrapper a.reset.btn-section-moodle {
    display: inline-flex;
    width: auto;
    margin-right: auto;
}

a.reset.btn-section-moodle,
a.reset.btn-section-moodle:visited,
a.reset.btn-section-moodle:hover,
a.reset.btn-section-moodle:focus {
    color: #FFF !important;
}

/* ==========================================================================
   12. CARTES DE FORMATION (MOODLE)
   ========================================================================== */

.moodle-course-card,
.moodle-similar-course-card {
    display: flex;
    position: relative;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 32px;
    border: 1px solid #91B6BF;
    border-radius: 4px;
}

.moodle-similar-course-card {
    padding: 20px 32px;
}

.moodle-course-card::after {
    content: url(/wp-content/themes/wpbase/img/corner-triangle-2.svg);
    position: absolute;
    top: 16px;
    right: 16px;
    width: 27px;
    height: 26px;
}

.moodle-course-card .card-text p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.moodle-course-card .card-image {
    margin: 0 0 32px;
}

.moodle-course-card .card-tag.tag-formation + .card-image {
    margin: 32px 0;
}

.moodle-course-card .card-tag {
    margin-bottom: 24px;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

.moodle-course-card .card-tag.tag-formation {
    background: #F2F4BF;
    color: #001115;
}

.moodle-course-card .card-tag.tag-competence {
    background: #BFD5DA;
    color: #001115;
}

.moodle-course-card .card-tag.tag-programme {
    background: #C6CAD9;
    color: #001115;
}

.moodle-similar-course-card .card-text {
    display: flex;
    align-items: flex-start;
    gap: 52px;
}

.moodle-similar-course-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0;
    overflow: hidden;
}

.moodle-course-header h2 {
    padding-bottom: 32px;
    color: #00205B;
}

.moodle-results-count {
    color: #00556A;
}

@media only screen and (max-width: 767px) {
    .moodle-similar-course-card .card-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* ==========================================================================
   13. PAGINATION DES FORMATIONS
   ========================================================================== */

.moodle-pagination ul.page-numbers {
    display: flex;
    padding: 0;
    list-style: none;
}

.moodle-pagination .page-numbers li a,
.moodle-pagination .page-numbers li span.current,
.moodle-pagination .page-numbers li span.dots {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: #707CA1;
}

.moodle-pagination .page-numbers li span.current {
    border-radius: 50%;
    background-color: #192B67;
    color: #fff;
}

/* ==========================================================================
   14. FICHE DE COURS
   ========================================================================== */

.cours-details .left-cours {
    padding: 48px 32px;
    background-color: rgba(33, 172, 153, 0.12);
}

.cours-details .left-cours .left-detail + .left-detail {
    margin-top: 24px;
}

.cours-details .left-cours .left-detail__header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cours-details .left-cours .left-detail__header svg {
    width: 25px;
}

.cours-details .left-cours .left-detail__header h4 {
    margin-bottom: 0;
    color: #00205B;
    font-size: 16px;
    font-weight: 700;
}

.cours-details .left-cours .left-detail__content p {
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: 31px;
    color: rgba(0, 32, 91, 0.65);
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
}

.cours-details .right-cours .right-cours__header {
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.cours-details .right-cours .right-cours__header--title .subtitle {
    margin-bottom: 6px;
    color: rgba(0, 32, 91, 0.45);
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
}

.cours-details .right-cours .right-cours__header--title h2 {
    margin-bottom: 60px;
    color: #00205B;
    font-size: 28px;
    font-weight: 700;
    line-height: 100%;
}

.cours-details .right-cours .right-cours__header--details {
    margin-top: 60px;
}

.cours-details .right-cours .right-cours__header--details h4 {
    color: #00205B;
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
}

.cours-details .right-cours .right-cours__header--about h3,
.cours-details .right-cours .right-cours__content--section h3 {
    color: #00205B;
    font-size: 20px;
    font-weight: 700;
    line-height: 100%;
}

.cours-details .right-cours .right-cours__content--section h2,
.right-cours__content--section h2 {
    color: #00205B;
}

.cours-details .right-cours .right-cours__header--about p,
.cours-details .right-cours .right-cours__content--section p,
.cours-details .right-cours .right-cours__header--details p {
    color: rgba(0, 32, 91, 0.45);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

.cours-details .right-cours .right-cours__header--about a:not(.brook-btn),
.cours-details .right-cours .right-cours__content--section a:not(.brook-btn),
.cours-details .right-cours .right-cours__header--details a:not(.brook-btn) {
    font-weight: 600;
}

.cours-details .right-cours .right-cours__content--section + .right-cours__content--section {
    margin-top: 60px;
}

@media only screen and (max-width: 992px) {
    .cours-details .left-cours {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 24px;
    }

    .cours-details .left-cours .left-detail + .left-detail {
        margin-top: 0;
    }

    .cours-details .left-cours .left-detail:last-child {
        grid-column: 1 / -1;
    }

    .cours-details .left-cours .left-detail:last-child .left-detail__content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 8px 12px;
    }
}

@media only screen and (max-width: 600px) {
    .cours-details .left-cours .left-detail:last-child .left-detail__content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 480px) {
    .cours-details .left-cours {
        grid-template-columns: 1fr;
    }

    .cours-details .left-cours .left-detail:last-child .left-detail__content {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   15. SECTION HERO
   ========================================================================== */

#hero-section {
    height: 640px;
    overflow: hidden;
}

#hero-section > * {
    padding-top: 80px !important;
    padding-bottom: 0 !important;
}

#hero-section > *,
#hero-section > * > *,
#hero-section > * > * > *:nth-child(2) {
    height: 640px;
}

#hero-section > * > * > *:nth-child(2) img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

@media only screen and (max-width: 767px) {
    #hero-section > * > * > *:nth-child(2) img {
        object-position: top;
    }
}

/* ==========================================================================
   16. ARTICLES DE BLOGUE
   ========================================================================== */

.brook-blog-details-area h2 {
    padding-top: 30px;
    color: #1da695;
}

.brook-blog-details-area h3 {
    padding-top: 10px;
    font-size: 18px;
}

.brook-blog-details-area h3.heading-h3 {
    font-weight: bold;
}

.brook-blog-details-area a {
    color: #1da695;
    font-weight: bold;
}

.blog-listing .grid-container {
    grid-template-columns: repeat(3, 1fr);
}

.page-template-blog-listing .blog-listing .grid-item h2 a,
.page-template-blog-listing .blog-listing .grid-item h2 a:active {
    color: #222 !important;
}

.home-blog-section {
    display: none;
}

@media only screen and (max-width: 780px) {
    .blog-listing .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 480px) {
    .blog-listing .grid-container {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   17. POLITIQUE DE CONFIDENTIALITÉ
   ========================================================================== */

#politique-confidentialite h2 {
    margin-top: 50px;
    color: #1da695;
}

#politique-confidentialite h3 {
    margin-top: 30px;
    color: #1da695;
    font-size: 22px;
}

#politique-confidentialite a {
    font-weight: bold;
}

/* ==========================================================================
   18. FORMULAIRES ACTIVECAMPAIGN
   ========================================================================== */

._form_1 {
    margin-top: 10px !important;
    padding: 0 8px !important;
}

._form-thank-you {
    font-size: 16px !important;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.58;
    text-align: left !important;
}

input[data-name="consentement"] {
    width: 13px;
    height: 13px;
}

input[data-name="consentement"] + span label {
    display: unset !important;
}

/* ==========================================================================
   19. GABARITS PARTICULIERS
   ========================================================================== */

/* Pages de campagne sans navigation (61867 et 61908).
   Cibler header.br_header et non header : le header Elementor est lui aussi
   une balise <header> et disparaissait avec l'ancien sélecteur. */
body.page-id-61867 header.br_header,
body.page-id-61908 header.br_header,
body.page-id-61867 div.brook-footer-area,
body.page-id-61908 div.brook-footer-area {
    display: none;
}

body.page-id-61867 input::placeholder,
body.page-id-61908 input::placeholder,
body.page-id-61867 textarea::placeholder,
body.page-id-61908 textarea::placeholder,
body.page-id-61867 .contact-form input[type="submit"],
body.page-id-61908 .contact-form input[type="submit"] {
    font-size: 16px;
}

.page-template-page-landing .brook-call-to-action,
.page-template-page-landing .breadcaump-area,
.page-template-home-2024 .brook-call-to-action,
.page-template-home-2024 .breadcaump-area {
    display: none;
}

.page-template-home-2024 li::marker {
    color: #21AC99;
}

.page-template-home-2024 .recent-posts-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40px;
}

.page-template-home-2024 .recent-posts-container .recent-post {
    width: 31%;
    margin: 0 1%;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 780px) {
    .page-template-home-2024 .recent-posts-container .recent-post {
        width: 100%;
        margin: 4%;
    }
}

/* Projet pédagonumérique (page 55548). */
#post-55548 .projet-pedago-num {
    display: flex;
}

#post-55548 .projet-pedago-num-item {
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    margin-bottom: 0;
    padding: 10px;
    border-radius: 50%;
    background: #c3d637;
    color: #23366a;
    font-size: 25px;
    text-align: center;
}

/* ==========================================================================
   20. PIED DE PAGE
   ========================================================================== */

.footer-container {
    display: flex;
    flex-wrap: wrap;
}

.footer-col {
    width: 33%;
}

#footer-col-2 {
    display: flex;
    flex-wrap: nowrap;
}

.footer-nav {
    width: 50%;
    color: #fff !important;
    list-style-type: none;
    text-transform: uppercase;
}

.footer-nav li {
    margin-bottom: 5px;
}

.footer-socials {
    display: flex;
    max-width: 178px;
    justify-content: center;
    margin-left: auto;
}

.copyright-left p {
    display: inline;
    margin-right: 20px;
}

.copyright-left a {
    display: inline;
    color: #fff;
    font-size: 12px;
}

.copyright-left a:hover {
    text-decoration: underline;
}

.copyright-desktop {
    display: block;
}

.copyright-mobile {
    display: none;
    margin-top: 50px;
    text-align: center;
}

@media only screen and (max-width: 800px) {
    .footer-col {
        width: 100%;
        margin-top: 25px;
        margin-bottom: 25px;
    }

    #footer-col-1 {
        text-align: center;
    }

    #footer-col-1 img {
        max-width: 200px;
    }

    #footer-col-2 {
        max-width: 400px;
        margin: 0 auto;
    }

    .footer-socials {
        margin-right: auto;
    }

    .footer-contact-btn {
        text-align: center;
    }

    .copyright-desktop {
        display: none;
    }

    .copyright-mobile {
        display: block;
    }
}

@media only screen and (max-width: 480px) {
    .copyright-left p,
    .copyright-left a {
        display: block;
        margin: 0;
    }
}