/*————— Grand écran 2000px et plus —————*/
html{ font-size:1px }
/*————— DESKTOP + LAPTOP —————*/
@media (max-width:2200px) { html{ font-size:1px } /*body::before { content:'67' }*/ }
@media (max-width:2048px) { html{ font-size:1px } /*body::before { content:'67' }*/ }
@media (max-width:1919px) { html{ font-size:1px } /*body::before { content:'69' }*/ }
@media (max-width:1599px) { html{ font-size:1px } /*body::before { content:'72' }*/ }
@media (max-width:1343px) { html{ font-size:1px } /*body::before { content:'75' }*/ }
@media (max-width:1183px) { html{ font-size:1px } /*body::before { content:'80' }*/ }
/*————— MOBILE ( TABLET + PHONE ) —————*/
@media ( max-width:1023px ){ html{ font-size:1px } /*body::before { content:'T 1.2' }*/ }
@media ( max-width:736px ){ html{ font-size:1px } /*body::before { content:'M 2.0' }*/ }
@media ( max-width:568px ){ html{ font-size:1px } /*body::before { content:'M 2.2' }*/ }
@media ( max-width:335px ){ html{ font-size:1px } /*body::before { content:'M 2.4' }*/ }
:root
{
--font-master : Fira,Arial,sans-serif;
/* --font-slave : Helvetica,sans-serif;*/
/* --font-alter : 'Times New Roman',serif;*/
/* --font-heading : inherit;*/
/* --title-font : inherit;*/
/* --font-color : #000;*/
/* --font-size : 14rem;*/
/* --line-height : 20rem;*/
/* --back-color : #fff;*/
/* --heading-color : inherit;*/
/* --title-color : inherit;*/
/* --button-color : #666;*/
/* --link-color : #1157a8;*/
--hover-color : rgba(255, 182, 47, 1); /* #FFB62F ; exprimé en rgba pour les animations des fonds translucides */
/* --list-color : #000;*/
/* --layer-color : rgba(0, 0, 0, 0.7);*/
/* --input-back-color : #fff;*/
/* --input-color : #000;*/
/* --placeholder-color : #ccc;*/
/* --select-back-color : #fff;*/
/* --select-color : #999;*/
--border-color : #0af;
/* --border-width : 2rem;*/
/* --shadow-color : rgba(0, 0, 0, 0.3);*/
/* --text-shadow-color : rgba(255, 255, 255, 0.5);*/
--color-master : #0af;
/* --color-master-lucid : rgba(17, 87, 68, 0.3);*/
/* --color-slave : #444649;*/
/* --color-slave-lucid : rgba(224, 225, 230, 0.8);*/
/* --color-alter : #A9CE00;*/
/* --color-alter-lucid : rgba( 169, 206, 0, 0.5 );*/
--color-contrast : #fa0;
/* --color-contrast-lucid : rgba( 255, 231, 188, 0.7 );*/
/* --color-red : #f00;*/
/* --color-red-lucid : rgba(255, 0, 0, 0.7);*/
/* --color-green : #0f0;*/
/* --color-green-lucid : rgba(0, 255, 0, 0.7);*/
/* --color-blue : #00f;*/
/* --color-blue-lucid : rgba(0, 0, 255, 0.7);*/
/* --color-cyan : #0ff;*/
/* --color-cyan-lucid : rgba(0, 255, 255, 0.7);*/
/* --color-magenta : #f0f;*/
/* --color-magenta-lucid : rgba(255, 0, 255, 0.7);*/
/* --color-yellow : #ff0;*/
/* --color-yellow-lucid : rgba(255, 255, 0, 0.7);*/
/* --color-black : #000;*/
/* --color-black-lucid : rgba(0, 0, 0, 0.7);*/
/* --color-grey-dark : #404040;*/
/* --color-grey-dark-lucid : rgba(64, 64, 64, 0.7);*/
/* --color-grey : #808080;*/
/* --color-grey-lucid : rgba(128, 128, 128, 0.7);*/
/* --color-grey-light : #c0c0c0;*/
/* --color-grey-light-lucid : rgba(192, 192, 192, 0.7);*/
/* --color-white : #fff;*/
/* --color-white-lucid : rgba(255, 255, 255, 0.85);*/
/* --transition-duration : 0.5s;*/
/* --transition-easing : ease-out;*/
/* --animation-duration : 0.5s;*/
/* --animasion-easing : ease-out;*/
}
/******** POLICES DE CARACTERES *********/
@font-face{ font-family:'menlo'; src:url('../font/menlo.woff2') format('woff2'), url('../font/menlo.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face{ font-family:'menlo'; src:url('../font/menlo-italic.woff2') format('woff2'), url('../font/menlo-italic.woff') format('woff'); font-weight:normal; font-style:italic; }
@font-face{ font-family:'Fira'; src:url('../font/F.woff2') format('woff2'), url('../font/F.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face{ font-family:'Fira'; src:url('../font/F-i.woff2') format('woff2'), url('../font/F-I.woff') format('woff'); font-weight:normal; font-style:italic; }
@font-face{ font-family:'Fira'; src:url('../font/F-b.woff2') format('woff2'), url('../font/F-B.woff') format('woff'); font-weight:bold; font-style:normal; }
@font-face{ font-family:'Fira'; src:url('../font/F-bi.woff2') format('woff2'), url('../font/F-BI.woff') format('woff'); font-weight:bold; font-style:italic; }
html, body{ height:100%; width:100%; overflow:hidden; }
a{ transition:none; }
button{ border:0; }
/*section.panels{ height:calc( 100vh - 34rem ) }*/
/*main > div.split-bar{ height:calc( 100vh - 34rem ) }*/
/*all > main { flex-grow:1; padding-right:5px; }*/
wippage { display:flex; flex-direction:column; flex-grow:1; height:100%; }
wippage wipdiv{ display:flex; height:100%; }
wippage > wipdiv{ flex-direction:column; flex-grow:1; background-color:#0af; }
wippage > wipdiv > wipview{ min-height:100px; }
wipview#codeview { background-color:#000; box-shadow:2px 2px 3px rgba(0, 0, 0, 0.4); }
wipview#tagview { min-width:300px; }
wiphead wipdiv{ flex-grow:1; }
wiphead wiptitle { display:block; height:22px; line-height:22px; text-align:center; }
wipview toolbar{ background-color:#fff; margin-bottom:1px; }
wipview toolbar,
wipview iframe { box-shadow:2px 2px 3px rgba(0, 0, 0, 0.4); }
wipview { display:flex; flex-direction:column; }
/*panels icon { margin-bottom:5px; }
panels icon img { width:32px; height:32px; }
panels icon::before { content:none; position:absolute; top:0; left:45px; width:7px; height:42px; }
panels icon.hover,
panels icon.open { width:47px; padding-left:15px; transition-duration:0.3s; }
panels icon.open::before,
panels icon.hover::before{ content:''; background-color:#0af; background:linear-gradient(to bottom, rgba(0,170,255,0), rgba(0,170,255,1) 6px); }
panels icon.on { background-color:#fa0; }
panels icon.on::before{ background:linear-gradient(to bottom, rgba(255,170,0,0), rgba(255,170,0,1) 6px); }*/
tooltab { display:flex; }
tooltab .icon.open { height:27px; padding-top:12px; transition-duration:0.3s; }
hpanel > tooltab { justify-content:flex-end; }
toolbar { display:flex; justify-content:space-between; align-items:center; }
toolbar form[name="box"] { margin-left:20%; }
toolbar.bloc{ display:block; }
viewport { display:flex; }
form[name="page_desc"] { display:flex; flex-wrap:wrap;}
form[name="page_desc"] > button{ margin-left:5px; }
form[name="page_desc"] input[type="text"] { flex-grow:1; padding:0 8px; height:25px; line-height:25px; border:0; }
form[name="page_desc"] div.btnform { display:none; }
form[name="page_desc"].active div.btnform { display:block; }
form[name="page_desc"] textarea { width:100% !important; margin-top:5px; }
/*wiphead > icon,
wiphead > form { margin:5px 0 0 5px; }*/
wipsite{ position:relative; flex-grow:1; height:32px; line-height:32px; padding:0 20px; background-color:#fff; cursor:pointer; }
wipitem{ height:32px; line-height:32px; flex-grow:1; padding:0 20px; filter:drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4)); cursor:pointer; display:block; background-color:#fff; }
wipitem:not(:last-child){ overflow:hidden; white-space:nowrap; text-align:center; text-overflow:ellipsis; min-width:0; }
/*wippath ol li:hover wiptag{ color:#0af; }
wippath ol li:last-child wiptag{ color:#fa0; }*/
/*wippage::before{ content:''; position:absolute; left:0; top:0; width:0; height:0; border-top:16px solid #fff; border-left:16px solid transparent; border-bottom:16px solid #fff; }
wippage::after{ content:''; position:absolute; right:0; top:0; width:0; height:0; border-top:16px solid transparent; border-left: 16px solid #fff; border-bottom:16px solid transparent; }*/
wipitem:first-child{ margin-left:0; }
wipitem:first-child::before{ content:''; position:absolute; right:100%; top:0; width:0; height:0; border:0; border-left:5px solid #fff; }
wipitem:last-child::after{ content:''; position:absolute; left:100%; top:0; width:0; height:0; border:0; border-right:5px solid #fff; }
wipitem:last-child{ margin-right:0; }
iframe{ width:100%; height:100%; margin:auto; }
wippath wiptag { font-weight:bold; color:#666; padding:0 2px; }
wippath wipid { font-weight:normal; color:#666; }
wippath wipclass { font-style:italic; color:#999; }
wippath { display:block; background-color:#fff; height:45px; padding:5px 0; }
wippath ol { list-style-type:none; display:flex; height:100%; margin:0; padding:2px; background-color:#0af; float:left; }
wippath ol li { position:relative; background-color:#fff; height:30px; line-height:30px; padding:0 10px; margin:0 9px; cursor:pointer; }
wippath ol li:hover wiptag{ color:#0af; }
wippath ol li:last-child wiptag{ color:#fa0; }
wippath ol li::before{ content:''; position:absolute; right:100%; top:0; width:0; height:0; border-top:15px solid #fff; border-left:15px solid transparent; border-bottom:15px solid #fff; }
wippath ol li::after{ content:''; position:absolute; left:100%; top:0; width:0; height:0; border-top:15px solid transparent; border-left: 15px solid #fff; border-bottom:15px solid transparent; }
wippath ol li:first-child{ margin-left:0; }
wippath ol li:first-child::before{ content:''; position:absolute; right:100%; top:0; width:0; height:0; border:0; border-left:5px solid #fff; }
wippath ol li:last-child::after{ content:''; position:absolute; left:100%; top:0; width:0; height:0; border:0; border-right:5px solid #fff; }
wippath ol li:last-child{ margin-right:0; }
/*iframe::-webkit-scrollbar-track{ -webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3); background-color:#F5F5F5; }
iframe::-webkit-scrollbar{ width:6px; background-color:#F5F5F5; }
iframe::-webkit-scrollbar-thumb{ background-color:#000000; }
*/
/********** FORM **********/
input,
textarea,
select,
label.a-cocher > span { padding:8px; font-weight:normal; font-size:14rem; vertical-align:middle; color:#444; background-color:#fff; border:1px solid #ddd; outline:none; }
label { cursor:pointer; }
label.a-cocher > input { display:none; }
label.a-cocher > input:checked + span { background-color:#F39200; color:#fff; }
/*::placeholder { font-style:italic; }*/
form label.select { position:relative; }
form label.select::after { content:''; position:absolute; width:0; height:0; right:4rem; bottom:8rem; border:6rem solid transparent; border-bottom-width:0; border-top-color:#F39200; pointer-events:none; }
form label.select select{ display:inline-block; width:100%; margin:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; color:#999; text-transform:uppercase; }
form label.select select:valid { color:#444; text-transform:none; }
form label.select select option:disabled { display:none; color:#999; }
form label.select select option { padding:1vh 0.5vw; color:#444; text-transform:none; }
@-moz-document url-prefix() { form label.select select{ padding-top:0; padding-bottom:0; } }
input:focus,
textarea:focus,
select:focus { border-color:transparent; color:#444444; box-shadow:2px 2px 3px rgba(0, 0, 0, 0.4) inset; }
/*input.wrong { background-color:#fee;}*/
button.icon.wrong { background-color:#c00;}
button.icon.success { background-color:#0a0;}
form[name="login"] input{ width:100%; }
form[name="login"] p { margin-bottom:20px; }
form[name="login"] p:last-child { display:flex; }
form[name="login"] p:last-child input { width:auto; flex-grow:1; }
form[name="login"] p:last-child button { width:34px; height:34px; margin-left:20px; }
.m2px-r{ margin-right:2px; }
.m2px-t{ margin-top:2px; }
.m5px-t{ margin-top:5px; }
button { padding:4px; cursor:pointer; text-align:center; font-family:arial,sans-serif; font-size:14rem; color:#fff; background-color:#0af; }
button.icon { position:relative; display:inline-block; padding:0; width:25px; height:25px; line-height:2px; cursor:pointer; background-color:#0af; color:#fff; transition:all 0.15s; }
button.icon::before { content:''; position:absolute; top:0; left:0; bottom:0; right:0; }
button.icon > span { display:none; }
button.icon.on::before,
button.icon:hover::before { filter:drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.4)) }
button.icon.on,
button.icon.open,
button.icon.hover,
button.icon:hover { box-shadow:2px 2px 3px rgba(0, 0, 0, 0.4) inset; }
button.icon.on,
button.icon.open { background-color:#fa0; }
button.icon > img { position:relative; width:15px; height:15px; }
button.icon > form { display:none; }
button.icon.disabled,
button.icon.disabled:hover::before,
button.icon.disabled:hover,
button.icon.disabled.on,
button.icon.disabled.open { box-shadow:none; filter:none; background-color:#eee; }
button.icon.sm { width:18px; height:25px; }
button.icon.sm > img { width:7px; height:15px; }
button.icon.io img{ filter:grayscale(100%) brightness(5) }
button.icon.io:hover img{ filter:drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)) grayscale(100%) brightness(5) }
button.icon.io.on,
button.icon.io.open { background-color:#fff; box-shadow:none; }
button.icon.io.on img,
button.icon.io.open img{ filter:none }
button.icon.io.on:hover img,
button.icon.io.open:hover img{ filter:drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)) grayscale(100%) brightness(5) }
button.icon.io.on:hover,
button.icon.io.open:hover{ background-color:#0af; box-shadow:2px 2px 3px rgba(0, 0, 0, 0.4) inset; }
button[class^="img"] { position:relative; display:inline-block; padding:3px; width:25px; height:25px; cursor:pointer; background-color:#fff; color:#0af; transition:all 0.15s; }
button[class^="img"] > img { position:relative; width:15px; height:15px; }
button[class^="img"].on,
button[class^="img"].open,
button[class^="img"].hover,
button[class^="img"]:hover { box-shadow:2px 2px 3px rgba(0, 0, 0, 0.4) inset; background-color:#0af; }
button[class^="img"].on > img,
button[class^="img"].open > img,
button[class^="img"].hover > img,
button[class^="img"]:hover > img { filter:drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)) grayscale(100%) brightness(5); }
button[class^="img"].on,
button[class^="img"].open{ background-color:#fa0; }
button[class^="img"].io.on,
button[class^="img"].io.open{ background-color:#0af; }
/* http://tobiasahlin.com/spinkit/ */
button.img-sm { padding:5px; width:25px; height:25px; }
button.img-sm > img { width:15px; height:15px; }
button.img-md { padding:5px; width:29px; height:29px; }
button.img-md > img { width:19px; height:19px; }
button.img-lg{ padding:5px; width:34px; height:34px; margin-left:2px; }
button.img-lg:first-child{ margin-left:0; }
button.img-lg > img { width:24px; height:24px; }
@keyframes animwait
{
0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
}
@keyframes animsuccess { from{} to { background-color:#fa0; } }
@keyframes animsuccesshide { to { background-color:#fa0; visibility:hidden; } }
form button[type="submit"].icon { background-color:#fa0; }
form.wait button[type="submit"].icon { visibility:visible; background-color:#666; animation:animwait 1.2s infinite ease-in-out; cursor:default; }
form.failed button[type="submit"].icon { visibility:visible; background-color:#c00; }
form.success button[type="submit"].icon { visibility:visible; background-color:#4b0 !important; animation:animsuccess 0.3s ease-in 2s 1 normal forwards; }
@keyframes bgwait { 0% { background-color:#fa0 } 50% { background-color:#0af } 100% { background-color:#fa0 } }
form.wait button[type="submit"].img-lg { visibility:visible; cursor:default; animation:bgwait 2s infinite ease-in-out; }
form.success button[type="submit"].img-lg { visibility:visible; background-color:#2a0; }
form.failed button[type="submit"].img-lg { visibility:visible; background-color:#c00; }
form.wait .animform { visibility:visible; background-color:#666; animation:animwait 1.2s infinite ease-in-out; cursor:default; }
form.failed .animform { visibility:visible; background-color:#c00; }
form.success .animform { visibility:visible; background-color:#2a0; animation:animsuccess 0.3s ease-in 2s 1 normal forwards; }
form.success .animform { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M19.348 38.907L7.922 27.485l5.072-5.073 6.354 6.354L37.04 11.093l5.037 5.084-22.73 22.73z' fill='%23FFF'/%3E%3C/svg%3E"); }
/*
animation: name duration easing delay iteration-count direction fill-mode play-state
animation: none 0 ease 0 1 normal none running
*/
form.wait button.menu.icon { visibility:visible; background-color:#666; animation:animwait 1.2s infinite ease-in-out; cursor:default; }
form.failed button.menu.icon { visibility:visible; background-color:#c00; }
form.success button.menu.icon { visibility:visible; background-color:#2a0; /*animation:animsuccess 0.3s ease-in 2s 1 normal forwards;*/ }
form.success button.menu.icon::before{ background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M19.348 38.907L7.922 27.485l5.072-5.073 6.354 6.354L37.04 11.093l5.037 5.084-22.73 22.73z' fill='%23FFF'/%3E%3C/svg%3E"); }
ol.dyntree-base { list-style-type:none; position:absolute; top:0; left:0; padding:8px; z-index:5; }
nav.tree > ol{ padding:0; } /* le ol du root et contrairement au .dyntree-base */
.tree ol { list-style-type:none; position:relative; margin:0; padding:8px; padding-left:25px; border-radius:4px; }
.tree li { position:relative; padding:0; background-color:#fff; border-radius:4px; box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2) }
.tree li > div { border-radius:4px; outline:0; border:0; padding-left:25px; }
.tree li > div > a,
.tree input[type="text"] { display:block; width:auto; padding:6px; border-radius:4px; outline:0; border:0; font-family:Fira,Arial,sans-serif; font-size:13rem; line-height:16rem; color:#000; text-decoration:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
.tree li > div { position:relative; padding-left:25px; }
.tree li > div::before
{
content:''; top:0; left:0; position:absolute; width:28px; height:28px;
background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23aaa' d='M16 6H7v16h13V10'/%3E%3Cpath fill='%23FFF' d='M15 7H8v14h11V11h-4'/%3E%3Cpath fill='%23FFF' d='M16 7.5V10h2.5'/%3E%3C/svg%3E");
}
.tree li > div.over::before,
.tree li.on > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M15 7H8v14h11V11h-4'/%3E%3Cpath fill='%23FFF' d='M16 7.5V10h2.5'/%3E%3C/svg%3E"); }
.tree li.leaf.hideself > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2300000060' d='M16 6H7v16h3v-2h2v2h3v-2h2v2h3V10l-4-4zm0 2l3 2h-3V8zm3 13h-1v-2h-4v2h-1v-2H9v2H8V7h7v4h4v10z'/%3E%3Cpath fill='%23FFFFFF80' d='M15 7H8v14h1v-2h4v2h1v-2h4v2h1V11h-4z'/%3E%3Cpath fill='%23FFFFFF80' d='M16 8v2h3z'/%3E%3C/svg%3E"); }
.tree li.leaf.hideself > div.over::before,
.tree li.leaf.hideself.on > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF80' d='M15 7H8v14h1v-2h4v2h1v-2h4v2h1V11h-4V7z'/%3E%3Cpath fill='%23FFFFFF80' d='M16 7v3h3l-3-3z'/%3E%3C/svg%3E") }
.tree li.node.hidechild > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23AAA' d='M20 9V7h-8V6H7v16h6v-2h4v2h5V9h-2zm-8 12h-2v-1h2v1zm9 0h-3v-2H9v2H8V7h3v1h8v12h1V10h1v11z'/%3E%3Cpath fill='%23FFF' d='M20 20h-1V8h-8V7H8v14h1v-2h9v2h3V10h-1z'/%3E%3C/svg%3E"); }
.tree li.node.hidechild > div.over::before,
.tree li.node.hidechild.on > div::before{ background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M11 7H8v14h4v-2h5v2h4V9h-1v11h-1V8h-8z'/%3E%3C/svg%3E"); }
.tree li.node.hideself > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2300000060' d='M20 9V7h-8V6H7v16h3v-2h2v2h3v-2h2v2h5V9h-2zm1 12h-3v-2h-4v2h-1v-2H9v2H8V7h3v1h8v12h1V10h1v11z'/%3E%3Cpath fill='%23FFFFFF80' d='M20 20h-1V8h-8V7H8v14h1v-2h4v2h1v-2h4v2h3V10h-1z'/%3E%3C/svg%3E"); }
.tree li.node.hideself > div.over::before,
.tree li.node.hideself.on > div::before{ background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF80' d='M11 7H8v14h1v-2h3v2h2v-2h3v2h4V9h-1v11h-1V8h-8z'/%3E%3C/svg%3E"); }
.tree li.node.root{ box-shadow:none; }
.tree li.node.root > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='%23aaa' cx='14' cy='12' r='9'/%3E%3Ccircle fill='%23FFF' cx='14' cy='12' r='8.1'/%3E%3Cpath fill='%23aaa' d='M16 24V11.5l-4 4V24'/%3E%3Cpath fill='%23FFF' d='M13 23h2v-9l-2 2'/%3E%3C/svg%3E"); }
.tree li.node.root.on > div::before,
.tree li.node.root > div.over::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M14 3.9c-4.5 0-8.1 3.6-8.1 8.1 0 3.8 2.6 6.9 6.1 7.8v-4.3l4-4v8.3c3.5-.9 6.1-4.1 6.1-7.8 0-4.5-3.6-8.1-8.1-8.1z'/%3E%3Cpath fill='%23FFF' d='M13 23h2v-9l-2 2'/%3E%3C/svg%3E"); }
.tree li.node.root > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23AAA' d='M21.5 13l1.5-2.5V6l-1-1h-7V3h-3v2H5L4 6v4.5L5.5 13H7V8h5v1H9l-1 1v4H6l-1 1v4h1.5l1-2H8l1.5 4H11v-9h1v9l1 3h1l1-3v-9h1v9h1.5l1.5-4h.5l1 2H22v-4l-1-1h-2v-4l-1-1h-3V8h5v5'/%3E%3Cpath fill='%23FFF' d='M21.5 6H14V4h-1v2H5.5l-.5.5V10l1 2V7h7v3H9.5l-.5.5V15H6.5l-.5.5V18l1-2h2v1l1 3v-9h3v10l.5 2 .5-2V11h3v9l1-3v-1h2l1 2v-2.5l-.5-.5H18v-4.5l-.5-.5H14V7h7v5l1-2V6.5'/%3E%3C/svg%3E"); }
.tree li.node.root.on > div::before,
.tree li.node.root > div.over::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M21.5 6H14V4h-1v2H5.5l-.5.5V10l1 2V7h7v3H9.5l-.5.5V15H6.5l-.5.5V18l1-2h2v1l1 3v-9h3v10l.5 2 .5-2V11h3v9l1-3v-1h2l1 2v-2.5l-.5-.5H18v-4.5l-.5-.5H14V7h7v5l1-2V6.5'/%3E%3C/svg%3E"); }
/*.tree li.node.root > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23AAA' d='M18.4 21H9.6c-2 0-3.6-1.6-3.6-3.6V7.6C6 5.6 7.6 4 9.6 4h8.8c2 0 3.6 1.6 3.6 3.6v9.8c0 2-1.6 3.6-3.6 3.6z'/%3E%3Cpath fill='%23FFF' d='M18.4 20.1H9.6c-1.5 0-2.8-1.2-2.8-2.8V7.7c0-1.5 1.2-2.8 2.8-2.8h8.7c1.5 0 2.8 1.2 2.8 2.8v9.6c0 1.5-1.2 2.8-2.7 2.8z'/%3E%3Cpath fill='%23AAA' d='M12 24h4V12l-4 4'/%3E%3Cpath fill='%23FFF' d='M13 23h2v-9l-2 2'/%3E%3C/svg%3E"); }*/
/*.tree li.node.root > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23AAA' d='M18.4 21H9.6L6 17.4V7.6L9.6 4h8.8L22 7.6v9.8L18.4 21z'/%3E%3Cpath fill='%23FFF' d='M18 20h-8l-3-3V8l3-3h8l3 3v9l-3 3z'/%3E%3Cpath fill='%23AAA' d='M12 24h4V12l-4 4'/%3E%3Cpath fill='%23FFF' d='M13 23h2v-9l-2 2'/%3E%3C/svg%3E"); }*/
/*.tree li.node.root > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23AAA' d='M18.4 21H9.6L6 17.4V7.6L9.6 4h8.8L22 7.6v9.8L18.4 21z'/%3E%3Cpath fill='%23FFF' d='M18 20h-8l-3-3V8l3-3h8l3 3v9l-3 3z'/%3E%3Cpath fill='%23AAA' d='M12 24h4v-8h-4'/%3E%3Cpath fill='%23FFF' d='M13 23h2v-6h-2'/%3E%3C/svg%3E"); }*/
/*.tree li.node.root > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23AAA' d='M21 12c0-5-2-9-7-9s-7 4-7 9c0 4.2 1.5 7.8 5 8.7V24h4v-3.3c3.5-.9 5-4.5 5-8.7z'/%3E%3Cpath fill='%23FFF' d='M14 4c-4.5 0-6 3.6-6 8 0 3.7 1.1 6.8 4 7.7V16l4-4v7.7c2.9-.9 4-4 4-7.7 0-4.4-1.5-8-6-8z'/%3E%3Cpath fill='%23FFF' d='M13 23h2v-9l-2 2'/%3E%3C/svg%3E"); }*/
/* HOME */
.tree li.root > ol > li.leaf:first-child > div::before,
.tree li.root > ol > li.node.transmute:first-child > div::before,
.tree li.root > ol > li.node:first-child > ol > li.leaf:first-child > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%230AF' d='M13 5l-8 6v2h2v9h13v-9h2v-2l-8-6'/%3E%3Cpath fill='%230AF' d='M13 6l-7 5.5v.5h2v9h3v-6h5v6h3v-9h2v-.5L14 6'/%3E%3Cpath fill='%23FFF' d='M12 16h3v5h-3z'/%3E%3C/svg%3E"); }
.tree li.root > ol > li.leaf:first-child > div.over::before,
.tree li.root > ol > li.node.transmute:first-child > div.over::before,
.tree li.root > ol > li.node:first-child > ol > li.leaf:first-child > div.over::before,
.tree li.root > ol > li.leaf.on:first-child > div::before,
.tree li.root > ol > li.node.transmute.on:first-child > div::before,
.tree li.root > ol > li.node:first-child > ol > li.leaf.on:first-child > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M13 6l-7 5.5v.5h2v9h3v-6h5v6h3v-9h2v-.5L14 6'/%3E%3Cpath fill='%23FFF' d='M12 16h3v5h-3z'/%3E%3C/svg%3E"); }
/*.tree li.node.root > div.over::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M13 23h2v-9l-2 2'/%3E%3Cpath fill='%23FFF' d='M18 5h-8L7 8v9l3 3h2v-4l4-4v8h2l3-3V8'/%3E%3C/svg%3E"); }*/
/*.tree li.node.root > div.over::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23AAA' d='M21 12c0-5-2-9-7-9s-7 4-7 9c0 4.2 1.5 7.8 5 8.7V24h4v-3.3c3.5-.9 5-4.5 5-8.7z'/%3E%3Cpath fill='%23FFF' d='M14 4c-4.5 0-6 3.6-6 8 0 3.7 1.1 6.8 4 7.7V16l4-4v7.7c2.9-.9 4-4 4-7.7 0-4.4-1.5-8-6-8z'/%3E%3Cpath fill='%23FFF' d='M13 23h2v-9l-2 2'/%3E%3C/svg%3E"); }*/
.tree li.node > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23AAA' d='M12 6H7v16h15V9h-2V7h-8'/%3E%3Cpath fill='%23AEF' d='M11 7H8v14h13V10h-1v10h-1V8h-8'/%3E%3C/svg%3E"); }
.tree li.node.on > div::before,
.tree li.node > div.over::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M11 7H8v14h13V10h-1v10h-1V8h-8'/%3E%3C/svg%3E"); }
.tree li.node.transmute > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23AAA' d='M16 6H7v16h15V12h-2v-2'/%3E%3Cpath fill='%23F00' d='M8 7v14h13v-8h-1v7h-1v-9h-4V7'/%3E%3Cpath fill='%23F00' d='M16 7.5V10h2.5'/%3E%3C/svg%3E"); }
.tree li.node.transmute.on > div::before,
.tree li.node.transmute > div.over::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M8 7v14h13v-8h-1v7h-1v-9h-4V7'/%3E%3Cpath fill='%23FFF' d='M16 7.5V10h2.5'/%3E%3C/svg%3E"); }
.tree li.node.onepage > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23AAA' d='M20 7h-8V6H7v10h2v1H7v5h15V12h-2'/%3E%3Cpath fill='%23AEF' d='M8 18v3h13v-8h-1v3H10v1h10v3h-1v-2'/%3E%3Cpath fill='%23AEF' d='M8 7v8h11V8h-8V7'/%3E%3C/svg%3E"); }
.tree li.node.onepage.on > div::before,
.tree li.node.onepage > div.over::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M8 18v3h13v-8h-1v3H10v1h10v3h-1v-2'/%3E%3Cpath fill='%23FFF' d='M8 7v8h11V8h-8V7'/%3E%3C/svg%3E"); }
.tree li.node.onepage.transmute > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23aaa' d='M16 6H7v10h2v1H7v5h15V12h-2v-2'/%3E%3Cpath fill='%23F00' d='M8 18v3h13v-8h-1v3H10v1h10v3h-1v-2'/%3E%3Cpath fill='%23F00' d='M15 7H8v8h11v-4h-4'/%3E%3Cpath fill='%23F00' d='M16 7.5V10h2.5'/%3E%3C/svg%3E"); }
.tree li.node.onepage.transmute.on > div::before,
.tree li.node.onepage.transmute > div.over::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M8 18v3h13v-8h-1v3H10v1h10v3h-1v-2'/%3E%3Cpath fill='%23FFF' d='M15 7H8v8h11v-4h-4'/%3E%3Cpath fill='%23FFF' d='M16 7.5V10h2.5'/%3E%3C/svg%3E"); }
.tree li.node.onepage > ol > li.leaf > div::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23AAA' d='M16 6H7v10h13v-6m0 7H7v5h13'/%3E%3Cpath fill='%23FFF' d='M8 18v3h11v-3M15 7H8v8h11v-4h-4'/%3E%3Cpath fill='%23FFF' d='M16 7.5V10h2.5'/%3E%3C/svg%3E"); }
.tree li.node.onepage > ol > li.leaf.on > div::before,
.tree li.node.onepage > ol > li.leaf > div.over::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M8 18v3h11v-3M15 7H8v8h11v-4h-4'/%3E%3Cpath fill='%23FFF' d='M16 7.5V10h2.5'/%3E%3C/svg%3E"); }
.tree form { display:flex; justify-content:space-between; align-items:center; padding-right:2px; }
.tree input[type="text"] { flex-grow:1; width:50px; } /*padding:4px 6px 3px 6px; margin-top:2px; margin-bottom:3px; }*/
.tree form input[type="text"]:focus{ border:0; outline:0; box-shadow:0px 0px 3px rgba(0, 0, 0, 0.4) inset; background-color:rgba(0, 167, 252, 0.2); }
.tree li.on form input[type="text"]:focus{ background-color:rgba(255, 170, 0, 0.2); }
.tree li + li{ margin-top:4px; }
.tree form input[type="text"] ~ button { visibility:hidden; }
.tree form input[type="text"]:focus ~ button { visibility:visible; }
.tree form input[type="text"]:disabled { background-color:#fff; }
/*.tree form.success button[type="submit"].icon { animation-name:animsuccesshide; }*/
.tree form > * { margin-right:1%; }
.tree form button.menu,
.tree form button.menu img { width:20px; height:20px; }
.tree form button.menu { position:absolute; z-index:2; right:2px; top:50%; margin-top:-10px; display:none; background-color:transparent; line-height:0; padding:0; }
.tree form button.menu { filter:none; transition:transform 0.6s, filter 0.4s; transition-delay:0.4s, 0s; }
.tree form button.menu.open { transform:rotate(360deg); filter:drop-shadow(2px 2px 3px rgba(0,0,0,0.4) ); transition-delay:0s, 0.4s; }
li.dyntree-placeholder{ position:relative; background-color:#eee; box-shadow:none; }
li.dyntree-ghost{ position:relative; background-color:rgba(0, 167, 252, 0.2); box-shadow:none; }
/*li.dyntree-ghost::before,
li.dyntree-placeholder::before{ content:none; }*/
/*.dyntree-ghostWrapper{ outline:1px solid green; }*/
/*#tree li li { background-color:#ddf; padding-left:50px }*/
.dyntree-handle
{
position:absolute; top:1px; left:1px; width:25px; height:25px; background-color:#0af; cursor:grab;
background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M0 0v25h25V0H0zm10.3 20.752c-.884 0-1.6-.716-1.6-1.6 0-.884.716-1.6 1.6-1.6.884 0 1.6.716 1.6 1.6 0 .884-.716 1.6-1.6 1.6zm0-4.4c-.884 0-1.6-.716-1.6-1.6 0-.884.716-1.6 1.6-1.6.884 0 1.6.716 1.6 1.6 0 .884-.716 1.6-1.6 1.6zm0-4.4c-.884 0-1.6-.716-1.6-1.6 0-.884.716-1.6 1.6-1.6.884 0 1.6.716 1.6 1.6 0 .884-.716 1.6-1.6 1.6zm0-4.252c-.884 0-1.6-.716-1.6-1.6 0-.884.716-1.6 1.6-1.6.884 0 1.6.716 1.6 1.6 0 .884-.716 1.6-1.6 1.6zm4.4 13.052c-.884 0-1.6-.716-1.6-1.6 0-.884.716-1.6 1.6-1.6.884 0 1.6.716 1.6 1.6 0 .884-.716 1.6-1.6 1.6zm0-4.4c-.884 0-1.6-.716-1.6-1.6 0-.884.716-1.6 1.6-1.6.884 0 1.6.716 1.6 1.6 0 .884-.716 1.6-1.6 1.6zm0-4.4c-.884 0-1.6-.716-1.6-1.6 0-.884.716-1.6 1.6-1.6.884 0 1.6.716 1.6 1.6 0 .884-.716 1.6-1.6 1.6zm0-4.252c-.884 0-1.6-.716-1.6-1.6 0-.884.716-1.6 1.6-1.6.884 0 1.6.716 1.6 1.6 0 .884-.716 1.6-1.6 1.6z' fill='%23FFF'/%3E%3C/svg%3E");
}
li span.dyntree-handle.disabled { background-color:#eee; cursor:default; }
li.on > .dyntree-handle{ background-color:#fa0; }
li.dragged > .dyntree-handle{ cursor:grabbing; }
span.dyntree-opener { position:absolute; top:5px; left:-20px; width:17px; height:17px; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Crect fill='%23999' x='4' y='7' width='9' height='3'/%3E%3C/svg%3E"); }
li.close span.dyntree-opener{ background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Crect fill='%23999' x='7' y='4' width='3' height='9'/%3E%3Crect fill='%23999' x='4' y='7' width='9' height='3'/%3E%3C/svg%3E"); }
li.close > ol { display:none; }
.tree .edit-on > div > a { display:none; }
nav.tree .edit-on > .dyntree-handle { display:block; }
/*.tree .edit-on > div form input[type="text"] { display:block; }*/
.tree li .edit-off { box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2) inset; }
.tree .edit-off > div > a { display:block; }
.tree .edit-off > .dyntree-handle,
.tree .edit-off > div form > * { display:none; }
.tree .edit-off > div form > menu { display:block; }
.tree .edit-off > div,
.tree .edit-off > div > a { color:#ddd; }
.tree .edit-off > div::before { opacity:0.4; }
.tree .edit-off > div.over,
.tree .edit-off > div.over > a { background-color:#6cf; color:#fff; }
.tree li .edit-off.enabled { box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2); }
.tree .edit-off.enabled > div,
.tree .edit-off.enabled > div > a { background-color:#fff; color:#000; }
.tree .edit-off.enabled > div::before { opacity:1; }
.tree .edit-off.enabled > div.over,
.tree .edit-off.enabled > div.over > a { background-color:#0af; color:#fff; }
.tree .edit-off > div.over form button.menu { display:block; }
.tree .edit-off.on { background-color:#fc6; color:#fff; }
.tree .edit-off.on > div > a { color:#fff; }
.tree .edit-off.enabled.on > div,
.tree .edit-off.enabled.on > div > a { background-color:#fa0; color:#fff; }
.tree .edit-off form.wait button.menu,
.tree .edit-off form.success button.menu,
.tree .edit-off form.failed button.menu { display:block; }
.tree-link ol { list-style-type:none; position:relative; margin:0; padding:3px; padding-left:13px; }
.tree-link li { position:relative; padding:0; }
.tree-link li > div > a { display:block; padding:4px 6px; border-radius:3px; }
.tree-link li > div > a:hover { background-color:#fa0; }
.tree-link span.dyntree-opener { top:4px; left:-13px; width:13px; height:13px; }
.tree-link span.dyntree-opener { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Crect fill='%23fff' x='5' y='2' width='2' height='8'/%3E%3Crect fill='%23fff' x='2' y='5' width='8' height='2'/%3E%3C/svg%3E"); }
.tree-link li.close span.dyntree-opener { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Crect fill='%23fff' x='5' y='2' width='2' height='8'/%3E%3Crect fill='%23fff' x='2' y='5' width='8' height='2'/%3E%3C/svg%3E"); }
/*span.dyntree-opener::before { content:'–'; font-weight:bold; font-family:arial; font-size:18px; }*/
/*.menu{ position:absolute; z-index:4; left:98%; top:50%; transform:translateY(-50%); padding-left:6rem; transition:opacity 0.6s, left 0.4s; opacity:0; visibility:hidden; }
.menu > div{ position:relative; border-radius:5px; padding:8rem 10rem; overflow:hidden; box-shadow:0 0 5px rgba(0, 0, 0, 0.6); background-color:#fff; color:#666; font-size:12rem; line-height:12rem; }
.menu::before,
.menu::after { content:''; position:absolute; top:50%; left:0; width:0; height:0; margin-top:-10rem; border:10rem solid transparent; border-left-width:0; border-right-color:#fff; }
.menu.show{ visibility:visible; opacity:1; left:100%; }
.menu.hide{ visibility:hidden; }*/
menu hr { border-bottom:1px solid #eee; width:90%; margin:1vh auto; }
menu label,
menu menuitem{ display:block; padding:2rem 4rem; white-space:nowrap; cursor:pointer; -webkit-font-smoothing:subpixel-antialiased; }
menu label:hover,
menu menuitem:hover{ color:#fa0; }
menu input.hide{ display:none; }
menu input[type="checkbox"]:checked ~ span{ display:block; }
menu input[type="checkbox"]:checked + span{ display:none; }
menu input[type="checkbox"] ~ span { display:none; }
menu input[type="checkbox"] + span { display:block; }
menu.root .fornode,
menu.leaf .fornode { display:none; }
menu.root > * { display:none; }
menu.root .forroot { display:block; }
.dialog{ position:fixed; display:flex; z-index:1; top:0; left:0; width:100%; height:100%; opacity:0; transition:opacity 0.6s; }
.dialog-overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,0.6); }
.dialog-box{ position:relative; margin:auto; min-width:150px; max-width:90%; transform:translateY(-50vh); transition:transform 0.8s; background-color:#fff; box-shadow:2px 2px 3px rgba(0, 0, 0, 0.4); }
.dialog-content{ position:relative; padding:2vw; }
.dialog-content p{ margin:1rem 0; }
.dialog button.dialog-close{ display:none; }
p.dialog-buttons{ padding-bottom:20px; text-align:center;}
p.dialog-buttons button{ padding:4px 10px; border:4px solid #000; border-radius:4px; background-color:transparent; font-family:arial; color:#000; font-size:11rem; font-weight:bold; text-transform:uppercase; cursor:pointer; }
p.dialog-buttons button:hover{ background-color:#000; color:#fff; }
.dialog[data-type="block"] div.dialog-content > img{ display:block; width:100%; height:auto; }
.dialog[data-type="alert"] div.dialog-content section p{ text-align:center; }
.dialog.hide { visibility:hidden; }
.dialog.show { visibility:visible; opacity:1; }
.dialog.show .dialog-box{ transform:translateY(0); }
body.popup-cover div#GLOBAL{ filter:blur(30px); }
[data-dialog], [data-alert], [data-block] { display:none; }
@keyframes shake
{
from, to{ transform:translateX(0); }
10%, 30%, 50%, 70%, 90%{ transform:translateX(-20px) }
20%, 40%, 60%, 80%{ transform:translateX(20px) }
}
/*@keyframes hue hue will animate from 0 to 360. Saturation and Lightness remain constant
{
25% { background-color: hsl( 288, 100%, 50%) }
45% { background-color: hsl( 360, 100%, 50%) }
65% { background-color: hsl( 0, 100%, 50%) }
85% { background-color: hsl( 72, 100%, 50%) }
100% { background-color: hsl( 216, 100%, 50%) }
}*/
.intro{ visibility:hidden; } /* caché par défaut */
.flip .intro{ /*animation:hue 30s 1s infinite alternate;*/ }
/*.flip .intro h2 { position:absolute; width:100%; bottom:15%; font-family:'menlo',monospace; font-size:20rem; color:transparent; font-weight:bold; text-align:center; text-shadow:2px 2px 4px #fff, 0 0 0 #000, 2px 2px 4px #fff; }*/
.flip .dialog-box { perspective:1000px; background-color:transparent; background-color:#fff; box-shadow:none; }
.flip .dialog-content { padding:0; transition:transform 0.6s; transform-style:preserve-3d; background-color:#fff; box-shadow:0 0 0.8vw rgba(0, 0, 0, 0.3); }
.flip .dialog-buttons { display:none; }
.flip.hover .dialog-content{ transform:rotateY(-180deg); }
.flip .intro { visibility:visible; position:relative; top:0; left:0; width:100%; height:100%; line-height:0; background-color:#fff; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.flip .intro { background-color:#0af; cursor:pointer; }
.flip .intro img { width:416px; height:256px; }
.flip .login { position:absolute; top:0; left:0; width:100%; height:100%; transform:rotateY(180deg); background-color:#fff; -webkit-backface-visibility:hidden; backface-visibility:hidden; display:flex; align-items:center; justify-content:center; }
.flip .login form { }
.flip.wrong { display:flex; }
.flip.wrong .dialog-box{ margin:auto; top:0; left:0; animation-name:shake; animation-duration:1s; animation-fill-mode:both; transform:none; transition:none; }
.tooltip{ position:absolute; z-index:1; border-radius:5px; padding:8rem 10rem; box-shadow:2px 2px 2px rgba(0, 0, 0, 0.4); background-color:#0af; color:#fff; }
.tooltip-content{ position:relative; overflow:auto; font-family:Fira,arial,sans-serif; font-size:12rem; line-height:12rem; }
.tooltip-content input{ padding:4px 8px; border:0; }
.tooltip-content form input[type="text"].error { background-color:#faa; }
.tooltip-content form input[type="text"].valid { background-color:#afa; }
.tooltip-content a{ color:#fff; }
.tooltip.show{ display:block; }
.tooltip.hide{ display:none; }
.tooltip::after{ content:''; position:absolute; width:0; height:0; border:7rem solid transparent; /*filter:drop-shadow(1px 0 2px rgba(0,0,0,0.4) );*/ }
/* le before permet d'avoir une zone réactive */
.tooltip::before{ content:''; position:absolute; }
.tooltip[data-pos^="left-"]::before{ height:100%; width:6rem; top:0; left:100%; }
.tooltip[data-pos^="right-"]::before{ height:100%; width:6rem; top:0; right:100%; }
.tooltip[data-pos^="top-"]::before{ height:6rem; width:100%; top:100%; left:0; }
.tooltip[data-pos^="bottom-"]::before{ height:6rem; width:100%; bottom:100%; left:0; }
.tooltip[data-pos^="top-"], .tooltip[data-pos^="bottom-"]{ margin:6rem 0; }
.tooltip[data-pos^="left-"],.tooltip[data-pos^="right-"]{ margin:0 6rem; }
.tooltip[data-pos^="top-"]::after,
.tooltip[data-pos^="bottom-"]::after{ left:50%; margin-left:-7rem; }
.tooltip[data-pos^="top-"]::after{ top:100%; border-bottom-width:0; border-top-color:#0af; }
.tooltip[data-pos^="bottom-"]::after{ bottom:100%; border-top-width:0; border-bottom-color:#0af; }
.tooltip[data-pos$="-left"]::after{ left:12%; margin-left:1px; /* strange bug if tip is small pourcent is ignored */ }
.tooltip[data-pos$="-right"]::after{ left:88%; }
.tooltip[data-pos^="left-"]::after,
.tooltip[data-pos^="right-"]::after{ top:50%; margin-top:-7rem; }
.tooltip[data-pos^="left-"]::after{ left:100%; border-right-width:0; border-left-color:#0af; }
.tooltip[data-pos^="right-"]::after{ right:100%; border-left-width:0; border-right-color:#0af; }
.tooltip.small { width: 8vw; }
.tooltip.medium { width:15vw; }
.tooltip.large { width:26vw; }
.tooltip.xlarge { width:32vw; }
.tooltip.error { background-color:#c00; color:#fff; font-weight:bold; white-space:nowrap; }
.tooltip.error[data-pos^="top-"]::after{ border-top-color:#c00; }
.tooltip.error[data-pos^="bottom-"]::after{ border-bottom-color:#c00; }
.tooltip.error[data-pos^="left-"]::after{ border-left-color:#c00; }
.tooltip.error[data-pos^="right-"]::after{ border-right-color:#c00; }
.tooltip.info { background-color:#fff; color:#0af; border:1px solid #0af; font-weight:bold; white-space:nowrap; }
.tooltip.tipselect{ padding:6rem;}
/*.tooltip.info[data-pos^="top-"]::after{ border-top-color:#fff; }
.tooltip.info[data-pos^="bottom-"]::after{ border-bottom-color:#fff; }
.tooltip.info[data-pos^="left-"]::after{ border-left-color:#fff; }
.tooltip.info[data-pos^="right-"]::after{ border-right-color:#fff; }*/
/*.tooltip.menu .tooltip-content { background-color:#fff; color:#000; }
.tooltip.menu[data-pos^="right-"]::after{ border-right-color:#fff; }*/
/* tooltip animations */
.anim{ transition:all 0.3s; }
.anim.fade{ opacity:0; transition-property:opacity; }
.anim.fade.show{ opacity:1; }
.anim.grow{ transform:scale(0, 0); transition-property:transform; }
.anim.grow.show{ transform:scale(1, 1); transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.15); }
.anim.swing{ opacity:0; transform:rotateZ(4deg); transition-property:transform; }
.anim.swing.show{ opacity:1; transform:rotateZ(0deg); transition-timing-function:cubic-bezier(0.230, 0.635, 0.495, 2.4); }
.anim.fall{ transition-property:top; transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.15); }
.anim.fall.hide{ top:0 !important; opacity:0; }
.anim.fall.show{ opacity:1 }
.anim.slide{ display:block; opacity:0; transition-property:transform; transition-duration:0.6s; transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.15); }
.slide[data-pos^="top-"]{ transform:translateY(10%); }
.slide[data-pos^="bottom-"]{ transform:translateY(-10%); }
.slide[data-pos^="left-"]{ transform:translateX(10%); }
.slide[data-pos^="right-"]{ transform:translateX(-10%); }
.anim.slide.show{ opacity:1; transform:none; }
.anim.position{ transition-property:top, left, bottom, right; transition-duration:0.3s; }
.split{ overflow:hidden; height:100%; display:flex; }
.split > .split-panel:last-child{ flex-grow:1; }
.split-mask{ position:fixed; left:0; top:0; right:0; bottom:0; }
.split-vertical{ flex-direction:column; }
.split-vertical > .split-panel{ width:100%; }
/*.split-bar{ display:flex; justify-content:center;}*/
.split-horizontal > .split-bar{ cursor:ew-resize; }
.split-vertical > .split-bar{ cursor:ns-resize; }
.split-handle{ cursor:pointer }
/*.split-bar .split-handle:hover{ background-color:#fa0; border-color:#fa0; }*/
/*section input { font-size:15rem; }
section input[type="text"] { padding:2px 5px; }
section button { position:relative; width:30px; height:30px; background-color:#fff; }
section button span { visibility:hidden; }
section button::after,
section button::before,
section button span::after,
section button span::before{ content:""; position:absolute; top:50%; left:50%; margin-top:-6px; margin-left:-6px; visibility:visible }
section button[type="submit"]::after{ height:28px; width:3px; transform:rotate(45deg); -webkit-transform:rotate(45deg); }
section button[type="submit"]::before{ height:12px; width:3px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg); }
section table { border-radius:5px; border-collapse:collapse; margin:20px auto 60px auto; }
section table thead tr:first-child{ background:#000; color:#fff; }
section table thead tr th{ padding:20px 40px; }
section table thead td,
section table tbody td,
section table tbody th { padding:8px; }
section table tbody th { text-align:right; }
section table tbody tr { border-bottom:2px solid #ddd; }
section table.tablesorter thead tr th{ cursor:pointer; }
section table.tablesorter tbody td{ color:#3D3D3D; background-color:#FFF; vertical-align:top; }
section table.tablesorter tbody tr:nth-child(odd) td{ background-color:#F0F0F6; }
section table.tablesorter thead tr .headerSortUp{ }
section table.tablesorter thead tr .headerSortDown{ }
section table.tablesorter thead tr .headerSortDown,
section table.tablesorter thead tr .headerSortUp{ }
section table.tablesorter thead tr th.tablesorter-header{ position:relative; }
section table.tablesorter thead tr th.tablesorter-header::after,
section table.tablesorter thead tr th.tablesorter-header::before{ content:""; position:absolute; top:50%; right:5px; margin-top:-4px; width:0; height:0; }
section table.tablesorter thead tr th.tablesorter-header:hover{ -webkit-filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 3px rgba(255,255,255,0.2)); filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 3px rgba(255,255,255,0.2)); }
section table.tablesorter thead tr th.tablesorter-header::before{ margin-top:-8px; border-left:5px solid transparent; border-bottom:6px solid #fff; border-right:5px solid transparent; }
section table.tablesorter thead tr th.tablesorter-header::after{ margin-top:0; border-left:5px solid transparent; border-top:6px solid #fff; border-right:5px solid transparent; }
*/
.icon.damier::before{ opacity:0.2; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M5 9h2v2H5zM9 9h2v2H9zM13 5h2v2h-2zM13 1h2v2h-2zM9 5h2v2H9zM13 9h2v2h-2zM13 13h2v2h-2zM1 13h2v2H1zM9 13h2v2H9zM7 7h2v2H7zM11 3h2v2h-2zM5 13h2v2H5zM7 11h2v2H7zM11 11h2v2h-2zM11 7h2v2h-2zM3 11h2v2H3z'/%3E%3C/svg%3E"); }
.icon.check::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M19.348 38.907L7.922 27.485l5.072-5.073 6.354 6.354L37.04 11.093l5.037 5.084-22.73 22.73z' fill='%23FFF'/%3E%3C/svg%3E"); }
.icon.padlock::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M6 17h13v3H6zm0-2h13v1H6zm12-4V9c0-3.3-2.1-5-5-5h-1C9.1 4 7 5.7 7 9v2H6v3h13v-3h-1zM9 9c0-2.2 1.1-3 3-3h1c1.9 0 3 .8 3 3v2H9V9z'/%3E%3C/svg%3E"); }
.icon.padlock.on::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M6 17h13v3H6zm0-2h13v1H6zm12-4V8c0-3.3-2.1-5-5-5h-1C9.1 3 7 4.7 7 8v1h2V8c0-2.2 1.1-3 3-3h1c1.9 0 3 .8 3 3v3H6v3h13v-3h-1z'/%3E%3C/svg%3E"); }
.icon.minus::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M40 29.5H10v-9h30v9z' fill='%23FFF'/%3E%3C/svg%3E") }
.icon.plus::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23FFF' d='M40 21H29V10h-8v11H10v8h11v11h8V29h11'/%3E%3C/svg%3E") }
.icon.times::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M35.908 40.955L25.004 30.07l-10.88 10.88-5.073-5.073L19.95 25 9.052 14.123l5.072-5.073 10.88 10.88L35.908 9.044l5.038 5.083L30.073 25l10.872 10.87-5.037 5.085z' fill='%23FFF'/%3E%3C/svg%3E") }
.icon.edit::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M38.18 19.597L20.715 37.064c-.322.322-.724.554-1.164.672L8.904 41.87c-.47.127-.9-.303-.773-.772l4.133-10.65c.118-.44.35-.84.672-1.163l17.468-17.468c.624-.624 1.636-.624 2.26 0l5.517 5.517c.625.626.625 1.64 0 2.263zm5.43-5.427l-1.923 1.92c-.63.63-1.648.63-2.277 0l-5.502-5.5c-.63-.63-.63-1.65 0-2.278L35.83 6.39c.63-.63 1.648-.63 2.277 0l5.502 5.502c.626.63.626 1.648 0 2.277z' fill='%23FFF'/%3E%3C/svg%3E") }
.wheel::before { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23FFF' d='M40 28v-6h-4.4c-.2-.8-.6-1.6-1-2.4l3.1-3.1-4.2-4.2-3.1 3.1c-.7-.4-1.5-.7-2.4-1V10h-6v4.4c-.8.2-1.6.6-2.4 1l-3.1-3.1-4.2 4.2 3.1 3.1c-.4.7-.7 1.5-1 2.4H10v6h4.4c.2.8.6 1.6 1 2.4l-3.1 3.1 4.2 4.2 3.1-3.1c.7.4 1.5.7 2.4 1V40h6v-4.4c.8-.2 1.6-.6 2.4-1l3.1 3.1 4.2-4.2-3.1-3.1c.4-.7.7-1.5 1-2.4H40zm-15 .5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z'/%3E%3C/svg%3E") }