/*
2024 : pour formulaire avec aspect gros boutons arrondis
*/

/* * * * * style formDesign_01 * * * * */
/*zone avec case à cocher/btn radio + label (et éventuellement sous-partie)*/
  .tab-content [data-jc-mode="creer"] .formDesign_01 .form-check
, .tab-content [data-jc-mode="modifier"] .formDesign_01 .form-check
{
  padding-left: 0em;
  padding-right: 1.7em; /*plus les boutons peuvent être larges, plus il faut augmenter valeur pour éviter de chevaucher le bouton voisin*/
  /* ou reparti à droite et à gauche si texte centré (mieux centré ainsi) :
    padding-left: 00.9em;
    padding-right: 0.9em;
  */

  /* OFF suite utilsiation de flex_boutABout flex_enColonne flex_enLigneSi_??+
  min-width: 49%; max-width: 49%; /*à adapter selon largeur page (jusqu'à occuper 100% si écran étroit)*/
    /*si je veux des blocs côte à côte (peut-être à enlever quand écran trop étroit et que bloc pleine largeur)
  ! ! ! utiliser col-md-6 sur form-check si jeuv 2 éléments en largeur (avec row et gx-3 sur le parent div id="etape") pour que largeur soit gérée automatiquement par Bootstrap ! ! !

  Peut-être mettre 100% de large si texte chevauche titre en-dessous
    */
  /*display: inline-block;
  vertical-align: middle;*/
}
 /* .tab-content [data-jc-mode="creer"] .formDesign_01 .form-check.
, .tab-content [data-jc-mode="modifier"] .formDesign_01 .form-check
{

}*/
/*même zone, mais si éléments à l'intérieur à afficher bout à bout*/
  .tab-content [data-jc-mode="creer"] .formDesign_01 .form-check-inline
, .tab-content [data-jc-mode="modifier"] .formDesign_01 .form-check-inline
{
  margin-right: 0rem;
/*oublie valeurs attribuées .form-check*/
  min-width: initial;
  max-width: initial;
}
/*case à cocher*/
  .tab-content [data-jc-mode="creer"] .formDesign_01 .form-check .form-check-input
, .tab-content [data-jc-mode="modifier"] .formDesign_01 .form-check .form-check-input
{
  visibility: hidden;
}
/*label*/
  .tab-content [data-jc-mode="creer"] .formDesign_01 .form-check-label
, .tab-content [data-jc-mode="modifier"] .formDesign_01 .form-check-label
{
  /*padding-left: 0rem;
  margin-left: 0rem;*/
  border: 2px solid #186AB3;
  /*
  text-transform: uppercase;
  line-height: 1.5rem;
  display: flex;
  align-items: center;
  position: relative;
  */
  margin: 2px 5px;
  margin-right: 0;
  padding: 8px 20px 8px 20px;
  color: rgba(24, 106, 179, 0.75); /* #186AB3 mais + clair */
  background: white;
  border-radius: 30px;
  width: max-content;
  transition: 0.2s;
  transform: scale(1);
  min-width: 100%;
  max-width: 100%;
}
  .tab-content [data-jc-mode="creer"] .formDesign_01 .form-check-label:hover
, .tab-content [data-jc-mode="modifier"] .formDesign_01 .form-check-label:hover
{
  transform: scale(1.1);
  color: #186AB3;
}
/*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
{
  background-color: #d0dff2;
  /*color: #186AB3;
  border-color: #186AB3;*/
}
/*label (si coché)*/
  .tab-content [data-jc-mode="creer"] .formDesign_01 .form-check-input:checked ~ .form-check-label
, .tab-content [data-jc-mode="modifier"] .formDesign_01 .form-check-input:checked ~ .form-check-label
{
  color: #FFF;
  background-color: #186AB3;
}
/*si erreur (ex : si pas coché, après avoir coché ou focus sur zone)*/
  .tab-content [data-jc-mode="creer"] .formDesign_01 .form-check-input.is-invalid~.form-check-label, .was-validated .form-check-input:invalid~.form-check-label
, .tab-content [data-jc-mode="modifier"] .formDesign_01 .form-check-input.is-invalid~.form-check-label, .was-validated .form-check-input:invalid~.form-check-label
{
  background-color: #dc3545;
  color: #FFF;
  border-color: transparent;
  OFF_padding-right: 0.35em;
}

 /* sur champs plus classiques */
  /*champ*/
  .tab-content [data-jc-mode="creer"] .formDesign_01 .form-control
, .tab-content [data-jc-mode="modifier"] .formDesign_01 .form-control
  /*label intégrer/lié au champ*/
, .tab-content [data-jc-mode="creer"] .formDesign_01 .input-group-text
, .tab-content [data-jc-mode="modifier"] .formDesign_01 .input-group-text
  /*select (menu local)*/
, .tab-content [data-jc-mode="creer"] .formDesign_01 .form-select
, .tab-content [data-jc-mode="modifier"] .formDesign_01 .form-select
{
    border-radius: 30px;
}
/*champ textarea avec label dedans (ex: Votre commentaire)*/
  .tab-content [data-jc-mode="creer"] .formDesign_01 .form-floating textarea
, .tab-content [data-jc-mode="modifier"] .formDesign_01 .form-floating textarea
{
    border-top-left-radius: 0.25em;
}