@charset "UTF-8"; /* si caractères non-ASCII, notamment propriétés comme content. @charset peut garantir que ces caractères sont correctement interprétés - 05/03/2025 */
/*enregistré en UTF_8*/

/* FIXME : changer les couleurs personnalisées de Bootstrap (à partir de la version 5.2 semble-t-il) - 09/02/2025
:root {
--bs-blue: #ec3aef;
--bs-primary: #c96a94;
--bs-secondary: #d8d895;
--bs-primary-rgb: 10, 50, 60;
--bs-secondary-rgb: 5, 150, 85;
}
*/

/* starter-template pour avoir un menu via bootstrap */
body {
  padding-top: 5rem;
  line-height: 1.3;
  /* radial ou … */
  /*OFF 092023 : sans fond car fond blanc par défaut désormais : background-image: radial-gradient(circle, rgba(3, 139, 208, 0.2) 50%, #038bd0);*/
    /*circle permet de faire un rond et non ovale*/
  /* … ou lineaire */
  /*OFF_background-image: linear-gradient(180deg, rgba(3, 139, 208, 0.2) 50%, #038bd0);*/
  background-attachment: fixed;
}
.starter-template {
  padding: 1rem 1.5rem;
  text-align: center;
}
/* FIN starter-template pour avoir un menu via bootstrap */


/*pour ne pas utilser police par défaut du site*/
.font-base-system {
  font-family : system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif !important ;
}


/*dégradé bleuté horizotnal (ex: barre de menu avec fond de couleur noir)*/
.degradePrimaireH {
  background-image: -webkit-linear-gradient(right, #038bd0, rgba(3, 139, 208, 0.2));
  background-image: -o-linear-gradient(right, #038bd0, rgba(3, 139, 208, 0.2));
  background-image: linear-gradient(to left, #038bd0, rgba(3, 139, 208, 0.2));
}


/*06/02/2022 : suite ajout fond dans body*/
.tab-content {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0.7rem;
  border-radius: 4px;
}


/*complement aux classes incomplètes de Bootstrap (pour réduire police) : https://getbootstrap.com/docs/5.1/utilities/text/#font-size */
.fs-5_5 { /*5.5 car entre 5 et 6*/
  font-size: 1.15rem!important;
}
.fs-7 {
  font-size: 0.95rem;
}
.fs-8 {
  font-size: 0.9rem;
}
.fs-9 {
  font-size: 0.8rem;
}

.text-shadow-M {
  text-shadow: -1px 2px 10px rgba(0,0,0, 0.5);
}
/*double ombrage (2shadow) pour meilleur mise en évidence*/
.text-2shadow-L { /*ex: bouton-image catalogue*/
  text-shadow: 0px 0px 10px rgba(0,0,0, 1.0) , 0px 0px 10px rgba(0,0,0, 1.0)
}

.bouton-image.animation_assombrissement img {
  filter: brightness(100%);
  transition: filter 0.9s ease;
}
.bouton-image.animation_assombrissement:hover img {
  filter: brightness(70%); /*assombrir image*/
}


/*pour supprimer border*/
.rounded-none {
  border-radius: 0rem!important;
}
/*pour arrondi en haut large (ex: pour titre colonne arrondi. ex: DrC) */
.rounded-top-lg {
  border-top-left-radius: .6rem!important;
  border-top-right-radius: .6rem!important;
}

/*rounded-4 et rounded-5 qui existe dans future version de BS (>5.2) - 18/12/2024*/
.rounded-4 {
  border-radius: 1rem !important;
}
.rounded-5 {
  border-radius: 2rem !important;
}
.rounded-top-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.rounded-bottom-0 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
/*autres valeurs : https://getbootstrap.com/docs/5.1/utilities/borders/#border-radius */


/*selon hauteur fenêtre (viewport height) 27/09/2023*/
.vh-25 {
  height: 25vh!important ;
}
.vh-50 {
  height: 50vh!important ;
}
.vh-75 {
  height: 75vh!important ;
}
  /* vh-100 existe déjà */
/* hauteur minimale 27/09/2023*/
.min-vh-25 {
  min-height: 25vh!important ;
}
.min-vh-50 {
  min-height: 50vh!important ;
}
.min-vh-75 {
  min-height: 75vh!important ;
}
  /* min-vh-100 existe déjà */


/* pied de page */

main > .container {
  padding: 60px 15px 0;
}

.footer {
  /*background-color: #f5f5f5;*/
}

.footer > .container {
  /*padding-right: 15px;
  padding-left: 15px;*/
}
/* FIN pied de page */



/* traduction */

/*picto de traduction non visible par défaut*/
.trad > [class^="icon-"] , .trad > [class^=" icon-"] {
    color: lightcoral;
    opacity: 0.5;
    cursor: pointer;
    padding-right: 2px;
}

/*aide visuelle une fois un texte traduit*/
.trad.modifiee .icon-textarea-t:before {
  content: '\e804';/*utilise icone du cadre "T" mais sans le T justement */
}
.trad.modifiee .icon-textarea-t {
  color: orange;
}
/*icone combinée/superposée*/
.trad.modifiee .icon-textarea-t:after {
  content: '\e81e';/*icone "!" dans triangle */
  margin-left: -0.98em;/*mini ajustement car mini décalage selon icone affichée*/
  transform: scale(0.75);/*adapter selon icone à afficher*/
  font-family: "fontello";
  display: inline-block;
  /*width: 0.95em;*/
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);*/
}
/*souligne texte changé*/
.trad.modifiee .txt_TRAD {
  border-bottom: 3px dashed orange;
  border-bottom-style: double;
}


/*picto de traduction s'affiche au survol du texte à traduire*/
.trad:hover > [class^="icon-"] , .trad:hover > [class^=" icon-"] {
    opacity: 1;
}
/*picto de traduction + sombre au survol du picto*/
.trad > [class^="icon-"]:hover , .trad > [class^=" icon-"]:hover {
    color: darkblue;
}

/*
.trad::before {
    content: "[";
}

.trad::after {
    content: "]";
}

  .trad::before
, .trad::after
{
    color: red;
}
*/



 [class^="icon-"]:before, [class*=" icon-"]:before {
  margin-right: .0em;
  margin-left: .0em;
}

/* FIN traduction */


/* * * * * * * * * objets communs (fond de page sombre, zone lecteur vidéo, case fermeture,…) * * * * * * * * * */
#fondDePageSombre {
  display: none;
  background-color: rgba(0, 35, 45, 0.75);
  top: 0;  left: 0;
  width: 100%;  height: 100%;
  position: fixed;
  z-index: 100;
}
#zoneLecteurVideo {
  width: 100%;
  left: 0;
  display: none;
  z-index: 101;
  position: absolute;
  text-align: center;/*pour centrer même si contenu proicnapl page non centré - 07/02/2025*/
}
.caseDeFermeture {
  display : none; /**/
  position: absolute;
  right: 0;  top: 0;
  width: 50px;  height: 50px;
  margin-top: -25px;  margin-right: -25px;
  background-color: black;
  background-image: url(../images/commun/close.png);  background-repeat: no-repeat;  background-position: center;
  cursor: pointer;
  }
/* * * * * * * * * FIN objets communs (fond de page sombre, zone lecteur vidéo, case fermeture,…) * * * * * * * * * */


/* fenêtre modale */
.modal-content {
  box-shadow: 0px 1rem 2rem 2rem rgba(0,0,0, 0.4);  /*ombre pour meilleure lisibilité quand plsueiurs fenêtres modales superposées*/
}
.modal-footer {
    justify-content: center ;
}

/*cible la fenêtre modale de recherche avancée (via aria-labeldby… plutôt que avdSearchModal_advancedTable_LTR qui est trop unique*/
.modal[aria-labelledby=mySmallModalLabel][role=dialog] h5::after {
  content: "⚠️ Ici, ça fait la différence entre les caractères accentués ou non. Les valeurs saisies restent actives même après fermeture de cette fenêtre (pensez à les supprimer si vous voulez faire une autre recherche).  💡 Il est possible de saisir les caractères spéciaux tels que « ? ( ) * » …";  /*⚠️💡💭💬*/
  font-size: 0.7em;
  display: block;
  font-weight: normal;
  line-height: 1.2em;
}

/* FIN fenêtre modale */



.pointer {
  cursor: pointer !important; /*curseur de main*/
}



/*label (si focus sur case/btn radio)*/
  /*rq: que ici et pas pour tout le site car parfois pnuit à la lisibilité (ex: RES CHIR sous FF devient peu lisible quand clic car met le focus dans la foulée sur case à cocher )*/
  .tab-content [data-jc-mode="creer"] .form-check-input:focus ~ .form-check-label
, .tab-content [data-jc-mode="modifier"] .form-check-input:focus ~ .form-check-label
{
  /*OFF_background-color: #d0dff2; /*que pour FORM01*/
  color: #186AB3;
  border-color: #186AB3;
}


/* champ form-floating */
/*une fois curseur dans champ ou champ rempli (réduit sa zone de surface réelle sinon il faudrait remettre pointer-events:none dans .form-floating>label) car empêcherait de sélectionner correctement les caractères du champ*/
.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
  opacity: 1;
  transform: scale(.85); /*translateY(-.5rem) ; translateX(.15rem);*/
  height: auto;  /*evite le 100% de .form-floating>label*/
  line-height: 1em;
  padding: 3px 6px 6px 6px;
  border-width: 0px; /*car 1px transparent avec background-image => bug : affiche contour en blanc !! */
  margin-top: 1px;
  margin-left: 1px;
  border-top-left-radius: 0.25rem;
  /*background-color: red;*/
  background-image: linear-gradient(180deg, #FFF 70%, rgba(255, 255, 255, 0) 100%) ;
  color:#AAA;
}


/*en mode voir (fieldset = disabled)*/
  fieldset:disabled label {
    color: #777;
    margin-bottom: 0;
  }
/*placeholder invisible en mode voir*/
  fieldset:disabled .form-control::placeholder {
    /*color: transparent ; /*invisible*/
    color: rgb(0,0,0,0.03) ; /*quasi invisible*/
}
/*bloc devant champs, accolés*/
  fieldset:disabled .input-group-text {
    background-color: #f8f8f8;
    border: none;
  }
/*bloc mais aussi btn (ex: "aucun" devant select)*/
  fieldset:disabled .input-group-text.btn {
    display: none; /*masqué pour ne laisser que le menu select,…*/
  }
/*menu select*/
  fieldset:disabled .form-select {
    background-color: #f8f8f8;
    border: none;
    background-image: none;
    border-radius: .25rem; /*au cas où btn du genre "aucun" devant qui devrait être masqué*/
  }
  fieldset:disabled .form-floating>.form-control:not(:placeholder-shown)~label {
    background-image: linear-gradient(180deg, #f8f8f8 70%, rgba(255, 255, 255, 0) 100%); /*change juste 1re couleur : même couleur que fond du chp lié*/
    margin-top: 0px;  margin-left: 0px; /*car pas de bordure, donc 0 évite de voir un peu le texte à gauche et en haut, si défile*/
  }
/*list-group*/
  fieldset:disabled .list-group-item {
    border: none;
    background-color: #f8f8f8;
    color: #486e3c; /*≈#111a0e mais ici ce n'est pas atténué par le disabled => +clair*/
  }
  fieldset:disabled .list-group.listeMultiCoches .list-group-item .form-check-input:checked~.form-check-label {
    background-color: initial; /*pour enlever la couleur de sélection active (car si modifié, revient en mode voir)*/
  }

/*bouton permettant de changer un choix en affichant la liste de choix (via choixEntite_selonMode ou choix_listeMultiCoches_selonMode)
Si fieldset disabled (ex: NC pour certains admin - NC_MDF_PHS_valid)*/
  fieldset:disabled .btnChangerX {
    display: none!important;
  }

.texteDansZoneFixe /*ex: fiche NC*/ {
  padding: 0.38rem .75rem;
  display: inline-block;
}
/*FIN en mode voir (fieldset = disabled)*/



.form-control:disabled, .form-control[readonly] {
  background-color: #f8f8f8;
  opacity: 1;
  color: #000;/*impossible de mettre un noir/blanc complet (sous Safari. ok sous FF)*/
  color: #111a0e ; /*verdâtre à peu près comme pour label des caseAcocher et btnRadio*//*≈#486e3c mais ici atténué par disabeld => + sombre*/
  font-weight: 500;
  border: none;
  resize: none;  /*évite poignée de redimensionnement en bas à droite (Safari)*/
}
/*10/08/2023 : pour champ de type date (dans form-control dont fieldset-grand-parent est disabled), il faut ausi rendre le datepicker (picto du navigateur pour choisir une date) inactif*/
/*rq : si readonly vraiment attribué directement sur le input, ok ça masque déjà le datepicker*/
  input[type="date"].form-control:disabled /*date (ex: FF)*/
, input[type="time"].form-control:disabled /*heure (même si pas encore de timepicker à priori)*/
{
  pointer-events: none;  /*source : Source: https://stackoverflow.com/questions/40705815/disabling-datepicker-on-an-input-field */
    /*empêche aussi sélection mais pas bien grave*/
}
/*ex: champs K2Axe (inactif car juste pour info : pour ressembler à form-control:disabled mais dépend du navigateur)*/
.form-control[readonly] {
  color: #495057;
}

/*ajout couleur de fond quand erreur */
  .form-control.is-invalid, .was-validated .form-control:invalid  /*champ(input)*/
, .form-select.is-invalid, .was-validated .form-select:invalid /*liste de choix (select)*/
, .form-check-input.is-invalid, .was-validated .form-check-input:invalid /*case à cocher*/
{
  /*background-color: #dc354544;  /*2 dernier caractères pour le degré de transparence (ici couleur en Hexa avec alpha).*/
  background-color: rgba(220,53,69,.15) ; /*plus classique avec rgba (comme le contour quand le focus est dans le champ)*/
}
/*15/02/2022 : ajout aussi pour btnGrouper (btn-group / btn-check) dont is-valid n'est pas géré par Bootstrap ! (lié à ci-dessus mais à part car ici : contour et texte)*/
.btn-group .btn-check.is-invalid + label, .was-validated .btn-group .btn-check-input:invalid + label /*btn radio en groupe (ex: societe fiche NC) */
/* le "X + Y" = Y situé juste après X */
{
  background-color: rgba(220,53,69,.15) ; /* idem qu'au-dessus "ajout couleur de fond quand erreur" */
  border-color: #dc3545;
  color: #dc3545;
}
/*pour input de type range (réglette)*/
.form-control.form-range.is-invalid {
  padding-right: 2.1rem; /*pour laisser voir le picto "!" quant erreur*/
  border-width: 1px ;
}

/**/




/*07/01/2022 : listeMultiCoches (liste permettant de faire plusieurs choix - aspect de bloc avec case à cocher et entièrement cliquable avec label pleine surface)
  ex: RES de CHIR (basé sur .list-group-item de bootstrap) */
.list-group.listeMultiCoches .list-group-item {
  padding: 0 ;  /*supprime le padding (sera mis sur le padding du label).*/
  padding-left: 1.5rem;  /*sauf le gauche (pour décaler)).*/
/*}
.list-group.listeMultiCoches .list-group-item.form-check {*/
  margin-bottom: 0;  /*supprime marge entre zone*/
  display: flex;
  flex: auto;/*au cas où on utilise list-group-horizontal sur .list-group => acarte élément sur toute la largeur (mais peut-être à voir selon le besoin)*/
}
/*correction : car ici, j'ai un 1er élément déjà existant (un "hidden") qui est en 1re position. Donc je cible le 2e*/
.list-group.listeMultiCoches .list-group-item:nth-child(2) {
  border-top-right-radius: inherit;
  border-top-left-radius: inherit;
}
/*case à cocher*/
.list-group.listeMultiCoches .list-group-item .form-check-input {
  margin: auto; /*permet aligenemnt vertical automatique*/
  margin-left: -1rem;  /*ajuste position case par rapport au label*/
  z-index: 0;/*pour que les case soietn encore cliquable (sinon bizarrement ne le sont plus, comme si le label qui passe devant n'est plus actif juste au niveau de la case. bizarre)*/
}
/*label qui suit la case à cocher*/
.list-group.listeMultiCoches .list-group-item .form-check-label {
  padding: .5rem 1rem .5rem 2rem;  /*idem que .list-group-item d'origine. Pour que toute la zone soit cliquable. Et pas seulement case et label. Car mis à 0 dans .list-group-item.listeMultiCoches*/
  flex: auto;  /*aligne ainsi à gauche*/
  margin-left: -1.5rem;  /*ajsute position case par rapport au label*/
}
/*fond label (donc aussi de la zone )*/
.list-group.listeMultiCoches .list-group-item .form-check-input:checked~.form-check-label {
  background-color: rgb(211, 249, 196);
}
.list-group.listeMultiCoches .list-group-item .form-check-input~.form-check-label:hover {
  color: #186AB3;
  background-color: #deedfb!important;
}

/*FIN listeMultiCoches*/




.form-label {
  margin-bottom: .15rem; /*marge sous les label plus faible (0.5 normalement !)*/
}


/* case à cocher et bouton radio (et leur label associé) */

.form-check {
  line-height: 1.5rem; /*interligne réduit via body => re-corrige pour meilleur alignement des label*/
}
.form-check .form-check-input {
  cursor: pointer;
}
.form-check-label { /*le label associé*/
  padding-left: 0.35rem;  margin-left: -0.4rem;  /*pour ne pas avoir d'espace non cliquable entre la case/radio et le label (rq 15/02/2022 : si 0.5rem, 2-3px non cliquable sur la droite du btn radio !)*/
  cursor: pointer; /*plus visible, comme pour un bouton*/
}


/* button switch (ex: détailler ligne (DrC) */
.form-switch .form-check-input {
  margin-bottom: 0px;
  width: 2.5em;
  line-height: 1em;
  height: 1.6em;
  border-color: rgba(13, 110, 253, 0.7);
  margin-top: 3px;
  margin-right: 0.25em;
}
.form-switch .form-check-label {
  vertical-align: middle;
  width: 100%; /*évite d'aller à la ligne si label trop long (le texte commencerait sous le switch et décalé) - 15/07/2023*/
}


/*en mode voir (fieldset = disabled)*/
  /*chaque ligne de réponse est sur une seule ligne (même si à l'origine sur même ligne (ex: oui/non). Evite zone espace vide*/
  fieldset:disabled .form-check {
    display: block;
    min-height: 0;
    width: 100%;/*chaque valeur l'une sous l'autre et évite que les valeurs non utilisée occupe de l'espace (même si flex utilisé pour affichage côte à côte)*/
  }
  /*masque les caseACocher Et btnRadio cochés ou non (seul le label est utile) */
  fieldset:disabled .form-check-input:disabled {
    display: none;
  }
  /*masque les labels qui suivent caseACocher Et btnRadio non cochés */
  fieldset:disabled .form-check-input:disabled:not(:checked) + .form-check-label {
    display: none;
  }
  /*masque les labels qui suivent caseACocher Et btnRadio cochés. Idem mais san sle :not(…)*/
  fieldset:disabled .form-check-input:disabled:checked + .form-check-label {
   /* color: #434343;*/
    color: #337214;
    opacity: 1;
    font-weight: 500;
    cursor: default;
  }
/*FIN en mode voir (fieldset = disabled)*/



/* FIN case à cocher et bouton radio (et leur label associé) */


/* * * * * * * * * boutons : btn-…  * * * * * * * * */
.btn-light:hover {
  background-color: #e7ebef;  border-color: #e7ebef; /*accentue davantage la surbrillance*/
  /* background-color: #0d6efd;  color: #FFF; */
}
/* * * * * * * * * FIN boutons : btn-…  * * * * * * * * */


/* au reglette de type range */
.form-range {
  cursor: pointer;
  border-width: 0px; /*car le form-control ajoute bordure*/
/*aidera à mieux visualiser si en erreur*/
  border-radius: 1rem; /*plus esthétique si .is-invalid*/
  padding: 0 0.25rem;
}

.modal .badge.icon-after:after {
  content: '\e81a';  /*icon-info-circled*/
  /*style en + ajouté via .icon-before:before, .icon-after:after */
}


.badge.NEW {
  background-color: rgb(255, 193, 7);  /*orange/jaune*/
  color: #000 ;
}
/*badge dans barre de menus ou dans bouton (ex: accès FORM01) */
  .blocBadges.dansMenu
/*, .blocBadges.dansBtn (pas utile car le badge serait un peu trop bas, si dans un bouton)*/
{
  top: 2px!important
}
  .blocBadges.dansMenu .badge
, .blocBadges.dansBtn .badge
{
  padding: 1px 3px;
  margin: 0px 1px;
}


/*applique le style de base aux icones ajoutées via before/after dans onglet par exemple*/
.icon-before:before, .icon-after:after {
  /*contenu strictemetn idem que dans fontello.css : [class^="icon-"]:before, [class*=" icon-"]:before */
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

/*petit ajustement : supprime marge inutile (ex: dans onglet, il y a déjà une marge après le texte)*/
.icon-before:before {
  margin-left: 0em;
}
.icon-after:after {
  margin-right: 0em;
}



.card-body { /*les blocs tel que ADR, REFRA*/
  padding:0.75rem; /*au lieu de 1.25rem*/
}


/* si en mode card-view - 02/03/2023 */
/*les titres de colonne situés à gauche, en ligne ici*/
.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-title {
  font-weight: normal;
  min-width: 9.5em; /*30% par défaut mais me semble beaucoup (sera à adapter selon les sites + chaque site + la longueur des titres)*/
  color: #777;
  font-size: 0.7rem;
  text-align: right!important;
  padding-right: 0.5rem;
}
/*le contenu de colonne situés à droite, en ligne ici*/
.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value {
}
/*idem aux 2 ci-dessus*/
  .bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-title
, .bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value
{
  line-height: 1.15rem;/*idem aux 2 pour garder meilleur alignement*/
}
/* FIN si en mode card-view */



/*pour eviter d'utiliser autre police AWESOME (alors que j'ai déjà fontello)
je reprends alors certaines classes de  https://use.fontawesome.com/releases/v5.6.3/css/all.css (que je n'utilise pas)  pour compenser/corriger
fa = font awesome (déprécié ! => utiliser fas ou far = fa solid ou fa regular)
  source info : https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
*/

/*éviter qu'un élément utilisant balise <i>…</i> ne passe en italique (ex: petite croix pour effacer recherche d'un champ)*/
i {
  font-style: normal;
}
a.btnIcon { /*evite soulignement si utilise picto dans balise a*/
  text-decoration: none;
}
.btnIcon { /*picto un peu comme un bouton (avec rond autour pour mieux montrer cliquable)*/
  text-align: center;
  border-radius: 30px;
  width: 1.5em;  height: 1.5em;  line-height: 1.5em;
  display: inline-block;
  cursor: pointer;
  margin: 0 2px;
}
.table tbody tr .btnIcon {
  color:#DDD;/*plus discret (car se répète chaque ligne d'un tableau)*/
}
.table tbody tr:hover .btnIcon {
  color:#007bff
}
/*lors du survol, on applique la couleur primary (on peut créer des déclinaisons pour avoir autre couleur selon besoin)*/
/*.btnIcon*/.survol-primary:hover { /*picto, btn,… sans fond (de base). Ajoute fond pour mieux montrer cliquable. ex: btn action d'un listing*/
  background-color: #007bff!important;
  color: #FFF!important;
}

.fa, .fab, .fal, .far, .fas {
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  display: inline-block;/*evite soulignement pictos d'action*/
  font-family: "fontello";
  /*font-weight: 900;*/
}
/*les boutons de la barre d'outils*/
.fixed-table-toolbar button {
  padding: 0.3rem .45rem 0.2rem 0.45rem; /*ajuste alignement (attention au bouton clearSearch qui n'a pas de texte qui doit rester bien centré)*/
}
/*les picto des boutons de la barre d'outils*/
.fixed-table-toolbar button i.bi::before {
  font-size: 1.5rem;
  line-height: 1.7rem;/*aligne mieux les texte si icônes de diffrentes polices*/
}
/*pour afficher la légende boutons en-dessous*/
.fixed-table-toolbar button i.bi::after {
  XXcontent: "Mode tableau";
  XXbackground-color: red;
  width: 100%;
  display: block;
  line-height: 1em;
  font-size: 0.8rem;
  font-style: normal;
}
/* Mais pour certains site : si préférable de mettre le label à droite (ex: car très peu de bouton. Ex: EV)*/
.labelToolBarADroite .fixed-table-toolbar button i.bi::before {
  vertical-align: middle;
}
.labelToolBarADroite .fixed-table-toolbar button i.bi::after {
  display:initial;
  padding-left:0.3em;
}

/* Ensuite, utilisation de ::before pour changer l'icône si besoin
et/ou de ::after pour attribuer un texte
*/
.bi-trash::before {
  content: '×';  /*une croix me semble + logique*/
  content: '\f1f8';  /*'\e802';/*icon-cancel-circled = croix dans cercle*/
}
.fixed-table-toolbar button.btn.btn-secondary[name=clearSearch] i.bi.bi-trash::before {
  content: '\e802';
  font-family: fontello!important ;
}
.fa-caret-square-down::before { /*picto de depliage (flèche vers le bas dans carré)*/
  content: '\e808';   /*icon-down-open = petite flèche vers le bas*/
  OFF_content: '\e816';   /*icon-down-circle = petite flèche vers le bas dans cercle*/
}
.fa-caret-square-up::before { /*picto de repliage (flèche vers le haut dans carré)*/
  content: '\e80c';   /*icon-up-open = petite flèche vers le haut*/
  OFF_content: '\e819';   /*icon-up-circle = petite flèche vers le haut dans cercle*/
}
.bi-search::before {
  content: '\e801';  /*icon-search = loupe*/
  font-family: fontello!important ;
}
.fa-sync::before {
  content: 'Rafraîchir';  /*double fleche en boucle pour rafraichir*/
}
.bi-arrow-clockwise::after { /*remplace fa-sync*/
  content: "Rafraîchir";
}
.fa-arrows-alt::before {
  content: 'Pleine page';  /**/
}
/* j'inverse le sens de actif/inactif car je met le texte Mode tableau car ne sahcant pas comment nommer l'autre mode (card n'étant pas très intuitif)*/
.bi-toggle-off::before {
  content: "\f5d6";  /* ACTIF. Au lieu de \f5d5 */
}
.bi-toggle-on::before {
  content: "\f5d5";  /* INACTIF. Au lieu de \f5d6 */
}
  .bi-toggle-on::after
, .bi-toggle-off::after {
 content: "Mode tableau";
}
.fixed-table-toolbar button i.bi.bi-chevron-down::before {
  content: '\e801'; /*loupe*/
  font-family: fontello!important ;
}
  .fa-chevron-down::after
, .bi-chevron-down::after {
  content: 'Recherche avancée';
}
/*12/01/2022 : depuis _bootstrap-table-v1.19.1 utilise bi avec "::" (comme Boostrap-icon) au lieu de fa avec ":" (font-awesome) => readapation parfois sauf si nouvelles icônes mieux*/


/*button/bandeau d'un objet accordeon pour developper/réduire son contenu div qui remplace button suite bug (div plutôt que button car si fieldset disabled => button non cliquable, pas pratique !)*/
.accordion-item div.accordion-button {
  font-weight: normal;
  cursor: pointer;
}
/*flèche en bout de ligne pour montrer contenu à développer (ex: zone accordéon (accordion) des étapes des mails PAT) */
.accordion-button::after {
  transform: rotate(-90deg); /*plutôt que de pointer vers le bas, je les dirige vers la droite pour mieux indiquer une suite (rq: -90deg fait trop de rotation quand pointera vers le haut)*/
}
 /*pour la masqeur si ne peut plus s'ouvrir/fermer (ex: voir NC : modifierPhasePrecise)*/
.accordion-button:not([data-bs-toggle="collapse"])::after { /*remplace en BS : .accordion-button:not(.collapsed)::after */
  display: none;
}
.accordion-button:not([data-bs-toggle="collapse"]) { /*remplace en BS : .accordion-button:not(.collapsed) */
  color: initial;
  background-color: initial;
  cursor: initial!important;
}

/*accordéon si desactivé - 08/02/2025*/
.accordion-item div.accordion-button.disabled {
  color: lightGray;
  cursor: initial;
}
.accordion-item div.accordion-button.disabled::after {
  display: none;
}

/*corrige pb si form-control sur btn qui utilise alors la valeur background-clip: padding-box; => fond s'arrête à bordure => contour disgracieux (suite au fait que j'ai ajouté form-control sur certain boutons pour qu'ils s'adaptent en largeur comme les champs)
Finalemetn pas utile car je met juste w-100 à la place de form-control (donc n'est plus concerné par background-clip)
.btn.form-control {
  background-clip: initial;
}
*/




/*tableau : surlignage des termes recherchés/trouvés*/
  .mark, mark {
    padding: 1px 0em;
    background-color: #a9d82d;
  }


/*aspect lignes listeTable Bootstrap Table*/
.tab-content tr.inactive { /*élément inactive*/
  color: #AAA;
}
.tab-content tr.suppr { /*élément supprimée*/
  color: #DDD;
}


/*ligne de detail d'une ligne normale de tableau (si pas d'alternance de couleur de ligne + lignes séparées par un filet)*/
.table-hover > tbody > tr.detail-view {
  border-top: 2px solid transparent; /*recouvre ligne de la celulle au-dessus : montre mieux le lien entre les deux. 1px ne marche pas !*/
}
.table-hover > tbody > tr.detail-view:hover {
  --bs-table-accent-bg: transparent; /*change couleur fond. Bizarre : pas ok si change (via background-color:#FFF;) avec couleur blanc ou transparent, mais ok si couleur franche !*/
}

/*FIN aspect lignes listeTable Bootstrap Table*/


  .tab-content .si_modeCreer
, .tab-content .si_modeModifier
, .tab-content .si_modeVoir
{
  display:none;
}

  .tab-content [data-jc-mode="creer"] .si_modeCreer
, .tab-content [data-jc-mode="modifier"] .si_modeModifier
, .tab-content [data-jc-mode="voir"] .si_modeVoir
{
  display:initial;
}

/*pour gérer élément à masquer selon si_fieldsetDisabled ou si_fieldsetNonDisabled (ex: NC : btn de modif de phase) - 03/05/2025*/
  /*si les 2 fieldset sont actifs (non-disabled), on masque les éléments à n'afficher que si fieldset est inactif (disabled)*/
  fieldset:not(:disabled) fieldset.accordion-item:not(:disabled) .si_fieldsetDisabled
  /*si 1 des 2 fieldset est inactif (disabled), on masque les éléments à n'afficher que si fieldset est actif (non-disabled)*/
, fieldset:disabled fieldset.accordion-item .si_fieldsetNonDisabled
, fieldset fieldset.accordion-item:disabled .si_fieldsetNonDisabled
/*ne gère que les cas ou 2 fieldset imbriqués (si besoin poru un seul fieldset, il faudra sûrement prendre un fieldset ne contenant pas un sous-fieldset, du genre fieldset:not(:has(fieldset)) */
{
  display:none;
}


/*masqué si pas loading*/
.loading_off .que_siLoading {
  display:none!important ;
}
/*masqué pendant loading*/
.loading_on .sauf_siLoading {
  display:none!important;
}

/*a essayer si besoin (ici, source LCVE)*/
/*masquer facilement si visible sauf dans le mode concerné*/
  .tab-content [data-jc-mode="creer"] .sauf_modeCreer
, .tab-content [data-jc-mode="modifier"] .sauf_modeModif
, .tab-content [data-jc-mode="voir"] .sauf_modeVoir
{
  display: none ;
}

/*masquer facilement si visible que dans 1 seul des modes (parfois préférable affichage perturbé si utilisation de si_modeCreer,… ex: message text_center de propostion CHIR deviendrait aligné à gauche !)*/
  .tab-content [data-jc-mode="creer"] .que_modeVoir, .tab-content [data-jc-mode="creer"] .que_modeModif
, .tab-content [data-jc-mode="modifier"] .que_modeCreer, .tab-content [data-jc-mode="modifier"] .que_modeVoir
, .tab-content [data-jc-mode="voir"] .que_modeModif, .tab-content [data-jc-mode="voir"] .que_modeCreer
{
  display: none ;
}



/*Icones via fontello (une autre façon d'attribuer icone sans utiliser de balise span)*/
/*attribue icone Voir à l'onglet si onglet en mode Voir,…*/
  .nav-item .nav-link[data-jc-mode_entite="voir"].icon-after:after
/* et aussi si via classe uniquement (ex: devant un bouton Modifier"*/
, .icon-before.voir:before, .icon-after.voir:after /*selon si placé avant ou après*/
{
  content: '\e70a';  /*icon-eye*/
  /*style en + ajouté via .icon-before:before, .icon-after:after */
}

/*attribue icone Edition à l'onglet si onglet en mode creer, modifier*/
  .nav-item .nav-link[data-jc-mode_entite="creer"].icon-after:after
, .nav-item .nav-link[data-jc-mode_entite="modifier"].icon-after:after
/* et aussi si via classe uniquement (ex: devant un bouton Modifier"*/
, .icon-before.modifier:before, .icon-after.modifier:after /*selon si placé avant ou après*/
{
  content: '\270f'; /*icon-pencil*/
  /*style en + ajouté via .icon-before:before, .icon-after:after */
}

/*attribue icone Imprimer à un bouton,…*/
.icon-before.imprimer:before, .icon-after.imprimer:after /*selon si placé avant ou après*/
{
  /*content: '\e826'; /*icon-print*/
  content: '\f0f6'; /*icon-doc-text*/
}

/*onglet activé en couleur de surbrillance*/
  .nav-pills .nav-link.active
, .nav-pills .show>.nav-link {
  OFF_background-color: #337214;
  background-color: rgb(120, 174, 10);
}

/*btn radio groupé (btnRadio btnGrouper) activé en couleur de surbrillance*/
.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary
/* pour activation btn mais mieux vaut laisser couleur classique :  , .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle*/
{
  background-color: rgb(120, 174, 10);
  border-color: rgb(120, 174, 10);
}




/*attribue icone icon-ok-circled devant certains éléments pour montrer que c'est traité*/
  .accordion-item.statutTraite .accordion-button.icon-before:before /*ex: phase NC*/
, .icon-before.statutTraite:before /*FORM01*/
{
  content: '\f06d'; /*icon-ok-circled*/
  color: rgb(120, 174, 10) ; /*vert*/
  font-size: 1.2em;
}
/*idem mais avec picto gris*/
.icon-before.propOK:before /*FORM01 - colonne Proposition*/
{
  content: '\f06d'; /*icon-ok-circled*/
  color: rgb(108, 117, 125) ; /*gris*/
  font-size: 1.2em;
}
/*
Ci-après, c'est un peu pareil que ci-dessus mais la couleur est récupérée via le texte de la zone donc plus générique
*/
.icon-before.pictoOK:before {  /*ex : NC (OK orange)*/
  content: '\f06d'; /*icon-ok-circled*/
  font-size: 1.2em;
}
.icon-before.pictoAttention:before {  /*ex: FORM01 - colonne RDV*/
  content: '\e81b'; /*icon-attention*/
  /*content: '\e81e'; /*icon-attention-1*/
  /*content: '\e81c'; /*icon-alert*/
  font-size: 1.2em;
}
/*idem mais avec picto coche*/
.icon-before.pictoCoche:before {  /*ex: FORM01 - colonne Proposition*/
  content: '\f06d'; /*icon-ok-circled*/
  font-size: 1.2em;
}


/*masque le bloc accordeon en mode voir si pas traite - 25/03/2023*/
/*je limite à #form_NC_fiche car je ne sais pas si utile ailleurs ou si très pécifique aux NC*/
.tab-content [data-jc-mode="voir"] #form_NC_fiche .accordion-item:not(.statutTraite):not(.traiteeALInstant) {
  display: none;
}


/* 08/01/2022 : remplacé par usage de .pointer (car parfois, .list-group est non modifiable/cliquable donc il faut éviter le curseur de type pointer)
.list-group {
  cursor: pointer;
}*/
/* listeSimple3 = liste temporaire affichant une liste qui n'est pas dans un select (menu local). L'apparence du survol se fait via CSS et l'action du clic doit s'initialiser une fois la liste affichée (ex: liste des villes) */
.listeSimple3 .list-group li:hover {
  /*color: #495057;
  background-color: #f8f9fa;*/
  color: #186AB3;
  background-color: #deedfb!important;
}



/* toast : petite notification brève (ou figé) */
.toast {
  background-color: rgba(255, 255, 255, 0.95);  /*fond moins transparent*/
}
/*évite ajout manuel de .d-flex à la notification selon si figé ou pas*/
.toast[data-bs-autohide="false"] > div {
  display: flex!important;
}
/*masque la croix si figé (pas autohide)*/
.toast:not([data-bs-autohide="false"]) > div .btn-close {
  display: none;
}

/* FIN toast : petite notification brève (ou figé) */



/* copierContenu */
.zoneCopierContenu.copied .copiedtext_info {
  opacity: 1;
  -webkit-transform: translateY(-2.1em);
  transform: translateY(-2.1em);
}
.copiedtext_info {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  -webkit-transform: translateY(-0.5em);
  transform: translateY(-0.5em);
  color: #000;
  -webkit-transition: all 1.000s ease-out;
  transition: all 1.000s ease-out;
  xxtransition: all 1000ms cubic-bezier(0.000, 1.000, 0.000, 1.445);
  background-color: #00ad00;
  border-radius: 2px;
  color: #FFF;
  padding: 3px 2px;
}
/* FIN copier contenu */