@font-face {
    font-family:"asterix";
    src:url("comic.woff2") format("woff2"),url("comic.woff") format("woff"),url("comic.otf") format("opentype");
    font-style:normal;font-weight:400;
}
 html,
 body {
     margin: 0;
     padding: 0;
     touch-action: manipulation;
 }
* {
    touch-action: manipulation;
}
 canvas {
     box-sizing: border-box;
     /* background: #FFF; */
     touch-action: manipulation;
     background-size: cover,contain,contain;
     background-position: center;
     --bg1: linear-gradient(transparent, transparent);
     --bg2: linear-gradient(transparent, transparent);
     --bgphoto: linear-gradient(transparent, transparent);
     background-image: var(--bgphoto),var(--bg1), var(--bg2);
 }
.c {
    background-size: contain,contain,cover;
    background-repeat: no-repeat;
    background-position: top left;
}
 
 .outils {
     position: fixed;
     left: 4px;
     top: 5px;
     left: 50%;
     transform: translate(-50%,0);
     display: none;
 }
 
 .outils button, .outils > input {
     border: none;
     -webkit-appearance: none;
     border: 1px solid;
     display: flex;
     align-items: center;
     justify-content: center;
     /* width: 36px; */
     height: 23px;
     padding: 0;
     margin: 0;
     font-size: 12px;
     box-sizing: border-box;
     /* margin-bottom: 7px; */
     border-radius: 4px;
     border-color: #bbbbbb;
     color: #4e4e4e;
     outline: none;
     background: #FFF;
 }
 
 input[type="color"]::-webkit-color-swatch-wrapper {
     padding: 0;
 }
 
 input[type="color"]::-webkit-color-swatch {
     border: none;
 }
.zoommoins, .active .zoomplus, .active .gomme, .pinceau {
    display: none;
}
.active .zoommoins, .active .pinceau {
    display: block;
}
.infos {
    display: none;
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    color: #FFF;
    padding: 10px;
    top: 40px;
    width: 100%;
    left: 0px;
    justify-content: center;
    z-index: 999;
    box-sizing: border-box;
}
.infos.active {
    display: flex;
}
.infos.active {}

.infos > i {cursor: pointer;}


.info-texte {
    flex: 2;
    display: flex;
    justify-content: center;
    padding-right: 10px;
    text-align: center;
}

.outils button.active {
    /* background: #00000085; */
    /* color: #FFF; */
}
body:not(.isZoomed) {
    /*display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100vh;*/
}

.page {
    /* position: fixed; */
    width: 100%;
    height: 100%;
    /* background: red; */
    top: 0;
    display: grid;
}
.page {width: 1920px;height: 1080px;/* border: 1px solid #9E9E9E; */margin: 10px;display: grid;grid-gap: 10px;grid-auto-flow: row;/* grid-template-columns: 400px 176px 210px 80px 280px 90px 90px 1fr 210px; *//* grid-template-rows: 326px 150px 150px 414px; */transform-origin: top left;/* background: #FFF; */margin-bottom: 190px;}


.intro, .propositionsz {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.66);
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: -1;
}

.introz {
    background-image: url(phylactere-smartphone.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 644px;
    width: 320px;
    box-sizing: border-box;
    padding-top: 100px;
    padding-left: 40px;
    padding-right: 40px;
    background-size: 300px auto;
}
.page-intro {
    font-family: sans-serif;
    font-size: 14px;
    padding: 20px;
    text-align: center;
}
.introz h1, .propositions h1, .page-intro h1  {
    font-family: "asterix";
    font-size: 24px;
    color: #F44336;
    text-align: center;
    margin-bottom: 10px;
}

.introy {
    font-size: 16px;
}

.introy button, .dzebtn {
    font-family: asterix;
    background: #00BCD4;
    border: none;
    padding: 17px;
    color: #FFF;
    transform: skew(-10deg);
    border-radius: 5px;
    padding: 15px 31px;
    font-size: 15px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    cursor: pointer;
}

.introy button:hover {
    background: #f34236;
}

.introz.active {}

.intro.active, .propositionsz.active {
    z-index: 999;
    opacity: 1;
    transition: opacity ease .5s, z-index linear 0s;
}
@media screen and (orientation:landscape) {
.introz {
    background-image: url(phylactere.png);
    background-size: 440px;
    background-position: top center;
    height: 100%;
    padding-top: 25px;
    padding-left: 32px;
    padding-right: 25px;
    width: 440px;
}

p {
    margin-bottom: 9px;
    margin-top: -2px;
}
}

.canvasz {
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    width: 100vw;
    height: 100vh;
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    /* touch-action: none; */
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    position: fixed;
    background: beige;
}

div#debug {
    position: fixed;
    top: 0;
    left: 0;
    font-size: 12px;
}

body {
    height: 100vh;
    /* background-image: url(images/fond_cadavre.jpg); */
    /* background-size: cover; */
    background: #bef1ff;
}

.canvaz {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    background: #ededed;
}

.phylactere {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 14px;
    font-family: asterix;
    display: flex;
    text-align: center;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;
    background: #FFF;
    border: 2px solid;
    /* display: none; */
    /* z-index: -1; */
}

.cont-canvas {
    position: relative;
    transform: translate(0px, -20px);
    background: #FFF;
}

.propositionsz {}

.propositions {
    display: flex;
    flex-direction: column;
    /* color: #FFF; */
    background: white;
    padding: 0px 5px;
    border-radius: 5px;
    border: 5px solid #000;
    box-sizing: border-box;
    margin: 10px;
    /* align-items: center; */
}

.propositions label div {
    padding: 9px;
    font-family: "asterix";
    text-align: center;
    font-size: 12px;
    line-height: 1.1;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.propositions input[type=radio] {
    display: none;
}

.propositions input:checked + div {
    background: #bfebff !important;
}

.propositions h1 {
    font-family: sans-serif;
    border-bottom: 1px solid;
    padding-bottom: 3px;
    font-size: 13px;
}

.propositions label:nth-child(2n+2) {
    background: red;
}

.propositions label:nth-child(2n + 2) div {
    background: #ededed;
}

input[type="submit"] {
    background: red;
    color: #FFF;
    -webkit-appearance: none;
    font-family: asterix;
    padding: 10px;
}

.propositions input[type="submit"], .propositions button.submit {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    font-size: 20px;
    background: #3f3f3f;
    color: #FFF;
    padding: 10px;
}

.outils button[data-action=retour] {width: 42px;/* height: 30px; */}
.deconnecte {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    z-index: 9999;
}

.couleurs {
    display: flex;
}

.outils form {display: flex;align-items: center;}

.couleur input {
    display: none;
}

.couleur input + div, .epaisseur input + div {
    width: 20px;
    height: 20px;
    border: 2px solid #e4e4e4;
    border-radius: 100%;
}

.couleur {
    margin-left: 7px;
}

.couleur input:checked + div, .epaisseur input:checked + div {
    border-color: #30ffdd;
    box-shadow: 2px 2px 7px rgba(255,255,255,0.5),-2px -2px 7px rgba(255,255,255,0.5),2px -2px 7px rgba(255,255,255,0.5), -2px 2px 7px rgba(255,255,255,0.5);
}

.epaisseurs {
    display: flex;
    margin-left: 10px;
}

.epaisseur input {
    display: none;
}

.epaisseur input + div {
    background: #fff;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.epaisseur input + div span {
    background: #000;
    display: block;
    width: 1px;
    height: 1px;
    background: #000;
    border-radius: 100%;
}

.epaisseur input + div.emoyen span {
    width: 4px;
    height: 4px;
}

.epaisseur input + div.efort span {}

.epaisseur input + div.egros span {
    width: 10px;
    height: 10px;
}
.epaisseur input + div.egros2 span {
    width: 20px;
    height: 20px;
}

.palette {
    width: calc(100% - 20px);
    /* grid-template-columns: repeat(10,1fr); */
    /* grid-template-rows: repeat(200,min-content); */
    /* grid-auto-flow: row; */
    /* grid-gap: 5px; */
    position: fixed;
    top: 50px;
    left: 0;
    /* transform: translate(-50%,-50%); */
    z-index: 99999999999999;
    background: #fffffff5;
    border: 1px solid #000;
    padding: 20px;
    box-sizing: border-box;
    left: 10px;
    display: none;
    /* z-index: 99999999999999999; */
}

.palette-sel div {
    height: 100px;
    box-sizing: border-box;
    border: 4px solid transparent;
    width: calc(100% - 10px);
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(200,min-content);
    grid-auto-flow: row;
    grid-gap: 5px;
}

.palette-sel div {
    /* margin-bottom: 10px; */
    /* margin-right: 10px; */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: calc(100% - 20px); */
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(200,min-content);
    grid-auto-flow: row;
    grid-gap: 5px;
}

.palette label input + div:before {
    background-color: rgb(var(--r),var(--g),var(--b));
    content: "";
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    display: block;
}

.palette label input {
    display: none;
}

.palette label input:checked + div {
    border-color: #323232;
}

.palette-sel {
    /* display: none; */
    display: grid;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(200,min-content);
    grid-auto-flow: row;
    /* grid-gap: 5px; */
}

.btnpal {
    width: auto !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    margin-left: 5px !important;
}

.palette-nb {
    font-family: sans-serif;
    text-align: center;
    margin-bottom: 15px;
    font-size: 24px;
}

.rs {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.rs ul {
    display: flex;
    list-style-type: none;
    /* width: 70px; */
    padding: 0;
    justify-content: space-around;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}

.rs ul svg {
    width: auto;
    height: 20px;
}

.palette-nb.pasbon {
    color: red;
}

.rs ul li {
    padding: 0;
    margin: 0;
}

.rs ul li:not(:last-child) {
    margin-right: 10px;
}

.partage {
    font-size: 12px;
    font-family: sans-serif;
    text-decoration: underline;
    color: blue;
}

.palette-sel.malmobile-sel div {
    width: 100%;
    border: 1px solid #000;
}

.palette-sel.malmobile-sel {
    grid-template-columns: repeat(7,1fr);
}

.palette.palmobile {
    top: 0;
    height: 100vh;
    width: 100%;
    left: 0;
}

.outils2 {
    display: none;
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 40px;
    max-width: 490px;
    left: 50%;
    transform: translate(-50%, 0px);
    background: #f5f5f5;
    box-shadow: 0px -4px 3px 1px rgba(0, 0, 0, 0.09);
    /* border-radius: 5px 5px 0 0; */
    justify-content: space-around;
    z-index: 100;
}

.outil-retour {
    height: 100%;
    background-size: contain;
    background-image: url(images/sauvegarder.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 25px;
}

.outil-outil > div {
    height: 140%;
    background-repeat: no-repeat;
    background-position: center bottom;
    max-width: 31px;
    min-width: 30px;
    background-size: 20px auto;
    transform: translate(0px, 0%);
    transition: filter ease 0.5s, transform ease 0.1s;
    filter: drop-shadow(0px 0px 0px rgba(255,255,255,0))  drop-shadow(0px 3px 2px rgba(0,0,0,0));
}

.outil-fin {
    background-image: url(images/pointe-fine.svg);
}

.outil-moyen {
    background-image: url(images/pointe-moyenne.svg);
}

.outil-outil {
    display: flex;
}

.outil-gros {
    background-image: url(images/pointe-grosse.svg);
}

.outil-gomme {
    background-image: url(images/gomme.svg);
}

.outil-couleur {
    display: flex;
    align-items: center;
}

.outil-couleur-item, .outil-couleur-multiple-item, .outil-couleur-multiple-palette-item, .outil-photo {
    height: 25px;
    width: 25px;
    border-radius: 100%;
    padding: 2px;
}

.outil-couleur-multiple-palette-contenu {position: absolute;width: 100vw;background: #f5f5f5;bottom: 32px;overflow: scroll;display: grid;grid-template-columns: repeat(12,1fr);grid-auto-rows: calc(100vw / 12);align-items: center;justify-items: center;padding-bottom: 20px;padding-top: 6px;z-index: 2;}

.outil-couleur-item:after, .outil-couleur-multiple-palette-item:after {content: "";display: block;width: 100%;height: 100%;background-color: var(--couleur);border-radius: 100%;box-sizing: border-box;}

.outil-couleur-multiple-item {}

.outil-couleur-multiple {
    display: flex;
    align-items: center;
}

.outil-couleur-multiple-item:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--couleur);
    border-radius: 100%;
    background-image: url(images/couleur-multiple.png);
    box-sizing: border-box;
    background-size: contain;
}

.outil-outil-item.active {
    transform: translate(0px, -27%);
    filter: drop-shadow(0px 0px 10px rgba(255,255,255,.8))  drop-shadow(0px 3px 2px rgba(0,0,0,.7));
    color: #ffffff;
}

.outil-couleur-item.active:after, .outil-couleur-multiple-item.active:after {
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
}

.outil-couleur-multiple-palette-item {width: calc(100% - 5px);height: calc(100% - 5px);}

.select-couleur.outil-couleur-item:nth-child(7), .select-couleur.outil-couleur-item:nth-child(6) {
    display: none;
}

.outil-outil-item.outil-moyen.active {}

.outil-couleur-multiple-palette.active {
    display: flex;
}

.outil-couleur-multiple-palette-ferme {
    position: absolute;
    background: #d3d3d300;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.outil-couleur-multiple-palette {
    display: none;
    width: 100%;
    justify-content: center;
}
.outil-photo {
    background-image: url(images/photo.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
    height: 84%;
    display: none;
}
@media all and (min-width: 650px) {
    .outil-couleur-multiple-palette-contenu {
        width: 650px;
        grid-auto-rows: 54px;
    }
}
@media all and (max-width: 350px) {
    .select-couleur.outil-couleur-item:nth-child(4) {
        display: none;
    }
}
@media all and (max-width: 330px) {
    .select-couleur.outil-couleur-item:nth-child(5) {
        display: none;
    }
}
@media all and (max-width: 290px) {
    .select-couleur.outil-couleur-item:nth-child(2) {
        display: none;
    }
}
#mon_canvas {
    /* margin-top: -20px; */
    background-image: url(images/gabarit.gif);
    background-size: contain;
}

#canvasphoto {
    background: none;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    /* z-index: -1; */
    /* display: none; */
    width: 280px;
    z-index: 999999;
    border: 1px solid red;
    opacity: .1;
}

button {
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: white;
}

#tactile {
    background: red;
    padding: 30px;
    font-size: 2.1em;
    border: 12px solid #FFF;
}