/* =======================================================================================
============================== VARIABLES COULEURS DES PRÉPAS =============================
*/
:root {
    /*antemed-epsilon*/
    --color-1: 8,42,67;
    --color-2: 249,90,69;
    /*prépa défi*/
    --color-3: 8,42,67;
    --color-4: 178,25,27;
    /*stan santé*/
    --color-5: 5,89,123;
    --color-6: 208,189,133;
    /*sup dijon*/
    --color-7: 0,92,147;
    --color-8: 140,24,91;
    /*bersot formation*/
    --color-9: 44,47,125;
    --color-10: 206,40,85;
    /*supexam nantes*/
    --color-11: 0,92,147;
    --color-12: 175,202,11;
    /*prépa vesale*/
    --color-13: 52,151,205;
    --color-14: 230,45,47;
    /*cepsup*/
    --color-15: 232,88,45;
    --color-16: 40,37,77;
    /*segmo*/
    --color-17: 41,184,206;
    --color-18: 207,19,72;
    /*cappec*/
    --color-19: 133,214,118;
    --color-20: 109,30,77;
    /*supexam paris*/
    --color-21: 15,53,83;
    --color-22: 236,106,88;
    /*ipe santé*/
    --color-23: 4,57,94;
    --color-24: 0,155,119;
    /*terminale santé*/
    --color-25: 10,53,84;
    --color-26: 68,187,153;
    /*première santé*/
    --color-27: 68,187,153;
    --color-28: 10,53,84;
    /*alpha prépa santé*/
    --color-29: 251,196,16;
    --color-30: 53,63,113;
    /*skol santé rennes*/
    --color-31: 48,75,154;
    --color-32: 233,73,110;
}

/* ===============================================================
============================== GLOBAL =============================
*/
body {
    color: #292929;
    font-size: 15px;
    font-family: "Open Sans", sans-serif;
    background-color: #f0f0f0;
}
i, .top-title { color: rgba(var(--color-2),1);}
a {color: #292929;}
.divider {
    margin-top: 0;
    margin-bottom: 0.875rem;
    width: 100%;
    height: 9px;
    background: left top url("../img/bg-hr.jpg") repeat-x;
    border: none !important;
}
.h3px {height: 3px !important;}
.mh-400px {
    max-height: 400px;
    overflow-y: scroll;
}
.mw-240 {
    width: 240px;
    max-width: 240px;
}
.top-title {
    display: inline-block;
    padding: 8px 20px 6px 16px;
    background-color: #ffffff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-bottom: 0;
    font-family: "Open Sans", sans-serif;
    font-weight: 800;
    font-size: 2rem;
}
.checked, .checked i {opacity: 65%;}
.badge {margin-left: 6px;}
.bd-callout {
    background-color: #fafafa;
    padding: .875rem;
    margin: 0 0 1.25rem 0;
    border: 1px solid #cdd2d6;
    border-left-width: .3rem;
    border-radius: .25rem;
}
.bd-callout-new {border-left-color: #dc3545;}
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: rgba(var(--color-2),1);
    background-color: rgba(var(--color-2),1);
}
hr {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border: none;
    width: 100%;
    height: 3px;
    background: left top url("../img/bg-hr.jpg") repeat-x transparent;
}
.titre-n2 {
    padding: 6px 16px;
    font-size: 1.15rem;
    font-weight: bold;
    border-bottom: solid 1px rgba(0,0,0,.1);
}
.titre-n3 {
    margin: 1.5rem 0 .875rem;
    display: block;
    padding: 4px 0;
    font-size: 1rem;
    font-weight: bold;
    border-bottom: solid 1px rgba(0,0,0,.1);
}
.bg-gris {background-color: #f0f0f0;}
.bg-gris-2 {background-color: #e1e1e1;}
.bg-oc {background-color: rgba(var(--color-2),.08);}
.bg-bleu-alpha {background-color: rgba(var(--color-1),1);}
.bg-bleu-plain {background-color: #d5dbdf;}
.text-muted {color: #989ea4 !important;}
#box-btn-e-learning .card-body {padding: 1.25rem 0;}
@media (min-width:2560px) {
    #box-btn-e-learning .card-body .mt-3.extend-mt-xl-3 {margin-top: 0 !important;}
}
.box-btn-e-learning-bis {
    text-align: center;
    background-color: rgba(var(--color-1),1);
    border-radius: 20px;
    padding: 8px 0 0 0;
    border: solid 1px rgba(var(--color-1),1);
}
.box-btn-e-learning a:hover, .box-btn-e-learning-bis a:hover {color: inherit;}
.btn-e-learning .fa-head-side-gear, .btn-e-learning-bis .fa-head-side-gear {
    --fa-primary-color: #ffffff;
    --fa-secondary-color: rgba(var(--color-1),1);
    --fa-secondary-opacity: 1;
}
.box-btn-e-learning:hover {
    border: solid 1px rgba(var(--color-2),.3);
    background-color: rgba(var(--color-2),.1);
}
.box-btn-e-learning:hover .matiere {
    border-top: solid 1px rgba(var(--color-2),.3);
    border-bottom: solid 1px rgba(var(--color-2),.3);
}
.box-btn-e-learning:hover .fa-head-side-gear {}
.btn-e-learning {
    border-radius: 40px;
    font-size: 1.25rem;
    font-weight: 800;
    color: rgba(255,255,255,1);
    background: rgba(var(--color-1),1);
    padding: 6px 24px 6px 6px;
}
.training {
    padding: 8px 0;
    text-align: center;
    font-size: .875rem;
    font-weight: normal;
}
.matiere {
    padding: 8px;
    border-top: solid 1px rgba(var(--color-1),.3);
    border-bottom: solid 1px rgba(var(--color-1),.3);
    background-color: #ffffff;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
}
.btn-e-learning-bis {
    border-radius: 40px;
    font-size: 1.25rem;
    font-weight: 900;
    color: rgba(255,255,255,1);
    padding: 0 0 10px 0;
}
.training-bis {
    background: url("../img/bg-mat-head.svg") left -70px / 1070px 110px no-repeat #f5f5f5;
    padding: 10px 8px;
    text-align: center;
    font-size: .875rem;
    font-weight: normal;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: background-color .3s ease-in-out;
}
.box-btn-e-learning-bis:hover .training-bis {background-color: #feeeec;}
.box-btn-e-learning-bis:hover .matiere-bis {border: solid 1px rgba(var(--color-2),.3);}
.matiere-bis {
    background-color: #ffffff;
    margin: 10px 0;
    padding: 8px;
    border-radius: 20px;
    border: solid 1px rgba(var(--color-1),.3);
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
}
.btn-e-learning i, .btn-e-learning-bis i {
    padding-top: 6px;
    text-align: center;
    font-size: 1.5rem;
    color: rgba(var(--color-1),1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(var(--color-2),1);
}


/* ===============================================================
============================== INDEX =============================
*/
#logo-prepa .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: transparent;
    background-clip: border-box;
    border: none;
    border-radius: 0;
}
#logo-prepa .card img {
    width: auto;
    max-width: 150px;
    height: 55px;
}

/* ===============================================================
============================== IDENTITÉ ==========================
*/
.pref .dropdown-toggle::after {
    display: none;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

/* ===============================================================
============================== MENU / NAVIGATION =================
*/
@media (min-width:1200px) {
    #menu-box.col-xl-3 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width:1920px) {
    #menu-box.col-xl-3 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    #menu-box.hack-xl-6 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .extend-xl-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    #accueil .hack-xl-6 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
    #accueil .hack-xl-6-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    #accueil .hack-xl-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    #accueil .order-xl-2 {order: 4;}
    #accueil .order-xl-4 {order: 3;}
}
@media (min-width:2560px) {
    #menu-box.col-xl-3 {
        flex: 0 0 10%;
        max-width: 10%;
    }
    #matiere .extend-xl-4 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}
@media (min-width:2560px) {
    #accueil .hack-xl-6-2 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
    #accueil .hack-xl-12 {
        flex: 0 0 66.66%;
        max-width: 66.66%;
    }
}
#top-menu {
    min-height: 100vh !important;
    border-bottom: solid 1px #cdd2d6;
}
@media (max-width:1280px) {  #top-menu {min-height: auto !important;}  }
.navbar-toggler {
    background-color: #f0f0f0;
    border: 1px solid rgba(var(--color-1),1);
}
.navbar {
    align-items: start;
    padding: 1rem;
}
.navbar-brand img {
    margin: 0 auto;
    display: block;
    max-width: 80px;
    height: auto;
}
.navbar-brand { font-weight: 600; }
.navbar-brand:hover { color: rgba(var(--color-2),1); }
.logo img {
    width: 55px;
    height: auto;
}
.active i { color: rgba(255,255,255,.95);}
.page-header {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: 50%;
}
.active, .nav a.nav-link.active:hover {
    font-weight: bold;
    background-color: rgba(var(--color-2),1);
    border-radius: 8px;
    color: rgba(255,255,255,.95);
}
.nav a.nav-link:hover {
    border-radius: 8px;
    background-color: rgba(var(--color-2),.08);
    color: inherit;
}
.nav-link {transition: background-color .3s ease-in-out;}
.dropdown-menu {font-size: 15px;}
.dropdown-item:hover {background-color: rgba(var(--color-2),.08);}
.dropdown-menu.show {box-shadow: 0 0 16px rgba(0,0,0,.1);}

/* ===============================================================
============================== MES MATIÈRES ======================
*/
#matiere .card {border-radius: 40px;}
.compte .pref {
    line-height: normal;
    font-size: 2.4rem;
    max-width: 60px;
}
.compte .name {
    font-size: 26px;
    font-weight: 700;
}
.mat-box {
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 2.5rem;
    transition: box-shadow .3s ease-in-out;
}
.mat-box:hover {box-shadow: 0 0 16px rgba(0,0,0,.13);}
.mat-title {
    font-size: 20px;
    font-weight: bold;
}
.mat-header {
    border-radius: 2.5rem 2.5rem 0 0;
    padding-top: 8px;
    background: left -14px url("../img/bg-mat-head.svg") no-repeat;
    background-size: 1070px 110px;
}
.mat-img {
    margin: 0 auto;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: solid 3px #ffffff;
    background-color: rgba(var(--color-2),1);
}
.mat-img img {
    width: 43px;
    height: 43px;
    margin: 14px auto;
}
.mat-body {padding: 15px 15px 0 15px;}
.mat-comp {
    min-height: auto;
    height: auto;
}
@media (min-width:768px) {  .mat-comp {min-height: 53px;}  }
.text-btn-stats {
    font-size: 14px;
    color: rgba(var(--color-2),1);
}
.text-btn-stats::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}
@media (min-width:768px) {
    .mat-header {
        background: left top url("../img/bg-mat-head.svg") no-repeat;
        background-size: 1070px 110px;
    }
    .mat-img {
        width: 7.5rem;
        height: 7.5rem;
        border: solid 5px #ffffff;
    }
    .mat-img img {
        width: 65px;
        height: 65px;
        margin: 20px auto;
    }
    .mat-body {padding: 15px 15px 15px 15px;}
}
.mat-footer {padding: 0 15px;}
.mat-footer .navbar-toggler {
    border-radius: 20px;
    position: relative;
    padding: .35rem .75rem;
    margin-bottom: 10px;
    background-color: #f5f5f5;
    border: solid 1px rgba(var(--color-1),.33);
}
.stat-body {padding: 6px 0 15px 0;}
.stat-title {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: rgba(var(--color-1),1);
    color: rgba(255,255,255,.95);
    font-size: .75rem;
    font-weight: bold;
}
@media (min-width:1280px) {  .mat-box .stat-title {font-size: 10px;}  }
@media (min-width:1920px) {  .mat-box .stat-title {font-size: .75rem;}  }
.stat-body img {
    width: 100px;
    height: 100px;
}

/* ===============================================================
============================== LOGIN =============================
*/
.form-group {margin-bottom: 1.2rem;}
#form-login input {
    font-weight: 500;
    color: rgba(var(--color-2),.65);
}
.login-box {
    border-radius: 2.5rem;
    box-shadow: 0 0 18px rgba(0,0,0,.08);
}
.login-box:hover .login-picto i {color: rgba(var(--color-2),1);}
.login-header {
    border-top-left-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
    padding: 40px 10px;
    background-color: rgba(var(--color-1),1);
}
.login-picto i {
    color: rgba(var(--color-1),1);
    transition: color .2s ease-in-out;
}
.login-picto {
    width: 83px;
    text-align: center;
    padding:0 10px;
    font-size: 50px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 16px 0 16px 16px;
}
.login-title {
    font-size: 2rem;
    font-weight:200;
    text-align: center;
    background: left -70px url("../img/bg-mat-head.svg") no-repeat;
    background-size: 1070px 110px;
}
.form-control::placeholder {color: #afb5bb;}
.login-box .btn {
    width: 100%;
    display: block;
    border-radius: 20px 0 20px 20px;
    padding: 0.375rem 36px;
}
.btn-primary {
    font-weight: 600;
    color: rgba(255,255,255,.95);
    background-color: rgba(var(--color-1),1);
    border-color: rgba(var(--color-1),1);
}
.btn-primary:hover {
    color: #fff;
    background-color: rgba(var(--color-2),1);
    border-color: rgba(var(--color-2),1);
}
#mdp {
    display: block;
    padding: 6px 12px;
    margin: .5rem 1.5rem 0;
    border: solid 1px #ffffff;
    border-radius: 0;
    transition:
            background-color .2s ease-in-out,
            border-color .2s ease-in-out,
            border-radius .2s ease-in-out;
}
#mdp:hover {
    border-radius: 20px;
    background-color: rgba(var(--color-2),.05);
    border: solid 1px;
    border-color: rgba(var(--color-2),.1);
}

/* ===============================================================
============================== ACCUEIL ===========================
*/
.onglet {
    display: inline-block;
    border-radius: 20px 20px 0 0;
    background-color: rgba(var(--color-1),1);
    padding: 5px 20px 0 20px;
    color: rgba(255,255,255,.95);
    font-size: 1.15rem;
    font-weight: bold;
    text-align: left;
}
.line {
    display: inline-block;
    width: 100%;
    height: 10px;
    background-color: rgba(var(--color-1),1);
}
#accueil .card, #uexx .card, #box-livrets .card,
#cours .card, #box-btn-e-learning .card, #box-videos .card, #box-parcours .card {background: none; border: none;}
#accueil .card-header, #uexx .card-header, #box-livrets .card-header,
#cours .card-header, #box-btn-e-learning .card-header,
#box-videos .card-header, #box-parcours .card-header {
    padding: 0;
    margin-bottom: 15px;
    background-color: transparent;
    box-sizing: border-box;
    border: none;
    border-bottom: solid 8px rgba(var(--color-1),1);
}
#accueil .card-header:first-child, #uexx .card-header:first-child,
#box-livrets .card-header:first-child, #cours .card-header:first-child,
#box-btn-e-learning .card-header:first-child, #box-videos .card-header:first-child, #box-parcours .card-header:first-child { border-radius: 0; }
#accueil .card-body, #uexx .card-body, #box-livrets .card-body, #cours .card-body, #box-btn-e-learning .card-body, #box-videos .card-body, #box-parcours .card-body {
    box-shadow: 0 0 15px rgba(0,0,0,.08);
    border: 1px solid #cdd2d6;
    background-color: #ffffff;
    border-radius: 0 0 8px 8px;
}
#accueil .card-body img { width: 100%; max-width: 100%; }
@media (min-width:1920px) {  #ancrage .card-body img {width: 100%; max-width: 90%;}  }
@media (min-width:2560px) {  #ancrage .card-body img {width: 100%; max-width: 55%;}  }
.list-group-item {
    padding: 1rem 1rem 1rem 0;
    border-top: 1px solid rgba(0,0,0,.125);
    border-bottom: 1px solid rgba(0,0,0,.125);
    border-left: none;
    border-right: none;
}
.stat-box img {margin: 6px auto;}
.bd-callout a {
    color: #005dc1;
    text-decoration: underline !important;
}

/* ===============================================================
============================== UEXX ==============================
*/
#barre-filtre {box-shadow: 4px 5px 8px rgba(0,0,0,.12);}
.filters {
    font-weight: bold;
    padding: 6px 16px 6px 12px;
    background: #ffffff;
    border: 1px solid rgba(var(--color-1),.25);
    border-radius: 20px;
    transition: background-color .2s ease-in-out, border .2s ease-in-out;
}
.filters:hover {
    border: solid 1px #ffffff;
    color: rgba(255,255,255,.95);
    background: rgba(var(--color-1),1);
}
#TagsPrimaires.form-control, #TagsSecondaires.form-control,
#box-question .form-control, #box-mes-questions .form-control {
    border-radius: 20px;
    border: 1px solid rgba(var(--color-1),.25);
}
.e-learning {
    width: 100%;
    line-height: 15px;
    font-size: .875rem;
    text-align: center;
    border-radius: 0 0 8px 8px;
    padding: .35rem .75rem;
    margin-bottom: 0;
    background-color: rgba(var(--color-2),.1);
    border: solid 1px rgba(var(--color-1),.1);
}
.e-learning:hover {
    background-color: #f5f5f5;
    box-shadow: 0 0 16px rgba(0,0,0,.08);
}
.e-learning i {color: rgba(var(--color-1),1);}
.e-learning:hover i {color: rgba(var(--color-2),1);}
.badge-btn {
    box-shadow: 0 0 16px rgba(0,0,0,.08);
    font-size: 2.5rem;
    text-align: center;
    width: 4rem;
    height: 4rem;
    margin: 10px auto;
    display: block;
    padding-top: 12px;
    border-radius: 50%;
    background-color: #ffffff;
    border: solid 1px rgba(var(--color-1),.2);
}
.text-btn {font-weight: normal;}
#progression .stat-body {padding: 15px 0;}
.link-cours, .link-e-learning, .link-reussir {
    display: flex;
    align-items: stretch;
}
.link-cours, .link-reussir, #box-livrets .box-btn-e-learning-bis {margin: 16px 8px;}
.link-cours:hover .box-fichiers, .link-cours:hover .box-fichiers img,
.link-e-learning:hover .box-e-learning, .link-reussir:hover .box-fichiers,
.link-reussir:hover .box-fichiers img {box-shadow: 0 0 16px rgba(0,0,0,.13);}
.link-cours:hover .box-fichiers img, .link-reussir:hover .box-fichiers img {box-shadow: 0 0 8px rgba(0,0,0,.18);}
#reussir .box-fichiers {margin-top: 0;}
.box-fichiers {
    position: relative;
    padding: 16px;
    text-align: center;
    border-radius: 20px;
    border: solid 1px rgba(var(--color-1),.3);
    box-sizing: border-box;
    width: 240px;
    background-color: #fafafa;
}
.marquage {
    position: absolute;
    left: 6px;
}
.marquage i {
    color: rgba(var(--color-1),1);
    background: #ffffff;
    margin-bottom: 6px;
    padding: 5px;
    border-radius: 6px;
    border: solid 1px rgba(var(--color-1),.3);
    font-size: 1.3rem;
    display: block;
}
.marquage i:hover {color: rgba(var(--color-2),1);}
.box-fichiers img {
    height: 190px;
    margin: 0 0 10px 0;
    padding: 6px;
    border-radius: 6px;
    border: solid 1px rgba(var(--color-1),.3);
    background-color: #ffffff;
}
.nom-cours {
    font-weight: 600;
    text-align: center;
    font-size: 1rem;
}
.box-divider {font-size: .875rem; line-height: .875rem;}
@media (min-width:1920px) {
    .box-divider {display: none;}
    #barre-filtre .col-xl-12.extend-xl-7 {flex: 0 0 58.333333%; max-width: 58.333333%;}
    #barre-filtre .col-xl-12.extend-xl-5 {flex: 0 0 41.666667%; max-width: 41.666667%;}
    #progression .hack-xl-3 { max-width: 50%; flex: 0 0 50%; }
    #uexx .col-12.hack-xl-8 { max-width: 66.66%; flex: 0 0 66.66%; }
    #uexx .col-12.hack-xl-4 { max-width: 33.33%; flex: 0 0 33.33%; }
    #uexx .mt-4.mt-xl-4 {margin-top: 0 !important;}
}
.box-e-learning {
    position: relative;
    margin: 16px;
    padding: 16px;
    text-align: center;
    border-radius: 20px;
    border: solid 1px rgba(var(--color-1),.3);
    box-sizing: border-box;
    width: 240px;
    background-color: rgba(var(--color-2),.05);
}
.titre-e-learning {
    padding: 6px 12px;
    color: rgba(255,255,255,.95);
    background-color: rgba(var(--color-1),1);
    border-radius: 8px 8px 0 0;
    font-size: 1.25rem;
    font-weight: bold;
}
.sous-titre {
    color: #989ea4;
    font-size: 15px;
}
.box-e-learning img {
    max-width: 164px;
    margin: 0 0 10px 0;
    padding: 6px;
}
#Tags-1-2 .form-group {margin-bottom: 0;}
#Tags-1-2 input::placeholder {font-size: 13px;}

/* ===============================================================
============================== COURS ==============================
*/
@media (min-width:1920px) {
    #cours .col-xl-12.hack-xl-12 { max-width: 75%; }
    #cours .col-xl-6.hack-xl-6 { max-width: 25%; }
    /*#cours .order-2 {order: 3;}
    #cours .order-3 {order: 2;}*/
}
@media (min-width:2560px) {
    #cours .col-xl-12.extend-xl-12 {max-width: 50%;}
    #cours .col-xl-5.extend-xl-5 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    #cours .col-xl-7.extend-xl-7 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    #cours .col-sm-6.extend-xl-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #cours .mt-xxl-3 {margin-top: 1rem !important;}
}
.reponse {
    border-radius: 8px;
    border: solid 1px rgba(0,0,0,.1);
    padding: 16px;
    background-color: rgba(var(--color-2),.06);
}
.elearning-etud, .elearning-prepa {
    font-weight: 600;
    padding: 8px 0;
    display: flex;
    align-items: center;
    width: 100%;
    transition: background-color .3s ease-in-out, border-color .3s ease-in-out, border-radius .3s ease-in-out;
    border: solid 1px rgba(var(--color-2),.6);
    border-radius: 8px;
    background-color: #ffffff;
}
.elearning-etud i, .elearning-prepa i {
    color: rgba(255,255,255,.95);
    padding-top: 8px;
    font-size: 1.35rem;
    text-align: center;
    height: 40px;
    width: 40px;
    transition: background-color .3s ease-in-out, border-color .3s ease-in-out, color .3s ease-in-out;
    background-color: rgba(var(--color-2),1);
    border: solid 1px rgba(var(--color-2),1);
    border-radius: 50%;
}
.elearning-etud:hover, .elearning-prepa:hover {
    border-radius: 60px;
    border-color: rgba(var(--color-1),.16);
    background-color: rgba(var(--color-1),.08);
}
.elearning-etud:hover i, .elearning-prepa:hover i {
    color: rgba(var(--color-2),1);
    border-color: rgba(var(--color-1),.24);
    background-color: #ffffff;
}
.date, .prof {
    font-size: 12px;
    padding: 2px 12px;
    display: inline-block;
    border-radius: 40px;
    margin-bottom: 12px;
}
.date {
    margin-right: 1rem;
    color: #989ea4;
    background-color: #ffffff;
    border: solid 1px rgba(var(--color-2),.3);
}
.prof {
    float: right;
    font-weight: 600;
    color: rgba(255,255,255,.95);
    background-color: rgba(var(--color-2),1);
    border: solid 1px rgba(var(--color-2),1);
}
.prof i {color: rgba(255,255,255,.95);}

/* ===============================================================
============================== PICTOS ==============================
*/
#bd-pictos .card {
    background: transparent;
}