@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

/* @import url("https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap"); */

.App {
  text-align: center;
  /* font-family: "Zen Dots", cursive; */
  font-family: "Roboto", sans-serif;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.MuiTableCell-root{
  font-size:1rem !important;
}

main{
  margin-bottom: 3%;
}

.Mui-required > .MuiInputLabel-asterisk{
  color:red;
}


.bg_img{
  background-image: url(/assets/logo-hacker-b8607bf2.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

main > div > .MuiPaper-root:not(.MuiAlert-root){
  margin: 0% !important;
  margin-top:1% !important;
  padding: 2% !important;
  background-color: var(--darkTheme-third) !important;
}


.MuiTableHead-root>tr{
  background-color: #222222 !important;
}



.row {
  border-bottom: solid 1px var(--darkTheme-primary) !important;
}

.cell {
  border-bottom: none !important;
}

.loading{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  position: fixed;
  height:100vh;
  width:100vw;
}

.MuiFormHelperText-root{
  color: #7E7E7E !important;
}


.title {
  margin: 0;
  font-weight: 500;
  color: var(--darkTheme-secondary-text) !important;
  text-align: left;
  margin: 10px;
}

.MuiContainer-root{
  margin-top:3%;
}

._menu_1rkhx_3 {
  background-color: var(--darkTheme-navbar);
  height: 5rem;
  max-height: 5rem;
  min-height: 5rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  padding-left: 2rem;
  padding-right: 2rem;
  border-bottom: 1px solid black;
  position: relative;
}

a {
  color: var(--darkTheme-secondary-text);
  text-decoration: none;
}
._menu_1rkhx_3 a img {
  height: 80%;
}

._nav__links_1rkhx_26 {
  margin-right: auto;
  display: flex;
}

._nav__links_1rkhx_26 > * {
  margin-left:1%;
  white-space: nowrap;
}

._nav__links_1rkhx_26 *, ._right_1rkhx_36 *{
  color:rgb(5, 226, 5);
}

._button_1rkhx_40 {
  text-decoration: none;
  border-radius: 4px;
  padding: 6px 6px;
  font-family: "Zen Dots", cursive;
  font-size: 0.82rem;
}

@-webkit-keyframes _effect--pulse_1rkhx_1 {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes _effect--pulse_1rkhx_1 {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

._effectPulse_1rkhx_70 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

._effectPulse_1rkhx_70:focus,
._effectPulse_1rkhx_70:active,
._logo__link_1rkhx_81:focus + ._nav__links_1rkhx_26 > *:nth-child(1),
._effectPulse_1rkhx_70:hover {
  -webkit-animation-name: _effect--pulse_1rkhx_1;
  animation-name: _effect--pulse_1rkhx_1;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

._right_1rkhx_36{
  display: flex;
  justify-content: center;
  text-align: center;
  z-index: 999;
}

/* .right * forces every descendant (including these icons' inner <path>) to
   the theme green via currentColor — beat it explicitly on the leaf nodes. */
._roleIconAdmin_1rkhx_102,
._roleIconAdmin_1rkhx_102 * {
  color: #ffd700 !important;
  fill: #ffd700 !important;
}

._roleIconTeacher_1rkhx_108,
._roleIconTeacher_1rkhx_108 * {
  color: #4fc3f7 !important;
  fill: #4fc3f7 !important;
}

._dropdown_1rkhx_114 {
  background: none;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

._dropdown_1rkhx_114:hover{
  cursor:pointer;
}

._dropdown_1rkhx_114 *{
  color:rgb(5, 226, 5);

}

._dropdown_1rkhx_114:active,
._dropdown_1rkhx_114:focus {
  transform: rotate(180deg);
  transition: 1s;
}

._dropdown_1rkhx_114:active ~ ._dropdownContent_1rkhx_137,
._dropdown_1rkhx_114:focus ~ ._dropdownContent_1rkhx_137 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

._dropdownContent_1rkhx_137 {
  display: none;
  position: absolute;
  top:5rem;
  background-color: var(--darkTheme-navbar);
  width: 12%;
  z-index: 1000;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

._dropdownContent_1rkhx_137:hover {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

._dropdownContent_1rkhx_137 a {
  padding: 10px 10px 10px 10px;
  text-align: center;
}

._dropdownContent_1rkhx_137 a:hover,
._dropdownContent_1rkhx_137 Link:hover {
  background-color: var(--darkTheme-secondary);
}

._dropdownItem_1rkhx_172 {
  font-family: "Zen Dots", cursive;
}


._logo__link_1rkhx_81 {
  display: flex;
  align-items: center;
  height:100%;
}


._beta_1rkhx_184{
  padding-left:30px;
  width:200px;
  height:50px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(45deg);
  font-weight: bold;
}

._betacontainer_1rkhx_196{
  position: absolute;
  right:0;
  overflow:hidden;
  height:100%;
}

._activate_account__card_r51l0_3 {
    display: flex;
    justify-content: center;
    height: 100%;
}

._activate_account__form_r51l0_9 {
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 1%;
    height: 100%;
    background-color: var(--darkTheme-third);
    width: 20%;
    height: 100%;
    border-radius: 2px;
    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)
}


._buttonActivate_account_r51l0_24 {
    background-color: rgb(0, 138, 41) !important;

    /* font-weight: 700 !important; */
}

._linkToRegisterLogin_r51l0_30 {
    background-color: var(--darkTheme-primary) !important;
    border-radius: 4px;
    margin-bottom: 2%;
}

._buttonToRegisterLogin_r51l0_36 {
    width: 100%;
}

._buttonToRegisterLogin_r51l0_36 span {
    font-weight: 700 !important;
    width: 100%;
    color: var(--darkTheme-primary-text) !important;
}

._activate_accountRequestSuccess_r51l0_46 {
    color: green !important;
}

._activate_accountRequestFailed_r51l0_50 {
    color: red !important;
}

._businessProfileList_15vyv_3 {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

._profiles__littleHeader_15vyv_9 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0px 20px 0px 20px;
  color: var(--darkTheme-secondary-text);
}


._dialog__content_15vyv_18 label {
  margin-top: 5px;
}

._dialog__content_15vyv_18 input {
  margin-top: 5px;
}

._content_15vyv_26{
  margin-top:5%;
}

._header_15vyv_30{
  display: flex;
  margin-bottom: 1%;
}

._header_15vyv_30 > *:last-child:not(:first-child){
  height: 100%;
}


/* ---------------- Business Profile Item -----------------*/
._card_15vyv_41 {
  width: 300px;
  margin: 20px;
  text-align: left;
  background-color: #1c1c1c !important;
  color: var(--darkTheme-primary-text) !important;
  border: solid 1px var(--darkTheme-border-secondary) !important;
  border-bottom: none !important;
  height: 100%;
}

._card__title_15vyv_52 {
  font-size: x-large;
  width: 100%;
  margin-bottom: 10px;
}

._card__content_15vyv_58 {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
}

._card__actions_15vyv_65 {
  height: 44px;
}

._card__expanded_15vyv_69 {
  transform: rotate(180deg);
  margin-left: auto !important;
}

._card__expand_15vyv_69 {
  margin-left: auto !important;
}

._card__collapse_15vyv_78 {
  /* Ne s'affiche pas exactement comme il faut */
  background-color: #1c1c1c !important;
  z-index: 1;
}

._card__item_15vyv_84 {
  display: grid;
  grid-template: 100% / 25% 75%;
  margin-bottom: 4px;
}
._dialogContentFlexContainer_wv4zz_1 {
  display: flex;
  direction: column;
  justify-content: space-around;
  flex-wrap: wrap;
}

._dialogContentFlexItem_wv4zz_8 {
  margin-top: 3% !important;
}._header_13wss_1{
  display:flex;
  margin-bottom: 2%;
}
._header_13wss_1 > div {
  width:50%;
}

._header_13wss_1 > *:first-child{
  display: flex;
}

._header_13wss_1 > *:first-child > *{
  width: 100%;
  margin-right: 4%;
}

._header_13wss_1 > *:last-child:not(:first-child){
  margin-left: auto;
}._header_1aozi_1{
  display:flex;
  margin-bottom: 2%;
}
._header_1aozi_1 > *:not(:last-child) {
  width:50%;
}

._header_1aozi_1 > *:first-child{
  display: flex;
}

._header_1aozi_1 > *:first-child > *{
  width: 100%;
  margin-right: 4%;
}

._header_1aozi_1 > *:last-child{
  margin-left: auto;
}

/* Unified, icon-only actions row: keeps register / edit / delete on one line */
._actions_1aozi_23 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}._displayClickableIcon_hf3di_1 {
    cursor: pointer;
}

._text1line_hf3di_5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
            line-clamp: 1; 
    -webkit-box-orient: vertical;
}

._exerciseStudentTable_hf3di_14 > * {
    background-color: #666 !important
}
._header_1cm0m_1{
  display:flex;
  gap: 16px;
}
._header_1cm0m_1 > * {
  width:50%;
}

._header_1cm0m_1 > *:first-child{
  margin-top: 1%;
  display: flex;
}

._header_1cm0m_1 > *:first-child > *{
  width: 100%;
  margin-right: 4%;
}

._header_1cm0m_1 > *:first-child > *:last-child{
  margin-right: 0%;
}

._header_1cm0m_1 > *:last-child{
  justify-content: right;
}


._title_1cm0m_28{
  display:flex;
  align-items: center;
}

._title_1cm0m_28 > *:first-child{
  width:50%
}

._id_1cm0m_37{
  margin-left:auto;
  justify-content:center;
  display:flex;
  align-items:center;
}

._id_1cm0m_37 > *:last-child{
  margin-left: 4px;
  display: flex;
}

/* Icon-only actions row, right-aligned to match the other lists */
._actions_1cm0m_50 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* Make the data table scroll horizontally instead of overflowing the page */
._tableWrapper_1cm0m_59{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Responsive: stack filters and free up the title on small screens ---- */
@media (max-width: 600px){
  ._header_1cm0m_1{
    flex-direction: column;
    gap: 8px;
  }
  ._header_1cm0m_1 > *{
    width: 100%;
  }
  ._header_1cm0m_1 > *:first-child{
    flex-direction: column;
    gap: 8px;
  }
  ._header_1cm0m_1 > *:first-child > *{
    width: 100%;
    margin-right: 0;
  }
  ._header_1cm0m_1 > *:last-child{
    justify-content: flex-start;
  }

  ._title_1cm0m_28{
    flex-direction: column;
    align-items: flex-start;
  }
  ._title_1cm0m_28 > *:first-child{
    width: 100%;
  }

  /* Drop secondary columns on phones to cut horizontal scrolling.
     Columns: 1 Nom · 2 Date début · 3 Date fin · 4 Description · 5 Métier visé · 6 Actions */
  ._tableWrapper_1cm0m_59 table th:nth-child(3),
  ._tableWrapper_1cm0m_59 table td:nth-child(3),
  ._tableWrapper_1cm0m_59 table th:nth-child(5),
  ._tableWrapper_1cm0m_59 table td:nth-child(5){
    display: none;
  }
}
._change_password__card_rs3zz_1 {
  display: flex;
  justify-content: center;
  height: 100%;
}
  
._change_password__form_rs3zz_7 {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 1%;
  height: 100%;
  background-color: var(--darkTheme-third);
  width: 20%;
  height: 100%;
  border-radius: 2px;
  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)
}
  
  
._buttonChangePassword_rs3zz_22 {
  background-color: rgb(0, 138, 41) !important;

  /* font-weight: 700 !important; */
}

._linkToRegisterLogin_rs3zz_28 {
    background-color: var(--darkTheme-primary) !important;
    color: var(--darkTheme-secondary-text) !important;
    border-radius: 4px;
    width: 100%;
}

._buttonToRegisterLogin_rs3zz_35 {
    width: 100%;
}

._buttonToRegisterLogin_rs3zz_35 span {
    font-weight: 700 !important;
    width: 100%;
    color: var(--darkTheme-primary-text) !important;
}

._changePasswordRequestSuccess_rs3zz_45 {
    color: green !important;
}

._changePasswordRequestFailed_rs3zz_49 {
    color: red !important;
}
code{
  color:pink;
}

._detailsPaper_zts4u_5 div, ._detailsPaper_zts4u_5 p, ._detailsPaper_zts4u_5 ._MuiTypography-root_zts4u_5, ._detailsPaper_zts4u_5 h2, ._detailsPaper_zts4u_5 ol, ._detailsPaper_zts4u_5 input{
  color:white;
}

._detailsPaper_zts4u_5{
  text-align: left;
}
._toxTinymce_1cvjn_2{
  margin-top:2%;
  margin-bottom: 2%;
}

._aiHintTitle_1cvjn_7{
  margin-top: 3%;
  margin-bottom: 1%;
}

._chips_1cvjn_12{
  display: flex;
  flex-wrap: wrap;
}
._chip_1cvjn_12{
  margin: 2px !important;
}

._fileInputs_1cvjn_20{
  margin:auto;
  padding: 2%;
  margin-left:8%;
  width:100%;
  justify-content: center;
}

._formContainer_1cvjn_28 .MuiFormControl-root{
  width:40% !important;
  margin-left:1% !important;
}


._skillsSelector_1cvjn_34{
  width:50%
}

._fileInputs_1cvjn_20 > div{
  margin-bottom: 1%;
  width:50%;
  display: flex;
  justify-content: space-between;
}._exercise__littleHeader_cnj9d_1 {
  margin: 0px 20px 0px 20px;
}

._exercise__add_button_cnj9d_5 {
  margin-left: auto !important;
}

._title_cnj9d_9 {
  margin: 0;
  font-weight: 500;
  color: var(--darkTheme-secondary-text) !important;
  text-align: left;
  margin: 10px;
}

._table__container_cnj9d_17  >  .MuiTableContainer-root > .MuiTable-root > .MuiTableBody-root > tr.MuiTableRow-root:nth-child(even){
  background-color: #202020 !important;
}

._table__container_cnj9d_17  >  .MuiTableContainer-root > .MuiTable-root > .MuiTableBody-root > tr.row.MuiTableRow-root:nth-child(4n-1){
  background-color: #222222 !important;
}

._header_cnj9d_25{
  display:flex;
  margin-bottom: 2%;
}
._header_cnj9d_25 > *:not(:last-child) {
  width:50%;
}

._header_cnj9d_25 > *:first-child{
  display: flex;
}

._header_cnj9d_25 > *:first-child > *:last-child{
  width: 100%;
  margin-left: 4%;
}

._header_cnj9d_25 > *:last-child{
  margin-left: auto;
}._header_2ofim_1{
  display:flex;
  margin-bottom: 2%;
}
._header_2ofim_1 > div {
  width:50%;
}


._header_2ofim_1 > *:first-child{
  display: flex;
}

._header_2ofim_1 > *:first-child > *{
  width: 100%;
  margin-right: 4%;
}

._header_2ofim_1 > *:last-child:not(:first-child){
  margin-left: auto;
}._displayClickableIcon_17xkc_1 {
    cursor: pointer;
}

._text1line_17xkc_5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
            line-clamp: 1; 
    -webkit-box-orient: vertical;
}

._feedbacks_17xkc_14{
    display:flex;
    align-items: center;
}

._feedbacks_17xkc_14 fieldset{
    transform: scale(0.75);
}#log, #runtime_infos, #serial, #filesystem_panel, #debug_panel {
    font-family: DejaVu Sans Mono, monospace;
    font-size: 13px;
    border: 1px solid #333;
    background-color: #000;
    padding: 4px;
    color: #fff;
}
#runtime_infos, #filesystem_panel {
    float: left;
    width: 250px;
    margin-bottom: 7px;
    margin-right: 7px;
    padding-bottom: 7px;
}
#log {
    height: 100px;
    width: 550px;
}
#debug_panel {
    white-space: pre;
    float: left;
}
#serial {
    margin: 0;
}
#serial:focus {
    outline: 1px solid rgb(229, 151, 0);
}
#screen {
    white-space: pre;
    position: relative;
    font-family: Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
    font-weight: bold;
    font-size: 15px;
    line-height: normal;
}
#screen, #vga {
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    transform-origin: top left;
}
#vga {
    background-color: #000;
    width: 1024px !important;
    height: 768px !important;
}
body {
    background-color: #111;
    color: #fff;
    line-height: 1.5;
    font-family: sans-serif;
}
a {
    color: wheat;
    text-decoration: none;
}
.phone_keyboard {
    width: 0;
    height: 0;
    resize: none;
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    z-index: -10;
    white-space: nowrap;
    overflow: hidden;
}
h4 {
    margin: 0 0 9px 0;
}
#start_emulation {
    padding: 6px 18px;
    font-size: 16px;
    font-weight: bold;
}
#setup_error {
    color: red;
    font-weight: bold;
    background-color: #222;
    padding: 8px 18px;
}
#config_link {
    font-weight: bold;
    background-color: #222;
    padding: 8px 18px;
}
#screen_container {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    outline: 1px solid #555;
}
#boot_options a {
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}
#boot_options td {
    padding: 1px 7px;
}
#oses small {
    font-size: 80%;
    color: #ccc;
    padding-left: 5px;
}
#oses tr {
    cursor: pointer;
}
#oses {
    border-spacing: 0;
}
#oses tr:hover {
    background-color: #311;
}
#oses td:nth-child(1) {
    white-space: pre;
    vertical-align: top;
}
#terminal {
    max-width: 1024px;
}

/* the code below was copied from xterm.css */

.xterm {
    font-feature-settings: "liga" 0;
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm .xterm-scroll-area {
    visibility: hidden;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm {
    cursor: text;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility,
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    opacity: 0.5;
}

.xterm-underline {
    text-decoration: underline;
}
._feedbacks_ti4vg_1{
  display:flex;
}

._feedbacks_ti4vg_1 fieldset{
  transform: scale(0.75);
}

._leaderboard_ti4vg_9 {
  margin: auto 2em !important;
}
._leaderboard_ti4vg_9 > * {
  color: var(--darkTheme-third-text) !important;
}
._skillName_ti4vg_15 {
  color: rgb(5, 226, 5) !important;
  font-weight: bold !important;
  display: block !important;
  margin-bottom: 4px !important;
}
._TableBody_ti4vg_21 tr,
._TableBody_ti4vg_21 td{
  border: none !important;
}._help_paper_199ln_1{
  color:white !important;
  text-align: left;
}._login__card_dfwry_1 {
  display: flex;
  justify-content: center;
  height: 100%;
}

._center_dfwry_7{
  display: flex !important;
  justify-content: center;
}

._login__form_dfwry_12 {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  padding: 1%;
  height: 100%;
  background-color: var(--darkTheme-third);
  width: 33%;
  height: 100%;
  border-radius: 2px;
  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)
}

._login__form_dfwry_12 > *{
  margin-bottom:3% !important;
}

._MuiSvgIcon-root_dfwry_29{
  color:white;
}


._label_dfwry_34,
._input_dfwry_35 Label {
  color: var(--darkTheme-secondary-text) !important;
}

._input_dfwry_35 input {
  color: var(--darkTheme-primary-text) !important;
}

._button_login_dfwry_43 {
  margin-top:4% !important;
  background-color: rgb(0, 138, 41) !important;
}

._button_login_dfwry_43 > * {
  color: white;
}

._link_to_register_dfwry_52 {
  background-color: var(--darkTheme-primary) !important;
} 

._button_to_register_dfwry_56 {
  width: 100%;
}

._button_to_register_dfwry_56 span {
  font-weight: 700 !important;
  width: 100%;
  color: var(--darkTheme-primary-text) !important;
}
._register__card_3rn9s_1 {
  display: flex;
  justify-content: center;
  height: 100%;
}


._register__form_3rn9s_8 {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 1%;
  height: 100%;
  background-color: var(--darkTheme-third);
  width:30%;
  border-radius: 2px;
  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)
}

._register__form_3rn9s_8 > div{
  margin-bottom: 1%;
}


._label_3rn9s_26,
._input_3rn9s_27 Label {
  color: var(--darkTheme-secondary-text) !important;
}

._labelError_3rn9s_31 {
  color: red !important;
}

._buttonRegister_3rn9s_35 {
  margin-top: 3% !important;
  background-color: rgb(0, 138, 41) !important;
  color: var(--darkTheme-third-text);
  font-weight: 700 !important;
  margin-bottom: 2% !important;
}

._linkToLogin_3rn9s_43 {
  background-color: var(--darkTheme-primary) !important;
}

._buttonToLogin_3rn9s_47 {
  width: 100%;
  border-radius: 4px;
}

._buttonToLogin_3rn9s_47 span {
  font-weight: 700 !important;
  width: 100%;
}

span._bold_3rn9s_57{
  font-weight: bold;
}
._reset_password__card_4eakk_2 {
    display: flex;
    justify-content: center;
    height: 100%;
}

._reset_password__form_4eakk_8 {
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 1%;
    height: 100%;
    background-color: var(--darkTheme-third);
    width: 20%;
    height: 100%;
    border-radius: 2px;
    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)
}

._buttonReset_password_4eakk_22 {
    margin-top: 4% !important;
    background-color: rgb(0, 138, 41) !important;
    margin-bottom: 2% !important;
}

._buttonReset_password_4eakk_22 > * {
    color: white;
}

._linkToRegister_4eakk_32 {
    background-color: var(--darkTheme-primary) !important;
    border-radius: 4px;
}

._linkToLogin_4eakk_37{
    margin-bottom: 2%;
}


._buttonToRegisterLogin_4eakk_43 {
    width: 100%;
}

._buttonToRegisterLogin_4eakk_43 span {
    font-weight: 700 !important;
    width: 100%;
    color: var(--darkTheme-primary-text) !important;
}

._passwordResetRequestSuccess_4eakk_53 {
    color: green !important;
}

._passwordResetRequestFailed_4eakk_57 {
    color: red !important;
}._header_rjdpp_1{
  display: flex;
  justify-content: space-between;
}

._mainGrid_rjdpp_6{
  padding: 16px;
  display: flex;
}

._mainGrid_rjdpp_6 > div:last-child{
  margin-left:2%
}

._sequenceExerciseListCard_rjdpp_15 {
  background-color: var(--darkTheme-third) !important;
}

._sequenceDetailsPrimaryButton_rjdpp_19:disabled {
  color: grey !important;
}

._sequenceDetailsTableRow_rjdpp_23 th,
._sequenceDetailsTableRow_rjdpp_23 td {
  color: var(--darkTheme-primary-text) !important;
}

._InputMinRating_rjdpp_28 {
  color: var(--darkTheme-primary-text) !important;
  border-color: var(--darkTheme-secondary) !important;
}

._profileListDisplay_rjdpp_33 {
  text-align: left;
}

._main__container_rjdpp_37 {
  display: grid;
  grid-template: 250px auto / 50% 50%;
}
._container__available_rjdpp_41 {
  grid-area: 1 / 1 / 2 / 1;
  margin: 5px;
}

._container__profile_rjdpp_46 {
  grid-area: 1 / 2;
  margin: 5px;
  background-color: var(--darkTheme-third) !important;
}

._container__chosen_rjdpp_52 {
  grid-area: 2 / 2;
  margin: 5px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
._header_1xaqq_1{
  display:flex;
  margin-bottom: 2%;
}
._header_1xaqq_1 > *:not(:last-child) {
  width:50%;
}

._header_1xaqq_1 > *:first-child{
  display: flex;
}

._header_1xaqq_1 > *:first-child > *{
  width: 100%;
  margin-right: 4%;
}

._header_1xaqq_1 > *:last-child{
  margin-left: auto;
}._stmtPaper_16uwt_1 div, ._stmtPaper_16uwt_1 p, ._stmtPaper_16uwt_1 ._MuiTypography-root_16uwt_1, ._stmtPaper_16uwt_1 h2, ._stmtPaper_16uwt_1 ol, ._stmtPaper_16uwt_1 input{
  color:white;
}

._stmtPaper_16uwt_1{
  text-align: left;
}

/* Titre « Énoncé de l'exercice » + bouton d'export PDF sur la même ligne : le titre reste
   centré comme les autres sections, le bouton se replie dessous sur écran étroit. */
._stmtHeader_16uwt_11{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Le bouton hérite sinon du gris MUI, illisible sur le fond sombre de la page. */
._stmtPdfButton_16uwt_20{
  color: white !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

._error_16uwt_25{
  font-weight: bold;
  font-size:larger;
  color:red !important;
}

._dateHeader_16uwt_31{
  width: 100%;
  text-align: right;
  color:rgb(5, 226, 5);
}

._restartBadge_16uwt_37{
  color: rgb(240, 176, 62);
  font-size: 0.85em;
}

._scoreImprovedBadge_16uwt_42{
  margin-left: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Vue « côte à côte » (sujet à gauche / terminal à droite).

   Contrainte forte : le terminal ne doit JAMAIS être démonté/remonté en
   changeant de vue, sinon la VM v86 rebootait et l'étudiant perdrait son
   travail. L'arbre React est donc STRICTEMENT le même dans les deux vues :
   seules les classes de placement changent, la mise en page est faite en
   CSS Grid par placement explicite (l'ordre du DOM reste l'ordre "classique").

   Placement :
     col 1 : archive (r1), énoncé (r2-r4, scroll interne)
     col 2 : terminal (r1-r2), production/soumission (r3)
     pleine largeur : résultat de la correction (r5)

   La r4 est une ligne « tampon » : l'énoncé la traverse, si bien qu'un énoncé
   plus haut que le terminal y déverse son surplus au lieu de repousser le bloc
   de soumission vers le bas (align-self: start le maintient collé au terminal).
   ───────────────────────────────────────────────────────────────────────── */
._splitGrid_16uwt_64{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: auto auto auto auto auto;
  gap: 8px 24px;
  align-items: stretch;
}

._splitGrid_16uwt_64 ._secArchive_16uwt_72{
  grid-column: 1;
  grid-row: 1;
}

._splitGrid_16uwt_64 ._secStatement_16uwt_77{
  grid-column: 1;
  grid-row: 2 / span 3;
  /* min-height:0 est obligatoire : sans lui un enfant de grid refuse de
     rétrécir sous sa hauteur de contenu et overflow:auto ne scrolle pas. */
  min-height: 0;
  max-height: 68vh;
  overflow: auto;
  padding-right: 12px;
  /* Rend le fond opaque (hérité du Paper) pour que l'en-tête collant ci-dessous
     ne laisse pas défiler le texte de l'énoncé par transparence. */
  background: inherit;
}

/* L'énoncé défile dans sa colonne : son titre et le bouton PDF restent visibles. */
._splitGrid_16uwt_64 ._secStatement_16uwt_77 ._stmtHeader_16uwt_11{
  position: sticky;
  top: 0;
  z-index: 2;
  background: inherit;
  padding: 4px 0;
  justify-content: space-between;
}

._splitGrid_16uwt_64 ._secTerminal_16uwt_101{
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
}

._splitGrid_16uwt_64 ._secProduction_16uwt_107{
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  min-width: 0;
  /* La zone de soumission est collée sous le terminal : c'est tout l'intérêt
     de cette vue (plus besoin de scroller sous l'énoncé pour soumettre). */
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 8px;
}

._splitGrid_16uwt_64 ._secResults_16uwt_118{
  grid-column: 1 / -1;
  grid-row: 5;
  min-width: 0;
  overflow-x: auto;
}

/* Séparateur vertical entre les deux colonnes. */
._splitGrid_16uwt_64 ._secTerminal_16uwt_101, ._splitGrid_16uwt_64 ._secProduction_16uwt_107{
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 20px;
}

/* En vue côte à côte les titres de section sont plus discrets : on gagne de la
   hauteur, précieuse quand le terminal et l'énoncé se partagent l'écran. */
._splitGrid_16uwt_64 ._secTitle_16uwt_133{
  font-size: 1.15rem !important;
  margin-bottom: 4px !important;
}

/* Conteneur d'accueil du terminal. Sa seule raison d'être est d'occuper une
   position FIXE dans l'arbre React, identique dans les deux mises en page :
   c'est ce qui évite le démontage/remontage de la VM au changement de vue. */
._terminalHost_16uwt_141{
  min-width: 0;
}

/* Ligne d'en-tête d'une section : titre à gauche, action(s) à droite. */
._sectionHeader_16uwt_146{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* Bascule de vue, dans l'en-tête de page. */
._layoutToggle_16uwt_155{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}

._layoutToggleButton_16uwt_161{
  color: white !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Sous 1100px la grille 2 colonnes n'a plus de sens : on retombe sur une
   colonne (le terminal reste au-dessus de la soumission). */
@media (max-width: 1100px){
  ._splitGrid_16uwt_64{
    grid-template-columns: minmax(0, 1fr);
  }
  ._splitGrid_16uwt_64 ._secArchive_16uwt_72,
  ._splitGrid_16uwt_64 ._secStatement_16uwt_77,
  ._splitGrid_16uwt_64 ._secTerminal_16uwt_101,
  ._splitGrid_16uwt_64 ._secProduction_16uwt_107,
  ._splitGrid_16uwt_64 ._secResults_16uwt_118{
    grid-column: 1;
    grid-row: auto;
    max-height: none;
    border-left: none;
    padding-left: 0;
  }
}._header_1il0g_1{
  display:flex;
  margin-bottom: 2%;
}
._header_1il0g_1 > * {
  width:50%;
}

._header_1il0g_1 > *:first-child{
  display: flex;
}

._header_1il0g_1 > *:first-child > *{
  width: 100%;
  margin-right: 4%;
}

._header_1il0g_1 > *:last-child{
  justify-content: right;
}

.paper {
    margin-bottom: 30px;
    margin-top: 1% !important;
    padding: 2% !important;
    background-color: var(--darkTheme-third) !important;
}

.title-bar {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
}

.user-profile {
    display: flex;
    flex-direction: row;
    align-items: top;
    justify-content: left;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
}

.user-profile__infos {
    display: flex;
    flex-direction: column;
    justify-content: left;
    width: 100%;
    height: 100%;
    padding: 0 20px;
}

.user-profile__username {
    display: flex;
    flex-direction: column !important;
    align-items: start !important;
    justify-content: left !important;
    text-align: left !important;
    padding-right: 30px;
    margin-bottom: 20px;
    width: 100%;
}
.user-profile__username > * {
    width: 100%;
    padding-right: 20px;
}
.user-profile__username > p {
    /* Error message for wrong username */
    margin: 0;
    margin-top: 10px;
    color: #ff0000;
}

.user-profile__name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    width: 100%;
    padding: 0 20px;
}
.user-profile__name > * {
    padding-right: .3em;
    color: var(--darkTheme-secondary-text);
}

.user-profile__infos__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    width: 100%;
    padding: 0 20px;
}
.user-profile__infos__item > *, .user-profile__username > * {
    color: var(--darkTheme-secondary-text);
    text-align: left;
}

.user-profile__username__input {
    width: 90%;
}

.user-profile__bio {
    margin-top: 20px;
    padding-right: 30px;
    width: 100%;
}

.user-profile__bio__input {
    width: 90%;
}
.user-profile__bio__input > * > * { /* input look the same as text */
    scrollbar-color: #6969dd #e0e0e0 !important;
  scrollbar-width: thin !important;
}

.user-profile__other {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    width: fit-content;
}

.user-profile__avatar > img {
    width: 150px;
    border-radius: 50%;
}

.user-profile__edit {
    margin-top: 20px;
}
.user-profile__edit > label { /* label look like any other button on the site */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 10em;
    height: fit-content;
    padding: 10px 0;
    border-radius: 5px;
    background-color: #05E205;
    color: var(--darkTheme-third-text);
    font-size: 1em;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: none;
    transition: all 0.2s ease-in-out;
}

.user-profile__thanks {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}



#edit-button {
    width: 10em;
    font-size: 1em;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
}

.user-profile__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}
.user-profile__buttons > * {
    margin: 0 20px !important;
}.paper {
    margin-bottom: 30px;
    margin-top: 1% !important;
    padding: 2% !important;
    background-color: var(--darkTheme-third) !important;
}

.display-skills-switch {
    align-items: end !important;
    margin-right: 2em !important;

}
.display-skills-switch > span {
    font-size: 1.5em !important;
    color: var(--darkTheme-secondary-text) !important;
}
.title {
    text-align: left;
    color: var(--darkTheme-secondary-text);
}

.back-icon {
    color: #05E205;
    font-size: 2em !important;
    font-weight: bold;
    margin-right: 1em;
    margin-bottom: 4px;
}

.usernameCell > *, .usernameCell > * > * {
    vertical-align: bottom !important;
    margin-right: 10px !important;
    color: inherit !important;
}
.usernameCell > * > * {
    color: inherit !important;
}

.tableHead > tr > th {
    color: var(--darkTheme-secondary-text) !important;
    font-weight: bold !important;
}

.tableBody > tr > td {
    color: var(--darkTheme-secondary-text);
    background-color: inhertit !important;
}

.spacer {
    width: 100%;
    height: 2em;
}

.currentUserRow {
    background-color: var(--darkTheme-secondary) !important;
    box-shadow: 0 0 5px 5px #05e205a7 !important;
}
.currentUserRow > * {
    color: #05e205e8 !important;
    font-weight: bold !important;
}

.rank1 > * {
    color: #FFD700 !important;
    font-weight: bold !important;
}

.rank2 > * {
    color: #C0C0C0 !important;
    font-weight: bold !important;
}

.rank3 > * {
    color: #CD7F32 !important;
    font-weight: bold !important;
}._container_1ahrc_1{
  margin-top: 2%;
  margin-bottom: 4%;
}

._paper_1ahrc_6{
  padding: 3%;
  margin-top: 2%;
}

._actions_1ahrc_11{
  margin-top: 2%;
  display: flex;
  justify-content: flex-end;
}

._testRow_1ahrc_17{
  margin-top: 1%;
  margin-bottom: 1%;
}

._promptsTitle_1ahrc_22{
  margin-top: 3%;
  margin-bottom: 1%;
}

._contextBlock_1ahrc_27{
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  padding: 2%;
  margin-top: 2%;
  display: flex;
  flex-direction: column;
}

._varChips_1ahrc_36{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 1%;
}

._varChip_1ahrc_36{
  cursor: pointer;
}

._previewRow_1ahrc_48{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2%;
}

._previewOutput_1ahrc_56{
  margin-top: 1%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._previewPre_1ahrc_63{
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(128, 128, 128, 0.08);
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  padding: 8px;
  margin: 0;
  max-height: 320px;
  overflow: auto;
}
.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.react-grid-item img {
  pointer-events: none;
  user-select: none;
}
.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
.react-resizable {
  position: relative;
}
.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
  background-position: bottom right;
  padding: 0 3px 3px 0;
}
.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-resizable-handle-w,
.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-resizable-handle-n,
.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}/* ------------------------------------------------------------------ */
/*  Dashboard — shared styling (student / teacher / admin)             */
/*  Reuses the app dark theme tokens defined in src/index.css          */
/* ------------------------------------------------------------------ */

.dashboard {
  padding-bottom: 3rem;
}

.dashboard__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 1.5rem 0 0.25rem;
}

.dashboard__title {
  color: var(--darkTheme-secondary-text) !important;
  text-align: left;
  margin: 0 !important;
  font-weight: 600 !important;
}

.dashboard__subtitle {
  color: #9e9e9e !important;
  text-align: left;
}

.dashboard__section-title {
  color: var(--darkTheme-secondary-text) !important;
  text-align: left;
  margin: 2rem 0 0.75rem !important;
  font-weight: 500 !important;
  border-left: 4px solid #05e205;
  padding-left: 0.6rem;
}

/* ------------------------------- KPI cards ------------------------- */

.stat-card {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem !important;
  background-color: var(--darkTheme-secondary) !important;
  border: 1px solid #333 !important;
  border-radius: 12px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  border-color: #05e205 !important;
  box-shadow: 0 6px 18px rgba(5, 226, 5, 0.15) !important;
}

.stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(5, 226, 5, 0.12);
  color: #05e205;
  flex-shrink: 0;
}

.stat-card__icon svg {
  font-size: 1.7rem;
}

.stat-card__body {
  text-align: left;
  min-width: 0;
}

.stat-card__value {
  color: var(--darkTheme-primary-text) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

.stat-card__label {
  color: #9e9e9e !important;
  font-size: 0.82rem !important;
  line-height: 1.2 !important;
}

.stat-card__hint {
  color: #05e205 !important;
  font-size: 0.72rem !important;
  margin-top: 2px !important;
}

/* ------------------------------- Panels --------------------------- */

.dashboard__panel {
  padding: 1.25rem !important;
  background-color: var(--darkTheme-secondary) !important;
  border: 1px solid #333 !important;
  border-radius: 12px !important;
  height: 100%;
  box-sizing: border-box;
}

.dashboard__panel-title {
  color: var(--darkTheme-secondary-text) !important;
  text-align: left;
  margin-bottom: 1rem !important;
  font-weight: 500 !important;
}

/* Fixed-height wrapper for chart.js canvases (needs maintainAspectRatio:false).
   Prevents the canvas from mis-sizing on mount (e.g. inside a tab) and overlapping
   neighbouring content. */
.dashboard__chart {
  position: relative;
  height: 300px;
  width: 100%;
}

/* ------------------------------- Tables --------------------------- */

.dashboard-table th {
  color: #9e9e9e !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #3a3a3a !important;
}

/* stickyHeader (leaderboard scroll) applique par défaut un fond blanc du thème :
   on le force à la couleur du panneau pour rester lisible sur fond sombre. */
.dashboard-table .MuiTableCell-stickyHeader {
  background-color: var(--darkTheme-secondary) !important;
}

.dashboard-table td {
  color: var(--darkTheme-secondary-text) !important;
  border-bottom: 1px solid #2c2c2c !important;
}

.dashboard-table tr:last-child td {
  border-bottom: none !important;
}

/* En-têtes triables : la flèche de tri MUI est invisible par défaut (opacity 0), donc rien
   ne signale qu'une colonne se trie. On la montre en permanence, discrète, et pleine +
   verte au survol comme à l'état actif — sinon, sur fond sombre, personne ne devine le tri. */
.dashboard-table .MuiTableSortLabel-icon {
  opacity: 0.4 !important;
  color: #9e9e9e !important;
}
.dashboard-table .MuiTableSortLabel-root:hover,
.dashboard-table .MuiTableSortLabel-root.Mui-active {
  color: #05e205 !important;
}
.dashboard-table .MuiTableSortLabel-root:hover .MuiTableSortLabel-icon,
.dashboard-table .MuiTableSortLabel-root.Mui-active .MuiTableSortLabel-icon {
  opacity: 1 !important;
  color: #05e205 !important;
}

/* ------------------- Leaderboard reveal (privacy) ----------------- */

/* Titre + œil sur une seule ligne */
.dashboard__panel-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 0.5rem;
}

.dashboard__rank-inline {
  color: #05e205;
}

/* Récap "ma position / mon score" affiché une fois révélé */
.dashboard__rank-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--darkTheme-secondary-text);
  font-size: 0.9rem;
}
.dashboard__rank-summary strong {
  color: #05e205;
}

/* Une fois révélé, le classement devient une zone scrollable (tout le monde) */
.dashboard__scroll {
  max-height: 300px;
  overflow-y: auto;
}

/* Highlight the current user's row in the mini-leaderboard */
.dashboard-table tr.current-user td {
  background-color: rgba(5, 226, 5, 0.09) !important;
  color: #05e205 !important;
  font-weight: 700 !important;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 6px;
  background: #333;
  font-weight: 700;
  font-size: 0.8rem;
}

.rank-badge.rank-1 { background: #ffd70022; color: #ffd700; }
.rank-badge.rank-2 { background: #c0c0c022; color: #c0c0c0; }
.rank-badge.rank-3 { background: #cd7f3222; color: #cd7f32; }

/* Role chips (admin table) */
.role-chip {
  text-transform: capitalize;
  font-size: 0.72rem !important;
  height: 22px !important;
}

.dashboard__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}

/* ------------------------- Machine load gauges --------------------- */

.system-load__gauge {
  text-align: left;
}

.system-load__label {
  color: #9e9e9e !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.system-load__value {
  color: var(--darkTheme-primary-text) !important;
  font-weight: 700 !important;
}

.system-load__bar {
  height: 8px !important;
  border-radius: 4px !important;
  background-color: #333 !important;
}

.system-load__detail {
  color: #7e7e7e !important;
  font-size: 0.72rem !important;
  margin-top: 4px !important;
}

/* --------------------- Range selector + pagination ----------------- */

.dashboard__range .MuiToggleButton-root {
  color: #9e9e9e;
  border-color: #444;
  text-transform: none;
  padding: 2px 12px;
}

.dashboard__range .MuiToggleButton-root.Mui-selected {
  color: #05e205;
  background-color: rgba(5, 226, 5, 0.12);
  border-color: #05e205;
}

.dashboard__pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.dashboard__pager-label {
  color: #9e9e9e !important;
  font-size: 0.8rem !important;
}

.dashboard__pager .MuiIconButton-root {
  color: #9e9e9e;
}

.dashboard__pager .MuiIconButton-root.Mui-disabled {
  color: #4a4a4a;
}

/* A section whose content is not settled yet (e.g. AI usage). */
.dashboard__notice {
  background-color: rgba(100, 181, 246, 0.08) !important;
  border: 1px solid #2f5673 !important;
  color: #9fc7e8 !important;
}

/* --------------------- "+1 I used this dashboard" ------------------ */

.dashboard-vote {
  border-color: #444 !important;
  color: #9e9e9e !important;
  font-weight: 600 !important;
}

.dashboard-vote .MuiChip-icon {
  color: inherit !important;
}

.dashboard-vote:hover {
  border-color: #05e205 !important;
  color: #05e205 !important;
  background-color: rgba(5, 226, 5, 0.08) !important;
}

.dashboard-vote--on {
  background-color: rgba(5, 226, 5, 0.15) !important;
  border: 1px solid #05e205 !important;
  color: #05e205 !important;
}

/* ------------------------------------------------------------------ */
/*            Tableau de bord configurable + bascule de vue           */
/* ------------------------------------------------------------------ */

/* Bascule étudiant/enseignant : posée au-dessus du titre, alignée à droite
   pour ne pas concurrencer le titre du tableau de bord. */
.dashboard__view-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1.5rem;
}

/* Sélecteur "tableau de bord de <étudiant>" — visible uniquement en vue étudiant, quand
   l'enseignant/admin choisit d'usurper un compte plutôt que de voir le sien. */
.dashboard__impersonate {
  width: 280px;
}
.dashboard__impersonate .MuiInputLabel-root,
.dashboard__impersonate .MuiOutlinedInput-notchedOutline {
  color: #9e9e9e;
  border-color: #444 !important;
}
.dashboard__impersonate .MuiInputBase-input,
.dashboard__impersonate .MuiAutocomplete-clearIndicator,
.dashboard__impersonate .MuiAutocomplete-popupIndicator {
  color: var(--darkTheme-secondary-text) !important;
}
.dashboard__impersonate .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.dashboard__impersonate .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #05e205 !important;
}

/* Rappel discret mais net, sous le titre : on ne regarde JAMAIS ses propres données par
   erreur en pensant regarder celles d'un·e étudiant·e (et inversement). */
.dashboard__viewing-as {
  display: inline-block;
  margin-top: 0.35rem !important;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(5, 226, 5, 0.12);
  color: #05e205 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}

/* MUI colore le bouton sélectionné avec la couleur "primary" du thème — qui vaut ici
   #303030, un gris sombre. Sur un fond sombre, ça donnait du texte illisible, sélectionné
   comme non sélectionné. On force donc les deux états. */
.dashboard__view-switch .MuiToggleButton-root {
  color: #9e9e9e !important;
  border-color: #444 !important;
  padding: 4px 14px !important;
}
.dashboard__view-switch .MuiToggleButton-root:hover {
  color: var(--darkTheme-secondary-text) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
}
/* Le bouton actif : vert de la plateforme sur un fond qui le détache nettement. */
.dashboard__view-switch .MuiToggleButton-root.Mui-selected {
  color: #05e205 !important;
  background-color: rgba(5, 226, 5, 0.12) !important;
  border-color: rgba(5, 226, 5, 0.5) !important;
}
.dashboard__view-switch .MuiToggleButton-root.Mui-selected:hover {
  background-color: rgba(5, 226, 5, 0.2) !important;
}

.dashboard__header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Les panneaux d'une même rangée ont des contenus de hauteurs différentes
   (un graphique, un tableau) : sans hauteur commune la grille se déchire. */
.dashboard__widget {
  display: flex;
  flex-direction: column;
}

.dashboard__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem !important;
  text-align: center;
}

/* --- Dialogue de configuration --- */

/* Pousse les contrôles à droite quelle que soit la longueur du nom. */

/* Le composeur : type → axe → variable(s). Les trois étapes se lisent de haut en bas. */

/* La recherche : elle passe AVANT les étapes, parce qu'à ~90 croisements c'est le chemin
   le plus court dès qu'on sait ce qu'on cherche. */
.tdc-search {
  margin-bottom: 0.25rem;
}

/* La liste défile dans le dialogue au lieu de l'étirer : une recherche large peut
   remonter des dizaines de résultats, et les boutons du bas doivent rester atteignables. */
.tdc-results {
  max-height: 46vh;
  overflow-y: auto;
  margin: 0 -0.25rem;
}

.tdc-result {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

.tdc-result:hover {
  background: rgba(255, 255, 255, 0.04);
}

.tdc-result__icon {
  display: inline-flex;
  opacity: 0.55;
  flex-shrink: 0;
}

.tdc-result__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* L'axe est une précision, pas le sujet : il se lit après le nom, en retrait. */
.tdc-result__axis {
  font-size: 0.75rem;
  opacity: 0.5;
  flex-shrink: 0;
  padding-left: 0.5rem;
}

.tdc-step {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
  margin: 1rem 0 0.4rem;
}

.tdc-kinds {
  flex-wrap: wrap;
}
.tdc-kind {
  gap: 0.45rem;
  text-transform: none;
  font-size: 0.85rem;
}
/* Le compteur déborde du bouton s'il colle à l'icône : on lui laisse la place. */
.tdc-kind__badge {
  margin-right: 0.35rem;
}

.tdc-axes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tdc-axis {
  cursor: pointer;
}

.tdc-group__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}
.tdc-check {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
}
/* Le tableau lui-même, au-dessus de ses variables : c'est lui qu'on pose ou qu'on retire. */
.tdc-check--master {
  font-weight: 600;
  margin-top: 0.35rem;
}

.tdc-hint {
  font-size: 0.75rem;
  opacity: 0.55;
  margin-top: 0.35rem;
}

/* ------------------------------------------------------------------ */
/*                    Éditeur de grille (drag & drop)                 */
/* ------------------------------------------------------------------ */

/* Chaque case porte son widget sur toute sa hauteur : sans ça un graphique
   redimensionné ne suivrait pas sa case. */
.dashboard__cell {
  position: relative;
  overflow: hidden;
}
.dashboard__cell > .dashboard__panel,
.dashboard__cell > .stat-card {
  height: 100%;
}

/* Un tableau plus haut que sa case défile dedans, il ne déborde pas. */
.dashboard__widget-scroll {
  overflow: auto;
  height: 100%;
}

.dashboard__edit-hint {
  margin-bottom: 0.75rem !important;
}

/* --- Mode édition --- */

/* La grille se lit comme une grille : chaque case est cernée en pointillés. */
.dashboard__grid--editing .dashboard__cell {
  outline: 1px dashed #4a4a4a;
  outline-offset: 2px;
  border-radius: 12px;
}
.dashboard__grid--editing .dashboard__cell:hover {
  outline-color: var(--darkTheme-primary, #05e205);
}

/* Barre d'outils du widget, au-dessus du contenu.
   Pas de fond par défaut : hors édition elle ne contient qu'un bouton PDF invisible tant
   qu'on ne survole pas, et un fond permanent dessinerait un carré noir sur chaque tuile.
   Le fond n'apparaît donc qu'avec son contenu. */
.dashboard__widget-edit {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
  padding: 1px;
}
.dashboard__grid--editing .dashboard__widget-edit,
.dashboard__grid--selecting .dashboard__widget-edit,
.dashboard__cell:hover .dashboard__widget-edit,
.dashboard__stack-item:hover .dashboard__widget-edit {
  background: rgba(0, 0, 0, 0.55);
}
.dashboard__drag-handle {
  display: inline-flex;
  padding: 4px;
  color: #bdbdbd;
  cursor: grab;
}
.dashboard__drag-handle:active {
  cursor: grabbing;
}
.dashboard__widget-remove {
  color: #ef5350 !important;
}

/* En édition ou en sélection, le contenu ne doit pas capter la souris : sinon le clic sur
   une ligne de tableau ouvrirait un détail au lieu de laisser passer le glisser (édition) ou
   de cocher le widget (sélection). */
.dashboard__grid--editing .dashboard__cell > .dashboard__panel,
.dashboard__grid--editing .dashboard__cell > .stat-card,
.dashboard__grid--selecting .dashboard__cell > .dashboard__panel,
.dashboard__grid--selecting .dashboard__cell > .stat-card {
  pointer-events: none;
  user-select: none;
}
.dashboard__grid--editing .dashboard__widget-edit,
.dashboard__grid--selecting .dashboard__widget-edit {
  pointer-events: auto;
}

/* L'ombre portée de react-grid-layout : là où le widget va tomber. */
.react-grid-item.react-grid-placeholder {
  background: var(--darkTheme-primary, #05e205) !important;
  opacity: 0.15 !important;
  border-radius: 12px;
}
.react-grid-item.resizing,
.react-grid-item.react-draggable-dragging {
  z-index: 5;
}
/* La poignée par défaut est une image de fond invisible sur fond sombre. */
.dashboard__grid--editing .react-resizable-handle::after {
  border-right-color: #9e9e9e;
  border-bottom-color: #9e9e9e;
}

/* --- Repli sous 1200px : pas de grille, on empile --- */
.dashboard__stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dashboard__stack-item {
  position: relative;
  min-height: 120px;
}

/* --- Export --- */

/* Hors édition/sélection, les boutons d'export d'un widget (PDF, image, CSV) n'apparaissent
   qu'au survol : des icônes permanentes sur chaque tuile feraient du bruit sur toute la page. */
.dashboard__widget-action {
  opacity: 0;
  transition: opacity 0.15s;
  color: #9e9e9e !important;
}
.dashboard__cell:hover .dashboard__widget-action,
.dashboard__stack-item:hover .dashboard__widget-action,
.dashboard__widget-action:focus-visible {
  opacity: 1;
}

/* La barre d'outils ne doit pas exister visuellement quand elle est vide. */
.dashboard__widget-edit:empty {
  display: none;
}

/* html2canvas capture ce conteneur : sans fond explicite, la capture sortirait
   transparente puis noire une fois aplatie dans le PDF. */
.dashboard__board {
  background-color: transparent;
}

/* --- Export PDF imprimable ---
   Basculée par `dashboardExport.ts` (capturePrintable) juste le temps de la capture,
   jamais visible à l'écran. Le thème de l'appli est sombre : sans ça, un PDF sortirait
   avec du texte presque blanc sur un fond presque noir — illisible sur papier.

   Deux leviers : (1) redéfinir les variables --darkTheme-* fait basculer d'un coup tout ce
   qui les utilise déjà (panneaux, texte des tableaux) sans rien dupliquer ; (2) le texte
   MUI (valeurs des tuiles, légendes, libellés) ne passe PAS par ces variables, donc on le
   force en sombre PARTOUT — sauf les puces (Chip) et le podium (rank-badge), qui ont leur
   PROPRE couple fond/texte contrasté : les forcer casserait LEUR contraste, pas le nôtre. */
.dashboard--print {
  --darkTheme-primary: #ffffff;
  --darkTheme-secondary: #ffffff;
  --darkTheme-third: #f2f2f2;
  --darkTheme-primary-text: #1a1a1a;
  --darkTheme-secondary-text: #333333;
  --darkTheme-icons-primary: #1a1a1a;
  --darkTheme-icons-secondary: #333333;
  --darkTheme-border-primary: #dddddd;
  --darkTheme-border-secondary: #cccccc;
  --darkTheme-navbar: #f2f2f2;
}
.dashboard--print,
.dashboard--print *:not(.MuiChip-root):not(.MuiChip-root *):not(.rank-badge):not(.rank-badge *) {
  color: #1a1a1a !important;
}
.dashboard--print .dashboard__panel {
  border-color: #dddddd !important;
}
.dashboard--print .dashboard-table th {
  color: #555555 !important;
  border-bottom-color: #dddddd !important;
}
.dashboard--print .dashboard-table td {
  border-bottom-color: #eeeeee !important;
}
.dashboard--print .dashboard-table tr.current-user td {
  color: #0a7a0a !important;
}
.dashboard--print .rank-badge {
  background: #eeeeee !important;
  color: #1a1a1a !important;
}
.dashboard--print .rank-badge.rank-1 { background: #fff3c4 !important; color: #8a6d00 !important; }
.dashboard--print .rank-badge.rank-2 { background: #e7ebee !important; color: #55606b !important; }
.dashboard--print .rank-badge.rank-3 { background: #f6e0cf !important; color: #8a5322 !important; }
._footer_wrik0_1{
  padding:1%;
  background-color: var(--darkTheme-secondary);
  margin-top:auto;
}

._footer_wrik0_1 > div{
  padding-top:1%;
  width:30%;
  margin:auto;
}

._footer_wrik0_1 > div > div{
  display:flex;
  justify-content: space-between;
}

._footer_wrik0_1 a{
  min-width:20%;
  font-weight: bold;
  cursor: pointer;
}

._footer_wrik0_1 a:hover {
  color:green;
}

._flags_wrik0_28 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

._flags_wrik0_28 > *{
  margin-left:2%;
  margin-right:2%;
}


._flag_wrik0_28 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  width: 25px;
  border-radius: 5px;
}

._flag_wrik0_28:hover {
  transform: scale(1.05, 1.05);
  transition-duration: 0.2s;
}

._flag_wrik0_28:active {
  transform: scale(1, 1);
}.hc-layer{
  --hc-panel:#171917; --hc-bg:#0d0f0d; --hc-raised:#20241f; --hc-raised2:#2a2f28;
  --hc-border:#2f332f; --hc-border-strong:#3f453e;
  --hc-text:#e8ebe8; --hc-dim:#9aa39a; --hc-faint:#6c746b;
  --hc-green:#05e205; --hc-green-soft:rgba(5,226,5,.12); --hc-green-line:rgba(5,226,5,.42);
  --hc-cyan:#5ec8f0; --hc-cyan-soft:rgba(94,200,240,.12);
  --hc-amber:#f0b03e; --hc-red:#e2544a;
  --hc-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --hc-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-family:var(--hc-sans);
  /* .App impose text-align:center (héritage CRA) : sans ça tout le chat — bulles, listes,
     blocs de code — s'affiche centré. Les rares éléments centrés (.hc-sys) le redéclarent. */
  text-align:left;
}
.hc-layer *{box-sizing:border-box}

/* ------- rendu Markdown des réponses de l'assistant IA (cf. markdownLite.tsx) ------- */
.hc-md-p{margin:0 0 6px}
.hc-md-p:last-child{margin-bottom:0}
.hc-md-list{margin:0 0 6px;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.hc-md-list:last-child{margin-bottom:0}
.hc-md-code{font-family:var(--hc-mono);font-size:11px;background:var(--hc-raised2);
  border:1px solid var(--hc-border);border-radius:4px;padding:0 4px;word-break:break-word}
.hc-md-pre{font-family:var(--hc-mono);font-size:11px;line-height:1.45;background:var(--hc-bg);
  border:1px solid var(--hc-border-strong);border-radius:8px;padding:8px 9px;margin:0 0 6px;
  overflow-x:auto;white-space:pre;color:var(--hc-text);max-width:100%}
.hc-md-pre:last-child{margin-bottom:0}

/* ------- bottom-left cluster (history + token) ------- */
.hc-dock{position:fixed;right:18px;bottom:18px;z-index:1250;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.hc-mini{width:38px;height:38px;border-radius:50%;background:var(--hc-panel);border:1px solid var(--hc-border-strong);
  color:var(--hc-dim);display:grid;place-items:center;cursor:pointer;transition:.15s}
.hc-mini:hover{color:var(--hc-green);border-color:var(--hc-green-line)}
.hc-fab-row{display:flex;flex-direction:row-reverse;align-items:center;gap:11px}
.hc-fab{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;color:#04140a;background:var(--hc-green);position:relative}
.hc-fab.armed{animation:hc-pulse 2.2s infinite}
.hc-fab.teacher{background:var(--hc-cyan);color:#062230}
.hc-fab.locked{background:var(--hc-raised);color:var(--hc-faint);cursor:not-allowed;box-shadow:none}
.hc-fab.locked svg{opacity:.55}
.hc-fab-countdown{position:absolute;left:50%;top:-20px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--hc-mono);font-size:10.5px;color:var(--hc-faint);background:var(--hc-panel);
  border:1px solid var(--hc-border-strong);border-radius:999px;padding:1px 7px}
@keyframes hc-pulse{0%{box-shadow:0 0 0 0 rgba(5,226,5,.45)}70%{box-shadow:0 0 0 15px rgba(5,226,5,0)}100%{box-shadow:0 0 0 0 rgba(5,226,5,0)}}
.hc-bubble{background:var(--hc-raised);border:1px solid var(--hc-border-strong);border-radius:10px;padding:9px 12px;max-width:210px;font-size:12.5px;line-height:1.45;color:var(--hc-text)}
.hc-bubble b{color:var(--hc-green);font-weight:500}
.hc-count{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--hc-red);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;border:2px solid var(--hc-bg)}

/* ------- shared panel shell ------- */
.hc-panel{background:var(--hc-panel);border:1px solid var(--hc-border-strong);border-radius:12px;overflow:hidden;box-shadow:0 26px 60px -28px #000;display:flex;flex-direction:column}
.hc-head{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--hc-border);background:#0b0c0b}
.hc-head .t{font-size:13.5px;font-weight:500;color:var(--hc-text)}
.hc-head .s{font-family:var(--hc-mono);font-size:10.5px;color:var(--hc-faint)}
.hc-head .push{margin-left:auto}
.hc-icobtn{background:none;border:none;color:var(--hc-faint);cursor:pointer;padding:4px;border-radius:6px;display:grid;place-items:center;line-height:0}
.hc-icobtn:hover{color:var(--hc-text);background:var(--hc-raised)}
.hc-exochip{display:inline-flex;align-items:center;gap:5px;font-family:var(--hc-mono);font-size:10px;color:var(--hc-green);background:var(--hc-green-soft);border:1px solid var(--hc-green-line);border-radius:999px;padding:2px 8px;white-space:nowrap}
.hc-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--hc-mono);font-size:12px;font-weight:600;flex:none;position:relative;background:var(--hc-cyan-soft);color:var(--hc-cyan)}
.hc-av.teacher{background:var(--hc-green-soft);color:var(--hc-green)}
.hc-av .st{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--hc-panel)}
.hc-st-free{background:var(--hc-green)}.hc-st-busy{background:var(--hc-faint)}
.hc-rolebadge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;background:var(--hc-panel);border:1px solid var(--hc-green-line)}
.hc-rolebadge svg{width:10px;height:10px;color:var(--hc-green)}

/* ------- peer picker (bottom-left, above token) ------- */
.hc-picker{position:fixed;right:18px;bottom:84px;z-index:1260;width:320px;max-width:calc(100vw - 40px)}
.hc-btnrow{display:flex;align-items:center;gap:8px;padding:10px 13px 0}
.hc-list{list-style:none;margin:8px 0;padding:0 8px 6px;max-height:240px;overflow:auto}
.hc-peer{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:9px;cursor:pointer;border:1px solid transparent}
.hc-peer:hover{background:var(--hc-raised)}
.hc-peer.sel{background:var(--hc-green-soft);border-color:var(--hc-green-line)}
.hc-peer.off{opacity:.5;cursor:not-allowed}
.hc-peer .nm{font-size:13px;font-weight:500;color:var(--hc-text);display:flex;align-items:center;gap:6px}
.hc-peer .meta{font-family:var(--hc-mono);font-size:10px;color:var(--hc-dim);margin-top:1px}
.hc-tbadge{font-family:var(--hc-mono);font-size:9px;letter-spacing:.04em;color:var(--hc-green);background:var(--hc-green-soft);border:1px solid var(--hc-green-line);border-radius:999px;padding:1px 6px}
.hc-sbadge{font-family:var(--hc-mono);font-size:9px;letter-spacing:.04em;color:var(--hc-cyan);background:var(--hc-cyan-soft);border:1px solid var(--hc-cyan-soft);border-radius:999px;padding:1px 6px}
.hc-hist{margin-left:auto;text-align:right;font-family:var(--hc-mono);font-size:10px;flex:none;line-height:1.35}
.hc-hist .n{color:var(--hc-cyan)}.hc-hist .z{color:var(--hc-faint)}
.hc-foot{padding:10px 13px;border-top:1px solid var(--hc-border);display:flex;flex-direction:column;gap:10px;background:#0b0c0b}
.hc-toggle{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--hc-dim);cursor:pointer;user-select:none}
.hc-sw{width:34px;height:19px;border-radius:999px;background:var(--hc-raised2);position:relative;transition:.15s;flex:none}
.hc-sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--hc-faint);transition:.15s}
.hc-toggle.on .hc-sw{background:var(--hc-green-soft);box-shadow:inset 0 0 0 1px var(--hc-green-line)}
.hc-toggle.on .hc-sw::after{left:17px;background:var(--hc-green)}
.hc-toggle.on{color:var(--hc-text)}
.hc-cta{width:100%;border:none;border-radius:8px;padding:10px;font-size:13px;font-weight:500;font-family:var(--hc-sans);cursor:pointer;background:var(--hc-green);color:#04140a;display:flex;align-items:center;justify-content:center;gap:8px}
.hc-cta:disabled{opacity:.45;cursor:not-allowed}

/* ------- right chat rail ------- */
.hc-rail{position:fixed;right:0;top:96px;z-index:1240;display:flex;align-items:flex-start}
.hc-tab{background:var(--hc-panel);border:1px solid var(--hc-border-strong);border-right:none;border-radius:10px 0 0 10px;
  padding:12px 9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--hc-text);box-shadow:-14px 0 40px -30px #000}
.hc-tab .lab{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--hc-mono);font-size:11px;letter-spacing:.08em;color:var(--hc-dim)}
.hc-tab .cbadge{background:var(--hc-green);color:#04140a;font-size:11px;font-weight:600;border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center}
.hc-chat{width:308px;max-width:calc(100vw - 24px);height:min(70vh,540px);border-radius:12px 0 0 12px;border-right:none}
.hc-tabs{display:flex;gap:4px;padding:6px 8px 0;background:#0b0c0b;overflow:auto}
.hc-tabs button{font-family:var(--hc-mono);font-size:10.5px;color:var(--hc-dim);background:var(--hc-raised);border:1px solid var(--hc-border);border-bottom:none;border-radius:7px 7px 0 0;padding:5px 9px;cursor:pointer;white-space:nowrap}
.hc-tabs button.on{color:var(--hc-green);background:var(--hc-panel);border-color:var(--hc-border-strong)}
.hc-timer{font-family:var(--hc-mono);font-size:10.5px;color:var(--hc-amber);display:flex;align-items:center;gap:4px}
.hc-timer.low{color:var(--hc-red)}

.hc-share{margin:9px 11px 0;border:1px solid var(--hc-cyan-soft);border-radius:10px;overflow:hidden;background:#070a0c}
.hc-share .h{display:flex;align-items:center;gap:7px;padding:6px 10px;background:var(--hc-cyan-soft);font-family:var(--hc-mono);font-size:10px;color:var(--hc-cyan);letter-spacing:.03em}
.hc-share .h .lab{display:flex;align-items:center;gap:7px}
.hc-share .h .live{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--hc-cyan);animation:hc-blink 1.4s infinite}
.hc-share .h .hc-icobtn{color:var(--hc-cyan)}
.hc-share .h .hc-icobtn:hover{color:var(--hc-text);background:rgba(255,255,255,.08)}
@keyframes hc-blink{50%{opacity:.25}}
.hc-share pre{margin:0;padding:8px 11px;font-family:var(--hc-mono);font-size:10.5px;line-height:1.65;color:#bfe6f6;white-space:pre-wrap;text-align:left;max-height:160px;overflow-y:auto}
.hc-share pre.expanded{max-height:340px}

/* Partage de session : proposer (initiateur) → accepter (aidant) */
.hc-sharehint{display:flex;align-items:flex-start;gap:6px;font-family:var(--hc-mono);font-size:10px;line-height:1.5;color:var(--hc-faint)}
.hc-sharewait{margin:8px 11px 0;display:flex;align-items:center;gap:6px;font-family:var(--hc-mono);font-size:10px;color:var(--hc-amber);background:rgba(240,176,62,.08);border:1px solid rgba(240,176,62,.32);border-radius:8px;padding:6px 9px}
.hc-shareoffer{margin:8px 11px 0;border:1px solid var(--hc-cyan-soft);border-radius:10px;background:rgba(9,10,12,.6);padding:8px 10px;display:flex;flex-direction:column;gap:7px}
.hc-shareoffer>span{display:flex;align-items:center;gap:6px;font-family:var(--hc-mono);font-size:10.5px;color:var(--hc-cyan)}
.hc-shareoffer .acts{display:flex;gap:6px}
.hc-shareoffer .acts button{flex:1;font-size:11.5px;font-family:var(--hc-sans);border-radius:7px;padding:6px;cursor:pointer;border:1px solid var(--hc-border-strong);background:transparent;color:var(--hc-dim)}
.hc-shareoffer .acts button.ok{color:var(--hc-green);border-color:var(--hc-green-line);background:var(--hc-green-soft)}

.hc-msgs{flex:1;overflow:auto;padding:11px;display:flex;flex-direction:column;gap:8px}
.hc-m{max-width:82%;padding:7px 11px;border-radius:12px;font-size:12.5px;line-height:1.5}
.hc-m.them{align-self:flex-start;background:var(--hc-raised);border:1px solid var(--hc-border);border-bottom-left-radius:4px;color:var(--hc-text)}
.hc-m.me{align-self:flex-end;background:var(--hc-green-soft);border:1px solid var(--hc-green-line);color:#daffda;border-bottom-right-radius:4px}
.hc-m .who{font-family:var(--hc-mono);font-size:9px;color:var(--hc-faint);margin-bottom:2px}
.hc-m.me .who{color:var(--hc-green);text-align:right}
.hc-sys{align-self:center;font-family:var(--hc-mono);font-size:10px;color:var(--hc-faint);text-align:center}
.hc-composer{position:relative}
.hc-in{display:flex;align-items:center;gap:8px;padding:9px 11px;border-top:1px solid var(--hc-border);background:#0b0c0b}
.hc-in input{all:unset;box-sizing:border-box;flex:1;height:34px;line-height:34px;background:var(--hc-bg);border:1px solid var(--hc-border);border-radius:8px;padding:0 10px;font-size:12.5px;color:var(--hc-text)}
.hc-in input:disabled{opacity:.5;cursor:not-allowed}
.hc-send{width:34px;height:34px;border-radius:8px;border:none;background:var(--hc-green);color:#04140a;display:grid;place-items:center;cursor:pointer;flex:none}
.hc-send:disabled{opacity:.45;cursor:not-allowed}
.hc-emoji-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--hc-border);background:transparent;color:var(--hc-dim);display:grid;place-items:center;cursor:pointer;flex:none}
.hc-emoji-btn:hover{color:var(--hc-text);border-color:var(--hc-border-strong)}
.hc-emoji-btn:disabled{opacity:.4;cursor:not-allowed}
.hc-emoji-suggest{position:absolute;left:11px;right:11px;bottom:100%;margin-bottom:6px;background:var(--hc-panel);border:1px solid var(--hc-border-strong);border-radius:10px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.35);max-height:220px;overflow-y:auto}
.hc-emoji-suggest-item{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;font-size:12.5px}
.hc-emoji-suggest-item .ch{font-size:16px}
.hc-emoji-suggest-item .cd{font-family:var(--hc-mono);font-size:11px;color:var(--hc-dim)}
.hc-emoji-suggest-item.sel,.hc-emoji-suggest-item:hover{background:var(--hc-raised)}
.hc-emoji-panel{position:absolute;right:11px;bottom:100%;margin-bottom:6px;background:var(--hc-panel);border:1px solid var(--hc-border-strong);border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.35);padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:248px;max-height:200px;overflow-y:auto}
.hc-emoji-cell{border:none;background:transparent;border-radius:6px;font-size:18px;line-height:1;padding:6px;cursor:pointer}
.hc-emoji-cell:hover{background:var(--hc-raised)}
.hc-endrow{display:flex;gap:6px;padding:0 11px 10px}
.hc-endrow button{flex:1;font-size:11.5px;font-family:var(--hc-sans);border-radius:7px;padding:7px;cursor:pointer;border:1px solid var(--hc-border-strong);background:transparent;color:var(--hc-dim)}
.hc-endrow button.ok{color:var(--hc-green);border-color:var(--hc-green-line)}

/* ------- incoming toasts (top-right) ------- */
.hc-toasts{position:fixed;right:18px;top:76px;z-index:1300;display:flex;flex-direction:column;gap:10px;width:310px;max-width:calc(100vw - 36px)}
.hc-toast{background:var(--hc-panel);border:1px solid var(--hc-border-strong);border-left:3px solid var(--hc-cyan);border-radius:0 12px 12px 0;overflow:hidden;box-shadow:0 20px 50px -26px #000}
.hc-toast .b{padding:12px 13px}
.hc-toast .row{display:flex;gap:11px}
.hc-toast .nm{font-size:13px;color:var(--hc-text)}.hc-toast .nm b{color:var(--hc-cyan);font-weight:500}
.hc-toast .sub{font-size:11.5px;color:var(--hc-dim);margin-top:2px;line-height:1.45}
.hc-toast .acts{display:flex;gap:8px;margin-top:11px}
.hc-toast .acts button{flex:1;border-radius:8px;padding:8px;font-size:12px;font-weight:500;font-family:var(--hc-sans);cursor:pointer;border:1px solid var(--hc-border-strong);background:transparent;color:var(--hc-dim)}
.hc-toast .acts button.join{background:var(--hc-green);color:#04140a;border-color:var(--hc-green)}
.hc-toast .acts button:disabled{opacity:.4;cursor:not-allowed}
.hc-toast .note{font-size:10.5px;color:var(--hc-faint);margin-top:6px}

/* ------- modal (thanks + history) ------- */
.hc-modal{position:fixed;inset:0;z-index:1400;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:20px}
.hc-card{width:min(560px,100%);max-height:82vh;overflow:auto;background:var(--hc-panel);border:1px solid var(--hc-border-strong);border-radius:14px}
.hc-card .top{display:flex;align-items:center;gap:10px;padding:15px 17px;border-bottom:1px solid var(--hc-border)}
.hc-card .top h3{margin:0;font-size:16px;font-weight:500;color:var(--hc-text)}
.hc-card .top .ic{color:var(--hc-green)}
.hc-thanks{padding:20px 18px;text-align:center}
.hc-thanks .big{font-size:15px;color:var(--hc-text);margin:0 0 4px}
.hc-thanks .sub{font-size:12.5px;color:var(--hc-dim);margin:0 0 18px}
.hc-thanks .acts{display:flex;gap:10px;justify-content:center}
.hc-thanks .acts button{border-radius:9px;padding:9px 18px;font-size:13px;font-weight:500;font-family:var(--hc-sans);cursor:pointer;border:1px solid var(--hc-border-strong);background:transparent;color:var(--hc-dim)}
.hc-thanks .acts button.yes{background:var(--hc-green);color:#04140a;border-color:var(--hc-green)}

.hc-hbody{padding:14px 17px}
.hc-filters{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.hc-chip{font-family:var(--hc-mono);font-size:10.5px;color:var(--hc-dim);border:1px solid var(--hc-border);border-radius:999px;padding:3px 10px;cursor:pointer;background:none}
.hc-chip.on{color:#04140a;background:var(--hc-green);border-color:var(--hc-green)}
.hc-thread{display:grid;grid-template-columns:32px 1fr auto;gap:11px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--hc-border)}
.hc-thread .nm{font-size:13px;font-weight:500;color:var(--hc-text)}
.hc-thread .sub{font-family:var(--hc-mono);font-size:10px;color:var(--hc-dim);margin-top:2px}
.hc-thread .right{text-align:right;font-family:var(--hc-mono);font-size:10px;color:var(--hc-faint)}
.hc-badge{font-family:var(--hc-mono);font-size:9px;letter-spacing:.02em;padding:2px 7px;border-radius:999px;border:1px solid}
.hc-b-ok{color:var(--hc-green);border-color:var(--hc-green-line);background:var(--hc-green-soft)}
.hc-b-no{color:var(--hc-red);border-color:rgba(226,84,74,.4);background:rgba(226,84,74,.1)}
.hc-b-role{color:var(--hc-cyan);border-color:var(--hc-cyan-soft);background:var(--hc-cyan-soft)}
.hc-empty{padding:24px;text-align:center;color:var(--hc-faint);font-size:12.5px}

@media(prefers-reduced-motion:reduce){.hc-layer *{animation:none!important}}
:root {
  --darkTheme-primary: #303030;
  --darkTheme-secondary: #252525;
  --darkTheme-third: #252525;

  --darkTheme-primary-text: #FFFFFF;
  --darkTheme-secondary-text: #e0e0e0;
  --darkTheme-third-text: var(--darkTheme-primary);

  --darkTheme-icons-primary: #FFFFFF;
  --darkTheme-icons-secondary: var(--darkTheme-third);

  --darkTheme-border-primary: var(--darkTheme-third);
  --darkTheme-border-secondary: var(--darkTheme-primary);

  --darkTheme-navbar: var(--darkTheme-third);

  --error-message: #c62828;
}
html {
  height: 100%;
}
#root {
  height: 100%;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--darkTheme-primary);
  color: var(--darkTheme-primary-text);
  height: 100%;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}