*{box-sizing:border-box; -ms-overflow-style: none; scrollbar-width: none;
  scroll-behavior: smooth;}
*::-webkit-scrollbar {display: none;}


html{width: 100vw;overflow: hidden;height: 100svh;}
body{background: #F7F7F7; display: flex; height: 100svh; width: 100vw; font-family: sans-serif; font-size: 1em; margin: 0; padding: 0}
#conteneur{background: #fff; max-width: 800px; width: 100%; margin: auto; border-radius: 20px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); overflow: hidden; padding: 20px}

#tpls, #vues{display: none}
a{text-decoration: none}
/*-----------------------------------------------------------------*/
/* ICONES FONT PERSO  	                                                   */
/*-----------------------------------------------------------------*/

@font-face {
  font-family: "osdln";
  src:url("/global/fonts/osdln.eot");
  src:url("/global/fonts/osdln.eot?#iefix") format("embedded-opentype"),
  url("/global/fonts/osdln.woff") format("woff"),
  url("/global/fonts/osdln.ttf") format("truetype"),
  url("/global/fonts/osdln.svg#osdln") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "osdln" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "osdln" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-transition-slide:before {content: "\61";}
.icon-transition-slide-2:before {content: "\62";}


[class^="icon-"], [class*=" icon-"]{display: flex;align-items: center}
[class^="icon-"]:before, [class*=" icon-"]:before{margin-top:5px}

/*-----------------------------------------------------------------*/
/* VARIABLES  	                                                   */
/*-----------------------------------------------------------------*/

:root{
  --couleur1: #7c805c;
  --couleur1_alpha2: rgba(124, 128, 92, 0.2);
  --couleur1_sombre:#0078F6;
  --couleur2:rgba(183, 222, 229, 1);
  --couleurAction:#efdf80;
  --couleurBTN:#efdf80;
  --couleurBTNAction: #000;
  --couleurLien:#FFB900;
  --couleur2_sombre:#8e5900;
  --couleur4:#00442d;
  --couleur_claire:#e3dfff;
  --couleurBody :#737373;
  --couleur_popin:#59B3C3;
  
  --couleurFormLegende: #07a4b6;
  --input_hover:#eee;
  
  --borderRadius: 20px;
  --borderRadiusForm: 10px;
  --bordure:#e3dfff;
  --background_gris:#F7F7F7;
  --background_site_opacity5: rgba(247, 247, 247, .5);
  --background_site: rgba(247, 247, 247, 1);
  --backgroundVue: #f3f2ee;

  --fond_erreur:#ffdddd;
  --couleurErreur:#F2747C;
  --couleurValidation:#2ecc71;
  --couleurAvertissement: #F2747C;
  --couleurInfo:#07a4b6;
  --notif:#D96A6A;
  --bordure_valide:#2ecc71;
  --degrader:black;
  --bk_chargement:linear-gradient(180deg,rgba(207, 65, 151, 0.4)5%,rgba(123, 66, 215, 0.4) 62%,rgba(91, 133, 230, 0.4));
  --asideWidth:300px;
  --menuPrincipalWidth:220px;
  --menuPrincipalMinWidth:70px;
  --boxShadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  --borderRadiusMin : 10px;
  --heightHeader:65px;
  --heightMenuBas:75px;
  --heightPagination:80px;
  --vitesseTransitionVue: 1s;
  
  --switch_curseur_size:23px;
  --switch_curseur_pos:5px;
  
  --notificationDecompteFermeture:15s;
  --vitesseTransitionNotification: .5s;
  
  --animation: cubic-bezier(.25, 1, .5, 1.25);
  
  
}

.info{color:var(--couleurInfo)}
.avertissement{color:var(--couleurAvertissement)}
.validation{color:var(--couleurValidation)}

._espace{margin-right: 5px}
/*-----------------------------------------------------------------*/
/* PROPRIETES		                                               */
/*-----------------------------------------------------------------*/
img{display: block}
.masquer{display: none!important}

/*-----------------------------------------------------------------*/
/* BTN                                                             */
/*-----------------------------------------------------------------*/
.btn{background: var(--couleurBTN); border:1px solid var(--couleurBTN); color:#fff; padding:10px; border-radius: var(--borderRadius); cursor: pointer; text-decoration: none; display: inline-flex}
.btn.btn_action{border-color:var(--couleurBTNAction); background: none; color:var(--couleurBTNAction)}
#tpl > main .vue > header .options .btn.btnRetour
, #tpl > main .vue > header > div:last-child .btn{width:auto; display:flex; font-size: 1em}
#tpl > main .vue > header .btn.btnRetour .nomVue{white-space: nowrap; text-overflow: ellipsis; max-width: 200px; overflow: hidden;}

.groupeVue .headerG .btn.btnRetour{ display:flex; gap:.5em; border-radius:var(--borderRadiusMin)}
.groupeVue .headerG .btnCarre{border-radius:var(--borderRadiusMin)}
body.chargement #statutValider i{animation-name: fa-spin;animation-duration: var(--fa-animation-duration,2s); animation-iteration-count: var(--fa-animation-iteration-count,infinite);animation-timing-function: var(--fa-animation-timing,linear);animation-delay: var(--fa-animation-delay,0s);animation-direction: var(--fa-animation-direction,normal);}
body.chargement #statutValider i:before{content: var(--chargementUnicode)}

/*-----------------------------------------------------------------*/
/* CHARGEMENT  BG                                                  */
/*-----------------------------------------------------------------*/
.chargementBG{display: grid; place-items: center; position: relative}
.chargementBG:before{font-weight: 900;animation-name: fa-spin;animation-duration: var(--fa-animation-duration,2s);animation-iteration-count: var(--fa-animation-iteration-count,infinite);animation-timing-function: var(--fa-animation-timing,linear); font-family: "Font Awesome 6 Free"; content: "\f110"; position: absolute}

/*-----------------------------------------------------------------*/
/* TITRE VUE                                                       */
/*-----------------------------------------------------------------*/
.vue > header > .titreVue{text-align: center; margin: 0}



#mainChargement{position: fixed; top: 0; left: 0; width: 100vw; height: 100svh; overflow: hidden; display: grid; place-items: center}

/*-----------------------------------------------------------------*/
/* WIDGET 		                                                   */
/*-----------------------------------------------------------------*/
.widget{ background: #fff; padding:20px; border-radius: var(--borderRadius); }
.widget h2{margin: 0}

/*-----------------------------------------------------------------*/
/* TEMPLATE		                                                   */
/*-----------------------------------------------------------------*/
body > #tpl { display: grid;grid-template-rows: 1fr; transition: grid-template-columns .5s var(--animation), grid-template-rows .5s var(--animation); background: var(--couleur1); width: 100vw; height: 100svh }
body > #tpl:not(:has(#mainChargement)){grid-template-columns: var(--menuPrincipalWidth) 1fr;} 

body > #tpl:has(#mainChargement){grid-template-columns: 0px 1fr;} 

#tpl > main { border-radius: var(--borderRadius) 0 0 var(--borderRadius);height: 100%;overflow: hidden; position: relative}



/*-----------------------------------------------------------------*/
/* MENU 		                                                   */
/*-----------------------------------------------------------------*/
#logo{color: #fff; font-weight: bold; text-align: center}
#logo svg{max-width: 100%;}
#tpl > nav { grid-row: 1 / 3; display: grid; grid-template-rows: 60px 1fr 60px;white-space: nowrap;}
#tpl > nav > #logo{background: var(--couleur1);z-index: 2;margin: 0;display: grid;align-items: center;padding: 0 10px;}
#tpl > nav #menuPrincipal{overflow: scroll;align-self: start;height: 100%; transition: padding .5s ease; padding: 0 10px; position: relative; z-index: 2; background: var(--couleur1);  border-top: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(255, 255, 255, .2);padding-top: 10px; padding-bottom: 10px}
#tpl > nav ul, #tpl > nav li{margin: 0; padding: 0}
#tpl > nav li{list-style: none}
#tpl > nav li.space{margin-top: 10px;border-top: 1px solid rgba(255, 255, 255, .2);padding-top: 10px;}
#tpl > nav .a{display: grid;cursor: pointer;align-items: center;gap: 1em;padding: 0px;color: #fff;border-radius: 10px;text-decoration: none;transition: background .1s ease-in-out;margin: 5px 0px;background: rgba(255, 255, 255, 0);position: relative;z-index: 1;overflow: hidden;grid-template-columns: 50px 1fr;}
body.chargement{grid-template-columns: 0px 1fr;}
#tpl:has( > nav #minimiserMenu:checked){grid-template-columns: var(--menuPrincipalMinWidth) 1fr;}
#tpl > nav .a:after{content: " ";display: block;position: absolute;z-index: -1;width: 100%;height: 100%;top: 0;left: 0;background: rgba(255, 255, 255, .3);border-radius: 10px;transition: transform .3s ease-in-out;transform: translateX(-100%);}
#tpl > nav li i{background: rgba(255, 255, 255, .1);width: 50px;height: 50px;display: flex!important;justify-content: center;align-items: center;font-size: 1.5em;border-radius: 10px;}

#tpl > nav .a:hover:after
, #tpl > nav .a.actif:after
, #tpl > nav .a:has(.actif):after
, #tpl > nav:has(#sous_menu_1 input:checked) #menu_label_1:after
, #tpl > nav:has(#sous_menu_2 input:checked) #menu_label_2:after
, #tpl > nav:has(#sous_menu_3 input:checked) #menu_label_3:after
, #tpl > nav:has(#sous_menu_4 input:checked) #menu_label_4:after
, #tpl > nav:has(#sous_menu_5 input:checked) #menu_label_5:after
, #tpl > nav:has(#sous_menu_6 input:checked) #menu_label_6:after
, #tpl > nav:has(#sous_menu_7 input:checked) #menu_label_7:after
, #tpl > nav:has(#sous_menu_8 input:checked) #menu_label_8:after
, #tpl > nav:has(#sous_menu_9 input:checked) #menu_label_9:after
, #tpl > nav:has(#sous_menu_10 input:checked) #menu_label_10:after
, #tpl > nav:has(#sous_menu_1 .actif) #menu_label_1:after
, #tpl > nav:has(#sous_menu_2 .actif) #menu_label_2:after
, #tpl > nav:has(#sous_menu_3 .actif) #menu_label_3:after
, #tpl > nav:has(#sous_menu_4 .actif) #menu_label_4:after
, #tpl > nav:has(#sous_menu_5 .actif) #menu_label_5:after
, #tpl > nav:has(#sous_menu_6 .actif) #menu_label_6:after
, #tpl > nav:has(#sous_menu_7 .actif) #menu_label_7:after
, #tpl > nav:has(#sous_menu_8 .actif) #menu_label_8:after
, #tpl > nav:has(#sous_menu_9 .actif) #menu_label_9:after
, #tpl > nav:has(#sous_menu_10 .actif) #menu_label_10:after
{
  transform: translateX(0);
}

#tpl > nav .sous_menu{position: absolute;top: 0; left: -300px; transition: left .5s ease; background: var(--couleur3S); z-index: 1; height: 100svh;overflow: hidden; width: 300px; overflow-y: scroll; padding: 0 10px; background: var(--couleur1);color: #fff; border-top-right-radius: var(--borderRadius); border-bottom-right-radius: var(--borderRadius)}
#tpl > nav .sous_menu:after{content: " ";position: absolute;top: 0;left: 0;width: 100%;background: rgba(0, 0, 0, .3);height: 100%;}  
#tpl:not(:has(#input_fermer_menu_n2:checked)) > nav .sous_menu:has(input:checked), #tpl:not(:has(#input_fermer_menu_n2:checked))  > nav .sous_menu:has(input:checked) > div:before{left: var(--menuPrincipalWidth);}


#tpl:has( > nav #minimiserMenu:checked):not(:has(#input_fermer_menu_n2:checked)) > nav .sous_menu:has(input:checked)
, #tpl:has( > nav #minimiserMenu:checked):not(:has(#input_fermer_menu_n2:checked))  > nav .sous_menu:has(input:checked) > div:before{left: var(--menuPrincipalMinWidth);}

#tpl > nav .sous_menu:has(input:checked) .fermerOut{content: " ";width: 100%;height: 100%;z-index: -1;position: fixed;cursor: pointer; top:0}
#tpl > nav #compte {display: grid; align-content: center;z-index: 3; background: var(--couleur1);padding: 0 10px;}
#tpl > nav #compte #photoProfil{aspect-ratio: 1 / 1; border-radius:50%; background:black;}

#tpl > nav .sous_menu .fermer{font-size: 1.5em;position: absolute;top: 10px;right: 10px;z-index: 2;cursor: pointer;color: #fff}

#tpl > nav > #compte > label{display: grid;align-items: center;grid-template-columns: 40px 1fr;gap: .5em; padding: 5px}


#menuCompte > div, #menuCompte > div > ul{display: flex;flex-direction: column; height: 100%}

#tpl #supprimerCompte{margin-top: auto}

/*-----------------------------------------------------------------*/
/* VUE		                                                       */
/*-----------------------------------------------------------------*/

@keyframes slideInFromRight 
{
  from { transform: translateX(120%)}
  to {transform: translateX(0)}
}

@keyframes slideInFromLeft 
{
  from { transform: translateX(-120%)}
  to {transform: translateX(0)}
}

@keyframes slideTopToBottom
{
  from { transform: translateY(-120%)}
  to {transform: translateY(0)}
}

@keyframes slideBottomToTop
{
  from { transform: translateY(120%)}
  to {transform: translateY(0)}
}

@keyframes slideToBottom
{
  from { transform: translateY(0)}
  to {transform: translateY(120%)}
}

@keyframes txtSlideIn 
{
  from { transform: translateX(10%)}
  to {transform: translateX(0)}
}

@keyframes slideOut
{
  from { transform: translateX(0)}
  to {transform: translateX(-120%)}
}

@keyframes fadeIn 
{
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut
{
    from { opacity: 1; }
    to { opacity: 0; }
}

#tpl > main .vue{display: grid;grid-template-columns: 1fr;grid-template-rows: 60px 1fr 60px;overflow: hidden; height: 100%; width: 100%; position:absolute; top:0; left: 0;  animation: slideInFromRight 1s ease; border-radius: var(--borderRadius); border-top-right-radius: 0; border-bottom-right-radius: 0; transition: transform 1s ease; box-shadow: var(--boxShadow)}
#tpl > main .vue:last-child{z-index: 1}
#tpl > main .vue.parent{animation: none;}



#tpl > main .vue.enfant{transform: translateX(120%); z-index: 2}
#tpl > main:has(.vue:nth-child(2)) > .vue:first-child:not(.parent):not(.enfant) {animation: slideOut 4s .2s ;}


/*HEADER*/
#tpl > main .vue > header{ background: #FFF; border-top-left-radius: var(--borderRadius); padding: 10px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center }

#tpl > main .vue > header > div:last-child{display: flex; gap: .5em; text-align: right; justify-content: end;}
#tpl:has( > nav #minimiserMenu:checked) > main .vue > header label[for="minimiserMenu"] i:first-child
{display: none}
#tpl:not(:has( > nav #minimiserMenu:checked)) > main .vue > header label[for="minimiserMenu"] i:last-child{display: none}

#tpl > main .vue > header .options{display: flex;gap: .5em;}
#tpl > main .vue > header .btn{ display: flex;border-radius: var(--borderRadiusMin); gap:.5em; height: 40px; }
#tpl > main .vue > header .btn i{display: initial; font-size: 1.3em; position: relative}
#tpl > main .vue > header .btn i.chargement{top: 10px}
#tpl > main .vue > header .titre{animation: fadeIn .5s ease, txtSlideIn 1s ease; text-align: center}
  
/*MAIN*/
#tpl > main .vue > .main{overflow-y:auto ; /*padding: 10px 30px;*/ padding:10px 0; background: #F7F7F7;box-shadow: var(--boxShadow) inset}
#tpl > main .vue > .main:has( > .principal > .snapConteneur){padding: 10px 0}

#tpl > main .vue.chargement > .main:not(:has(form))
, #tpl > main .vue > .main:has(li.chargement)
{display: grid; place-items: center}

#tpl > main .vue > .main:has(.pageConfirmations)
{position: relative}



/*FOOTER*/
#tpl > main .vue > footer{background:#fff; z-index: 3}
#tpl > main .vue > footer a{text-decoration: none}

/*-----------------------------------------------------------------*/
/* MENU SLIDER HORIZONTAL                                          */
/*-----------------------------------------------------------------*/
footer .menu_slider{padding: 0 10px;height: 100%; display: grid}
.menu_slider > ul{display: flex; align-items: center;overflow-y: hidden; width: 100%; padding:0; margin: 0px;justify-content:start;}
.menu_slider_h > ul{scroll-snap-type: x mandatory;overflow-x: scroll;}
.menu_slider_v > ul{ flex-direction: column; }
.menu_slider > ul::-webkit-scrollbar {display: none;}
.menu_slider:not(.tpl) li{outline: none; list-style: none; width:100%;}

footer .menu_slider{font-size: .8em;}
.menu_slider:not(.tpl) [data-btn]{padding:10px 10px; border-radius:var(--borderRadiusMin);position: relative; z-index: 1; display:flex; align-items: center; justify-content: center;scroll-snap-align: center;gap: .5em;color:var(--couleurBody)!important}

.menu_slider_v:not(.tpl) [data-btn]{justify-content: start; padding: 0}

.menu_slider:not(.menu_lateral):not(.tpl) [data-btn] .icone > i{font-size: 2em; justify-content: center}
footer .menu_slider:not(.tpl) [data-btn] .erreur i{font-size:.7em}

.menu_slider > .menuBas > li [data-btn] .icone{position:relative}
.menu_slider > .menuBas > li .erreur{position: absolute; top: -5px; right: -10px;}

.sousVue > .listeDonnees:after{z-index: 1}

.menu_slider_h:not(.tpl) li:nth-child(1) [data-btn]:after
, .menu_slider_v:not(.tpl) li [data-btn]:after
, .listeDonnees:after
{content:" "; display: block;position:absolute;  top:0; left:0; width: 100%; height: 100%; border-radius: var(--borderRadiusMin);transition: transform .3s ease; background:var(--couleur1_alpha2); z-index: -1 }
 
.menu_slider_v:not(.tpl) li [data-btn]{overflow: hidden}

.menu_slider_v:not(.tpl) li [data-btn]:after
, .listeDonnees:after 
{transform: translateX(-100%)}

.menu_slider_v:not(.tpl) li [data-btn]:hover:after
, .menu_slider_v:not(.tpl) li [data-btn].actif:after
, .listeDonnees:hover:after
{transform: translateX(0%)}

.menu_slider_h ul:has(li:nth-child(1) [data-btn][data-btn].actif) li:nth-child(1) [data-btn]:after
, .menu_slider_h ul:has(li:nth-child(1) [data-btn] input:checked) li:nth-child(1) [data-btn]:after
{ transform: translateX(0)}

.menu_slider_h ul:has(li:nth-child(2) [data-btn].actif) li:nth-child(1) [data-btn]:after
, .menu_slider_h ul:has(li:nth-child(2) [data-btn] input:checked) li:nth-child(1) [data-btn]:after
{ transform: translateX(100%)}

 .menu_slider_h ul:has(li:nth-child(3) [data-btn].actif) li:nth-child(1) [data-btn]:after
, .menu_slider_h ul:has(li:nth-child(3) [data-btn] input:checked) li:nth-child(1) [data-btn]:after
{ transform: translateX(200%)}

 .menu_slider_h ul:has(li:nth-child(4) [data-btn].actif) li:nth-child(1) [data-btn]:after
, .menu_slider_h ul:has(li:nth-child(4) [data-btn] input:checked) li:nth-child(1) [data-btn]:after
{ transform: translateX(300%)}

 .menu_slider_h ul:has(li:nth-child(5) [data-btn].actif) li:nth-child(1) [data-btn]:after
, .menu_slider_h ul:has(li:nth-child(5) [data-btn] input:checked) li:nth-child(1) [data-btn]:after
{ transform: translateX(400%)}

 .menu_slider_h ul:has(li:nth-child(6) [data-btn].actif) li:nth-child(1) [data-btn]:after
, .menu_slider_h ul:has(li:nth-child(6) [data-btn] input:checked) li:nth-child(1) [data-btn]:after
{ transform: translateX(500%)}

 .menu_slider_h ul:has(li:nth-child(7) [data-btn].actif) li:nth-child(1) [data-btn]:after
, .menu_slider_h ul:has(li:nth-child(7) [data-btn] input:checked) li:nth-child(1) [data-btn]:after
{ transform: translateX(600%)}



.menu_slider_h ul:has(li:nth-child(1) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(0)!important}
.menu_slider_h ul:has(li:nth-child(2) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(100%)!important}
.menu_slider_h ul:has(li:nth-child(3) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(200%)!important}
.menu_slider_h ul:has(li:nth-child(4) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(300%)!important}
.menu_slider_h ul:has(li:nth-child(5) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(400%)!important}
.menu_slider_h ul:has(li:nth-child(6) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(500%)!important}
.menu_slider_h ul:has(li:nth-child(7) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(600%)!important}
.menu_slider_h ul:has(li:nth-child(8) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(700%)!important}
.menu_slider_h ul:has(li:nth-child(9) [data-btn][data-btn][data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(800%)!important}
.menu_slider_h ul:has(li:nth-child(10) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(900%)!important}
.menu_slider_h ul:has(li:nth-child(11) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(1000%)!important}
.menu_slider_h ul:has(li:nth-child(12) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(1100%)!important}
.menu_slider_h ul:has(li:nth-child(13) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(1200%)!important}
.menu_slider_h ul:has(li:nth-child(14) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(1300%)!important}
.menu_slider_h ul:has(li:nth-child(15) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(1400%)!important}
.menu_slider_h ul:has(li:nth-child(16) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(1500%)!important}
.menu_slider_h ul:has(li:nth-child(17) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(1600%)!important}
.menu_slider_h ul:has(li:nth-child(18) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(1700%)!important}
.menu_slider_h ul:has(li:nth-child(19) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(1800%)!important}
.menu_slider_h ul:has(li:nth-child(20) [data-btn]:hover) li:nth-child(1) [data-btn]:after
{ transform: translateX(1900%)!important}

/*-----------------------------------------------------------------*/
/* VUE CONNEXION	                                               */
/*-----------------------------------------------------------------*/
#mainConnexion{position: fixed;top: 0;left: 0;width: 100%;height: 100svh;z-index: 4; display: grid}
#mainConnexion:before{background: #F7F7F7; content: " "; width: 100%; height: 100%; position: fixed; z-index: 1; animation: fadeIn 1s ease; transition: opacity 1s ease}

#formConnexion{max-width: 600px;margin: auto;width: 90%; padding: 20px; background: #fff; box-shadow: var(--boxShadow);border-radius: var(--borderRadius); position: relative; z-index: 2; animation: slideBottomToTop 1s ease; transition: transform 1s ease}
 
#mainConnexion.fermer:before{opacity:0; }
#mainConnexion.fermer #formConnexion{transform: translateY(250%)}

/*-----------------------------------------------------------------*/
/* GRID	                                                           */
/*-----------------------------------------------------------------*/
.grid2_1fr_400{display: grid; grid-template-columns: 1fr 400px; gap: 1em}
.grid2_400_1fr{display: grid; grid-template-columns: 400px 1fr; gap: 1em}
.grid_1fr_1fr{display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em}
.grid_1fr_1fr_60{display: grid; grid-template-columns: 1fr 1fr 60px; gap: 1em}
.grid3x1fr{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em}



iframe{width: 100%}






/*-----------------------------------------------------------------*/
/* UPLOAD GPX   	                                               */
/*-----------------------------------------------------------------*/

.uploadTracer{border: 1px solid var(--bordure); border-radius: var(--borderRadiusForm);margin-bottom: 20px;padding: 10px;}
.uploadTracer .fichierTracer .apercu{width: 100%;height: 100%;top: 0;margin: 0;background: #ccc;border-radius: 10px;z-index: 1;}
.uploadTracer .infoTracer .champ:last-child{margin-bottom: 0}
.uploadTracer .infoTracer .champ:last-child .btn{margin: 0; width: 100%; justify-content: center}