*{box-sizing:border-box; -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth;} *::-webkit-scrollbar {display: none;} html{width: 100vw;overflow: hidden;height: 100vh;} :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:200px; --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; } @font-face { font-family: 'titre'; font-style: normal; font-weight: 900; src: url("/v1/core/fonts/titre.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /*-----------------------------------------------------------------*/ /* DEFAUT */ /*-----------------------------------------------------------------*/ body {padding: 0; margin: 0; min-height: 100vh;font-family:font1, sans-serif; font-size: 1em; } body p{line-height: 1.7em } h1, h2, h3, h4 { margin-bottom: 0; font-family: titre;} h2 {margin: 0; font-size: 2.5em} h3{font-size: 1.3em} h4{font-size: 1.2em} a, .a, [data-btn] { text-decoration: none; color: var(--couleurLien); cursor:pointer} .shake {animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;} .conteneur2{max-width: 900px; } .conteneur{max-width: 1500px} .opacity1{opacity:1} .opacity0{opacity:0} .stop_scroll {overflow: hidden!important;} .validation{color:var(--couleurValidation)} .info{color:var(--couleurInfo)} .avertissement{color:var(--couleurAvertissement)} .btn_couleur{color:var(--couleurAction)} .masquer {display: none!important;} .masquer_important {display: none!important;} .hidden {visibility: hidden;} .conteneur, .conteneur2 {width: 100%;max-width: 1200px; margin: auto; padding: 0 10px} #_Connexion #sectionMenu{display: none} #tarteaucitronRoot #tarteaucitronAlertBig {background: rgba(51, 51, 51, .7)!important; padding: 15px 0!important;} .position_absolute{position:absolute} .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } /*-----------------------------------------------------------------*/ /* GRID */ /*-----------------------------------------------------------------*/ .grid1_2{display: grid; grid-template-columns: 1fr 2fr; gap:1em} .grid2{display: grid; grid-template-columns: repeat(2, 1fr); gap:1em} .grid2_1{display: grid; grid-template-columns: 2fr 1fr; gap:1em} .grid3{display: grid; grid-template-columns: repeat(3, 1fr); gap:1em} .grid4{display: grid; grid-template-columns: repeat(4, 1fr); gap:1em} .grid5{display: grid; grid-template-columns: repeat(5, 1fr); gap:1em} /*-----------------------------------------------------------------*/ /* FLEX */ /*-----------------------------------------------------------------*/ .flexSpaceBetween{display: flex; justify-content: space-between} /*-----------------------------------------------------------------*/ /* VIEW */ /*-----------------------------------------------------------------*/ #view{display: grid; grid-template-columns: var(--menuPrincipalWidth) 1fr; transition:grid-template-columns .5s cubic-bezier(.25, 1, .5, 1.25)} body:has(#input_fermer_menu_n2:checked) #view{grid-template-columns: var(--menuPrincipalMinWidth) 1fr; } /*-----------------------------------------------------------------*/ /* CHARGEMENT */ /*-----------------------------------------------------------------*/ #chargementVue{transform: translateX(0)!important;} #chargementVue, .vue:has(._chargement){ font-size: 2em; display: flex;justify-content: center; align-items: center;} body:not(._chargement) #chargementVue , body._chargement .vue:not(#chargementVue) {display: none} /*-----------------------------------------------------------------*/ /* MENU PRINCIPAL */ /*-----------------------------------------------------------------*/ #navPrincipal, #logo, .sous_menu > div{padding: 0 10px; transition:padding .5s ease} #logo{margin:0; padding-top:10px} #logo svg{max-width: 90%; height: 30px} #menu_principal{color:#fff; top:0; right: 0; width:100%; height: 100vh; padding:0;margin:0; width:100%; height: 100vh;white-space: nowrap} #navPrincipal{ } #menu_principal, #menu_principal .sous_menu{background: var(--couleur1); } #menu_principal ul, #menu_principal li{margin:0; padding:0} #menu_principal li{list-style: none;} #menu_principal li.space{margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .2); padding-bottom: 10px;} #menu_principal li .a{display: grid;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} #menu_principal li .a:after , #sectionMenu > #compte label: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(-120%)} #menu_principal li .a:hover:after , #sectionMenu > #compte label:hover:after , #menu_principal li .a.actif:after , #menu_principal:has(#sous_menu_1 input:checked) #menu_label_1:after , #menu_principal:has(#sous_menu_2 input:checked) #menu_label_2:after , #menu_principal:has(#sous_menu_3 input:checked) #menu_label_3:after , #menu_principal:has(#sous_menu_4 input:checked) #menu_label_4:after , #menu_principal:has(#sous_menu_5 input:checked) #menu_label_5:after , #menu_principal:has(#sous_menu_6 input:checked) #menu_label_6:after , #menu_principal:has(#sous_menu_7 input:checked) #menu_label_7:after , #menu_principal:has(#sous_menu_8 input:checked) #menu_label_8:after , #menu_principal:has(#sous_menu_9 input:checked) #menu_label_9:after , #menu_principal:has(#sous_menu_10 input:checked) #menu_label_10:after , #menu_principal:has(#sous_menu_11 input:checked) #menu_label_11:after , #menu_principal:has(#sous_menu_12 input:checked) #menu_label_12:after , #menu_principal:has(#sous_menu_13 input:checked) #menu_label_13:after , #menu_principal:has(#sous_menu_14 input:checked) #menu_label_14:after , #menu_principal:has(#sous_menu_15 input:checked) #menu_label_15:after , #menu_principal:has(#sous_menu_16 input:checked) #menu_label_16:after , #menu_principal:has(#sous_menu_17 input:checked) #menu_label_17:after , #menu_principal:has(#sous_menu_18 input:checked) #menu_label_18:after , #menu_principal:has(#sous_menu_19 input:checked) #menu_label_19:after , #menu_principal:has(#sous_menu_20 input:checked) #menu_label_20:after , #menu_principal:has(#sous_menu_21 input:checked) #menu_label_21:after , #menu_principal:has(#sous_menu_22 input:checked) #menu_label_22:after , #menu_principal:has(#sous_menu_23 input:checked) #menu_label_23:after , #menu_principal:has(#sous_menu_24 input:checked) #menu_label_24:after , #menu_principal:has(#sous_menu_25 input:checked) #menu_label_25:after , #menu_principal:has(#sous_menu_26 input:checked) #menu_label_26:after , #menu_principal:has(#sous_menu_27 input:checked) #menu_label_27:after , #menu_principal:has(#sous_menu_28 input:checked) #menu_label_28:after , #menu_principal:has(#sous_menu_29 input:checked) #menu_label_29:after , #menu_principal:has(#sous_menu_30 input:checked) #menu_label_30:after , #menu_principal:has(#sous_menu_31 input:checked) #menu_label_31:after , #menu_principal:has(#sous_menu_32 input:checked) #menu_label_32:after , #menu_principal:has(#sous_menu_33 input:checked) #menu_label_33:after , #menu_principal:has(#sous_menu_34 input:checked) #menu_label_34:after , #menu_principal:has(#sous_menu_35 input:checked) #menu_label_35:after , #menu_principal:has(#sous_menu_36 input:checked) #menu_label_36:after , #menu_principal:has(#sous_menu_37 input:checked) #menu_label_37:after , #menu_principal:has(#sous_menu_38 input:checked) #menu_label_38:after , #menu_principal:has(#sous_menu_39 input:checked) #menu_label_39:after , #menu_principal:has(#sous_menu_40 input:checked) #menu_label_40:after , #menu_principal:has(#sous_menu_41 input:checked) #menu_label_41:after , #menu_principal:has(#sous_menu_42 input:checked) #menu_label_42:after , #menu_principal:has(#sous_menu_43 input:checked) #menu_label_43:after , #menu_principal:has(#sous_menu_44 input:checked) #menu_label_44:after , #menu_principal:has(#sous_menu_45 input:checked) #menu_label_45:after , #menu_principal:has(#sous_menu_46 input:checked) #menu_label_46:after , #menu_principal:has(#sous_menu_47 input:checked) #menu_label_47:after , #menu_principal:has(#sous_menu_48 input:checked) #menu_label_48:after , #menu_principal:has(#sous_menu_49 input:checked) #menu_label_49:after , #menu_principal:has(#sous_menu_50 input:checked) #menu_label_50:after , #menu_principal:has(#sous_menu_51 input:checked) #menu_label_51:after , #menu_principal:has(#sous_menu_52 input:checked) #menu_label_52:after , #menu_principal:has(#sous_menu_53 input:checked) #menu_label_53:after , #menu_principal:has(#sous_menu_54 input:checked) #menu_label_54:after , #menu_principal:has(#sous_menu_55 input:checked) #menu_label_55:after , #menu_principal:has(#sous_menu_56 input:checked) #menu_label_56:after , #menu_principal:has(#sous_menu_57 input:checked) #menu_label_57:after , #menu_principal:has(#sous_menu_58 input:checked) #menu_label_58:after , #menu_principal:has(#sous_menu_59 input:checked) #menu_label_59:after , #menu_principal:has(#sous_menu_60 input:checked) #menu_label_60:after , #menu_principal:has(#sous_menu_61 input:checked) #menu_label_61:after , #menu_principal:has(#sous_menu_62 input:checked) #menu_label_62:after , #menu_principal:has(#sous_menu_63 input:checked) #menu_label_63:after , #menu_principal:has(#sous_menu_64 input:checked) #menu_label_64:after , #menu_principal:has(#sous_menu_65 input:checked) #menu_label_65:after , #menu_principal:has(#sous_menu_66 input:checked) #menu_label_66:after , #menu_principal:has(#sous_menu_67 input:checked) #menu_label_67:after , #menu_principal:has(#sous_menu_68 input:checked) #menu_label_68:after , #menu_principal:has(#sous_menu_69 input:checked) #menu_label_69:after , #menu_principal:has(#sous_menu_70 input:checked) #menu_label_70:after , #menu_principal:has(#sous_menu_71 input:checked) #menu_label_71:after , #menu_principal:has(#sous_menu_72 input:checked) #menu_label_72:after , #menu_principal:has(#sous_menu_73 input:checked) #menu_label_73:after , #menu_principal:has(#sous_menu_74 input:checked) #menu_label_74:after , #menu_principal:has(#sous_menu_75 input:checked) #menu_label_75:after , #menu_principal:has(#sous_menu_76 input:checked) #menu_label_76:after , #menu_principal:has(#sous_menu_77 input:checked) #menu_label_77:after , #menu_principal:has(#sous_menu_78 input:checked) #menu_label_78:after , #menu_principal:has(#sous_menu_79 input:checked) #menu_label_79:after , #menu_principal:has(#sous_menu_80 input:checked) #menu_label_80:after , #menu_principal:has(#sous_menu_81 input:checked) #menu_label_81:after , #menu_principal:has(#sous_menu_82 input:checked) #menu_label_82:after , #menu_principal:has(#sous_menu_83 input:checked) #menu_label_83:after , #menu_principal:has(#sous_menu_84 input:checked) #menu_label_84:after , #menu_principal:has(#sous_menu_85 input:checked) #menu_label_85:after , #menu_principal:has(#sous_menu_86 input:checked) #menu_label_86:after , #menu_principal:has(#sous_menu_87 input:checked) #menu_label_87:after , #menu_principal:has(#sous_menu_88 input:checked) #menu_label_88:after , #menu_principal:has(#sous_menu_89 input:checked) #menu_label_89:after , #menu_principal:has(#sous_menu_90 input:checked) #menu_label_90:after , #menu_principal:has(#sous_menu_91 input:checked) #menu_label_91:after , #menu_principal:has(#sous_menu_92 input:checked) #menu_label_92:after , #menu_principal:has(#sous_menu_93 input:checked) #menu_label_93:after , #menu_principal:has(#sous_menu_94 input:checked) #menu_label_94:after , #menu_principal:has(#sous_menu_95 input:checked) #menu_label_95:after , #menu_principal:has(#sous_menu_96 input:checked) #menu_label_96:after , #menu_principal:has(#sous_menu_97 input:checked) #menu_label_97:after , #menu_principal:has(#sous_menu_98 input:checked) #menu_label_98:after , #menu_principal:has(#sous_menu_99 input:checked) #menu_label_99:after , #menu_principal:has(#sous_menu_100 input:checked) #menu_label_100:after , #menu_principal:has(#sous_menu_1 .actif) #menu_label_1:after , #menu_principal:has(#sous_menu_2 .actif) #menu_label_2:after , #menu_principal:has(#sous_menu_3 .actif) #menu_label_3:after , #menu_principal:has(#sous_menu_4 .actif) #menu_label_4:after , #menu_principal:has(#sous_menu_5 .actif) #menu_label_5:after , #menu_principal:has(#sous_menu_6 .actif) #menu_label_6:after , #menu_principal:has(#sous_menu_7 .actif) #menu_label_7:after , #menu_principal:has(#sous_menu_8 .actif) #menu_label_8:after , #menu_principal:has(#sous_menu_9 .actif) #menu_label_9:after , #menu_principal:has(#sous_menu_10 .actif) #menu_label_10:after , #menu_principal:has(#sous_menu_11 .actif) #menu_label_11:after , #menu_principal:has(#sous_menu_12 .actif) #menu_label_12:after , #menu_principal:has(#sous_menu_13 .actif) #menu_label_13:after , #menu_principal:has(#sous_menu_14 .actif) #menu_label_14:after , #menu_principal:has(#sous_menu_15 .actif) #menu_label_15:after , #menu_principal:has(#sous_menu_16 .actif) #menu_label_16:after , #menu_principal:has(#sous_menu_17 .actif) #menu_label_17:after , #menu_principal:has(#sous_menu_18 .actif) #menu_label_18:after , #menu_principal:has(#sous_menu_19 .actif) #menu_label_19:after , #menu_principal:has(#sous_menu_20 .actif) #menu_label_20:after , #menu_principal:has(#sous_menu_21 .actif) #menu_label_21:after , #menu_principal:has(#sous_menu_22 .actif) #menu_label_22:after , #menu_principal:has(#sous_menu_23 .actif) #menu_label_23:after , #menu_principal:has(#sous_menu_24 .actif) #menu_label_24:after , #menu_principal:has(#sous_menu_25 .actif) #menu_label_25:after , #menu_principal:has(#sous_menu_26 .actif) #menu_label_26:after , #menu_principal:has(#sous_menu_27 .actif) #menu_label_27:after , #menu_principal:has(#sous_menu_28 .actif) #menu_label_28:after , #menu_principal:has(#sous_menu_29 .actif) #menu_label_29:after , #menu_principal:has(#sous_menu_30 .actif) #menu_label_30:after , #menu_principal:has(#sous_menu_31 .actif) #menu_label_31:after , #menu_principal:has(#sous_menu_32 .actif) #menu_label_32:after , #menu_principal:has(#sous_menu_33 .actif) #menu_label_33:after , #menu_principal:has(#sous_menu_34 .actif) #menu_label_34:after , #menu_principal:has(#sous_menu_35 .actif) #menu_label_35:after , #menu_principal:has(#sous_menu_36 .actif) #menu_label_36:after , #menu_principal:has(#sous_menu_37 .actif) #menu_label_37:after , #menu_principal:has(#sous_menu_38 .actif) #menu_label_38:after , #menu_principal:has(#sous_menu_39 .actif) #menu_label_39:after , #menu_principal:has(#sous_menu_40 .actif) #menu_label_40:after , #menu_principal:has(#sous_menu_41 .actif) #menu_label_41:after , #menu_principal:has(#sous_menu_42 .actif) #menu_label_42:after , #menu_principal:has(#sous_menu_43 .actif) #menu_label_43:after , #menu_principal:has(#sous_menu_44 .actif) #menu_label_44:after , #menu_principal:has(#sous_menu_45 .actif) #menu_label_45:after , #menu_principal:has(#sous_menu_46 .actif) #menu_label_46:after , #menu_principal:has(#sous_menu_47 .actif) #menu_label_47:after , #menu_principal:has(#sous_menu_48 .actif) #menu_label_48:after , #menu_principal:has(#sous_menu_49 .actif) #menu_label_49:after , #menu_principal:has(#sous_menu_50 .actif) #menu_label_50:after , #menu_principal:has(#sous_menu_51 .actif) #menu_label_51:after , #menu_principal:has(#sous_menu_52 .actif) #menu_label_52:after , #menu_principal:has(#sous_menu_53 .actif) #menu_label_53:after , #menu_principal:has(#sous_menu_54 .actif) #menu_label_54:after , #menu_principal:has(#sous_menu_55 .actif) #menu_label_55:after , #menu_principal:has(#sous_menu_56 .actif) #menu_label_56:after , #menu_principal:has(#sous_menu_57 .actif) #menu_label_57:after , #menu_principal:has(#sous_menu_58 .actif) #menu_label_58:after , #menu_principal:has(#sous_menu_59 .actif) #menu_label_59:after , #menu_principal:has(#sous_menu_60 .actif) #menu_label_60:after , #menu_principal:has(#sous_menu_61 .actif) #menu_label_61:after , #menu_principal:has(#sous_menu_62 .actif) #menu_label_62:after , #menu_principal:has(#sous_menu_63 .actif) #menu_label_63:after , #menu_principal:has(#sous_menu_64 .actif) #menu_label_64:after , #menu_principal:has(#sous_menu_65 .actif) #menu_label_65:after , #menu_principal:has(#sous_menu_66 .actif) #menu_label_66:after , #menu_principal:has(#sous_menu_67 .actif) #menu_label_67:after , #menu_principal:has(#sous_menu_68 .actif) #menu_label_68:after , #menu_principal:has(#sous_menu_69 .actif) #menu_label_69:after , #menu_principal:has(#sous_menu_70 .actif) #menu_label_70:after , #menu_principal:has(#sous_menu_71 .actif) #menu_label_71:after , #menu_principal:has(#sous_menu_72 .actif) #menu_label_72:after , #menu_principal:has(#sous_menu_73 .actif) #menu_label_73:after , #menu_principal:has(#sous_menu_74 .actif) #menu_label_74:after , #menu_principal:has(#sous_menu_75 .actif) #menu_label_75:after , #menu_principal:has(#sous_menu_76 .actif) #menu_label_76:after , #menu_principal:has(#sous_menu_77 .actif) #menu_label_77:after , #menu_principal:has(#sous_menu_78 .actif) #menu_label_78:after , #menu_principal:has(#sous_menu_79 .actif) #menu_label_79:after , #menu_principal:has(#sous_menu_80 .actif) #menu_label_80:after , #menu_principal:has(#sous_menu_81 .actif) #menu_label_81:after , #menu_principal:has(#sous_menu_82 .actif) #menu_label_82:after , #menu_principal:has(#sous_menu_83 .actif) #menu_label_83:after , #menu_principal:has(#sous_menu_84 .actif) #menu_label_84:after , #menu_principal:has(#sous_menu_85 .actif) #menu_label_85:after , #menu_principal:has(#sous_menu_86 .actif) #menu_label_86:after , #menu_principal:has(#sous_menu_87 .actif) #menu_label_87:after , #menu_principal:has(#sous_menu_88 .actif) #menu_label_88:after , #menu_principal:has(#sous_menu_89 .actif) #menu_label_89:after , #menu_principal:has(#sous_menu_90 .actif) #menu_label_90:after , #menu_principal:has(#sous_menu_91 .actif) #menu_label_91:after , #menu_principal:has(#sous_menu_92 .actif) #menu_label_92:after , #menu_principal:has(#sous_menu_93 .actif) #menu_label_93:after , #menu_principal:has(#sous_menu_94 .actif) #menu_label_94:after , #menu_principal:has(#sous_menu_95 .actif) #menu_label_95:after , #menu_principal:has(#sous_menu_96 .actif) #menu_label_96:after , #menu_principal:has(#sous_menu_97 .actif) #menu_label_97:after , #menu_principal:has(#sous_menu_98 .actif) #menu_label_98:after , #menu_principal:has(#sous_menu_99 .actif) #menu_label_99:after , #menu_principal:has(#sous_menu_100 .actif) #menu_label_100:after {transform: translateX(0)} #menu_principal 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;} #navPrincipal{position: relative; z-index: 2;background: var(--couleur1)} #menu_principal .sous_menu{position: absolute;top: 0;left: -300px;transition: left .5s ease;background: var(--couleur3S);z-index: 1;height: 100vh;overflow: hidden;width: 300px;overflow-y: scroll;} #menu_principal .sous_menu > div{position: absolute;top: 0;left: 0px;transition:left .5s ease;z-index: 1;height: 100vh;overflow: hidden;width: 300px;overflow-y: scroll;} #menu_principal .sous_menu > div:before{content: " ";position: fixed;top: 0;left: -300px; width: 300px; height: 100vh; background: rgba(0,0,0,.2); transition: left .5s ease } body:not(:has(#input_fermer_menu_n2:checked)) #menu_principal .sous_menu:has(input:checked) , body:not(:has(#input_fermer_menu_n2:checked)) #menu_principal .sous_menu:has(input:checked) > div:before {left: var(--menuPrincipalWidth)} body:has(#input_fermer_menu_n2:checked) #menu_principal .sous_menu:has(input:checked) , body:has(#input_fermer_menu_n2:checked) #menu_principal .sous_menu:has(input:checked) > div:before {left: var(--menuPrincipalMinWidth)} #menu_principal .sous_menu:has(input:checked) .fermerOut{content: " "; width: 100%; height: 100%; z-index: -1; position: fixed; cursor: pointer} #menu_principal .sous_menu .fermer{font-size: 1.5em; position: absolute; top:10px; right:10px; z-index: 2; cursor: pointer} /*-----------------------------------------------------------------*/ /* ANCRER BAS */ /*-----------------------------------------------------------------*/ .ancrer_bas{position: sticky; bottom: 0;width: 100%;left: 0;z-index: 30;} /*-----------------------------------------------------------------*/ /* MENU SLIDER HORIZONTAL */ /*-----------------------------------------------------------------*/ .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 li{outline: none; list-style: none; width:100%;} .menu_slider [data-btn]{padding:10px; border-radius:var(--borderRadiusMin);position: relative; z-index: 1; margin:5px 0; display:flex; align-items: center; scroll-snap-align: center;font-size: .7em;gap: .5em;color:var(--couleurBody)!important} .menu_slider_h [data-btn]{ flex-direction: column; } .menu_slider_v [data-btn]{font-size: 1em} .menu_slider:not(.menu_lateral) [data-btn] .icone > i{font-size: 2em; justify-content: center} .menu_slider [data-btn] .erreur i{font-size:.7em} .menu_slider_h li:nth-child(1) [data-btn]:after , .menu_slider_v li [data-btn]:after , .listeDonnees:after {content:" "; display: block;position:absolute; z-index: -1; top:0; left:0; width: 100%; height: 100%; border-radius: var(--borderRadiusMin);transition: transform .3s ease-in-out; background:var(--couleur1_alpha2); } .menu_slider_v li [data-btn]{overflow: hidden} .menu_slider_v li [data-btn]:after , .listeDonnees:after {transform: translateX(-100%)} .menu_slider_v li [data-btn]:hover:after , .menu_slider_v 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} /*-----------------------------------------------------------------*/ /* CHARGEMENT VUE */ /*-----------------------------------------------------------------*/ ._chargement #navPrincipal , ._chargement #logo , ._chargement .sous_menu > div , ._identification #navPrincipal , ._identification #logo , ._identification .sous_menu > div {padding: 0} ._chargement #view , ._identification #view {grid-template-columns: 0px 1fr} /*-----------------------------------------------------------------*/ /* VUE */ /*-----------------------------------------------------------------*/ #listeVues{width: 100%; left: 0; position:relative!important} #listeVues, .vue{ position: absolute; height: 100%;top:0; transition:left .5s ease, width .5s ease; border-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 0; overflow: hidden} .vue{ width:100%;left: 0px; transition: transform .5s linear ; transform: translateX(100%); background: var(--backgroundVue); box-shadow: var(--boxShadow)} .vue.actif{transform: translateX(0)} .vue.immediatement{transition:none } .vue.parent{transform: translateX(-50%); } .vue .pageContenu , .vue .formFetch {opacity: 1; transition: opacity .5s ease, transform .5s ease} .vue .nonVisible{opacity:0} /*-----------------------------------------------------------------*/ /* PAGINATION */ /*-----------------------------------------------------------------*/ .pagination {} .pagination ul{display: flex; justify-content: center; margin: 0} .pagination ul li{list-style: none} .pagination ul li a , .pagination ul li span { display: flex; padding: 10px; justify-content: center; align-items: center; text-decoration: none; border:1px solid var(--couleur3S); border-left:0; overflow: hidden; } .pagination ul li:first-child a , .pagination ul li:first-child span { border-left: 1px solid; border-top-left-radius: var(--borderRadiusMin); border-bottom-left-radius: var(--borderRadiusMin); } .pagination ul li:last-child a , .pagination ul li:last-child span { border-top-right-radius: var(--borderRadiusMin); border-bottom-right-radius: var(--borderRadiusMin); } .pagination ul li a{ color:var(--couleur3S)} .pagination ul li a:hover, .pagination ul li span{background: var(--couleur1_alpha2); color:var(--couleur3S)} /*-----------------------------------------------------------------*/ /* IDENTIFICATION */ /*-----------------------------------------------------------------*/ ._chargement #listeVues , ._chargement .vue , ._identification #listeVues , ._identification .vue {left:0; width:100%} #connexionVue{transform:translateX(0)} ._identification{background: #F7F7F7} ._identification form{max-width: 600px;margin: auto;width: 90%; min-height: 0px; position: fixed; left: 50%; top:50%; transform: translate(-50%, -50%); transition:none; padding: 20px; background: #fff; box-shadow: var(--boxShadow); border-radius: var(--borderRadius); overflow-y: scroll; height: 300px } ._identification .vue header , ._identification #view > aside {display:none} /*-----------------------------------------------------------------*/ /* NOTIFICATION */ /*-----------------------------------------------------------------*/ .notification{position:fixed; right:30px; width: 300px; height:70px; border-radius:var(--borderRadius); padding:10px; box-shadow: var(--boxShadow); background:rgba(255,255, 255, .5); z-index: 999; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border:2px solid #fff; display: grid; grid-template-columns: 50px 1fr;transition: transform var(--vitesseTransitionNotification) ease, top .5s ease; transform: translateX(0) } .notification.notification_droite{transform: translateX(110%)} .notification > div{display: flex; align-items: center} .notification .icone{font-size:2em} .notification .txt{overflow: scroll; padding-right:10px } .notification .fermer{position:absolute; cursor:pointer; top: 5px; right:5px; font-size: 1.5em; color:var(--couleurAction)} .notification:nth-child(1){ top: 60px;} .notification:nth-child(2){ top: calc(70px + 70px);} .notification:nth-child(3){ top: calc((70px * 2) + 80px);} .notification:nth-child(4){ top: calc((70px * 3) + 90px);} .notification:nth-child(5){ top: calc((70px * 4) + 100px);} .notification:nth-child(6){ top: calc((70px * 5) + 110px);} .notification:nth-child(7){ top: calc((70px * 6) + 120px);} .notification:nth-child(8){ top: calc((70px * 7) + 130px);} .notification:nth-child(9){ top: calc((70px * 8) + 140px);} .notification:nth-child(10){ top: calc((70px * 9) + 150px);} /*-----------------------------------------------------------------*/ /* SECTION MULTIPLE */ /*-----------------------------------------------------------------*/ .sectionMultiple{position:relative; display: grid; grid-template-rows: 1fr; transition: .5s grid-template-rows ease, background .5s ease; padding:0!important; } .sectionMultiple:has(> .interne > .grouper > .idConfigStatuts input[value="2"]){margin-top:40px} .sectionMultiple:has(> .interne > .grouper > .idConfigStatuts input[value="2"]):before{content: "Nouveau"; background: var(--couleurBTN); position: absolute; padding: 10px; border-radius: var(--borderRadius); color: #fff; top: -20px; left: 50%; transform: translateX(-50%);} .sectionMultiple .interne{overflow: hidden;} .sectionMultiple .interne > .grouper{transition: opacity .5s ease, border-color .5s ease;opacity: 1;} .sectionMultiple > .interne > div{padding:20px} .sectionMultiple > .interne > div.divFermer{padding: 0} .sectionMultiple > .interne > div.autresServicesDiv{padding: 0 20px} .sectionMultiple .sectionMultiple .interne div{padding: 0} .listeActivites .sectionMultiple .interne > div{padding:5px; margin:0; } .listeActivites .sectionMultiple .interne.activite{display: grid; grid-template-columns: 1fr 1fr 45px; gap: 1em; align-items: end;} .sectionMultiple .fermer{position:absolute; top: -20px; right:-10px; cursor: pointer; font-size: 2em; color:var(--couleurAvertissement); margin:0; opacity: 1; transition: opacity .5s ease} .sectionMultiple .champ{transition : opacity .5s ease} .sectionMultiple .champ:has(.fermer){z-index: 2} .sectionMultiple .fermer input{display:none} /* .sectionsMultipleParent > .sectionsMultiple > .sectionMultiple > .interne > .grouper > .champ > .fermerSectionMultiple , .sectionsMultipleParent > .sectionsMultiple > .sectionMultiple > .interne > .champ > .fermerSectionMultiple {display: none!important} .sectionsMultipleParent > .sectionsMultiple:has( > .sectionMultiple:nth-child(2)) > .sectionMultiple > .interne > .grouper > .champ > .fermerSectionMultiple , .sectionsMultipleParent > .sectionsMultiple:has( > .sectionMultiple:nth-child(2)) > .sectionMultiple > .interne > .champ > .fermerSectionMultiple {display: block} */ .sectionsMultipleParent > .sectionsMultiple[data-nbr_enfants="1"] > .sectionMultiple > .interne > .grouper > .champ > .fermerSectionMultiple , .sectionsMultipleParent > .sectionsMultiple[data-nbr_enfants="1"] > .sectionMultiple > .interne > .champ > .fermerSectionMultiple {display: none} .listeActivites .fermer{position:static; margin:0} .listeActivites .sectionMultiple{margin:5px 0; border:2px solid #fff; border-radius: var(--borderRadius)} .sectionMultipleFermer{grid-template-rows: 0fr;} .sectionMultipleFermer .fermer{opacity: 0} .assombrirSectionSupprimer .sectionMultiple{border:2px solid #fff; border-radius: var(--borderRadius)} .assombrirSectionSupprimer .listeAmenagements .sectionMultiple{border-color:rgba(0, 0, 0, 0)} .listeActivites .sectionMultiple:has(> .interne > .grouper > .idConfigStatuts input[value="2"]){border-color:var(--couleurBTN)} .listeActivites .sectionMultiple:has(> .interne > .grouper > .idConfigStatuts input[value="2"]):before{top: -15px; transform: translateX(-130%);padding: 5px;font-size: .8em;left: 100%;} .sectionAutreTable > .interne > .grouper > .champ{margin:0} .sectionAutreTable > .interne > .grouper > .champ > .blocInput{border:none; min-height: 0} .sectionAutreTable > .interne > .grouper > .champ > .blocInput > .listChoix{padding: 0} ._admin .vue .assombrirSectionSupprimer .sectionMultiple:has(> .interne > .grouper > .idConfigStatuts input[value="9"]){grid-template-rows: 1fr; border-color: var(--couleurAvertissement); background: rgba(255, 255, 255, .2) } .assombrirSectionSupprimer .sectionMultiple:has(> .interne > .grouper > .idConfigStatuts input[value="9"]) .champ:not(:has(.fermer)):after{content: " "; width: 100%; height: 100%; position: absolute; top: 0; cursor: not-allowed } .assombrirSectionSupprimer .sectionMultiple:has(> .interne > .grouper > .idConfigStatuts input[value="9"]) .interne .champ:not(:has(.fermer)){opacity: .2;} .assombrirSectionSupprimer .sectionMultiple:has(> .interne > .grouper > .idConfigStatuts input[value="9"]) .fermer{opacity: 1 ; z-index: 999} .assombrirSectionSupprimer .sectionMultiple:has(> .interne > .grouper > .idConfigStatuts input[value="9"]) .fermer i:before{content: "\f2ea"; color:var(--couleurBody);background: #fff;padding: 10px;border-radius: 50%;font-size: .6em;} /* .sectionsMultipleParent:not(:has( > .sectionsMultiple > .sectionMultiple:nth-child(2))) > .divAjouter {display: block} */ .sectionsMultipleParent > .divAjouter {display: none!important} .sectionsMultipleParent:has( > .sectionsMultiple[data-nbr_enfants="1"]) > .divAjouter {display: block!important} .gridliste .grid{gap:.5em} .gridliste .grid.listChoix li .labels{margin:0} .listChoix .details{display: grid;grid-template-rows: 0fr;transition: grid-template-rows 0.5s ease;margin-bottom: 0;} .listChoix .details .noteInput{overflow: hidden} .listChoix li:has(input:checked) .details{grid-template-rows: 1fr;} .listChoix li:has(input:checked) .details .blocInput{margin-top:10px} form .minimiserChoix {gap:0} form .minimiserChoix .sectionMultiple .champ {padding: 0; margin:0} form .minimiserChoix .sectionMultiple > .grouper .interne > .champ > .blocInput{border:none; min-height: 0} form .minimiserChoix .sectionMultiple .champ .listChoix{padding:0} form .minimiserChoix .sectionMultiple .listChoix li .labels{margin:0} /*-----------------------------------------------------------------*/ /* SWITCH */ /*-----------------------------------------------------------------*/ .switch{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 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{min-width: 60px; } .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);} /*-----------------------------------------------------------------*/ /* SNAP H */ /*-----------------------------------------------------------------*/ .snapH {display: flex;scroll-snap-type: x mandatory;overflow-x: scroll;overflow-y: hidden;} .snapH > .snapVue{min-width: 100%;gap:1em; scroll-snap-align: center; height: calc(100vh - var(--heightHeader) - var(--heightMenuBas)); overflow:hidden; overflow-y: scroll; margin:0px 50px; } /*-----------------------------------------------------------------*/ /* MAP */ /*-----------------------------------------------------------------*/ .map{height: 500px; width: 100%; border-radius: var(--borderRadius); background: #ccc; position: relative} .map .mapChargement{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 2em;}