/**
 * Thème clair (texte foncé sur fond blanc) — espace cours étudiant
 * À utiliser avec un ancêtre .studentcourse-light
 */

.studentcourse-light .video-contentfull,
.studentcourse-light.video-contentfull {
    background: #ffffff !important;
}

.studentcourse-light .wrapper-modal {
    background: #ffffff;
}

.studentcourse-light #sidebar-wrapper {
    background: #f4f6f8 !important;
    border-left: 1px solid #e2e6ea;
}

.studentcourse-light .sidebar-nav {
    color: #212529;
}

.studentcourse-light .wrapheader {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e6ea;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.studentcourse-light .wraplogo span {
    color: #1a1a1a !important;
}

.studentcourse-light .wraplogo img {
    border-right-color: #d0d4d8 !important;
}

.studentcourse-light .wraplist li a {
    color: #212529 !important;
    border-color: #c5ccd3 !important;
    background: #fff;
}

.studentcourse-light .wraplist li a:hover,
.studentcourse-light .wraplist li a:focus,
.studentcourse-light .wraplist li a:visited {
    background: #f0f3f5 !important;
    color: #000 !important;
}

.studentcourse-light .course-content {
    color: #1a1a1a !important;
    background: #eef1f4 !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.studentcourse-light .videoaccordion {
    color: #212529 !important;
}

.studentcourse-light .videoaccordion .panel .box-title a {
    color: #1a1a1a !important;
}

.studentcourse-light .videoaccordion .panel {
    border-bottom-color: #dee2e6 !important;
}

.studentcourse-light .videoaccordion .box-header {
    border-bottom-color: #dee2e6 !important;
}

.studentcourse-light .h5section {
    color: #1a1a1a !important;
}

.studentcourse-light #accordion .box-body {
    border-top-color: #dee2e6 !important;
}

.studentcourse-light .navsidelist {
    background: #ffffff !important;
}

.studentcourse-light .navsidelist li {
    color: #333333 !important;
    border-bottom-color: #e9ecef !important;
}

.studentcourse-light .navsidelist li a {
    color: #333333 !important;
}

.studentcourse-light .navsidelist li.active,
.studentcourse-light .navsidelist li a.active,
.studentcourse-light .navsidelist li a:hover {
    color: #2e7d32 !important;
}

.studentcourse-light .navsidelist li .firstcontent i {
    color: #6c757d !important;
}

.studentcourse-light .navsidelist li span {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

.studentcourse-light .video_time {
    color: #00695c !important;
}

.studentcourse-light .navtophead {
    color: #212529 !important;
}

.studentcourse-light .playlist-header {
    border-bottom-color: #dee2e6 !important;
}

.studentcourse-light .playlist-header span {
    color: #495057 !important;
}

.studentcourse-light .lesson_duration {
    color: #212529 !important;
}

.studentcourse-light .downloadlession a {
    color: #0d47a1 !important;
}

.studentcourse-light .downloadlession a:hover,
.studentcourse-light .downloadlession a:hover i {
    color: #1565c0 !important;
}

.studentcourse-light .downloadlession .lession-text {
    color: #212529 !important;
}

.studentcourse-light .fainfobtn {
    color: #495057 !important;
}

.studentcourse-light .sidebar-closebtn,
.studentcourse-light .sidebar-closebtn:hover,
.studentcourse-light .sidebar-closebtn:focus {
    color: #212529 !important;
}

.studentcourse-light .wrapbtn {
    color: #212529 !important;
}

.studentcourse-light .videoclosebtn,
.studentcourse-light .videoclosebtn:hover,
.studentcourse-light .videoclosebtn:focus {
    color: #212529 !important;
}

/* Zone lecteur / contenu principal (remplace le fond noir) */
.studentcourse-light .scroll-area-fullheight-video,
.studentcourse-light #video_id {
    background: #ffffff;
    min-height: 200px;
}

.studentcourse-light #player-overlay,
.studentcourse-light .embed-container {
    background: #f8f9fa;
}

.studentcourse-light .course-video-height iframe,
.studentcourse-light .course-video-height video {
    background: #000;
}

/* =====================================================================
   Bouton « Suivre le cours » + visionneuse type navigateur
   (espace étudiant : user/studentcourse -> studentstartlesson)
   ===================================================================== */

/* .video-dialogfull est déclarée à 101.2% de large : tout le contenu de la
   fenêtre — dont la colonne de droite — se retrouve décalé d'une vingtaine de
   pixels hors écran, ce qui tronquait le bouton « Sortir ». */
#coursemodal .video-dialogfull,
#exam_modal .video-dialogfull {
    width: 100%;
}

/* .sidebar-nav est figée à 320px, soit la largeur du conteneur barre de
   défilement comprise : son contenu déborde donc à droite. */
.studentcourse-light #sidebar-wrapper .sidebar-nav {
    width: 100%;
    box-sizing: border-box;
}

/* --- Pied de la colonne : « Suivre le cours » + « Sortir » --------------- */

.coursebrowser-launch {
    display: flex;
    align-items: stretch;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 14px;
    border-top: 1px solid #e2e6ea;
    background: #ffffff;
}

.coursebrowser-launch-btn,
.coursebrowser-exit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.coursebrowser-launch-btn .fa,
.coursebrowser-exit-btn .fa {
    margin-right: 7px;
    font-size: 15px;
}

/* « Suivre le cours » occupe la place restante, « Sortir » se cale à droite */
.coursebrowser-launch-btn {
    flex: 1 1 0;
    min-width: 0;
    background: #22a04a;
    border-color: #22a04a;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

/* Le libellé se tronque proprement si la colonne devient étroite */
.coursebrowser-launch-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.coursebrowser-launch-btn:hover,
.coursebrowser-launch-btn:focus {
    background: #1b8a3f;
    border-color: #1b8a3f;
    color: #ffffff;
    outline: 0;
}

.coursebrowser-launch-btn.active {
    background: #177736;
    border-color: #177736;
}

.coursebrowser-exit-btn {
    flex: 0 0 auto;
    background: #202c45;
    border-color: #202c45;
    color: #ffffff;
}

/* Seul dans sa rangée (cours sans lien), « Sortir » prend toute la largeur */
.coursebrowser-exit-btn:only-child {
    flex: 1 1 auto;
}

.coursebrowser-exit-btn:hover,
.coursebrowser-exit-btn:focus,
.coursebrowser-exit-btn:visited {
    color: #ffffff;
    text-decoration: none;
    outline: 0;
}

.coursebrowser-exit-btn:hover,
.coursebrowser-exit-btn:focus {
    background: #16203a;
    border-color: #16203a;
}

/* --- Poignée de repli du panneau ---------------------------------------- */

.coursebrowser-sidebar-handle {
    position: fixed;
    z-index: 1001;
    top: 50%;
    right: 320px;
    width: 24px;
    height: 58px;
    margin-top: -29px;
    padding: 0;
    border: 1px solid #d8dde2;
    border-right: 0;
    border-radius: 6px 0 0 6px;
    background: #ffffff;
    color: #495057;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    box-shadow: -2px 0 6px rgba(16, 24, 40, 0.1);
    transition: right 0.5s ease, background 0.15s ease;
}

.coursebrowser-sidebar-handle:hover,
.coursebrowser-sidebar-handle:focus {
    background: #f1f3f5;
    color: #212529;
    outline: 0;
}

/* Panneau replié : la poignée revient au bord et la flèche s'inverse */
.wrapper-modal.toggled .coursebrowser-sidebar-handle {
    right: 0;
}

.coursebrowser-sidebar-handle .fa {
    transition: transform 0.3s ease;
}

.wrapper-modal.toggled .coursebrowser-sidebar-handle .fa {
    transform: rotate(180deg);
}

/* --- Zone centrale : logo au repos, attente pendant le chargement -------- */

.coursebrowser-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 60px);
    background: #ffffff;
}

.coursebrowser-placeholder img {
    width: 200px;
    max-width: 42%;
    height: auto;
    /* Le fichier est un JPEG : son fond blanc forme un carré opaque autour du
       logo. En multipliant, ce blanc disparaît dans celui de la zone. */
    mix-blend-mode: multiply;
    transition: transform 0.15s ease;
}

/* Le logo double le bouton « Suivre le cours » quand un lien existe. Seule
   l'image répond : la zone d'attente occupe toute la hauteur de l'écran et
   cliquer n'importe où serait déroutant. */
.coursebrowser-placeholder img.is-clickable {
    cursor: pointer;
}

.coursebrowser-placeholder img.is-clickable:hover,
.coursebrowser-placeholder img.is-clickable:focus {
    transform: scale(1.04);
    outline: 0;
}

.coursebrowser-loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.coursebrowser-loader::after {
    content: '';
    width: 54px;
    height: 54px;
    border: 5px solid #e6e8ec;
    border-top-color: #bd0745;
    border-radius: 50%;
    animation: coursebrowser-spin 0.9s linear infinite;
}

@keyframes coursebrowser-spin {
    to {
        transform: rotate(360deg);
    }
}

.coursebrowser {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    background: #ffffff;
}

.coursebrowser-notice {
    flex: 0 0 auto;
    display: none;
    padding: 8px 12px;
    background: #fff8e1;
    border-bottom: 1px solid #f0e0a8;
    color: #6b5700;
    font-size: 13px;
}

.coursebrowser-notice.show {
    display: block;
}

.coursebrowser-frame-wrap {
    flex: 1 1 auto;
    position: relative;
    min-height: 300px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.coursebrowser-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.coursebrowser:fullscreen,
.coursebrowser:-webkit-full-screen {
    height: 100%;
}

/* --- Tablette et mobile ------------------------------------------------- */

/* En dessous de 768px, .wrapper-modal perd son padding-right : le panneau
   passe alors *par-dessus* la visionneuse et intercepte tous les appuis.
   On le borne pour qu'il n'avale pas l'écran entier une fois ouvert, et on
   recale la hauteur sur le décalage propre à cette largeur
   (.wrapper-modal 50px + #video_id 60px). */
@media only screen and (max-width: 767px) {
    /* Les trois commandes de l'en-tête — progression, repli, fermeture —
       encombraient une ligne entière sur un écran étroit. Le repli passe par
       la poignée du panneau, et « Sortir » ferme le cours. */
    .wrapheader .wraplist {
        display: none;
    }

    /* Même valeur des deux côtés : la poignée reste collée à la bordure. */
    .studentcourse-light #sidebar-wrapper {
        width: min(320px, 86%);
    }

    .coursebrowser-sidebar-handle {
        right: min(320px, 86%);
    }

    .wrapper-modal.toggled .coursebrowser-sidebar-handle {
        right: 0;
    }

    .coursebrowser,
    .coursebrowser-placeholder {
        height: calc(100vh - 110px);
    }

    .coursebrowser-placeholder img {
        max-width: 60%;
    }
}

/* =====================================================================
   Cartes de cours et interface de suivi — habillage aligné sur la charte
   CAMPUS225 : marine #1B2A4A, carmin #BD0745, Inter, angles doux.
   Aucune classe n'est renommée : le balisage et les comportements JS
   existants restent intacts.
   ===================================================================== */

.studentcourse-light .content-wrapper,
.studentcourse-light .box.box-primary {
    background: #f5f6f8;
    border-top-color: #bd0745;
}

/* --- La carte ----------------------------------------------------------- */

.studentcourse-light .coursebox {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(27, 42, 74, 0.05);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.studentcourse-light .coursebox:hover {
    box-shadow: 0 8px 30px rgba(27, 42, 74, 0.12);
    transform: translateY(-2px);
}

/* Bandeau auteur en surimpression, dégradé plutôt que barre opaque */
/* Point « en direct » : masqué par défaut, allumé par le script pendant la
   séance du jour. Le halo blanc le détache des vignettes claires. */
.coursebox-img .course-live-dot {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
}

.coursebox-img .course-live-dot.est-en-direct {
    display: block;
    animation: course-live-pulse 1.2s ease-in-out infinite;
}

@keyframes course-live-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
    .coursebox-img .course-live-dot.est-en-direct {
        animation: none;
    }
}

.studentcourse-light .coursebox-img .author-block {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 22px 12px 10px;
    background: linear-gradient(to top, rgba(27, 42, 74, 0.88), rgba(27, 42, 74, 0));
}

.studentcourse-light .author-block img {
    border: 2px solid rgba(255, 255, 255, 0.85);
}

.studentcourse-light .author-block .authorname {
    font-weight: 600;
    font-size: 12px;
}

.studentcourse-light .author-block .description {
    opacity: 0.75;
}

.studentcourse-light .coursebox-body {
    padding: 14px 16px 6px;
}

.studentcourse-light .coursebox h4 {
    color: #1b2a4a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 6px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.studentcourse-light .course-caption {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

/* Métadonnées en pastilles discrètes */
.studentcourse-light .classstats {
    color: #475569;
    font-size: 12px;
    margin-top: 10px;
}

.studentcourse-light .classstats span.pr5,
.studentcourse-light .classstats span.pr10 {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    white-space: nowrap;
}

.studentcourse-light .classstats i {
    margin-right: 4px;
    color: #94a3b8;
}

/* Prix : l'information la plus scannée de la carte */
.studentcourse-light .classstats.full-width {
    margin-top: 4px;
    padding: 0;
    color: #bd0745;
    font-size: 16px;
    font-weight: 700;
}

.studentcourse-light .classstats.full-width span del {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 400;
}

.studentcourse-light .coursecard .fa-star {
    color: #dbe2ea;
    font-size: 13px;
}

/* Barre de progression : fine, arrondie, aux couleurs de la marque */
.studentcourse-light .courssprogress {
    height: 6px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.studentcourse-light .courssprogress .progress-bar {
    height: 6px;
    border-radius: 999px;
    background: #bd0745 !important;
    transition: width 0.4s ease;
}

.studentcourse-light .courssprogress .progress-bar.progress-bar-info {
    background: #1f8a3f !important;
}

.studentcourse-light [id^="progressbarval"] {
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

/* --- Les deux actions --------------------------------------------------- */

.studentcourse-light .coursebtn {
    display: flex;
    gap: 10px;
    padding: 8px 16px 16px;
    background: #ffffff;
    border-top: 1px solid #eef2f6;
}

.studentcourse-light .coursebtn .btn-add,
.studentcourse-light .coursebtn .btn-buygreen {
    flex: 1 1 0;
    width: auto;
    float: none;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Action secondaire : bleu nuit plein, comme le bouton « Sortir » */
.studentcourse-light .coursebtn .btn-add {
    background: #202c45 !important;
    border: 1px solid #202c45 !important;
    color: #ffffff !important;
}

.studentcourse-light .coursebtn .btn-add:hover,
.studentcourse-light .coursebtn .btn-add:focus {
    background: #2c3b5c !important;
    border-color: #2c3b5c !important;
    color: #ffffff !important;
}

/* Action principale : carmin plein, comme sur la page d'accueil */
.studentcourse-light .coursebtn .btn-buygreen {
    background: #bd0745 !important;
    border: 1px solid #bd0745 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

.studentcourse-light .coursebtn .btn-buygreen:hover,
.studentcourse-light .coursebtn .btn-buygreen:focus {
    background: #9e001f !important;
    border-color: #9e001f !important;
    color: #ffffff !important;
}

/* --- Interface de suivi : colonne « Le contenu des cours » --------------- */

.studentcourse-light #sidebar-wrapper {
    background: #ffffff !important;
    border-left: 1px solid #e2e8f0;
}

.studentcourse-light .course-content {
    padding: 16px 15px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #1b2a4a !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* Chaque section devient une ligne cliquable lisible */
.studentcourse-light .videoaccordion .box-header {
    padding: 0 !important;
    border-bottom: 1px solid #eef2f6 !important;
}

.studentcourse-light .videoaccordion .box-title a {
    display: block;
    padding: 13px 15px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.studentcourse-light .videoaccordion .box-title a:hover {
    background: #f8fafc;
}

.studentcourse-light .h5section {
    margin: 0 !important;
    color: #1b2a4a !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Leçons, quiz, devoirs : lignes aérées avec un état actif net */
.studentcourse-light .navsidelist li.video_list {
    padding: 10px 15px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.studentcourse-light .navsidelist li.video_list:hover {
    background: #f8fafc !important;
}

.studentcourse-light .navsidelist li.video_list.active {
    background: #fff5f7 !important;
    border-left-color: #bd0745;
}

.studentcourse-light .navsidelist li.video_list.active .lesson_video_ID,
.studentcourse-light .navsidelist li.video_list.active .quiz_btn_id,
.studentcourse-light .navsidelist li.video_list.active .assignment_btn_id,
.studentcourse-light .navsidelist li.video_list.active .exam_btn_id {
    color: #bd0745 !important;
    font-weight: 600;
}

.studentcourse-light .navsidelist li.active,
.studentcourse-light .navsidelist li a.active,
.studentcourse-light .navsidelist li a:hover {
    color: #bd0745 !important;
}

.studentcourse-light .navsidelist li .firstcontent .checkbox {
    accent-color: #bd0745;
    margin-top: 2px;
}

.studentcourse-light .video_time {
    color: #94a3b8 !important;
    font-size: 11px;
    padding-left: 22px;
}

/* Bandeau supérieur */
.studentcourse-light .wrapheader {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.studentcourse-light .wraplogo span {
    color: #1b2a4a !important;
    font-weight: 600;
}

.studentcourse-light .wraplist li a {
    border-radius: 8px;
    border-color: #cbd5e1 !important;
    color: #1b2a4a !important;
    font-weight: 600;
}

/* Actions du pied de colonne, aux couleurs de la marque */
.coursebrowser-launch {
    border-top: 1px solid #e2e8f0;
}

.coursebrowser-launch-btn,
.coursebrowser-exit-btn {
    border-radius: 8px;
}

.coursebrowser-launch-btn {
    background: #bd0745;
    border-color: #bd0745;
}

.coursebrowser-launch-btn:hover,
.coursebrowser-launch-btn:focus {
    background: #9e001f;
    border-color: #9e001f;
}

.coursebrowser-launch-btn.active {
    background: #8a0019;
    border-color: #8a0019;
}

.coursebrowser-exit-btn {
    background: #202c45;
    border-color: #202c45;
    color: #ffffff;
}

.coursebrowser-exit-btn:hover,
.coursebrowser-exit-btn:focus {
    background: #16203a;
    border-color: #16203a;
    color: #ffffff;
}

.coursebrowser-sidebar-handle {
    border-color: #e2e8f0;
    color: #1b2a4a;
}

/* Le style de base verrouille le titre sur une seule ligne (height: 20px) :
   on libère la hauteur pour laisser respirer deux lignes. Sans min-height :
   un titre sur une seule ligne réservait quand même la place d'une seconde,
   laissant un vide sous le texte avant les boutons. */
.studentcourse-light .coursebox h4 {
    height: auto;
    max-height: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

.studentcourse-light .course-caption {
    min-height: 40px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

/* Les libellés d'action sont longs en français : on les laisse passer à la
   ligne plutôt que de les tronquer. */
.studentcourse-light .coursebtn .btn-add,
.studentcourse-light .coursebtn .btn-buygreen {
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    word-break: normal;
    overflow-wrap: break-word;
}

/* --- Période et créneaux sur la carte de cours --------------------------- */

.studentcourse-light .courseperiod {
    margin: 10px 0 8px;
    padding: 9px 11px;
    border: 1px solid #eef2f6;
    border-radius: 8px;
    background: #f8fafc;
}

.studentcourse-light .courseperiod-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #475569;
    font-size: 12px;
    line-height: 1.5;
}

.studentcourse-light .courseperiod-row + .courseperiod-row {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #e2e8f0;
}

.studentcourse-light .courseperiod-row > i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #94a3b8;
}

.studentcourse-light .courseperiod-row b {
    color: #1b2a4a;
    font-weight: 600;
}

.studentcourse-light .courseperiod-duration {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fff0f3;
    color: #bd0745;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Un créneau par ligne logique, repliés proprement si la carte est étroite */
.studentcourse-light .courseperiod-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.studentcourse-light .courseperiod-slot {
    padding: 2px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #334155;
    font-size: 11px;
    white-space: nowrap;
}

.studentcourse-light .courseperiod-slot b {
    color: #bd0745;
    font-weight: 700;
}

.studentcourse-light .courseperiod-slot em {
    color: #94a3b8;
    font-style: normal;
}

/* Le bloc période s'insère aussi dans la colonne de suivi et dans les fiches */
.studentcourse-light .courseperiod-wrap {
    padding: 12px 15px 0;
}

.studentcourse-light .courseperiod-wrap .courseperiod {
    margin: 0 0 12px;
}

/* =====================================================================
   Fiche détaillée du cours (modal ouvert depuis une carte)
   ===================================================================== */

.studentcourse-light.modal-content {
    border: 0;
    border-radius: 14px;
    background: #f5f6f8;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28);
    overflow: hidden;
}

.studentcourse-light.modal-content > .close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 5;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #1b2a4a;
    font-size: 20px;
    line-height: 30px;
    opacity: 1;
    text-shadow: none;
}

.studentcourse-light.modal-content > .close:hover {
    background: #f1f5f9;
    color: #bd0745;
}

/* Les grands blocs deviennent des cartes blanches sur fond gris */
.studentcourse-light .modal-body .whatyou,
.studentcourse-light .modal-body .coursecard.whatyou {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(27, 42, 74, 0.04);
}

.studentcourse-light .modal-body .coursebox {
    border-radius: 12px;
    box-shadow: none;
}

.studentcourse-light .modal-body .coursebox:hover {
    transform: none;
    box-shadow: none;
}

/* Colonne de droite : enseignant, informations, action */
.studentcourse-light .author-block-center .img-circle {
    border: 3px solid #ffffff;
    box-shadow: 0 2px 10px rgba(27, 42, 74, 0.15);
}

.studentcourse-light .authornamebig {
    color: #1b2a4a;
    font-size: 16px;
    font-weight: 700;
}

.studentcourse-light .descriptionbig {
    color: #64748b;
    font-size: 12.5px;
}

.studentcourse-light .lessonsblock li,
.studentcourse-light .lessonsblock .col-md-6,
.studentcourse-light .lessonsblock .col-md-12 {
    color: #334155;
    font-size: 13px;
}

.studentcourse-light .lessonsblock i {
    color: #94a3b8;
    margin-right: 5px;
}

/* Action principale, au carmin de la marque */
.studentcourse-light .coursebtnfull {
    background: transparent;
    border-top: 1px solid #eef2f6;
    padding: 14px 0 0;
}

.studentcourse-light .coursebtnfull .btn-add-full {
    border-radius: 8px;
    background: #bd0745;
    font-size: 15px;
    font-weight: 600;
    padding: 13px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
    transition: background 0.15s ease;
}

.studentcourse-light .coursebtnfull .btn-add-full:hover,
.studentcourse-light .coursebtnfull .btn-add-full:focus {
    background: #9e001f;
    color: #ffffff;
}

/* Titres de sections de la fiche */
.studentcourse-light .modal-body .modal-title,
.studentcourse-light .modal-body h4.fontmedium {
    color: #1b2a4a;
    font-size: 16px;
    font-weight: 700;
}

.studentcourse-light .whatlearn li,
.studentcourse-light .introlist li {
    color: #334155;
    font-size: 13.5px;
    line-height: 1.6;
}

.studentcourse-light .whatlearn i,
.studentcourse-light .introlist i {
    color: #22a04a;
}

/* Programme : une ligne par section, comme dans la colonne de suivi */
.studentcourse-light .panel-group.faq .panel {
    border: 1px solid #e2e8f0;
    border-radius: 10px !important;
    box-shadow: none;
    margin-bottom: 8px;
    overflow: hidden;
}

.studentcourse-light .panel-group.faq .panel-heading {
    background: #ffffff;
    padding: 12px 14px;
    border-bottom: 0;
}

.studentcourse-light .panel-group.faq .panel-heading a {
    color: #1b2a4a;
    font-weight: 600;
    text-decoration: none;
}

.studentcourse-light .panel-group.faq .panel-collapse {
    border-top: 1px solid #eef2f6;
}

.studentcourse-light .ratethis {
    color: #bd0745;
    font-weight: 600;
}

/* Le style de base place .coursebtnfull en absolu au bas de la colonne, ce qui
   recouvre le prix et la notation dès que le contenu est un peu long. On le
   replace dans le flux, poussé en bas par la colonne devenue flexible. */
.studentcourse-light .modal-body .coursebox-body.relative {
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
}

.studentcourse-light .modal-body .coursebtnfull {
    position: static;
    margin-top: auto;
    padding: 14px 0 0;
    left: auto;
    right: auto;
    bottom: auto;
}

.studentcourse-light .modal-body .lessonsblock {
    margin-bottom: 6px;
}

.studentcourse-light .modal-body .ratethis {
    font-size: 13px;
}

/* =====================================================================
   Accès payant aux cours de la classe
   ===================================================================== */

/* Le contenu est flouté et rendu inerte tant que l'accès n'est pas réglé */
.studentcourse-light.access-locked .content-wrapper {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

.access-paywall {
    /* Fixe par rapport à l'écran, pas au conteneur de la page : posé en
       absolu sur un conteneur très grand (plusieurs cartes de cours), le
       voile centrait la fenêtre au milieu de TOUTE cette hauteur — loin
       sous l'écran dès que la liste des cours était un peu longue, avec
       un grand vide au-dessus. La barre du haut (z-index 1030) et le menu
       latéral (z-index 810) restent au-dessus de ce voile (z-index 20) et
       donc cliquables, sans qu'il faille limiter le voile à leur espace. */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(27, 42, 74, 0.45);
}

.access-paywall-box {
    width: 100%;
    max-width: 440px;
    padding: 30px 28px 24px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.3);
    text-align: center;
}

.access-paywall-box .material-icon-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: #fff0f3;
    color: #bd0745;
    font-size: 22px;
}

.access-paywall-box h4 {
    margin: 0 0 10px;
    color: #1b2a4a;
    font-size: 19px;
    font-weight: 700;
}

.access-paywall-box p {
    margin: 0 0 8px;
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
}

.access-paywall-box b {
    color: #1b2a4a;
}

.access-paywall-note {
    color: #94a3b8 !important;
    font-size: 12.5px !important;
}

.access-paywall-error {
    min-height: 18px;
    color: #ba1a1a !important;
    font-size: 13px !important;
}

.access-paywall-btn {
    width: 100%;
    margin-top: 6px;
    padding: 13px;
    border: 0;
    border-radius: 8px;
    background: #bd0745;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.access-paywall-btn:hover:not(:disabled) {
    background: #9e001f;
}

.access-paywall-btn:disabled {
    opacity: 0.65;
    cursor: default;
}

/* Bandeau d'accès actif, à la place du titre « Liste des cours » */
.studentcourse-light .access-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 12px;
}

.studentcourse-light .access-banner-name {
    display: block;
    color: #1b2a4a;
    font-size: 17px;
    font-weight: 700;
}

.studentcourse-light .access-banner-class {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 13px;
}

.studentcourse-light .access-banner-class i {
    margin-right: 5px;
    color: #94a3b8;
}

.studentcourse-light .access-banner-countdown {
    padding: 7px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    text-align: right;
}

.studentcourse-light .access-countdown-label {
    display: block;
    color: #94a3b8;
    font-size: 11px;
}

.studentcourse-light .access-countdown-value {
    display: block;
    color: #bd0745;
    font-size: 15px;
    font-weight: 700;
}

/* Colonne de suivi : créneau du jour uniquement */
.studentcourse-light .courseperiod-today {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.studentcourse-light .courseperiod-none {
    color: #64748b;
    font-style: italic;
}

.studentcourse-light .courseperiod-none i {
    color: #cbd5e1;
}

/* Message affiché quand le cours n'est pas accessible à cet instant */
.coursebrowser-alert {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(27, 42, 74, 0.45);
}

.coursebrowser-alert-box {
    width: 100%;
    max-width: 400px;
    padding: 28px 26px 22px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.3);
    text-align: center;
    font-family: inherit;
}

.coursebrowser-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: #fff0f3;
    color: #bd0745;
    font-size: 21px;
}

.coursebrowser-alert-box h4 {
    margin: 0 0 8px;
    color: #1b2a4a;
    font-size: 17px;
    font-weight: 700;
}

.coursebrowser-alert-box p {
    margin: 0 0 18px;
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
}

.coursebrowser-alert-btn {
    width: 100%;
    padding: 11px;
    border: 0;
    border-radius: 8px;
    background: #bd0745;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.coursebrowser-alert-btn:hover {
    background: #9e001f;
}

/* Fenêtre de suspension du décompte : même gabarit que la fenêtre
   de paiement, avec une teinte ambrée pour la distinguer. */
.studentcourse-light .access-frozen-box .material-icon-lock {
    background: linear-gradient(135deg, #f0a020, #f5c150);
}

.studentcourse-light .access-frozen-box h4 {
    color: #8a5b00;
}

/* ---------------------------------------------------------------------
   Bibliothèque interactive
   Les chapitres remplacent ici les leçons : un chapitre relié à une
   ressource s'ouvre au clic, un chapitre sans lien reste inerte et le
   dit.
   --------------------------------------------------------------------- */
.studentcourse-light .navsidelist li.video_list .chapitre_interactif {
    cursor: pointer;
    /* Sans ceci, seul le préfixe « Séance N : » (dans un <b>) ressortait :
       le titre qui suit restait en graisse normale, comme un chapitre
       indisponible — rien ne signalait qu'il y a un lien avant de cliquer. */
    font-weight: 700;
}

.studentcourse-light .navsidelist li.video_list.active .chapitre_interactif {
    color: #bd0745 !important;
    font-weight: 700;
}

.studentcourse-light .navsidelist li.video_list.chapitre-indisponible {
    background: transparent !important;
    cursor: default;
    opacity: 0.65;
}

/* Le préfixe « Séance N : » ressort en rouge, seulement quand le chapitre
   a un lien — un chapitre « Bientôt disponible » n'en a pas besoin. */
.studentcourse-light .navsidelist li.video_list .chapitre_interactif .chapitre-numero {
    color: #bd0745;
}

.studentcourse-light .chapitre-bientot {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-style: italic;
    color: #94a3b8;
}

/* ---------------------------------------------------------------------
   Choix du pass dans la fenêtre d'accès
   La liste tient dans la carte : au-delà de quatre pass elle défile
   plutôt que de pousser le bouton hors de l'écran.
   --------------------------------------------------------------------- */
.access-pass-list {
    margin: 14px 0 10px;
    padding: 0;
    list-style: none;
    max-height: 46vh;
    overflow-y: auto;
    text-align: left;
}

.access-pass-list li + li {
    margin-top: 8px;
}

.access-pass {
    display: flex;
    /* Le nom d'un pass peut passer sur deux lignes (surtout sur téléphone,
       voir ci-dessous) : centré sur toute la carte, le rond de sélection
       se retrouvait au milieu du bloc, à côté de la seconde ligne plutôt
       que du nom. Aligné en haut, il reste toujours à côté du nom. */
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-weight: 400;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.access-pass:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.access-pass.selected {
    border-color: #bd0745;
    background: #fff5f7;
}

.access-pass input {
    /* Cale le rond sur la hauteur du nom (première ligne), maintenant que
       la carte s'aligne en haut plutôt qu'au centre. */
    margin: 2px 0 0;
    accent-color: #bd0745;
    flex: 0 0 auto;
}

.access-pass-body {
    flex: 1 1 auto;
    min-width: 0;
}

.access-pass-nom {
    display: block;
    color: #1b2a4a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.access-pass-baseline {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.35;
}

.access-pass-prix {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.access-pass-prix b {
    display: block;
    color: #bd0745;
    font-size: 14px;
}

.access-pass-prix small {
    display: block;
    color: #94a3b8;
    font-size: 11.5px;
}

/* ---------------------------------------------------------------------
   Bouton fermé par le pass
   Il reste à sa place et garde sa forme : l'étudiant voit ce que son pass
   ne lui ouvre pas, plutôt qu'un bouton disparu.
   --------------------------------------------------------------------- */
.studentcourse-light .coursebtn .btn.is-locked {
    background: #eef2f7 !important;
    border: 1px solid #dbe3ec !important;
    color: #9aa5b4 !important;
    cursor: not-allowed;
    pointer-events: auto;
}

.studentcourse-light .coursebtn .btn.is-locked .fa-lock {
    margin-right: 5px;
    font-size: 12px;
}

/* ---------------------------------------------------------------------
   Cours Express
   Le tableau reprend celui de la page publique Planning, aux couleurs de
   l'espace étudiant. La colonne du jour est mise en avant.
   --------------------------------------------------------------------- */
.studentcourse-light .ce-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 15px 50px;
}

.studentcourse-light .ce-title {
    margin: 0 0 6px;
    color: #1b2a4a;
    font-size: 22px;
    font-weight: 700;
}

.studentcourse-light .ce-intro {
    margin: 0 0 22px;
    color: #7b8698;
    font-size: 14px;
}

.studentcourse-light .ce-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
}

.studentcourse-light .ce-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.studentcourse-light .ce-table th,
.studentcourse-light .ce-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #eef2f6;
    text-align: center;
    vertical-align: middle;
    font-size: 13.5px;
    color: #35373e;
}

.studentcourse-light .ce-table thead th {
    background: #202c45;
    color: #fff;
    border-bottom: 0;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 12px;
    font-weight: 600;
}

.studentcourse-light .ce-table thead th.ce-today {
    background: #bd0745;
}

.studentcourse-light .ce-table tbody tr:last-child td {
    border-bottom: 0;
}

.studentcourse-light .ce-table tbody tr:hover {
    background: #f8fafc;
}

.studentcourse-light .ce-table td.ce-today {
    background: #fff5f7;
}

.studentcourse-light .ce-classe {
    color: #1b2a4a;
    font-weight: 700;
    text-transform: uppercase;
}

.studentcourse-light .ce-matiere {
    display: block;
    font-weight: 600;
}

.studentcourse-light .ce-horaire {
    display: block;
    margin-top: 3px;
    color: #94a3b8;
    font-size: 12.5px;
}

.studentcourse-light .ce-link {
    display: inline-block;
    color: #bd0745;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
}

.studentcourse-light .ce-link:hover,
.studentcourse-light .ce-link:focus {
    color: #9e001f;
    text-decoration: none;
}

/* Pastille clignotante, reprise de la page publique */
.studentcourse-light .ce-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 7px;
    border-radius: 50%;
    background: #ef2b0e;
    animation: ce-blink 1.2s ease-in-out infinite;
}

@keyframes ce-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .15; }
}

@media (prefers-reduced-motion: reduce) {
    .studentcourse-light .ce-dot { animation: none; }
}

.studentcourse-light .ce-soon {
    color: #94a3b8;
    font-size: 12.5px;
}

.studentcourse-light .ce-empty {
    padding: 40px 15px;
    color: #94a3b8;
    text-align: center;
}

/* Panneau de la fenêtre de suivi
   Le thème habille tout <span> d'une liste en pastille grise : la matière
   doit s'en défaire pour passer sous le jour, en texte simple. */
.studentcourse-light .navsidelist li .ce-panel-matiere {
    display: block;
    /* Le thème fait flotter ces span à droite : il faut le défaire pour que
       la matière se pose sous le jour plutôt qu'à côté. */
    float: none;
    margin-top: 2px;
    padding: 0;
    background: transparent !important;
    color: #64748b !important;
    font-size: 12.5px;
}

/* Bouton « Live Class » de la fiche détaillée, fermé par le pass : même
   grisé que sur la carte du cours. */
.studentcourse-light .coursebtnfull .btn-add-full.is-locked,
.studentcourse-light .coursebtnfull .btn-add-full.is-locked:hover {
    background: #eef2f7 !important;
    border: 1px solid #dbe3ec;
    color: #9aa5b4 !important;
    box-shadow: none;
    cursor: not-allowed;
}

.studentcourse-light .coursebtnfull .btn-add-full.is-locked .fa-lock {
    margin-right: 6px;
}

/* ---------------------------------------------------------------------
   Colonne de droite : les boutons du bas restent visibles
   Le panneau est fixe et démarre sous l'en-tête (50 px). Sans borne, il
   dépassait le bas de l'écran et la barre « Suivre le cours / Sortir »
   tombait hors de vue dès que la liste des chapitres était longue.
   La liste défile maintenant à l'intérieur, la barre reste posée en bas.

   La hauteur se calcule en `vh`, puis en `dvh` quand le navigateur le
   comprend (la seconde déclaration écrase la première). `vh` vaut la
   hauteur de l'écran barre d'adresse cachée : sur mobile, quand elle est
   affichée, la fenêtre réellement visible est plus basse, et une hauteur
   calée sur `vh` colle le bas du panneau juste sous l'écran — la barre
   « Sortir » disparaît alors derrière la barre d'adresse. `dvh` suit la
   hauteur réellement visible et se réajuste avec elle.
   --------------------------------------------------------------------- */
.studentcourse-light #sidebar-wrapper {
    top: 50px;
    bottom: auto;
    height: calc(100vh - 50px);
    height: calc(100dvh - 50px);
}

.studentcourse-light #sidebar-wrapper .sidebar-nav {
    /* Sort du positionnement absolu, sinon la colonne flex ne peut pas
       mesurer la hauteur disponible. */
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.studentcourse-light #sidebar-wrapper .sidebar-nav .videoaccordion {
    flex: 1 1 auto;
    /* min-height nul : sans lui, un contenu long refuse de se comprimer
       et repousse la barre du bas hors du panneau. */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.studentcourse-light #sidebar-wrapper .sidebar-nav .coursebrowser-launch {
    flex: 0 0 auto;
    /* Un peu d'air sous les boutons : la barre touchait pile le bord bas du
       panneau. 22px, contre les 14px d'origine (`padding` plus haut, qu'on
       remplace ici) ; l'encoche ou le geste de retour d'un téléphone ajoute
       sa propre marge par-dessus si besoin. */
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px) {
    /* Le décalage du bas, prévu pour une barre flottante, n'a plus lieu d'être */
    .studentcourse-light #sidebar-wrapper .videoaccordion-bottom-sm {
        padding-bottom: 0;
    }

    /* L'en-tête mobile est plus haut (72 px) que sur ordinateur (50 px) :
       le logo passe à la ligne au-dessus des boutons. Un panneau calé sur
       la valeur de bureau chevauchait l'en-tête de 22 px, cachant le haut
       de la liste des chapitres derrière lui. */
    .studentcourse-light #sidebar-wrapper {
        top: 72px;
        height: calc(100vh - 72px);
        height: calc(100dvh - 72px);
    }
}

/* ---------------------------------------------------------------------
   Cours interactifs sur téléphone : la visionneuse démarre sous le bandeau.

   Le bandeau fixe du haut (« Accédez au campus », 40px) recouvre déjà le
   logo de l'en-tête de la fenêtre ; il n'en restait que le titre du cours,
   suivi d'un vide de 38px (marges cumulées de .wrapper-modal et #video_id,
   prévues pour un en-tête de 110px). Le cours affiche lui-même son titre :
   l'en-tête disparaît et la visionneuse se cale directement sous le bandeau.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
    .wrapheader.wrapheader-interactif {
        display: none;
    }

    .wrapper-modal.wrapper-interactif {
        margin-top: 40px;
    }

    .wrapper-interactif #video_id {
        margin-top: 0;
    }

    .wrapper-interactif .coursebrowser,
    .wrapper-interactif .coursebrowser-placeholder {
        height: calc(100vh - 40px);
        height: calc(100dvh - 40px);
    }

    .studentcourse-light .wrapper-interactif #sidebar-wrapper {
        top: 40px;
        height: calc(100vh - 40px);
        height: calc(100dvh - 40px);
    }
}

/* Bandeau du haut masqué pendant le cours interactif, sur téléphone : la
   visionneuse et le panneau des chapitres remontent alors jusqu'en haut. */
@media (max-width: 767px) {
    body.cours-interactif-ouvert .student-top-banner {
        display: none;
    }

    body.cours-interactif-ouvert .wrapper-modal.wrapper-interactif {
        margin-top: 0;
    }

    body.cours-interactif-ouvert .wrapper-interactif .coursebrowser,
    body.cours-interactif-ouvert .wrapper-interactif .coursebrowser-placeholder {
        height: 100vh;
        height: 100dvh;
    }

    body.cours-interactif-ouvert.studentcourse-light .wrapper-interactif #sidebar-wrapper,
    body.cours-interactif-ouvert .studentcourse-light .wrapper-interactif #sidebar-wrapper {
        top: 0;
        height: 100vh;
        height: 100dvh;
    }
}

/* ---------------------------------------------------------------------
   Trois boutons sur la carte de cours (Mode interactif, Banque
   d'épreuves, Mode Prof Direct) : à trois de front, la carte est trop
   étroite et les libellés se coupaient au milieu d'un mot. Ils se
   répartissent maintenant sur deux rangs, et ne peuvent plus être
   coupés qu'entre deux mots.
   --------------------------------------------------------------------- */
.studentcourse-light .coursebtn {
    flex-wrap: wrap;
}

.studentcourse-light .coursebtn .btn-add,
.studentcourse-light .coursebtn .btn-buygreen {
    flex: 1 1 calc(50% - 5px);
    min-width: 84px;
    word-break: keep-all;
    overflow-wrap: normal;
}

/* ---------------------------------------------------------------------
   Deux cours de front dès que l'écran dépasse 416 px.

   En dessous, une carte occupe toute la largeur : à deux de front sur un
   écran de 390 px, les libellés des boutons tomberaient à un mot par
   ligne. Au-delà de 768 px, Bootstrap reprend la main avec col-sm-6 et
   la règle ci-dessous n'a plus cours.

   La grille passe en flex le temps de cette fenêtre : avec les
   flottements de Bootstrap, deux cartes de hauteurs différentes — un
   titre sur deux lignes suffit — décaleraient tout le reste de la
   liste.
   --------------------------------------------------------------------- */
@media (min-width: 417px) and (max-width: 767px) {
    .studentcourse-light .grille-cours {
        display: flex;
        flex-wrap: wrap;
    }

    .studentcourse-light .grille-cours > [class*="col-"] {
        width: 50%;
        float: none;
    }

    /* La carte perd la moitié de sa largeur. Sans ces retouches, les
       quatre boutons repasseraient à un par rang et la carte doublerait
       de hauteur — l'inverse du gain recherché. */
    .studentcourse-light .grille-cours .coursebtn .btn-add,
    .studentcourse-light .grille-cours .coursebtn .btn-buygreen {
        min-width: 0;
        padding: 8px 6px;
        font-size: 11.5px;
    }

    .studentcourse-light .grille-cours .coursebox h4 {
        font-size: 14px;
    }
}