.form{width: 100%; padding: 10px; padding-top:0;}

.form fieldset{border: none;}
.form ._legende{font-size: 2em; text-align: center;}

.form .champ {display: block;margin-bottom: 20px; }
.form .champ .label_principal{display: block; margin-bottom:5px}
.form .legende{margin:0px; font-size: 0.8em; font-style: italic; color: var(--couleurFormLegende); }
 
/*-----------------------------------------------------------------*/
/* BLOC INPUT		                              	               */
/*-----------------------------------------------------------------*/
.form .blocInput:not(:has(button)){padding: 0; margin: 0; position: relative; display: block;display: grid;grid-template-columns: 35px auto 60px;border: 1px solid var(--bordure);border-radius: var(--borderRadiusForm);transition: all 0.5s ease; position: relative;overflow: hidden; gap:5px; align-items: center; min-height:55px}

.form .blocInput:has(textarea) {grid-template-columns:auto 60px;}
.form .blocInput:has(.listChoix){grid-template-columns: 1fr 60px}

.form .choix > .blocInput{border:none}
.form .choix .blocInput .listChoix + .apresChamp{display:none}


.form .champ:has(> .blocInput > input[type="hidden"]):not(:has(.btn)){display:none}
.form .blocInput:not(:has(select)):not(:has(checkbox)):not(:has(radio)):not(:has(button))
{ border:1px solid #d7d7d7}

.form .champ .blocInput:has(.toolbar){display: block}

/*-----------------------------------------------------------------*/
/* CHOIX		           			                               */
/*-----------------------------------------------------------------*/
.form .listChoix {padding: 10px; margin:0}
.form .listChoix li {list-style-type: none; }
.form .listChoix li .labels{margin: 5px; align-items: center;
  gap: .5em; display: flex}
.form .listChoix li .labels label{cursor: pointer}

/*-----------------------------------------------------------------*/
/* CHECKBOX		           			                               */
/*-----------------------------------------------------------------*/
.form .checkboxes .blocInput, .form .radios .blocInput{display: block}
.form .checkboxes .label_principal, .form .radios .label_principal{display: block}
.form .choix_checkbox{display: flex; align-items: center; margin-top:10px; }
.form .choix_checkbox .choix{cursor: pointer}

.form .champ.checkbox label, .form .champ.radio .r_span label{display: inline; cursor: pointer;}
.form .champ.checkbox input, .form .champ.radio input {width: auto;}
.check_block .r_span {display: block;}
.champ.checkbox .label_principal {cursor: default;}


/*-----------------------------------------------------------------*/
/* RADIO		           			                               */
/*-----------------------------------------------------------------*/
.champ.radio {margin-bottom: 20px;}
.form .champ.radio .r_span label{margin-right: 20px;}
.form .champ.radio.sexe input {display: none;}
.form .champ.radio.sexe .r_span label{display: inline-block; padding: 10px 20px; text-align: center; border: 1px solid #9d9e9e; border-radius: 5px; font-size: 1.7em; color: #9d9e9e; margin-right: 10px; }
.form .champ.radio.sexe .r_span input:checked + label {background: #9d9e9e; color: #fff;}
.form .champ input[type="checkbox"]
, .form .champ input[type="radio"]
{
  margin-bottom: 0;
}

/*-----------------------------------------------------------------*/
/* FILE			           			                               */
/*-----------------------------------------------------------------*/
.form .champ.file{text-align: center;position:relative}
.form .champ.file label{text-align: left}
.form .champ.file:has(.blocInput input[value=""]) .fermer{display: none}
.form .champ.file .avant{width: 100%; height:200px; background-color: #F1F1F1; border:2px dotted #ccc; position: relative; cursor: pointer; border-radius: var(--borderRadius); background-position: center center;background-repeat: no-repeat; background-image:url('/images/upload_image.svg'); overflow: hidden}
.form .champ.file[data-img] .avant.ok{ background-size: contain}

.form .champ.file .blocInput{display:none}
.form .champ.file progress{position: absolute;bottom: 10px;width: 90%;left:50%;transform: translate(-50%,0%)}
.form .champ.file .progress{font-size: 2em; position:absolute; top:0;left:0;display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4);width: 100%;height: 100%;}
.form div .blocInput .apresChamp:after, .form .blocInput .choices__inner:after{font-family: "Font Awesome 6 Free";font-weight: 900; -moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;display: var(--fa-display,inline-block);font-style: normal;font-variant: normal;line-height: 1;text-rendering: auto; position:relative;}


/*-----------------------------------------------------------------*/
/*              											  select */

select::-ms-expand {
  display: none;
}

select {
   -webkit-appearance:none;
   appearance: none;
   background: none;
   width: 100%;
  min-width: 15ch;
  height: 100%;
  padding: 5px 10px;
  font-size: 1em;
  cursor: pointer;
  line-height: 1.1;
   outline: none;
  display: grid;
   align-items: center;
   border:none;
}
select:invalid {
  color: darkgrey
}




.blocInput:has(select) .apres_champ
{
  content:""!important; 
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='darkgrey'><polygon points='0,0 100,0 50,50'/></svg>");
  background-repeat: no-repeat;
   background-position: calc(100% - 15px) 60%;
   background-size: 10px;
}



/*-----------------------------------------------------------------*/
/* APRES CHAMP	          			                               */
/*-----------------------------------------------------------------*/
.fa-copy{cursor: pointer}

.form .blocInput:not(:has(textarea)):before
, .form .blocInput .apresChamp
{
  padding:5px  
}

.form .blocInput .apresChamp
, .form .blocInput:not(:has(textarea)):before{display: flex;justify-content: center; height:100%; align-items: center;flex-direction: column-reverse}

.form .blocInput .apresChamp{background: #fff; gap:5px; font-size: 1.5em; position:relative}
.sectionAutreTable > .interne > .grouper > .champ > .blocInput .apresChamp{background: none}
.form .blocInput .apresChamp .nbr{font-size:.4em}
.form .blocInput .apresChamp .restaurerOriginal{position: absolute; left: -45px;top: 0;height: 100%;padding: 10px;display: flex;justify-content: center;align-items: center; border-right: 1px solid #ccc; cursor: pointer; background:#fff;  transition: left .5s ease }
.form .blocInput .apresChamp .restaurerOriginal.cacher{left:0; z-index: -1;}
.form .blocInput:has(.restaurerOriginal) input {padding-right: 35px}
.form .detailsDiv .blocInput:has(.restaurerOriginal) .input{padding-left:10px}

.form .blocInput .apresChamp:after{display: flex; justify-content: end; }
.form .blocInput:has(input:required) .apresChamp:after
, .form .blocInput:has(textarea:required) .apresChamp:after
, .form .blocInput:has(select:required) .apresChamp:after
{content: "\f071"; color: var(--couleurErreur) }

.form .blocInput:has(.selectAjouter) .apresChamp:after{display:none}
.form .blocInput .btn_couleur{cursor:pointer}

/* chargement */
.form .blocInput .apresChamp.champChargement:after{
  -webkit-animation-name: fa-spin;
  animation-name: fa-spin;
  -webkit-animation-duration: var(--fa-animation-duration,2s);
  animation-duration: var(--fa-animation-duration,2s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count,infinite);
  animation-iteration-count: var(--fa-animation-iteration-count,infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing,linear);
  animation-timing-function: var(--fa-animation-timing,linear);
  
  content: "\f110"!important;
}
/*-----------------------------------------------------------------*/
/* RESTAURER	          			                               */
/*-----------------------------------------------------------------*/
.restaurerListeChoix{cursor:pointer; transition: opacity .5s ease, right .5s ease; opacity: 1; position: relative; right:0;font-size:1.5em}
.restaurerListeChoix.cacher{opacity:0; right:-50px}


/*-----------------------------------------------------------------*/
/* FORM INVALIDE	          			                           */
/*-----------------------------------------------------------------*/
.form .champ:has(.erreur), .erreur{color:var(--couleurAvertissement)}
.form .blocInput:has(:invalid:not(:placeholder-shown))
{ border-color: var(--couleurErreur);  }

.form .blocInput:has(select:focus)
{
  border-color:var(--couleur1)!important;
}

.form .blocInput input:invalid:not(:placeholder-shown)
, .form .blocInput textarea:invalid:not(:placeholder-shown)
{ background:var(--fond_erreur); }


.form .blocInput:has(input:invalid:not([type=checkbox]):not(:placeholder-shown)) *
, .form .blocInput:has(input:invalid:not([type=checkbox]):not(:placeholder-shown)):before
, .form .blocInput:has(textarea:invalid:not(:placeholder-shown)):before
, .form .blocInput:has(.erreur):has(select:invalid:not(:placeholder-shown)):before
, .form .blocInput:has(.erreur)
, .form .blocInput select:invalid + div .selectAjouter 
{ color: var(--couleurErreur)!important}

.form .blocInput:has(select:invalid):has(.erreur)
{border-color:var(--couleurErreur) }
<i class="fa-solid fa-circle-arrow-left"></i>
/*-----------------------------------------------------------------*/
/* FORM VALIDE	  	        			                           */
/*-----------------------------------------------------------------*/
.form .champ .blocInput .apresChamp:after
{content: " ";font-family: "Font Awesome 6 Free";}

.form .champ:not(:has(.erreur)):not(.noValidation) .blocInput:has(input:valid) .apresChamp:after
, .form .champ:not(:has(.erreur)):not(.noValidation) .blocInput:has(textarea:valid) .apresChamp:after
, .form .champ:not(:has(.erreur)):not(.noValidation) .blocInput:has(select:valid) .apresChamp:after
{content: "\f058"; color: var(--bordure_valide);}

.form .blocInput:has(select) .apresChamp{font-size:1.6em}

.form .champ:not(:has(.erreur)) .blocInput:has(input:not(.choices__input):focus))
, .form .champ:not(:has(.erreur)) .blocInput:has(textarea:focus)
{background:var(--input_hover);}

/*-----------------------------------------------------------------*/
/* ICONE CHAMP	  	        			                           */
/*-----------------------------------------------------------------*/
.form .blocInput:before{font-family: "Font Awesome 6 Free"; font-weight: 900;}

.form .blocInput:not(:has(.switch)):not(:has(textarea)):before
{content:"\f304"}

 .form .champ:not(:has(.erreur)) .blocInput:not(:has(.switch)):not(:has(textarea)):before{color: #9d9e9e; }
 
.form .blocInput:has(button):before{content: ""!important}
.form .blocInput:has(input.prenom):before
, .form .blocInput:has(input.nom):before
{content: '\f2c2';}

.form .blocInput:has(select):before{content: '\f0d7'!important;}
.form .blocInput:has(input[type="email"]):before{content: '\f0e0';}
.form .blocInput:has(input[type="password"]):before{content: '\f023';}
.form .blocInput:has(input[type="file"]){ grid-template-columns:auto 60px; border:none}
.form .blocInput:has(input[type="file"]):before
, .form .blocInput:has(input[type="file"]) input
{display:none}
.form .blocInput:has(input[type="file"]) .btn{width:200px; text-align: center}

.form .champ:has(input[type="file"]) .apercu{display: flex;flex-wrap: wrap;gap: 2em; margin-top:20px;}

.form .champ:has(input[type="file"]) .apercu .supprimer{color: var(--couleurAvertissement); position: absolute; top:-10px; right: -10px; cursor: pointer; font-size: 2em}
.divBlob{display: none; }


.form .champ:has(input[type="file"]) .apercu .svg{height: 200px; width: 200px; border-radius: var(--borderRadius); background: #fff; box-shadow: var(--boxShadow); text-align: center; display: grid;  position: relative}
.form .champ:has(input[type="file"]) .apercu .svg .divIcone
{align-items: center;display: flex;justify-content: center; background-repeat: no-repeat; background-size: 80% 80%; background-position: center center}
.form .champ:has(input[type="file"]) .apercu .svg input{display:none}



.form .champ:has(input[type="file"]) .apercu .document{height: 200px; border-radius: var(--borderRadius); background: #fff; box-shadow: var(--boxShadow); text-align: center; display: grid; grid-template-rows: auto 50px; position: relative}
.form .champ:has(input[type="file"]) .apercu .document .divIcone
{font-size: 6em;align-items: center;display: flex;justify-content: center;padding: 10px;}
.form .champ:has(input[type="file"]) .apercu .document .divTitre{display: flex; align-items: center; padding: 10px}
.form .champ:has(input[type="file"]) .apercu .document .divTitre .titre{white-space: nowrap;text-overflow: ellipsis;max-width: 200px;overflow: hidden;}
.form .champ:has(input[type="file"]) .apercu .document input{height: auto; padding:10px}
.form .champ:has(input[type="file"]) .apercu .document input{display: none}
.form .champ:has(input[type="file"]) .apercu .document .view{ background-repeat: no-repeat; background-position: center; background-size: cover}

.form .champ:has(input[type="file"]) .apercu .document.gpx {grid-template-rows: 1fr 0; width:100px; height: 100px}
.form .champ:has(input[type="file"]) .apercu .document.gpx .view{background-image: url("/v1/core/images/pictos/gpx.svg"); background-size: 80%}
.form .champ:has(input[type="file"]) .apercu .document .infos{padding:10px}
.form .champ:has(input[type="file"]) .apercu .document .input{display: none}


.form .champ:has(input[type="file"]) .apercu .poi{ display: grid; grid-template-columns: 100px 1fr;align-content: center; width: 100%}
.form .champ:has(input[type="file"]) .apercu .poi .divIcone{background-size: 70%;background-position: center center; background-repeat: no-repeat;}
.form .champ:has(input[type="file"]) .apercu .poi .divInfos{display: grid; grid-template-columns: repeat(3, 1fr); gap:1em}
.form .champ:has(input[type="file"]) .apercu .poi .divTitre
, .form .champ:has(input[type="file"]) .apercu .poi .divSym
{display: none}



.form .champ:has(input[type="file"]) .apercu .image{height: 200px; width: 200px; border-radius: var(--borderRadius); background: #fff; box-shadow: var(--boxShadow); text-align: center; display: grid;  position: relative;}
.form .champ:has(input[type="file"]) .apercu .image .divIcone img
, .form .champ:has(input[type="file"]) .apercu .pdf .divIcone img
{object-fit: cover; width: 100%; height: 100%; max-height: 250px; border:1px solid var(--couleurAction); border-radius: 20px}
.form .champ:has(input[type="file"]) .apercu .image input{display:none}
.form .champ:has(input[type="file"]) .apercu .pdf{grid-template-rows: 1fr;}


.form .blocInput:has(input[type="url"]):before, .form .url .blocInput:before{content: '\f0ac'!important;}
.form .blocInput:has(input.sujet):before{content: '\f059';}
.form .blocInput:has(input[type="tel"]):before{content: '\f095';}
.form .blocInput:has(input.mobile):before{content: '\f10b';}

.form .blocInput:has(input[type="date"]):before{content: '\f133';}
.form .blocInput:has(input.seo):before{content: '\f002';}
.form .blocInput:has(input.paypal):before{content: '\f1ed'; font-family: 'Font Awesome 6 Brands';}
.form .search .blocInput:before{content: '\f002'; }
.form .blocInput:has(input.facebook):before{content: '\f230';}
.form .blocInput:has(input.twitter):before{content: '\f081';}
.form .blocInput:has(input.youtube):before, .form .video:not(.checkbox) .blocInput:before{content: '\f167'; font-family: "Font Awesome 6 Brands";}
.form .blocInput:has(input.pinterest):before{content: '\f0d3';}
.form .blocInput:has(input.code_promo):before{content: '\f218';}
.form .blocInput:has(input.prix):before{content: '\f53a';}
.form .blocInput:has(input.qte):before{content: '\f24e';}
.form .blocInput:has(input.pourcentage):before{content: '\f295';}
.form .blocInput:has(input.localiter):before
{content: '\f279';}


.form .champ input, .form .champ textarea, #i_recherche, .input_seul
{width: 100%; height:100%; padding:0 10px; font-weight: 400;font-size: 1em;background: #F7F7F7;border: none;}

.form .file .fermer {position: absolute;top: -15px;cursor: pointer;font-size: 2.5em;right: -15px;color: hsl(345deg 100% 47%);}


.form .range input[type=range] {background: none;border: none;box-shadow: none;padding: 0;width: 100%; left: -10px;}
.val_range {text-align: center; }
.val_range:after {content:"\00a0" attr(data-devise); display: inline-block;}

.form .champ input[disabled=disabled]
, .form .champ input[readonly="readonly"]
, .form .champ textarea[disabled=disabled]
, .readonly
, .form .champ:has(> .blocInput [readonly="readonly"]) .blocInput
{background: #ccc!important; cursor: not-allowed;}

.form button[disabled=disabled]{cursor: not-allowed;}
.form .champ textarea{ height: 200px; margin-bottom: 0; padding:10px}
.form select{width: 100%;}
.form .blocInput:has(select.disabled):after{content: " ";position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: not-allowed;}

textarea:focus, input:focus, button:focus{outline: none;}

.form .limite{position: absolute;text-align: right;top: 15px;right: 10px; font-size: .8em; color: #ccc;}
.form .limite span{ color: #ff0000; font-weight: bold;}

.form .submit{position: relative; text-align: center;}
.form .submit button.attente span:nth-child(2)::after  {content: "\f1ce"; -webkit-animation: fa-spin 2s infinite linear;animation: fa-spin 2s infinite linear;display: inline-block; font-family:"Font Awesome 5 Free";margin-left: 10px;font-size: 1.2em;font-weight: 900;}

.form .hidden{display:none!important;}


/*-----------------------------------------------------------------*/
/* SUBMIT		  	        			                           */
/*-----------------------------------------------------------------*/
.form .submit{z-index: 2; position: relative;transition: all .3s ease-in;}
.form .submit button{transition: all .3s ease-in;}
.form:invalid .submit{opacity: .2; cursor:not-allowed; }


.btn_push, .form .submit button
{
  background: var(--couleur4);
  border-radius: var(--borderRadiusForm);
  border: none;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  display: inline-block;
  margin-top: 10px;
}

.form .submit button{width: 100%;}
.btn_push .btn_push_txt, form .submit button > span {display: block;padding: 8px 40px;border-radius: var(--borderRadiusForm);font-size: 1.25rem;background: var(--couleurAction) ; color:#fff; transform: translateY(-6px);}

.btn_push:hover .btn_push_txt
, .form .submit button:hover > span
, .form:invalid .submit button > span
{transform: translateY(-4px);}

.btn_push:active .btn_push_txt
, .btn_push.actif .btn_push_txt
, form button:active > span 
{transform: translateY(-2px)!important;}

.form .submit button span span:nth-child(2){display: inline-block; min-width: 21px}
.form #submit[disabled]{opacity: .2}




.form .blocInput:has(textarea[maxlength]) .maxlength{background: #ccc; width: 100%;padding: 10px}
.valider{text-decoration:line-through;}
.form #legende_fin, .form #legende_fin2{text-align: center; font-size: 0.8em; margin-top: 20px; }

.form input[type="search"]{border:none; border-radius:var(--borderRadius); font-size: 1em}

.form .blocInput:has(input[readonly]){background:#ccc}

.msg{color: #fff!important; padding: 10px; margin: 20px 0; text-align: center; border-radius:var(--borderRadius)}
.msgValider{ background: #2ecc71}
.msgErreur{background: var(--couleurErreur);}

.masquer_vers_le_bas {bottom: -100px!important;}


/*-----------------------------------------------------------------*/
/* AFFICHER SI OUI		  	        			                   */
/*-----------------------------------------------------------------*/
.form .formAfficherSiOui .formAfficherSiOuiDetails{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s ease;}
.form .formAfficherSiOui:has( > div:first-child .switch input:checked) .formAfficherSiOuiDetails{grid-template-rows: 1fr;}
.form .formAfficherSiOuiDetails > *{overflow: hidden }
.form .formAfficherSiOui .listChoix{margin:0}

.form .formAfficherSiOui .formAfficherSiOuiDetails .liste:has(li:first-child[data-id="0"])
, .form .formAfficherSiOui .formAfficherSiOuiDetails .liste li[data-id="0"]{display: none}




/*-----------------------------------------------------------------*/
/* GROUPER ELEMENTS FORM                                           */
/*-----------------------------------------------------------------*/

.groupeVue {
      background: var(--backgroundVue);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: translateX(120%);
      transition: transform .5s ease, opacity .5s ease;
      opacity: 1;
      z-index: 3;
      display: grid;
      grid-template-rows: 65px 1fr;
      padding-bottom: 60px;
  }
.groupeVue:target
{
  
}
  
.groupe:has( > label input:checked) > .groupeVue
, .groupeVue.hashActif
{transform: translateX(0%)}
  

   .grouperElements{}
  .grouperTxt{padding-top:20px}
  .padding{padding: 0 20px}
  .padding0_20{padding: 0 20px}
  .listeDonnees{cursor: pointer;border: 1px solid #ddd;background: rgba(255, 255, 255, .5);border-radius: var(--borderRadiusMin);margin-bottom: 20px; display:flex; justify-content: space-between; align-items: center; overflow: hidden; position:relative; color:#000!important}
  .listeDonnees > *{padding: 20px 10px; }
  .listeDonnees .icone{background: #fff;padding: 20px;}
  .listeDonnees.btn_ajouter .icone{font-size:1.5em}
 /*
 .listeDonnees > *{padding: inherit}
 .listeDonnees{padding: 0; display: flex;}
 .listeDonnees .label:before{content: "\f15c";
   font-family: "Font Awesome 6 Free";
   display: inline-flex;
   background: #fff;
   padding: 20px;
   height: 100%;
   font-size: 1.3em;
   margin-right: 10px;}
   */
.groupe .afficherGroupeVue .icone i:before {font-size: 1.3em}

.groupe:has( > .groupeVue > .groupeCorps > .grouper > .grouper > .grouper > .grouper > .grouper > .champ > .blocInput :invalid) .afficherGroupeVue .icone i:before
, .groupe:has( > .groupeVue > .groupeCorps > .grouper > .grouper > .grouper > .grouper > .grouper > .grouper > .champ > .blocInput :invalid) .afficherGroupeVue .icone i:before
, .groupe:has( > .groupeVue > .groupeCorps > .liste > .listeContenu > li > .groupeVue > .groupeCorps .champ > .blocInput :invalid) .afficherGroupeVue .icone i:before
{content: "\f071"; color: var(--couleurAvertissement)}
 
  .grouperElementsChamps{position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    background: var(--backgroundVue);
    left: 0;
    z-index: 2;
    padding: 0px;
    padding-bottom:20px;
    overflow: hidden;
    overflow-y: scroll;
    transform: translateX(100%);
   }
   
   .form .grouperElementsLabel .icone{min-width: 60px;font-size: 1.1em;text-align: center;display: flex;justify-content: space-around; padding:20px 10px}
    
  .form .grouperElementsLabel .icone .erreur{display: none}
  .form .grouperElementsLabel .icone .fleche{display: none}
  
.groupeCorps{padding: 20px; height: 100%; overflow-y: scroll;}



/*-----------------------------------------------------------------*/
/* SELECT LISTE TAGS                                               */
/*-----------------------------------------------------------------*/
.selectListeTags{display: flex; gap: 1em; padding: 0; flex-wrap: wrap; margin:20px 0}
.selectListeTags li{background: var(--couleur1); padding: 5px 10px;list-style: none;margin: 0;display: inline-flex;border-radius: var(--borderRadius);color:#fff;gap: .5em; width: auto; transition: background .5s ease}

.selectListeTags li.statut_supprimer{background:var(--couleurAvertissement); }
.selectListeTags li.statut_brouillon{background:var(--couleurAction);}

.selectListeTags li i{cursor: pointer}