:root {

  --red: #E74C3C ;
  --red-hover: #CA4536 ;
  --orange: #F39C12;
  --orange-hover: #D39C0D;
  --blue: #3498DB ;
  --blue-hover: #217DBB ;
  --lightblue: #3498DB ;
  --lightblue-hover: #217DBB ;
  --darkblue: #375A7F ;
  --darkblue-hover: #28415B ;
  --lightgrey: #AAAAAA ;
  --green: #00BC8C ;
  --green-hover: #009670 ;

  /* Palette Kiwi: https://www.color-hex.com/color-palette/16667  */
  --main-bg-color: #F2ECAE ;
  --main-text-color: #563429 ;
  --link-color: #478f00  ;

  /* Main menu */
  --main-menu-text-color: var(--main-text-color) ;
  --main-menu-text-hover-color: #000000 ;
  --main-menu-bg-hover-color: #b89a61 ;
  --main-menu-border-hover-color: var(--main-menu-text-hover-color) ;
  --main-menu-text-active-color: var(--main-text-color) ;
  --main-menu-bg-active-color: #a9c77e ;

  /* Tables */
  --default-table-border-color: #a88f3b ;
  --default-table-hover-color: #F2ECAE ;
  --default-table-bigborder-color: #DDEEEE ;

  /* Links */
  --delete-js-action-link-color: #BC0000 ;
  --delete-js-action-link-color-hover: #BC8888 ;
  --generic-js-action-link-color: var(--link-color) ;
  --generic-js-action-link-color-hover: #D39C0D ;

/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/

  --main-button-text-color: #FFFFFF ;

  --username-color: #C5A876 ; /* #F4C470; */
  --username-admin-color: #F48270 ; /* F4C470 ; /* Remplace #F0C0A0; ?? */
  --username-banned-color: #AAAAAA;
  --username-bot-color: #AAAAAA;
  --username-expert-color: #5DC705;
  --username-contrib-color: #F5C75E;


  --section-halo-color: #6B4E84 ;

  --discouraged-filter-color: #44444499; /* x99 = 60% */
  --discouraged-div-border-color: #CCCCCC;

  --highlighted-halo-color: #00BC8C80 ; /* Lueur verte / x80 = 50% */
  --highlighted-gradient-color: #00BFFF99 ; /* x99 = 60% */
  --highlighted-div-border-color: #00BC8C80 ; /* vert */

  --pubs-border-color: #110011 ;
  --pubs-bg-color: #110011 ;

  --main-content-max-width: 1140px ;

  --categories-menu-text-color: #FFFFFF ;
  --categories-menu-border-color: #6B4E84; /* Violet moyen, assorti à --section-halo-color */
  --categories-menu-bg-color: #2A1F3A; /* Violet très foncé, proche de --main-bg-bg-color mais plus distinct */
  --categories-menu-bg-active-color: #5A3A8A; /* Violet cosmique, aligné avec --page-navigation-bg-color */
  --categories-menu-bg-hover-color: #C77DDF; /* Rose nébuleux, pour un effet hover vibrant, aligné avec --page-navigation-bg-hover-color */

  --notif-pill-text-color: #FFFFFF ;
  --notif-pill-bg-color: #E74C3C ;


  --generic-table-border-color: #444444 ;
  --generic-table-head-text-color: #444444 ;
  --generic-table-head-bg-color: #353555 ;
  --generic-table-head-text-color: #FFFFFF ;
  --generic-table-body-text-color: #DDEEEE ;
  --generic-table-hover-color: #FFFFFF1A ; /* 1A = 10% */

  --editor-tools-bg-color: #DDEEEE ;
  --editor-tools-bg-hover-color: #CCCCCC ;
  --editor-tools-button-bg-color: #CCBBDD ;
  --editor-tools-button-bg-hover-color: #665599 ;
  --delete-char-color: #E74C3C ;
  --delete-char-color-hover: #D39C0D ;
  --delete-icon-text-color: #CA4536 ;
  --delete-icon-bg-color: #C8C8C899 ; /* x99 = 60% */


  --page-navigation-text-color: #FFFFFF ;
  --page-navigation-bg-color: #5A3A8A ;
  --page-navigation-bg-active-color: #9A5AC8 ;
  --page-navigation-bg-hover-color: #C77DDF ;
  --page-navigation-halo-color: #C77DDF7F ; /* 7F = 50% */

  --block-draft-bg-color: #E38C02 ;
  --block-error-bg-color: #E74C3C ;
  --block-warning-bg-color: #FFB900 ;
  --block-success-bg-color: #00BC8C ;
  --block-comment-bg-color: #375A7F ;
  --block-info-bg-color: #5589FF ;

  --comment-head-bg-color: #1A0D2A ;
  --comment-content-bg-color: #2E1A47 ;
  --comment-info-bg-color: #4A2E6BCC ; /* CC=80% */
  --comment-border-color: #C77DDF ;

  --card-head-bg-color: #1A0D2A ;
  --card-content-bg-color: #2E1A47 ;
  --card-info-bg-color: #4A2E6BCC ; /* CC=80% */
  --card-border-color: #C77DDF ; /*#6B4E84 ; /* #C77DDF ; */
}


/* Calculate how the browser calculates block sizes. To simplify the size, the
border is also included in the size. The same for all blocks */
* { box-sizing: border-box; }

html {
  font-family: sans-serif;
  line-height: 150%;
  font-size: 16px; /* ==1.0rem */
  margin: 0;
  text-align: left;
  color: var(--main-text-color);
  /* background-color: var(--main-bg-color) ; */
  background: linear-gradient(135deg, var(--main-bg-color) 0%, #ffffff 100%);
  min-height: 100% ;
}

a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}


h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: sans-serif;
  font-variant: small-caps;
  font-style: italic;
  text-shadow: 2px 2px 2px #b89a61;
  margin-top: 2.1rem;
}

h1 { font-size: 2.3rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1.0rem; }

strong, b {
  color: var(--main-bold-color) ;
  font-weight: bold;
}


.login_menu {
  max-width: var(--main-content-max-width) ;
  margin: auto;
  display: block ;
  padding-right: 5px ;
  padding-left: 5px ;
  margin-top: 1rem;
  text-align: right;
  /* background-color: var(--main-menu-bg-active-color); */
}

.main_menu {
  max-width: var(--main-content-max-width) ;
  margin: auto;
  padding-right: 5px ;
  padding-left: 5px ;
  margin-top: 1rem;
}

/* hamburger menu, hidden by default */
.main_menu_label, #main_menu_toggle{
  display: none;
}

.main_menu .main_menu_items {
  display: flex;
  /* See the <a> below for the align */
}

.main_menu .main_menu_items a {
  display: flex;
  height: 3.0rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--main-menu-text-color) ;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  border-radius: 7px ;
}
 
.main_menu a:hover {
  color: var(--main-menu-text-hover-color) ;
  background-color: var(--main-menu-bg-hover-color) ;
  border: 1px solid var(--main-menu-border-hover-color) ;
  font-weight: normal;
}

.main_menu a.active{
  color: var(--main-menu-text-active-color) ;
  background-color: var(--main-menu-bg-active-color);
  font-weight: bold;
}

.main_and_ads_block {
  display: block ;
  max-width: 1024px ;
  margin: auto ;
}

.footer_block {
  display: block ;
  width: 100% ;
  text-align: center ;
}

.file_name {
  font-family: monospace;
  font-size: 1.1rem ;
  text-decoration: none ;
  color: var(--amin-text-color) ;
  outline: none ; /* disable border after click */
}
.file_name:hover {
  text-decoration: none ;
}

.file_options {
  display: block ;
  width: 100% ;
  padding-top: 0.4rem ;
  padding-bottom: 0.4rem ;
  padding-left: 3.8rem ;
  font-size: 0.95rem ;
}

.kiwicoin {
  text-shadow:
    1px 1px 2px orange,
    0 0 1em orange,
    0 0 0.2em orange;
}


/*===============================================================================================*/
/*===============================================================================================*/
/*===   Fonts   =================================================================================*/
/*===============================================================================================*/
.mono {
  font-family: monospace;
}

/*===============================================================================================*/
/*===============================================================================================*/
/*===   Forms   =================================================================================*/
/*===============================================================================================*/
select, textarea {
  display: inline;
  line-height: 1.3rem;
  vertical-align: center;
  border-radius: 5px;
  margin-bottom: 5px ;
  margin-left: 15px ;
  margin-right: 35px ;
  max-width: 100% ;
}

input[type="text"], input[type="password"]  {
  width: 30.0rem ;
  display: inline;
  line-height: 1.3rem;
  vertical-align: center;
  border-radius: 5px;
  margin-bottom: 5px ;
  margin-left: 15px ;
  margin-right: 35px ;
  max-width: 100% ;
}

input[type="checkbox"] {
  display: inline;
  line-height: 1.3rem;
}

/* Pour les mots de passe, cf js-showpass */
.showpass {
    display: inline-block;
    position: relative;
    width: 32.0rem;
}
.remember_me {
    display: inline-block;
    width: 30.0rem;
   margin: auto ;
  /* border: 1px solid red ; */
  margin-left: 15px ;
  text-align: right ;
}

textarea {
  width: 95% ;
}

input[type="submit"] {
  cursor: pointer ;
  width: 8.0rem ;
}

@media (max-width: 500px) {
  input, select, textarea {
    max-width: 100% ;
  }
}



/*===============================================================================================*/
/*===============================================================================================*/
/*===   Blocks   ================================================================================*/
/*===============================================================================================*/
.block_error {
  display: block ;
  padding: 8px ;
  border: 2px solid var(--block-error-bg-color) ;
  border-radius: 5px ;
  font-weight: bold ;
  background: linear-gradient(135deg, var(--block-error-bg-color) -80%, #ffcccc 120%) ;
  color: var(--main-text-color);
  margin-bottom: 0.8rem ;
}

.block_warning {
  display: block ;
  padding: 8px ;
  border: 2px solid var(--block-warning-bg-color) ;
  border-radius: 5px ;
  font-weight: bold ;
  background: linear-gradient(135deg, var(--block-warning-bg-color) -80%, #ffcccc 120%) ;
  color: var(--main-text-color);
  margin-bottom: 0.8rem ;
}

.block_success {
  display: block ;
  padding: 8px ;
  border: 2px solid var(--block-success-bg-color) ;
  border-radius: 5px ;
  font-weight: bold ;
  background: linear-gradient(135deg, var(--block-success-bg-color) -80%, #ccffcc 120%) ;
  color: var(--main-text-color);
  margin-bottom: 0.8rem ;
}

.block_info {
  display: block ;
  padding: 8px ;
  border: 2px solid var(--block-info-bg-color) ;
  border-radius: 5px ;
  font-weight: bold ;
  background: linear-gradient(135deg, var(--block-info-bg-color) -80%, #ccffcc 120%) ;
  color: var(--main-text-color);
  margin-bottom: 0.8rem ;
}

.transcript {
  display: block ;
  padding: 0.8rem ;
  border: 2px solid black ;
  border-radius: 5px ;
  font-family: monospace ;
  margin: auto ;
  max-width: 90% ;
}



/*===============================================================================================*/
/*===============================================================================================*/
/*===   Icones   ================================================================================*/
/*===============================================================================================*/
.language-flag {
  height: 16px;
  vertical-align: center;
  border-radius: 3px ;
}


/*===============================================================================================*/
/*===============================================================================================*/
/*===   Tables   ================================================================================*/
/*===============================================================================================*/
.default_table table {
    border: 1px solid var(--default-table-border-color) ;
    border-spacing: 0px;
    width: 100%;
}

.default_table td {
    border: 1px solid var(--default-table-border-color) ;
    padding: 0.3rem;
    font-size: 0.95rem;
}
.default_table tr:hover {
  background-color: var(--default-table-hover-color) ;
}

.default_table th {
    border: 1px solid var(--default-table-border-color) ;
    text-align: center;
    padding: 0.3rem;
    vertical-align: top;
    font-size: 0.95rem;
    font-weight: 550;
}



/*===============================================================================================*/
/*===============================================================================================*/
/*===   JS links   ==============================================================================*/
/*===============================================================================================*/
.delete-js-action-link {
    cursor: pointer ;
    text-decoration: none;
    font-weight: 400; /* 400=normal , 700=bold */
    color: var(--delete-js-action-link-color) ;
}
.delete-js-action-link:hover {
    color: var(--delete-js-action-link-color-hover) ;
}

.generic-js-action-link {
    cursor: pointer ;
    text-decoration: none;
    font-weight: 400; /* 400=normal , 700=bold */
    color: var(--generic-js-action-link-color) ;
}
.generic-js-action-link:hover {
    color: var(--generic-js-action-link-color-hover) ;
}

.js-refresh {
    cursor: pointer ;
    text-decoration: none;
    font-weight: 600; /* 400=normal , 700=bold */
    color: #3b69c8 ;
    background-color: #e1eafc ;
    border: 1px solid #3b69c8 ;
    border-radius: 5px ;
    padding: 2px 4px 2px 0 ;
}
.js-refresh:hover {
    color: #e1eafc ;
    background-color: #3b69c8 ;
    text-decoration: none;
}

.js-showpass {
  position: absolute ;
  transform: translateY(-50%) ;
  cursor: pointer ;
  text-decoration: none;
  top: 50%;
  right: 24px;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
}
.js-showpass:hover {
    text-decoration: none;
}
.js-showpass img {
  height: 16px;
  vertical-align: middle;
  border-radius: 3px ;
}

.js-download {
    cursor: pointer ;
    text-size: +2 ;
    line-height: 2.8rem ;
    text-decoration: none;
    font-weight: 600; /* 400=normal , 700=bold */
    color: #478f00 ;
    background-color: #b8e07e ;
    border: 1px solid #478f00 ;
    border-radius: 5px ;
    padding: 8px ;
}
.js-download:hover {
    color: #b8e07e ;
    background-color: #478f00 ;
    text-decoration: none;
}

.js-order {
    cursor: pointer ;
    text-size: +2 ;
    line-height: 2.8rem ;
    text-decoration: none;
    font-weight: 600; /* 400=normal , 700=bold */
    color: #478f00 ;
    background-color: #b8e07e ;
    border: 1px solid #478f00 ;
    border-radius: 5px ;
    padding: 8px ;
}
.js-order:hover {
    color: #b8e07e ;
    background-color: #478f00 ;
    text-decoration: none;
}




/*===============================================================================================*/
/*===============================================================================================*/
/*===   Modals   ================================================================================*/
/*===============================================================================================*/
.modal_overlay {
  display:none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  background: rgba(0, 0, 0, 0.6);
}

.modal_confirm {
  display:block;
  padding: 10px;
  position:absolute;
  z-index:999;
  background-color: var(--main-text-color);
  color: var(--main-bg-color);
  width: 80%;
  max-width: 90vw;
  max-height: 90vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: modalPop 0.25s ease-out;
}

.modal_button_ok {
    cursor: pointer;
    color: var(--main-button-text-color);
    background-color: var(--rating-perfect-color);
    text-align: center;
    vertical-align: middle;
    border: 2px solid white ;
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    margin-left: 1.0rem ;
    margin-top: 1.0rem ;
}
.modal_button_ok:hover { background-color: var(--rating-perfect-hover-color); }

.modal_button_cancel {
    cursor: pointer;
    color: var(--main-button-text-color);
    background-color: var(--rating-wrong-color);
    text-align: center;
    vertical-align: middle;
    border: 2px solid white ;
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    margin-left: 1.0rem ;
    margin-top: 1.0rem ;
}
.modal_button_cancel:hover { background-color: var(--rating-wrong-hover-color); }


.modal_waiting {
  display:block;
  padding: 10px;
  position:absolute;
  z-index:999;
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  width: 320px;
  height: 420px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold ;
  border: 2px solid black ;
  border-radius: 0.25rem;
}



/*===============================================================================================*/
/*===============================================================================================*/
/*===   Help    =================================================================================*/
/*===============================================================================================*/
.help_image {
  width: 60% ;
  height: auto ;
  border-radius: 10px ;
  border: 3px solid black ;
  padding: 1px ;
  margin: 0.7rem auto ;
}













































.hide_below_800 { }
.hide_below_500 { }
@media (max-width: 799px) {
    .hide_below_800 { display: none ; }
}
@media (max-width: 500px) {
    .hide_below_500 { display: none ; }
}




























.generic-table table {
  border: solid 1px;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: var(--main-bg-color) ;
  border-color: var(--generic-table-border-color) ;
  width:100%;
}
.generic-table thead th {
  background-color: var(--generic-table-head-bg-color) ;
  border: solid 1px;
  border-collapse: collapse;
  color: var(--generic-table-head-text-color) ;
  padding: 10px;
  text-align: left;
  border-color: var(--generic-table-border-color) ;
}
.generic-table tbody td {
  border: solid 1px;
  border-collapse: collapse;
  color: var(--generic-table-body-text-color) ;
  padding: 10px;
  border-color: var(--generic-table-border-color) ;
}
.generic-table tr:hover {
  background-color: var(--generic-table-hover-color) ;
}

.translated-cell {
  background-color: var(--generic-table-body-text-color) ;
  color: var(--main-bg-color)  !important ;
  font-weight: bold ;
}



/*===============================================================================================*/
/*===============================================================================================*/
/*===   Forms and Buttons   =====================================================================*/
/*===============================================================================================*/
input, select {
  display: inline ;
  line-height: 1.3rem ;
  vertical-align: center ;
  border-radius: 5px ;
}

/* Checkboxes for genres */
.checkbox_genres label {
    font-weight: 200 !important ;
    float: left !important ;
    padding: 0 0.4rem 0 0.4rem !important ;
    cursor: pointer !important ;
    margin: 0 0.2rem 0.2rem 0 !important ;
    border-radius: 5.0rem !important ;
}
.checkbox_genres input[type="checkbox"] {
  width: auto;
  margin: 0 0.3rem 0 0 !important ;
}

.checkbox_genres label:has(input[type="checkbox"]:checked) {
  color: var(--main-bg-color) ;
  background-color: var(--main-text-color) ;
  transition: background-color 0.1s ease, color 0.1s ease;
  font-weight: bolder !important ;
}


.generic-form-field label {
    font-weight: bold;
    text-align: left;
    display: block;
    padding: 0.5rem;
}

.generic-form-field input, .generic-form-field textarea, .generic-form-field select {
    display: block;
    width: 90%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    margin-left: 3rem;
    font-size: 0.93rem;
    line-height: 1.3rem;
}

.generic-form-button {
    display: inline-block;
    width: auto;
    color: var(--main-button-text-color);
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    border: 0px;
    padding: 0.375rem 0.75rem;
    margin: 0rem 0rem 0rem 3.0rem ;
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

.generic-form-button.green     { background-color: var(--rating-perfect-color) ; }
.generic-form-button.red       { background-color: var(--rating-wrong-color) ; }
.generic-form-button.blue      { background-color: var(--rating-correct-color) ; }
.generic-form-button.orange    { background-color: var(--rating-draft-color) ; }
.generic-form-button.lightblue { background-color: var(--lightblue) ; }
.generic-form-button.darkblue  { background-color: var(--darkblue) ; }

.generic-form-button.green:hover     { background-color: var(--rating-perfect-hover-color) ; }
.generic-form-button.red:hover       { background-color: var(--rating-wrong-hover-color) ; }
.generic-form-button.blue:hover      { background-color: var(--rating-correct-hover-color) ; }
.generic-form-button.orange:hover    { background-color: var(--rating-draft-hover-color) ; }
.generic-form-button.lightblue:hover { background-color: var(--lightblue-hover) ; }
.generic-form-button.darkblue:hover  { background-color: var(--darkblue-hover) ; }




/* to use in span onclick() */
.button_a {
    cursor: pointer;
    color: var(--link-color);
    text-decoration: none;
}


.link_explore {
  font-size: 1.0rem ;
  color: #F4C430;
  margin: auto ;
  text-align: center ;
}
.link_explore:hover {
  text-decoration: none ;
  color: var(--link-color);
}

.link_button {
    cursor: pointer;
    color: var(--main-button-text-color);
    background-color: var(--rating-perfect-color);
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    border: 0px;
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    width: 100%;
}

.link_button:hover {
    background-color: var(--rating-perfect-hover-color);
}

.link_bigbutton {
    cursor: pointer;
    color: var(--main-button-text-color);
    background-color: var(--rating-perfect-color);
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    border: 2px solid var(--rating-perfect-hover-color) ;
    padding: 0.5rem 0.8rem;
    font-size: 1.2rem;
    line-height: 1.8;
    border-radius: 0.25rem;
    width: 100%;
}

.link_bigbutton:hover {
    background-color: var(--rating-perfect-hover-color);
}

.button {
    color: var(--main-button-text-color);
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    border: 0px;
    padding: 0.375rem 0.75rem;
    margin: 0px;
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    width: 100%;
}

.button_enlarge {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    width: 100%;
    height: 3.5rem;
}


.generic-js-action-block {
    display: block;
    margin: auto;
    text-align: center ;
    cursor: pointer ;
    text-decoration: none;
    font-weight: bold;
    font-style: italic ;
    color: var(--generic-js-action-link-color) ;
}
.generic-js-action-block:hover {
    color: var(--generic-js-action-link-color-hover) ;
}


/*===============================================================================================*/
/*===   Username   ==============================================================================*/
/*===============================================================================================*/

.username {
  color: var(--username-color);
}
.username-banned {
  color: var(--username-banned-color);
  text-decoration: line-through;
}
.username-bot {
  color: var(--username-bot-color);
  font-style: italic;
}
.username-admin {
  color: var(--username-admin-color);
/*  text-decoration: underline dotted;
  font-weight: bold; */
}
.username-expert {
  color: var(--username-expert-color);
}
.username-contrib {
  color: var(--username-contrib-color);
}


/*===============================================================================================*/
/*===   Icones   ================================================================================*/
/*===============================================================================================*/

.badge-icon {
  height: 12px;
  vertical-align: center;
  margin-left: 2px ;
}

.warning-icon {
  height: 16px;
  vertical-align: center;
}

.translate-icon {
  height: 24px;
  vertical-align: center;
}

.bookmarks-icon {
  height: 24px;
  vertical-align: bottom;
}

.footer-icon {
  height: 16px;
  vertical-align: center;
}

.site-tools-grid {
  display: grid;
  grid-template-columns: 30% 30% ;
  grid-row-gap: 2.0rem ;
  margin-top: 0.5rem ;
}
@media (max-width: 799px) {
  .site-tools-grid { grid-template-columns: 90%; }
}
.site-tools-icon img {
  height: 48px;
  vertical-align: middle;
}
.site-tools-icon span {
  display: inline-block;
  font-size: 18px;
  line-height: 48px ;
  vertical-align: middle;
  align: right ;
}


/*===============================================================================================*/
/*===   Report to Admin   =======================================================================*/
/*===============================================================================================*/
.report_to_admin {
  display: flex;
  align-items: flex-start; /* Align on top */
  height: 3.0rem;
  vertical-align: top;
  cursor: pointer;
  /* border: 1px solid ; */
  border-radius: 5px ;
  float: right;
  padding: 5px ;
  margin: 5px ;
  font-size: 0.9rem ;
  line-height: 1.1rem ;
  color: var(--link-color) ;
  background: rgba(255,200,200,0.2) ;
}
.report_to_admin img {
  height: 100% ;
  width: auto;
  padding-right: 0.5rem ;
}
.report_to_admin:hover {
  background: rgba(255,200,200,0.3) ;
  border: 1px solid var(--link-color) ;
}

/*===============================================================================================*/
/*===   Modals   ================================================================================*/
/*===============================================================================================*/

.modal_wrong_rating {
  display:block;
  padding: 10px;
  position:absolute;
  z-index:999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--main-text-color);
  color: var(--main-bg-color);
  width: 50rem;
  max-width: 80vw;
  height: 500px;
  max-height: 80vh;
}

.modal_report_to_admin {
  display:block;
  padding: 10px;
  position:absolute;
  z-index:999;
  background-color: var(--main-text-color);
  color: var(--main-bg-color);
  min-width: 320px;
  max-width: 620px;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 800px;
  max-height: 85vh; /* Limite la hauteur à 80% de la hauteur de la fenêtre */
  overflow-y: auto; /* Active le défilement vertical */
}
.modal_report_to_admin b {
  color: #ff0000;
}
.modal_report_to_admin h5 {
  margin-top: 2.0rem ;
}
.modal_report_to_admin li {
  margin-bottom: 0.2rem;
}
.modal_report_to_admin label
, .modal_report_to_admin input[type="text"]
{
  display:flex;
  flex:1 ;
}



/*===============================================================================================*/
/*===   Editor Tools   ==========================================================================*/
/*===============================================================================================*/

.generic-delete-char {
  cursor: pointer ;
  text-decoration: none;
  font-weight: 400; /* 400=normal , 700=bold */
  color: var(--delete-char-color) ;
  font-size: 100% ;
}
.generic-delete-char:hover {
  font-weight: 700;
  color: var(--delete-char-color-hover) ;
}
.generic-delete-char::after {
  content: " \2612" ; /* une croix, en unicode: "&#9746;" */
}

.delete-icon {
  display: inline;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  color: var(--delete-icon-text-color) ;
  text-align: right;
  position: absolute;
  background: var(--delete-icon-bg-color) ;
  top: 0;
  right: 0;
  padding-right: 0.3rem;
  padding-left: 0.3rem;
  z-index: 1; /* Needed for aspect-ratio fallback */
}

.editor-tools {
  margin-bottom: 0.38rem;
}

.editor-tools input {
  text-align: center ;
  margin-top: 5px ;
  margin-bottom: 5px ;
  background-color: var(--editor-tools-bg-color) ;
  border-radius: 2px ;
  min-width:1.8rem;
}
.editor-tools input:hover {
  background-color: var(--editor-tools-bg-hover-color) ;
}
.editor-tools span {
  font-weight: bold;
  font-family: monospace;
}
.editor-svg-button {
  cursor: pointer;
  height: 1.6rem;
  vertical-align: middle;
  border: 1px solid var(--editor-tools-button-bg-hover-color);
  border-radius: 3px;
  background-color: var(--editor-tools-button-bg-color);
}
.editor-svg-button:hover {
  background-color: var(--editor-tools-button-bg-hover-color);

}

.player-svg-button {
  cursor: pointer;
  height: 1.8rem;
  width: 3.6rem;
  vertical-align: middle;
  border: 1px solid var(--editor-tools-button-bg-hover-color);
  border-radius: 3px;
  background-color: var(--editor-tools-button-bg-color);
}
.player-svg-button:hover {
  background-color: var(--editor-tools-button-bg-hover-color);

}


/*===============================================================================================*/
/*===   Discouraged / Highlighted   =============================================================*/
/*===============================================================================================*/
.discouraged,
.discouraged td,
.discouraged a { /* assure que les liens restent dessus */
  position: relative;
}
.discouraged td::before { /* Pour les TR */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--discouraged-filter-color);
  pointer-events: none; /* Permet aux clics de passer à travers */
}
.discouraged:not(table *):before, /* pour les DIV */
.discouraged:not(tr) {
  padding: 20px; /* Padding uniquement pour les div */
  border: 1px solid var(--discouraged-div-border-color);
}


.highlighted {
  position: relative;
  box-shadow: 0 0 30px inset var(--highlighted-halo-color) ;
}
.highlighted:not(table *)::before,
.highlighted td::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.highlighted td {
  position: relative;
}
.highlighted a {
  position: relative; /* Au-dessus de la superposition */
}
.highlighted:hover {
  box-shadow: 0 0 30px inset --var(-highlighted-halo-color) ;
}
/* Specificites pour les <div> */
.highlighted:not(tr) {
  padding: 20px;
  border: 1px solid var(--highlighted-div-border-color);
}


/*===============================================================================================*/
/*===   Notifications   =========================================================================*/
/*===============================================================================================*/
.notif-pill {
  border-radius: 50rem !important;
  color: var(--notif-pill-text-color) !important;
  background-color: var(--notif-pill-bg-color) !important;
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
}



/*===============================================================================================*/
/*===============================================================================================*/
/*===   Information blocks   ====================================================================*/
/*===============================================================================================*/

.draft_block {
    background-color: var(--block-draft-bg-color) ;
    border: none;
    color: var(--main-button-text-color);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}


.success_block {
    background-color: var(--block-success-bg-color) ;
    border: none;
    color: var(--main-button-text-color);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.error_block {
    background-color: var(--block-error-bg-color) ;
    border: none;
    color: var(--main-button-text-color);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}


/*===============================================================================================*/
/*===   Page navigation   =======================================================================*/
/*===============================================================================================*/
.pages_navigation {
    display: block;
    text-align: right;
    padding-top: 25px;
    padding-bottom: 5px;
}

.pages_navigation span {
    width: 2rem;
    text-align: center;
}

.pages_navigation a {
    font-weight: 200;
    padding: 0.1rem 0.1rem;
    min-width: 1.6rem;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    border: 0px;
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    color: var(--page-navigation-text-color) ;
    background-color: var(--page-navigation-bg-color) ;
    box-shadow: 0 0 5px var(--page-navigation-halo-color) ;
}

.pages_navigation a:hover {
    background-color: var(--page-navigation-bg-hover-color) ;
    font-weight: 400;
    box-shadow: 0 0 5px var(--page-navigation-halo-color) ;
}

.pages_navigation a.active {
    background-color: var(--page-navigation-bg-active-color) ;
    font-weight: bold;
    box-shadow: 0 0 5px var(--page-navigation-halo-color) ;
}

.pages_navigation .next::before {
    content: "Next >";
}
.pages_navigation .prev::before {
    content: "< Prev";
}

@media (max-width: 799px) {
    .pages_navigation .next::before {
        content: ">";
    }
    .pages_navigation .prev::before {
        content: "<";
    }

    .pages_navigation span {
        display: none;
    }
}



/*===============================================================================================*/
/*===   Ratings   ===============================================================================*/
/*===============================================================================================*/

.button.green     { background-color: var(--rating-perfect-color) ; }
.button.red       { background-color: var(--rating-wrong-color) ; }
.button.blue      { background-color: var(--rating-correct-color) ; }
.button.orange    { background-color: var(--rating-draft-color) ; }
.button.lightblue { background-color: var(--lightblue) ; }
.button.darkblue  { background-color: var(--darkblue) ; }

.button.green:hover     { background-color: var(--rating-perfect-hover-color) ; }
.button.red:hover       { background-color: var(--rating-wrong-hover-color) ; }
.button.blue:hover      { background-color: var(--rating-correct-hover-color) ; }
.button.orange:hover    { background-color: var(--rating-draft-hover-color) ; }
.button.lightblue:hover { background-color: var(--lightblue-hover) ; }
.button.darkblue:hover  { background-color: var(--darkblue-hover) ; }


.button.outline.green {
    color: var(--rating-perfect-color) ;
    border-color: var(--rating-perfect-color) ;
    border: 1px solid ;
    background-color: transparent ;
}
.button.outline.green:hover {
    color: var(--main-button-text-color);
    border-color: var(--rating-perfect-color) ;
    background-color: var(--rating-perfect-color) ;
}
.button.outline.orange {
    color: var(--rating-draft-color) ;
    border-color: var(--rating-draft-color) ;
    border: 1px solid ;
    background-color: transparent ;
}
.button.outline.orange:hover {
    color: var(--main-button-text-color);
    border-color: var(--rating-draft-color) ;
    background-color: var(--rating-draft-color) ;
}
.button.outline.blue {
    color: var(--rating-correct-color) ;
    border-color: var(--rating-correct-color) ;
    border: 1px solid ;
    background-color: transparent ;
}
.button.outline.blue:hover {
    color: var(--main-button-text-color);
    border-color: var(--rating-correct-color) ;
    background-color: var(--rating-correct-color) ;
}
.button.outline.red {
    color: var(--rating-wrong-color) ;
    border-color: var(--rating-wrong-color) ;
    border: 1px solid ;
    background-color: transparent ;
}
.button.outline.red:hover {
    color: var(--main-button-text-color);
    border-color: var(--rating-wrong-color) ;
    background-color: var(--rating-wrong-color) ;
}

.text-red    { color: var(--rating-wrong-color) ; }
.text-orange { color: var(--rating-draft-color) ; }
.text-blue   { color: var(--rating-correct-color) ; }
.text-green  { color: var(--rating-perfect-color) ; }

.text-wrong,
.rating .wrong {
    font-weight: bold;
    color: var(--rating-wrong-color) ;
}

.text-draft,
.rating .draft {
    font-weight: bold;
    color: var(--rating-draft-color) ;
}

.text-correct,
.rating .correct {
    font-weight: bold;
    color: var(--rating-correct-color) ;
}

.text-perfect,
.rating .perfect {
    font-weight: bold;
    color: var(--rating-perfect-color);
}


/* Colored square pills for ratings */
.rating-pill-container {
    width: 7.50rem; /* 4x pills width */
    display: inline-block;
}
.rating-red-pill {
    border-radius: 5px;
    height: 0;
    width: 1.85rem;
    padding-bottom: 1.35rem;
    background-color: var(--rating-wrong-color) ;
    background-color: var(--rating-wrong-hover-color) ;
    text-align: center;
    vertical-align: center;
    display: inline-block; 
    font-weight: bold;
}
.rating-orange-pill {
    border-radius: 5px;
    height: 0;
    width: 1.85rem;
    padding-bottom: 1.35rem;
    background-color: var(--rating-draft-color) ;
    background-color: var(--rating-draft-hover-color) ;
    text-align: center;
    vertical-align: center;
    display: inline-block; 
    font-weight: bold;
}
.rating-blue-pill {
    border-radius: 5px;
    height: 0;
    width: 1.85rem;
    padding-bottom: 1.35rem;
    background-color: var(--rating-correct-color) ;
    background-color: var(--rating-correct-hover-color) ;
    text-align: center;
    vertical-align: center;
    display: inline-block; 
    font-weight: bold;
}
.rating-green-pill {
    border-radius: 5px;
    height: 0;
    width: 1.85rem;
    padding-bottom: 1.35rem;
    background-color: var(--rating-perfect-color);
    background-color: var(--rating-perfect-hover-color) ;
    text-align: center;
    vertical-align: center;
    display: inline-block; 
    font-weight: bold;
}






/*===============================================================================================*/
/*===   Suggestions   ===========================================================================*/
/*===============================================================================================*/
.movies-suggestions {
  margin-left: 2.8rem ;
  display: grid ;
  grid-template-columns: repeat(8,1fr) ;
  grid-column-gap: 0.5rem ;
  border-radius: 10px;
  padding: 8px;
  background: radial-gradient(ellipse, transparent 60%, var(--section-halo-color) 160%);
  box-shadow: 0 0 10px  var(--section-halo-color) ;
}

@media (max-width: 999px) {
    .movies-suggestions {
        grid-template-columns: repeat(6,1fr) ;
    }
    .movies-suggestions > div:nth-child(n + 7) {
        display: none;
    }
}
@media (max-width: 799px) {
    .movies-suggestions {
        grid-template-columns: repeat(4,1fr) ;
        margin: 0;
    }
    .movies-suggestions > div:nth-child(n + 5) {
        display: none;
    }
}
@media (max-width: 500px) {
    .movies-suggestions {
        grid-template-columns: repeat(3,1fr) ;
    }
    .movies-suggestions > div:nth-child(n + 4) {
        display: none;
    }
}