/****************************************************/

/* MOTIFS */

/****************************************************/

#btMotif {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  display: inline-block;
  cursor: pointer;
  height: 24px;
  margin: 0 .2em 0 0;
  width: 24px;
  vertical-align: bottom;
}

#motifPanel {
  border: solid 5px #ccc;
  border-radius: 6px;
  cursor: move;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 100;
}

#avertMotif {
  color: #555;
  padding: .4em .8em;
}

.voile {
  background-color: rgba(255,255,255,.05);
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  padding: 1em 1.5em;
}

.mtfBox {
  border-radius: 50%;
  height: 70px;
  cursor: pointer;
  width: 70px;
}

/* Motifs page */

#mtfAucun {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

#mtfDiagG {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px);
}

.lignDiagG {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.2) 35px, rgba(255,255,255,.2) 70px);
}

#mtfDiagD {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px);
}

.lignDiagD {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255,255,255,.2) 35px, rgba(255,255,255,.2) 70px);
}

#mtfHrz {
  background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
  background-size: 10px 10px;
}

.lignHrz {
  background-image: linear-gradient(transparent 50%, rgba(255,255,255,.2) 50%);
  background-size: 70px 70px;
}

#mtfVrt {
  background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
  background-size: 10px 10px;
}

.lignVrt {
  background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.2) 50%);
  background-size: 70px 70px;
}

#mtfOndeH {
  background:
  radial-gradient(circle at 50% 100%, transparent 20%, rgba(255,255,255,.5) 21%, rgba(255,255,255,.5) 34%, transparent 35%, transparent),
  radial-gradient(circle at 50% 0%, transparent 20%, rgba(255,255,255,.5) 21%, rgba(255,255,255,.5) 34%, transparent 35%, transparent) 10px 0 ;
  background-size: 20px 15px;
}
.ondeH {
  background:
  radial-gradient(circle at 50% 100%, transparent 20%, rgba(255,255,255,.2) 21%, rgba(255,255,255,.2) 34%, transparent 35%, transparent),
  radial-gradient(circle at 50% 0%, transparent 20%, rgba(255,255,255,.2) 21%, rgba(255,255,255,.2) 34%, transparent 35%, transparent) 50px 0;
  background-size: 100px 75px;
}

#mtfOndeV {
  background:
  radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.5) 21%, rgba(255,255,255,.5) 34%, transparent 35%, transparent),
  radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.5) 21%, rgba(255,255,255,.5) 34%, transparent 35%, transparent) 0 -10px;
  background-size: 15px 20px;
}
.ondeV {
  background:
  radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.2) 21%, rgba(255,255,255,.2) 34%, transparent 35%, transparent),
  radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.2) 21%, rgba(255,255,255,.2) 34%, transparent 35%, transparent) 0 -50px;
  background-size: 75px 100px;
}

#mtfZigzagH {
  background:
    linear-gradient(135deg, rgba(255,255,255,.5) 25%, transparent 25%) -5px 0,
    linear-gradient(225deg, rgba(255,255,255,.5) 25%, transparent 25%) -5px 0,
    linear-gradient(315deg, rgba(255,255,255,.5) 25%, transparent 25%),
    linear-gradient(45deg, rgba(255,255,255,.5) 25%, transparent 25%);
  background-size: 10px 10px;
}

.zigzagH {
  background:
    linear-gradient(135deg, rgba(255,255,255,.2) 25%, transparent 25%) -50px 0,
    linear-gradient(225deg, rgba(255,255,255,.2) 25%, transparent 25%) -50px 0,
    linear-gradient(315deg, rgba(255,255,255,.2) 25%, transparent 25%),
    linear-gradient(45deg, rgba(255,255,255,.2) 25%, transparent 25%);
  background-size: 100px 100px;
}

#mtfDam, .dam {
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(255, 255, 255, .2))), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(255, 255, 255, .2)));
  
  background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent), linear-gradient(90deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent), linear-gradient(0deg, transparent 75%, rgba(255, 255, 255, .2) 75%), linear-gradient(90deg, transparent 75%, rgba(255, 255, 255, .2) 75%);
}

#mtfDam {
  -webkit-background-size: 10px 10px;
  -moz-background-size: 10px 10px;
  background-size: 10px 10px;
}

.dam {
  -webkit-background-size: 100px 100px;
  -moz-background-size: 100px 100px;
  background-size: 100px 100px;
}

#mtfDamDiag, .damDiag {
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(255, 255, 255, .2))), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(255, 255, 255, .2)));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent), -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent), -webkit-linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .2) 75%), -webkit-linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .2) 75%);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .2) 75%), -moz-linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .2) 75%);
  background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent), -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent), -ms-linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .2) 75%), -ms-linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .2) 75%);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent), -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent), -o-linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .2) 75%), -o-linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .2) 75%);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent), linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .2) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .2) 75%);
}

#mtfDamDiag {
  -webkit-background-size: 10px 10px;
  -moz-background-size: 10px 10px;
  background-size: 10px 10px;
}

.damDiag {
  -webkit-background-size: 100px 100px;
  -moz-background-size: 100px 100px;
  background-size: 100px 100px;
}

#mtfBrik {
  background:
  linear-gradient(135deg, transparent 21px, rgba(255, 255, 255, .2) 22px, rgba(255, 255, 255, .2) 24px, transparent 24px, transparent 67px, rgba(255, 255, 255, .2) 67px, rgba(255, 255, 255, .2) 69px, transparent 69px),
  linear-gradient(225deg, transparent 21px, rgba(255, 255, 255, .2) 22px, rgba(255, 255, 255, .2) 24px, transparent 24px, transparent 67px, rgba(255, 255, 255, .2) 67px, rgba(255, 255, 255, .2) 69px, transparent 69px)0 64px;
  background-size: 64px 128px;
}

.brik {
  background:
  linear-gradient(135deg, transparent 21px, rgba(255, 255, 255, .2) 22px, rgba(255, 255, 255, .2) 24px, transparent 24px, transparent 67px, rgba(255, 255, 255, .2) 67px, rgba(255, 255, 255, .2) 69px, transparent 69px),
  linear-gradient(225deg, transparent 21px, rgba(255, 255, 255, .2) 22px, rgba(255, 255, 255, .2) 24px, transparent 24px, transparent 67px, rgba(255, 255, 255, .2) 67px, rgba(255, 255, 255, .2) 69px, transparent 69px)0 64px;
  background-size: 64px 128px;
}

#mtfPoint {
  background-image: radial-gradient(rgba(255, 255, 255, .5) 15%, transparent 16%),
  radial-gradient(rgba(255, 255, 255, .5) 15%, transparent 16%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

.point {
  background-image: radial-gradient(rgba(255, 255, 255, .2) 15%, transparent 16%),
  radial-gradient(rgba(255, 255, 255, .2) 15%, transparent 16%);
  background-size: 200px 200px;
  background-position: 0 0, 100px 100px;
}

#mtfCarbone {
  background:
  radial-gradient(rgba(255,255,255,.5) 15%, transparent 16%) 0 0,
  radial-gradient(rgba(255,255,255,.5) 15%, transparent 16%) 4px 4px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 4px 4.5px;
  background-size: 8px 8px;
}

.carbone {
  background:
  radial-gradient(rgba(255,255,255,.2) 15%, transparent 16%) 0 0,
  radial-gradient(rgba(255,255,255,.2) 15%, transparent 16%) 8px 8px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
  background-size: 16px 16px;
}

#mtfCaro {
  background-image: linear-gradient(rgba(255, 255, 255, .5) 2px, transparent 2px),
  linear-gradient(90deg, rgba(255, 255, 255, .2) 2px, transparent 2px),
  linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

.caro {
  background-image: linear-gradient(rgba(255, 255, 255, .3) 2px, transparent 2px),
  linear-gradient(90deg, rgba(255, 255, 255, .1) 2px, transparent 2px),
  linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

#mtfCroix, .croix {
  background:
  radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent),
  radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px,
  linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,
  linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0;
  background-color: slategray;
  background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;
}

#mtfEtoile, .etoile {
  background:
  linear-gradient(324deg, #232927 4%,   transparent 4%) -70px 43px,
  linear-gradient( 36deg, #232927 4%,   transparent 4%) 30px 43px,
  linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
  linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
  linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
  linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,

  linear-gradient(324deg, #232927 4%,   transparent 4%) -20px 93px,
  linear-gradient( 36deg, #232927 4%,   transparent 4%) 80px 93px,
  linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
  linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
  linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
  linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
  background-color: #232927;
  background-size: 100px 100px;
}

#mtfAlveole, .alveole {
  background:
  radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
  radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
  linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
  linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
  linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
  linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
  background-size: 40px 60px;
}

#mftCoeur, .coeur {
  background:
  radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%),
  radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%),
  radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%),
  radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%),
  radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%),

  radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
  radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
  radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
  radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
  radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%) 50px 50px;
  background-color:#b03;
  background-size:100px 100px;
}

#mtfTiss, .tiss {
  background-color: #026873;
  background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
  linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
  linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
  linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
  background-size: 13px, 29px, 37px, 53px;
}

#mtfFaut, .faut {
  background:
  radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
  radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
  radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
  radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
  radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
  radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
  radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
  radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
  linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
  linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
  background-size: 100px 100px;
}

#mtfGradBul, .gradBul {
  background:
  radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
  radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
  radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
  radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
  radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
  radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
  linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
  background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
  background-color: #840b2a;
}