/* Migration Sprockets → Propshaft : CSS moderne avec nesting natif */
/* Les fichiers sont chargés via @import CSS natif */

@import url("/assets/common-742eabc4.css");
/* envb_local.css déplacé vers _envb_bar.html.erb (inline) car nécessite ERB */
@import url("/assets/plugins/uniform/css/uniform_default-857c236b.css");

@import url("/assets/backoffice/layout-d4decc45.css");
@import url("/assets/backoffice/metronic_backport-a990d86b.css");

/* Plugins CSS migrés vers CDN (voir _assets_head.html.erb) :
   - bootstrap-switch, bootstrap-colorpicker, toastr
   - jquery-file-upload, jquery-ui */

/* Plugins locaux */
@import url("/assets/dependent_dropdown/css/dependent-dropdown-64c69cfc.css");
@import url("/assets/backoffice/table_filter-d9a91b91.css");
@import url("/assets/backoffice/note-4d542b4a.css");
@import url("/assets/backoffice/amchart-531ae4d4.css");

/* Custom */

/* on rattrape ce qui est ajouté par bootstrap */
.sgo-sidebar a {
  text-decoration: none;
}

.fancybox-container {
  z-index: 9999;
}

.sgo-cols-prefs-fancybox .fancybox-content {
  width: 80vw;
  max-height: 80vh;
  overflow-y: auto;
}

.sgo-tf-help-fancybox .fancybox-content {
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
}

.sgo-tf-help-content {
  padding: 20px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'SourceSansProSemiBold', 'Open Sans', sans-serif;
}

h3, h4, h5, h6 {
  font-weight: 400;
  text-decoration: underline;
}

/************* END OF FONTS ****************/


/************* END OF CONTAINER ****************/


.global-search {
  float: left;
  text-align: center;
  width: 30px;
  margin: 5px 5px 0 5px;
  background: none;
  display: block;
  padding: 9px 0 2px 0 !important;
  /* border-bottom: 1px solid #ced6df; */
  border-radius: 25px !important;
}

.global-help {
  float: left;
  text-align: center;
  width: 30px;
  margin: 0px 15px 0 0px;
  background: none;
  display: block;
  padding-top: 10px !important;
  /* border-bottom: 1px solid #ced6df; */
  border-radius: 25px !important;
}


@media (max-width: 1024px) {
  .mobile_hidden {
    display: none;
  }
}

/************* END OF HEADER ****************/


/************* END OF PAGE CONTENT ****************/

/************* TABS ****************/
.tabbable-custom > .nav-tabs > li.active {
  border-top: none;
  border-bottom: 3px solid #F3565D;
}

.tabbable-custom > .nav-tabs > li.active > a {
  border: none;
  color: #2859c0;
  font-weight: 600;
}

/* Bulles de création de DashboardInsertion (T51323), une par zone d'insertion potentielle.
   Masquées par défaut (aucune emprise sur la page) ; révélées par le toggle square-plus
   du breadcrumb (Super Admin) qui pose la classe dashboard_insertion_adding sur le body. */
/* le sélecteur li répété : nécessaire pour battre la spécificité des règles du thème sur .nav-tabs > li */
.dashboard_insertion_new_button,
.tabbable-custom > .nav-tabs > li.dashboard_insertion_new_button {
  display: none;
}

body.dashboard_insertion_adding .dashboard_insertion_new_button,
body.dashboard_insertion_adding .tabbable-custom > .nav-tabs > li.dashboard_insertion_new_button {
  display: block;
}

.dashboard_insertion_new_button > a {
  display: inline-block;
  border: 1px dashed #2859c0;
  border-radius: 12px;
  padding: 0 10px;
  margin: 2px 0;
  font-size: 0.85em;
  color: #2859c0;
  background-color: #f5f8ff;
  white-space: nowrap;
  text-decoration: none;
}

.tabbable-custom > .nav-tabs > li.dashboard_insertion_new_button {
  margin: 4px 4px 0;
}

/* Contenu d'onglet hors tableau (texte, petit formulaire) : les tables occupent toute
   l'emprise de l'onglet, mais un contenu textuel nu colle aux bords — l'envelopper dans
   ce wrapper. Exemple : onglet « Mot de passe » de la fiche employé. */
.tab-content-padded {
  padding: 15px;
}

/************* END OF TABS ****************/

/************* TABLES ****************/
.inf, .odd, .fltrow, table.TF th {
  background-color: #f9fafb !important;
}

.odd {
  background-color: #f9fafb !important;
}

.even {
  background-color: #fff !important;
}

table.TF tbody tr:hover {
  outline: 1px dotted #c0c0c0;
  outline-offset: -1px;
}

.sgo_tf_hide_td_values:before {
  content: ' \0022';
  color: grey;
  font-size: 14px;
}

.sgo_tf_hide_td_values:hover, .sgo_tf_hide_td_values:hover a {
  color: grey !important;
}

.sgo_tf_hide_td_values, .sgo_tf_hide_td_values a {
  color: #fff !important;
}

.sgo_tf_hide_td_values span.keyword {
  background-color: #fff !important;
}

.sgo_tf_hide_td_values_info, .sgo_tf_hide_td_values_info a {
  color: #d9edf7 !important;
}

.sgo_tf_hide_td_values_info span.keyword {
  background-color: #d9edf7 !important;
}

.sgo_tf_hide_td_values_warning, .sgo_tf_hide_td_values_warning a {
  color: #f9fafb !important;
}

.sgo_tf_hide_td_values_warning span.keyword {
  background-color: #f9fafb !important;
}

.sgo_tf_hide_td_values_danger, .sgo_tf_hide_td_values_danger a {
  color: #a94442 !important;
}

.sgo_tf_hide_td_values_danger span.keyword {
  background-color: #a94442 !important;
}

.sgo_tf_hide_td_values_success, .sgo_tf_hide_td_values_success a {
  color: #3c763d !important;
}

.sgo_tf_hide_td_values_success span.keyword {
  background-color: #3c763d !important;
}

.sgo_tf_hide_td_values_odd, .sgo_tf_hide_td_values_odd a {
  color: #f9fafb !important;
}

.sgo_tf_hide_td_values_odd span.keyword {
  background-color: #f9fafb !important;
}


/************* END OF TABLES ****************/

/************* FORM, INPUTS, BUTTONS ****************/

.input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn {
  height: auto;
}

.form-control, .select2-container--default .select2-selection--single {
  /* border: none !important; */
  /* border-bottom: 1px solid #e5e5e5 !important; */
  border-color: rgb(189, 193, 205) !important;
  color: #333;
  box-shadow: none;
  /* margin-bottom: 5px; */
}

.select2-dropdown {
  margin-top: -20px;
}

.select2-container--open .select2-dropdown--below {
  /* border-color: #e5e5e5 !important; */
}

@media (max-width: 999px) {
  input[type="submit"] {
    margin-top: 10px;
    width: 100%;
  }
}

/************* END OF FORM, INPUTS, BUTTONS ****************/

.page-header.navbar.navbar-fixed-top {
  /* permettre à fancybox de passer par dessus */
  z-index: 8000;
}

.fancybox-overlay {
  z-index: 1000000 !important;
}

.page-content-wrapper .page-content {
  padding-top: 0;
}

.breadcrumb .fa {
  font-size: 14px;
  margin: 0;
  top: 0;
}

.breadcrumb > li + li::before {
  content: none !important;
}

.page-header.navbar .search-form .input-group .form-control {
  color: #23252a;
}

.page-header.navbar .search-form .input-group .input-group-btn .btn.submit > i {
  color: #23252a;
}

/* Fin de la place pour le custom */

.help-inline {
  color: red;
}

.page-sidebar-menu ul {
  display: none;
}

.more a {
  color: white;
}

.mce-fullscreen div {
  z-index: 10000;
}

.select2 {
  width: 100% !important;
}

div.portlet-title {
  cursor: pointer;
}

/* .tabbable-custom {
  overflow-x: hidden;
  overflow-y: auto;
} */

/* en cas de tableau très large dépassant la largeur de l'écran, pour éviter de voir apparaitre le fond gris (exemple dans IGP admin/studies) */
.array {
  background-color: white;
  margin: 0px;
}

.table > thead > tr > th {
  vertical-align: top;
}

.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"], input[type="radio"], input[type="checkbox"] {
  position: relative;
  margin-left: 5px;
  margin-right: 4px;
}

h1.page-title {
  margin-top: -10px;
}

.white-bg {
  background-color: white;
}

.ui-datepicker {
  z-index: 1000000 !important;
}

fieldset {
  margin: 20px;
}

.alert-tiny {
  padding: 2px 2px 2px 10px;
  border-radius: 2px;
}

.alert-info {
  border: none !important;
  background-color: #f1faff;
}

.alert-success {
  border: none !important;
  background-color: #dcfdfd;
}

.alert-danger {
  border: none !important;
  background-color: #fff5f8;
}

.alert-warning {
  border: none !important;
  background-color: #fff8dd;
}

.alert-primary {
  border: none !important;
  background-color: #b2e2fd;
}

/***** SGO FIXED MENU *****/
#sgo_fixed_menu {
  background-color: rgba(255, 255, 255, 0.80);
  position: fixed;
  right: 0px;
  top: 30vh;
  width: 50px;
  min-height: 50px;
  box-shadow: 0px 0px 16px 1px rgba(119, 119, 119, 0.5);
  border-radius: 5px 0 0 5px;
  z-index: 800;
  padding: 5px;
}

#sgo_fixed_menu .btn {
  margin-left: 0 !important;
  margin-top: 4px !important;
}

#sgo_fixed_menu .btn i {
  font-size: 1.25em;
}

#sgo_fixed_menu .avatar_container {
  width: 40px;
  float: none;
  padding: 0;
  margin-top: 1px;
}

#sgo_fixed_menu .avatar_container .avatar {
  max-width: 40px;
  max-height: 40px;
  width: 40px;
  float: none;
  padding: 0;
}

#sgo_fixed_menu hr {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

/***** END OF SGO FIXED MENU *****/

/***** VISIBLE UNIQUEMENT PAR *****/

.page-sidebar-menu-closed .group_only_display_hide .title {
  display: none;
}

.page-sidebar-menu-open .group_only_display_hide .title {
  display: block;
}

/***** END OF VISIBLE UNIQUEMENT PAR *****/

.chats .message {
  margin: 0 !important;
}

.chats .message img {
  max-width: 100%;
}

.avatar_container {
  width: 90px;
}

.chats .message .talk_read_more {
  display: none;
}

.chats .message .name, .chats .message .datetime {
  font-weight: 600;
}

@media (max-width: 999px) {
  .avatar_container {
    width: 40px;
    padding: 0;
    margin-top: 5px;
  }
  .chats .avatar {
    height: 30px;
    width: 30px;
  }

  .chats .message {
    margin-left: 40px;
  }

  .chats .message .content {
    max-height: 100px;
    overflow: hidden;
  }

  .chats .talk_read_more {
    display: block;
    text-align: center;
  }

  .chats p {
    margin: 0 0 5px;
  }
}

.badge {
  border-radius: 50% !important;
  width: 18px;
  height: 18px;
  padding: 3px 4px 4px 2px;
  text-align: center;
}

.badge-minimalist {
  border-radius: 0% !important;
  width: auto;
  height: auto;
  /* padding: 3px 4px 4px 2px; */
  text-align: center;
  background-color: #fff !important;
  color: #2859c0;
}

.badge-minimalist::before {
  content: "("
}

.badge-minimalist::after {
  content: ")"
}

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


.dashboard-infos-element {
  padding: 10px;
  /* margin: 10px; */
  border: 1px solid #d9edf7;
  border-radius: 5px;
  width: 100%;
  height: 100%;
}

.dashboard-infos-element p {
  color: #444;
}

.dashboard-infos-element h3 {
  font-size: 25px !important;
}

.dashboard-infos-element .description {
  min-height: 100px;
}

@media (min-width: 999px) and (max-width: 1050px) {
  .page-header.navbar .search-form.open {
    width: 200px !important;
  }
}

.sgo-draggable {
  padding: 3px;
  border: 1px solid #7fa4c7 !important;
  border-radius: 3px;
  color: #7fa4c7;
  cursor: pointer;
  white-space: nowrap;
}

.sgo-select2-add-option {
  padding: 3px;
  border: 1px solid #7fa4c7 !important;
  border-radius: 3px;
  color: #7fa4c7;
  cursor: pointer;
}

.sgo-select2-add-option-deactivated {
  padding: 3px;
  border: 1px solid #abaeb0 !important;
  border-radius: 3px;
  color: #8a8a8a;
}

.sgo-select2-from-button {
  padding: 3px;
  border: 1px solid #7fa4c7 !important;
  border-radius: 3px;
  color: #7fa4c7;
  cursor: pointer;
}

.sgo-select2-from-button-deactivated {
  padding: 3px;
  border: 1px solid #abaeb0 !important;
  border-radius: 3px;
  color: #8a8a8a;
}

/* Portlet SGO */
.sgo_portlet {
  border-bottom: 1px dashed #E4E6EF;
  /* margin-top: 8px; */
  /* margin-bottom: 3px; */
  /* padding-bottom: 3px; */
}

.sgo_portlet .panel-heading {
  line-height: 18px;
}

.sgo_portlet_button {
  margin-right: 5px;
  width: 18px !important;
  height: 18px !important;
  border-radius: 3px;
  display: inline-block !important;
  text-align: center;
  visibility: visible !important;
  opacity: 1 !important;
}

.sgo_portlet_button_closed {
  margin-right: 5px;
  background-color: #e3e4ea;
  color: #a2a6b8;
  width: 18px !important;
  height: 18px !important;
  border-radius: 3px;
  display: inline-block;
  text-align: center;
}


.sgo_portlet_button_open {
  margin-right: 5px;
  background-color: #b3e2fd;
  color: #009ef7;
  width: 18px !important;
  height: 18px !important;
  border-radius: 3px;
  display: inline-block;
  text-align: center;
}

.sgo_portlet_title {
  font-size: 1.2em;
  font-weight: 800;
  color: #5E6278 !important;
  font-style: normal !important;
}

.sgo_portlet_title_dimmed {
  font-size: .9em;
  font-weight: 100;
}


.sgo_portlet a:link {
  text-decoration: none;
}


.sgo_portlet a:visited {
  text-decoration: none;
}


.sgo_portlet a:hover {
  text-decoration: none;
}


.sgo_portlet a:active {
  text-decoration: none;
}


.sgo-portlet-body {
  margin-left: 27px;
}

.page-breadcrumb {
  border-radius: 0;
  margin-bottom: 0px;
  padding-bottom: 0px;
  border-bottom: 1px solid rgba(189, 193, 205, 0.5);;
}

.page-breadcrumb .sgo_breadcrumb_first {
  font-family: 'SourceSansProSemiBold', 'Open Sans', sans-serif;
  font-weight: 600 !important;
  font-size: 22px;
  color: #485274 !important;
}

.page-breadcrumb li a {
  color: #428bca;
  text-decoration: none;
  font-style: normal;
  font-weight: 500;
}

.page-breadcrumb li a:hover {
  transition: color 0.2s ease;
  color: #a4a5b9;
}

.page-breadcrumb .sgo_breadcrumb_current {
  color: #a4a5b9;
  font-weight: 800;
}

#task_actives_monitor {
  max-height: 90px;
  overflow-y: scroll;
}

.task_active_monitors {
  display: flex;
  flex-direction: column;
}

.task_active_monitors_other_party {
  order: 2; /* Par défaut, tous les éléments avec la classe A auront l'ordre 2 */
}

.task_active_monitors:not(.task_active_monitors_other_party) {
  order: 1; /* Par défaut, tous les éléments avec la classe A auront l'ordre 2 */
}


/* Messages non lu dans les tickets */

.unread .datetime {
  /* color: red !important; */
  /* font-weight: bold !important; */
}

.unread .name {
  font-weight: bold !important;
}

.unread .message {
  background-color: #fff4e6 !important;
}

/* Navbar top */
.navbar-top {
  position: fixed !important;
}

.page-container {
  top: 45px !important;
}

@media (max-width: 1024px) {
  .page-container {
    top: 135px !important;
  }
}

#sgo_sidebar {
  max-width: 233px !important;
  width: 100%;
  margin-top: 45px;
}

@media (max-width: 768px) {
  #sgo_sidebar {
    margin-top: 100px;
  }
}

.progress-bar::after {
  content: '%';
  display: inline-block;
}

/* CSS Nesting natif pour email_in_header */
.email_in_header {
  & tr {
    border: 2px solid black;
    border-collapse: collapse;
  }

  & td {
    padding: 5px;
    border: 2px solid black;
    border-collapse: collapse;
  }
}

.sgo_number_format {
  text-align: right;
}

.copyable .button_copy {
  margin-left: 5px;
  display: inline-block;
}

.label_link {
  font-size: .75em;
  margin-left: 10px;
  top: 3px;
}

.display_on_parent_mouseover {
  opacity: 0;
}

/*
 * Classe utilisée par `css_class_with_explain` pour les éléments archivés
 * (CampaignTemplate, Campaign, Credential, Comment...). Voir doc complète
 * dans _lib/app/views/backoffice/_elements.html.erb.
 * Estompée mais lisible : signale l'archivage sans masquer l'information.
 */
.archived,
tr.archived > td {
  opacity: .8;
  font-style: italic;
}
.archived:hover,
tr.archived:hover > td {
  opacity: 1;
}

.sgo_overflow_x_scroll {
  min-width: 100%;
  overflow-x: scroll;
}

@media (max-width: 768px) {
  .sgo-hide-on-mobile {
    display: none;
  }
}

.sgo_js_context_menu_content {
  position: fixed;
  display: none;
  z-index: 1000;
}

.sgo_js_context_menu::after {
  content: '\22EE'; /* Code Unicode pour les trois points verticaux */
  font-size: 14px; /* Taille du pictogramme */
  color: #666; /* Couleur du pictogramme */
  margin-left: 5px; /* Espace entre le texte et le pictogramme */
  vertical-align: top; /* Alignement vertical avec le texte */
}

.copyable_on_click {
  cursor: pointer; /* Change le curseur pour indiquer un élément cliquable */
  color: #1a73e8; /* Couleur bleue pour mettre en évidence */
  border-bottom: 1px dashed #1a73e8; /* Souligne de manière discrète */
  padding: 2px 4px; /* Un peu de padding pour le design */
  transition: background-color 0.3s ease; /* Transition pour effet au survol */
}

.copyable_on_click:hover {
  background-color: #e8f0fe; /* Couleur de fond au survol pour plus de visibilité */
}

.copyable_on_click::after {
  content: '\f0ea'; /* Code Unicode pour l'icône du clipboard */
  font-family: 'FontAwesome'; /* Assurez-vous que la famille de polices est définie */
  font-size: 14px; /* Taille de l'icône */
  color: #666; /* Couleur de l'icône */
  margin-left: 5px; /* Espace entre le texte et l'icône */
  /* vertical-align: middle; */
}


i.warning {
  color: #dfba49 !important;
}

i.info {
  color: #3598dc !important;
}

i.danger {
  color: #f3565d !important;
}

i.success {
  color: #45b6af !important;
}


.dashboard_portlet {
  width: 100%;
}


.tox-tinymce-aux {
  z-index: 999999 !important;
}

/* CSS Nesting natif pour tinymce_inline */
.tinymce_inline {
  outline: 1px dotted gray;
  padding: 5px;
  margin: 5px;

  &:hover {
    outline: 2px solid gray;
  }

  & p:last-child {
    margin-bottom: 0;
  }
}

.tinymce_inline_saved {
  outline: 2px dotted green !important;

  &:hover {
    outline: 2px solid green !important;
  }
}


/** fileupload **/
.fileupload_label {
  width: 100%;
  height: 100px;
  border: 2px dashed #aaa;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  background-color: #f9f9f9;
  text-align: center;
  color: #555;
  cursor: pointer;
  transition: background-color 0.2s;
  box-sizing: border-box;
}

.fileupload_label:hover {
  background-color: #eef;
}

.fileupload {
  display: none !important;
}

/** EOF fileupload **/

/* Ici, on remplace la hauteur max par défaut (200px) par 400px */
.select2-container .select2-results__options {
  max-height: 800px !important;
}

.select2-container--bootstrap .select2-results__group {
  color: black !important;
}

.select2-container--bootstrap .select2-results__option[aria-selected=true] {
  background-color: #bed7fb !important;
}

.sgo_editable {
  display: inline-block;
  cursor: pointer;
  position: relative;
}

.sgo_editable:hover {
  background-color: rgba(0, 123, 255, 0.05);
  outline: 1px dashed #007bff;
  outline-offset: 2px;
}


.sgo_portlet_header_button {
  background-color: transparent;
  border: 0;
}

/* Tests système pour les styles de portlets : test/system/sgo_portlet_test.rb */
.sgo_portlet span.title {
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.sgo_portlet span.title:hover {
  text-decoration: none;
}

.sgo_portlet span.title:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  background-color: rgba(0, 123, 255, 0.1);
}

#safari_ios_pwa_alert {
  display: none;
  width: calc(100vw - 20px);
  max-width: 500px;
  height: auto;
  margin: 10px;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
  border-radius: 5px;
  background-color: #fff;
  -webkit-box-shadow: 8px 0px 50px 3px rgba(0, 0, 0, 0.28);
  box-shadow: 8px 0px 50px 3px rgba(0, 0, 0, 0.28);
}

#safari_ios_pwa_alert p {
  margin: 15px;
}

.editable-click, .editable-click p {
  color: rgb(39, 59, 84);
  font-style: normal;
  border-bottom: none !important;
}

/* CSS Nesting natif pour talk.
   Layout média-object mutualisé admin/employee (cf. task/_talk.html.erb) :
   avatar flottant à gauche + message en flow-root qui occupe le reste, collé à
   l'avatar. Remplace l'ancienne grille Bootstrap (col-md-1/col-md-11) qui, en
   pourcentages, faisait déborder l'avatar (img 200px) sur le message sur conteneur
   étroit, et réservait une colonne de 90px (.avatar_container) pour un avatar de
   50px — d'où un écart trop grand sur les écrans larges. On borne ici l'avatar à
   sa taille réelle : plus de chevauchement ni d'espace perdu, à toute largeur. */
.talk {
  display: flow-root; /* contient le float de l'avatar */

  & .talk-avatar {
    float: left;
    margin-right: 10px;
  }

  & .avatar_container {
    width: auto; /* coller au plus près de l'avatar, ne pas réserver 90px */
  }

  & .avatar {
    display: block;
    width: 50px;
    height: 50px;
  }

  & .talk-message-wrap {
    display: flow-root; /* média-object : occupe le reste, à côté de l'avatar flottant */
  }

  & .message {
    border: 1px solid grey;
    padding: 10px;
  }

  /* Repli d'un message : la ligne cliquable qui le remplace (task/_talk_summary).
     Deux styles, parce que ce ne sont pas deux fois la même chose :
     - .talk_expand_siblings seul = message de traçabilité, ligne muette « ....... » ;
     - .talk_summary = message réduit à la main, qui a du contenu : encadré et fond,
       pour qu'il reste identifiable comme un message et pas comme du bruit. */
  & .talk_expand_siblings {
    cursor: pointer;
  }

  & .talk_summary {
    margin-left: 70px; /* aligne la ligne sur le cadre des messages dépliés (mesuré) */
    border: 1px solid #d8d8d8;
    border-left: 3px solid #a9a9a9;
    border-radius: 3px;
    background: #fafafa;
    padding: 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  & .talk_summary:hover {
    background: #f1f7fb;
  }

  & .talk_summary > span {
    margin-right: 6px;
  }

  & .talk_summary .name,
  & .talk_summary .datetime {
    font-weight: 600;
  }

  & .talk_summary_chevron {
    color: #888;
    margin-right: 4px;
  }

  & .talk_summary_extract {
    color: #777;
    font-style: italic;
  }

  /* Sections repliables à l'intérieur d'un message :
     <details><summary>Titre</summary>…</details> (bouton « Section repliable » de TinyMCE
     ou HTML écrit directement, cf. skill sgo_talk_sections).

     Le repli est piloté par notre attribut d'affichage `data-open` (posé au clic par
     task/_talk.js) et pas par l'attribut natif `open` : sur la page d'un ticket, le
     corps du message est un éditeur TinyMCE inline (contenteditable), et Chrome y force
     l'ouverture des <details>. Le repli natif y serait donc inopérant, c'est-à-dire
     précisément là où l'équipe lit les tickets. `data-open` est retiré à l'enregistrement
     (filtre de sérialisation TinyMCE, sgo_tinymce.js) comme à l'affichage
     (Talk#content_sanitized) : une section revient donc toujours repliée à la lecture. */
  & .message details {
    border-left: 3px solid #d0d7de;
    background: #fafbfc;
    border-radius: 3px;
    margin: 6px 0;
    padding: 2px 8px;
  }

  & .message details:not([data-open]) > *:not(summary) {
    display: none;
  }

  /* Pendant la rédaction, la section est toujours dépliée : on n'édite pas ce qu'on ne voit
     pas. TinyMCE pose mce-edit-focus sur l'éditeur inline qui a le focus et la retire au
     blur — le rédacteur voit donc le rendu replié dès qu'il quitte le message.
     Même spécificité que la règle de repli ci-dessus : c'est l'ordre qui tranche. */
  & .message .mce-edit-focus details > *:not(summary) {
    display: revert;
  }

  & .message details > summary {
    cursor: pointer;
    font-weight: 600;
    color: #337ab7;
    padding: 3px 0;
    list-style: none; /* on dessine notre propre chevron (::before) */
  }

  & .message details > summary::-webkit-details-marker {
    display: none;
  }

  & .message details > summary::before {
    content: '\25B8\00A0'; /* ▸ */
  }

  & .message details[data-open] > summary::before {
    content: '\25BE\00A0'; /* ▾ */
  }

  & .message details[data-open] > summary {
    margin-bottom: 4px;
  }
}

@media (max-width: 999px) {
  .talk .talk_summary {
    margin-left: 40px; /* avatar réduit à 30px sur petit écran */
  }
}

/* Icône FontAwesome dans un bouton de la barre d'outils TinyMCE : son skin force sa propre
   police sur tout ce qui n'est pas un <svg> (règle !important sur `.tox :not(svg):not(rect)`),
   et le glyphe s'affichait donc en caractère manquant. On rétablit la police par les variables
   exposées par FontAwesome, pour ne pas figer son numéro de version dans le CSS. */
.tox .tox-icon i.fa-regular {
  font: var(--fa-font-regular) !important;
}

.tox .tox-icon i.fa-solid {
  font: var(--fa-font-solid) !important;
}

/* Repères visuels d'une section repliable PENDANT sa rédaction. TinyMCE pose la classe
   mce-edit-focus sur l'éditeur inline qui a le focus et la retire au blur (vérifié) : c'est
   notre seul signal « ce message est en cours de rédaction ». Sans ces repères, le rédacteur
   ne distingue ni le titre du détail, ni la section du reste du message.
   Purement visuel (cadre + titre teinté), sans texte explicatif à demeure : une phrase à
   l'écran à chaque section repliable prenait de la place pour ne rien dire de plus que le
   cadre lui-même (retour Nathan, T52624) — l'explication vit dans la bulle d'aide et le
   tooltip du bouton d'insertion, pas dans le message.
   Les trois classes de l'éditeur sont enchaînées pour égaler la spécificité de la règle de
   base `.talk .message details` ci-dessus — c'est alors l'ordre qui tranche. Vaut pour
   l'édition d'un message existant comme pour la boîte de saisie d'un nouveau message. */
.tinymce_inline.mce-content-body.mce-edit-focus details {
  border: 1px dashed #7aa7cc;
  border-left: 3px solid #337ab7;
  border-radius: 3px;
  background: #f7fafd;
  margin: 10px 0;
  padding: 6px 8px;
}

/* Le titre est la seule partie qui reste visible : on le montre comme une barre teintée,
   distincte du cadre englobant — c'est ce contraste qui porte l'information, pas une phrase. */
.tinymce_inline.mce-content-body.mce-edit-focus details > summary {
  background: #e6eff8;
  border-radius: 2px;
  padding: 2px 6px;
  list-style: none; /* un seul chevron : le nôtre (::before), pas celui du navigateur */
}

.tinymce_inline.mce-content-body.mce-edit-focus details > summary::-webkit-details-marker {
  display: none;
}

.tinymce_inline.mce-content-body.mce-edit-focus details > summary::before {
  content: '\25BE\00A0'; /* ▾ : déplié tant qu'on rédige */
}


.sgo_stat_card_row_1 {
  font-size: 3em;
}

/* Expéditeur de campagne : préfixe + @ + domaine alignés */
.campaign_from_inline {
  display: flex;
  gap: 8px;
  align-items: center;
}

.campaign_from_inline > input,
.campaign_from_inline > .select2 {
  flex: 1 1 0 !important;
  min-width: 0;
  width: auto !important;
}

.campaign_from_inline > select {
  flex: 1 1 0;
  min-width: 0;
}

.campaign_from_inline > span {
  flex: 0 0 auto;
  font-weight: 600;
}

/* Effet de grisage pour un formulaire */
.disabled-overlay {
  position: relative;
}

.disabled-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(200, 200, 200, 0.6);
  cursor: not-allowed;
  z-index: 10;
}

/* Blocs à accès restreint (pierre_only, super_administrators_only, dev_only) */
.restricted-block {
  position: relative;
  border: 1px dashed #d0d0d0;
  border-left: 3px solid #b8860b;
  padding: 18px 14px 12px;
  margin: 16px 0 12px;
  border-radius: 3px;
}
.restricted-block::before {
  content: attr(data-restricted-label);
  position: absolute;
  top: -9px;
  left: 14px;
  background: #fff;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #b8860b;
}

/* Barre de progression (helper progress_bar).
   Couleurs de remplissage SATURÉES (assez foncées pour du texte blanc) — on n'utilise pas
   les bg-* de Bootstrap 3 dont les variantes "contextuelles" (success/info/warning) sont pâles. */
.progress_bar_mini_done { background: #337ab7; }            /* primary (défaut) */
.progress_bar_mini_done.pb-primary { background: #337ab7; }
.progress_bar_mini_done.pb-success { background: #449d44; }
.progress_bar_mini_done.pb-info    { background: #2aabd2; }
.progress_bar_mini_done.pb-warning { background: #df8a13; }
.progress_bar_mini_done.pb-yellow  { background: #e0b400; }
.progress_bar_mini_done.pb-danger  { background: #c9302c; }

/* Étiquette % "deux tons" : texte centré sur toute la barre, sombre sur la partie vide,
   et un clone blanc clippé pile à la frontière du remplissage → lisible sur la partie colorée.
   Le clone (.pb-val-on) est vide : son texte vient de ::after (attr data-pct), donc il
   n'est PAS indexé par le tri/filtre table_filter (qui lit textContent + title). */
.pb-twotone .pb-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  color: #222;
  pointer-events: none;
}
.pb-twotone .pb-val-on { color: #fff; }
.pb-twotone .pb-val-on::after { content: attr(data-pct); }

/* Notation en 5 étoiles (backoffice/_stars_rate) : pleine, demie, vide.
   La demi-étoile est un unique glyphe plein dont le dégradé (moitié pleine / moitié vide)
   est clippé sur le texte — aucune superposition d'icônes.
   Un contexte surcharge les deux couleurs via les variables CSS (cf. .member-rate). */
.stars-rate {
  --stars-rate-full: #ffc107;
  --stars-rate-empty: #ced4da;
  white-space: nowrap;
}
.stars-rate[title] { cursor: help; }
.stars-rate i { font-size: 0.7em; }
.stars-rate-full { color: var(--stars-rate-full); }
.stars-rate-empty { color: var(--stars-rate-empty); }
.stars-rate-half {
  background: linear-gradient(90deg, var(--stars-rate-full) 50%, var(--stars-rate-empty) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Satisfaction client d'un point de vente (backoffice/_member_rate) : étoiles corail,
   plus grandes, réduites dans les tableaux de group/animator (.stars-rate-compact). */
.member-rate {
  color: #c6c6c6;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
.member-rate .stars-rate { --stars-rate-full: #ff6f61; }
.member-rate .stars-rate i { font-size: 1.3em; }
.member-rate .stars-rate-compact i { font-size: 0.8em; }