.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:has(select[multiple]){position: relative}
.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(.tag-input){overflow: visible}

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

.form .choix > .blocInput{border:none}
.form .choix .blocInput .options + .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}

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

/*-----------------------------------------------------------------*/
/* CHOIX		           			                               */
/*-----------------------------------------------------------------*/
.form .blocInput:has(.listChoix){grid-template-columns: 1fr 60px}
.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: grid; grid-template-columns: 60px 1fr}
.form .listChoix li .labels label{cursor: pointer}

/*-----------------------------------------------------------------*/
/* SWITCH                                                          */
/*-----------------------------------------------------------------*/

.switch{border-radius: 15px;cursor: pointer;min-width: 90px;position: relative;display: inline-flex;height: 29px;transition:all .2s ease;padding:0 10px;align-items: center;}

.switch input:not(:checked) ~ label{margin-left: var(--switch_curseur_size);}
.switch input:checked ~ label{margin-right: var(--switch_curseur_size);}

.switch .txtInterne{font-size: .8em;cursor: pointer;}

.switch .curseur{cursor: pointer;display: block;border-radius: 50%;background: #fff;width: var(--switch_curseur_size);height: var(--switch_curseur_size);position: absolute;top: 50%;transform: translate(0%,-50%);transition:left .3s ease, transform .3s ease!important;}

.radio .switch, .radio .switch .curseur{border-radius: 0}

.switch input:not(:checked) ~ .curseur{left: 3px;}
.switch input:checked ~ .curseur{ left: calc(100% - 3px);transform: translate(-100%,-50%);}

/* TEMPLATE : switch_priver_publique */


/* TEMPLATE : switch_saison */
.my_switch{min-width: 60px; transition: background .3s ease!important }
.my_switch:has(input:checked) { background:var(--bordure_valide);}
.my_switch.attention:has(input:checked){background: var(--couleurAvertissement)}
.my_switch:has(input:not(:checked)){background: #dedede;}
.my_switch:has(input:not(:checked)) .txtInterne{color: var(--couleur1)}
.my_switch:has(input:checked) .txtInterne{color: #fff}

.switch_txt{width: 70px}
.switch .txtInterne{display: flex;width: 100%;height: 100%; align-items: center; transition:margin .3s ease; }
.switch:has(input:not(:checked)) .txtInterne{margin-left:calc(var(--switch_curseur_size) + 5px)}
.switch:has(input:checked) .txtInterne{margin-left:0}

.switch:has(input:not(:checked)) .txtInterne:before{content:attr(data-txt_notchecked);}
.switch:has(input:checked) .txtInterne:before{content:attr(data-txt_checked);}

/*-----------------------------------------------------------------*/
/* 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 Pro";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; z-index: 1}
.form .blocInput .apresChamp:before{background: #fff;content: " ";position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: block;}
.form .blocInput .apresChamp output{font-size:.4em; z-index: 1}
.form .blocInput .apresChamp output.avertissement{color:var(--couleurAvertissement)}
.form .blocInput .apresChamp .restaurerOriginal{position: absolute; left: -45px;top: 0;height: 100%;padding: 10px;display: flex;justify-content: center;align-items: center; cursor: pointer; background:#fff;  transition: left .5s ease!important; z-index: -1; }
.form .blocInput:has(select[disabled]) .apresChamp .restaurerOriginal{display: none}
.form .blocInput .apresChamp .restaurerOriginal.cacher{left:0;}
.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:not([disabled])) .apresChamp:after
{content: "\f071"; color: var(--couleurErreur) }

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

/* enregistrement */
.form .blocInput .apresChamp.enregistrement: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: var(--chargementUnicode)!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(:focus)
{
  border-color:#fff!important;
  outline: 2px solid var(--couleurAction)!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 Pro";}

.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
, .form .champ:not(:has(.erreur)):not(.noValidation) .blocInput:has(select[disabled]) .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 Pro"; 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}


.apercu .uploadDansApercu{display: grid; width: 100%; height: 100%;place-items: center;font-size: 5em;color: #fff;opacity: .3; cursor: pointer}


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

.form .champ:has(input[type="file"]) .apercu:not(:has(.fichier)):before{
  display: grid;
  width: 100%;
  height: 100%; font-family: "Font Awesome 6 Pro";font-weight: 900;content: "\f03e"; font-size: 3em; place-items: center; color: #fff;
}


.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: 100%; width: 100%; border-radius: var(--borderRadius); background: #fff; box-shadow: var(--boxShadow); text-align: center; display: grid;  position: relative; object-fit: cover}
.form .champ:has(input[type="file"]) .apercu .image .divIcone{overflow: hidden}
.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:not([type="checkbox"]):not([type="radio"]), .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 [disabled]
, .readonly
, .form .champ:has(> .blocInput >:where([readonly], [disabled])) .blocInput
{background: #ccc!important; cursor: not-allowed;}

.form button[disabled]{cursor: not-allowed;}
.form .champ textarea{ height: 200px; margin-bottom: 0; padding:10px}
.form select{width: 100%;}

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 6 Pro";margin-left: 10px;font-size: 1.2em;font-weight: 900;}

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

#tpl > main .vue .form .blocInput *{transition: opacity .5s ease}
body.chargement #tpl > main .vue .form .blocInput *{opacity: 0; }

#tpl > main .vue .form .blocInput{transition:background .5s ease, border .5s ease}
body.chargement #tpl > main .vue .form .blocInput{
  background-image: linear-gradient(to right, #ccc, rgba(229, 229, 229, 0.9), #ccc); border: none;
  
  background-size: 200%; background-position: 100% 0; border-radius: inherit;
  animation: shimmer 1s infinite;
  border-radius: var(--borderRadius);
}

body.chargement #tpl > main .vue .form .blocInput :is(input, select, textarea){background: none!important}

@keyframes shimmer 
{
  to { background-position: -100% 0;}
}

/*-----------------------------------------------------------------*/
/* 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:has(:invalid) .submit button > span {color: #000}


.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"], .recherche input[type="search"]{border:none; border-radius:var(--borderRadius); font-size: 1em}

.afficherSiOuiContenu > .corpsContenu > .groupeSection > div > .rechercheParent > .recherche > input[type="search"]{border:1px solid #ccc}

.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);}



/*-----------------------------------------------------------------*/
/* 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}


.tagsModule:not(:has(.autocompletion)) .blocInput select{visibility: hidden; height: 55px; overflow: hidden}
/*-----------------------------------------------------------------*/
/* SWITCH                                                          */
/*-----------------------------------------------------------------*/

.switch{display: flex;gap:.5em; align-items: center}
.switch > label:first-child{border-radius: 15px;cursor: pointer;min-width: 90px;position: relative;display: inline-flex;height: 29px;transition:all .2s linear;padding:0 10px;align-items: center;}
.switch label{cursor: pointer}
.switch input{display: none!important;}
.switch input:not(:checked) ~ label{margin-left: var(--switch_curseur_size);}
.switch input:checked ~ label{margin-right: var(--switch_curseur_size);}

.switch .txtInterne{font-size: .8em;cursor: pointer;}

.switch .curseur{cursor: pointer;display: block;border-radius: 50%;background: #fff;width: var(--switch_curseur_size);height: var(--switch_curseur_size);position: absolute;top: 50%;transform: translate(0%,-50%);transition:all .2s linear;}

.radio .switch, .radio .switch .curseur{border-radius: 0}

.switch input:not(:checked) ~ .curseur{left: 3px;}
.switch input:checked ~ .curseur{ left: calc(100% - 3px);transform: translate(-100%,-50%);}

/* TEMPLATE : switch_priver_publique */


/* TEMPLATE : switch_saison */
.my_switch > label:first-child{min-width: 60px; }
.my_switch:has(input:checked) > label:first-child { background:var(--bordure_valide);}
.my_switch.attention:has(input:checked) > label:first-child{background: var(--couleurAvertissement)}
.my_switch:has(input:not(:checked)) > label:first-child{background: #dedede;}
.my_switch:has(input:not(:checked)) .txtInterne{color: var(--couleur1)}
.my_switch:has(input:checked) .txtInterne{color: #fff}

.switch_txt{width: 70px}
.switch .txtInterne{display: flex;width: 100%;height: 100%; align-items: center; transition:margin .3s ease; }
.switch:has(input:not(:checked)) .txtInterne{margin-left:calc(var(--switch_curseur_size) + 5px)}
.switch:has(input:checked) .txtInterne{margin-left:0}

.switch:has(input:not(:checked)) .txtInterne:before{content:attr(data-txt_notchecked);}
.switch:has(input:checked) .txtInterne:before{content:attr(data-txt_checked);}

/*-----------------------------------------------------------------*/
/* UPLOAD                                                          */
/*-----------------------------------------------------------------*/
#tpl > main .vue .form .divUpload > .blocInput{display: none}
#tpl > main .vue .form .divUpload > div{border-radius: var(--borderRadius)}
#tpl > main .vue .form .divUpload > div .apercu{height: 200px; background: #ccc; border-radius: var(--borderRadius);}
#tpl > main .vue .form .divUpload > .fichierTracer .apercu{height: 100%; background: none}
#tpl > main .vue .form .divUpload > .chargementBG .apercu{background: none}
#tpl > main .vue .form .divUpload > .fichierTracer{background: #ccc}

#tpl > main .vue .form .divUpload > div > .btnUpload{width: 100%; justify-content: center;margin-top: 20px;}

.apercuFile{display: flex; flex-wrap: wrap;gap: 2em;margin-top: 20px;}
#tpl > main .vue > .main > div .listeContenu.apercuFile:has(.document){padding: 20px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1em}

.apercuFile .document{height: 200px;border-radius: var(--borderRadiusMin);background: #fff;box-shadow: var(--boxShadow);text-align: center;display: grid;grid-template-rows: 1fr 60px;position: relative; }
.apercuFile .document .divIcone{font-size: 6em;align-items: center;display: flex;justify-content: center;padding: 10px;}
.apercuFile .document a{color:var(--couleurBody); display: flex; justify-content: center;}
.apercuFile .document a .titre{display: none}
.apercuFile .document .divTitre{display: flex; align-items: center;padding: 10px; background: #F7F7F7}
.apercuFile .document .divTitre input{border: 1px solid var(--bordure);border-radius: var(--borderRadiusForm);padding: 10px; width: 100%; display: none}
.apercuFile .document .divTitre{ justify-content: center; overlay: hidden}
.apercuFile .document .divTitre .titre{white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.apercuFile .document .supprimer
, .apercuFile .document .restaurer
{color: var(--couleurAvertissement); position: absolute;top: -10px;right: -10px;cursor: pointer;font-size: 2em; z-index: 2}

.apercuFile .document .restaurer{color: var(--couleurBody); background: #fff;border-radius: 50%;aspect-ratio: 1/1;font-size: 1.5em;padding: 5px;box-shadow: var(--boxShadow); cursor: pointer}
/*-----------------------------------------------------------------*/
/* AFFICHER SI OUI	                                               */
/*-----------------------------------------------------------------*/
.afficherSiOui{}
.afficherSiOui > .afficherSiOuiContenu{display: grid;grid-template-rows: 0fr;transition: grid-template-rows 0.5s ease;}
.afficherSiOui:has( > div:first-child .blocInput > .listChoix .switch input:checked)  > .afficherSiOuiContenu{grid-template-rows: 1fr; }
.afficherSiOuiContenu > *{overflow: hidden }