body
{
    background-color:#d7d7d6;
    font-family:"Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    font-size:14px;
    color:#ff0033;
    overscroll-behavior: none;
    overflow: hidden;
}

p, h1, h2, h3 {font-size:14px;color:#ff0033;}
h2 {text-decoration:underline;line-height:150%;text-transform: uppercase;}
p:not(:last-child) {margin-bottom:15px;}
p {text-indent: 0em}
p a {color:#ff0033;text-decoration: underline;}
p a:hover {color:#650034;}

.pk-main {position:relative;padding-bottom:0px;}

.game-menu
{
  width:266px;height:100vh;position:fixed;top:0;right:0;z-index:1;
  /*border-left:1px solid #660033;*/
  background-color:#C8C8C8;
}

.game-area
{
    width:calc(100vw - 266px);height:100vh;
    position:relative;padding-top:30px;padding-bottom:30px;padding-right:30px;padding-left:30px;
    background: rgb(200,200,200);
    background: linear-gradient(90deg, rgba(200,200,200,1) 0%, rgba(200,200,200,1) 90%, rgba(190,190,190,1) 100%);
}

.game-area .game-card
{
    position:absolute;
    z-index : 10;
    /*transition-property: top, left;
    transition-duration: 1s, 1s;*/
}

/** carte JOKER **/
.game-area .game-card.deleteAll a {background-color:#8103e4;}
.game-area .game-card.range a {background-color:#00cc66;}
.game-area .game-card.grid a {background-color:#ffcc32;}

.game-area .game-card.sound .content-container {background-color:#ff0034;}
.game-area .game-card.texte .content-container {background-color:#650034;border-color:#650034;}

.game-area .game-card.sound .content-container img {width:100%;}
.game-area .game-card.texte .content-container img {width:100%;}
.game-area .game-card.video .content-container img {width:100%;}


.game-area .game-card .point
{
    position:absolute;top:0;left:0;width:10px;height:10px;background-color:#FF0000;z-index:100;border-radius:10px;
    backface-visibility: hidden;
    display:none;
}

.game-area .origine {display:none;}

.game-area .card-view
{
    position:absolute;
    top:0;left:230px;
    width:calc(100% - 230px);height:100%;
    background-color : rgba(100,100,100,.5);
    z-index : 20;
}

.game-area .card-view .content-container {width:80%;margin:auto;background-color:rgba(100,100,100,.5);height:100%;position:relative;}
.game-area .card-view .content-container .close-button {width:30px;height:30px;background-color:red;position:absolute;top:20px;right:20px;}

.game-area .cards-container
{
    position:absolute;z-index:1;
    width: calc(100% - 60px);height: calc(100% - 60px);
    overflow-y:scroll;
}

#title-card {position:absolute;top:30px;right:30px;}
#menu-card {position:absolute;bottom:30px;right:30px;}



.game-menu {text-align:center;padding-top:310px;padding-bottom:188px;display:block;}
.game-menu .global-info {position:relative;margin:auto;width:95px;height:100%;}
.game-menu .global-info a {display:block;width:95px;height:102px;}

/** gestion SVG **/
.game-menu .global-info #active {display:none;}

.game-menu .global-info a:hover .info-cls-1 {fill:#ff0033;}
.game-menu .global-info .info-icon {display:none;}

.game-menu .global-info.active #active {display:initial;}
.game-menu .global-info.active .info-cls-1 {fill:#ff0033;}
.game-menu .global-info.active #no-active {display:none;}


.game-menu .carte-pioche img {width:212px;height:auto;position:absolute;top:35px;right:17px;}
.game-menu .carte-pioche a .pioche-over {opacity:0;}
.game-menu .carte-pioche a .pioche {display:inline-block;opacity:1;}

/**.game-menu .carte-pioche a:hover .pioche-over {display:inline-block;}
.game-menu .carte-pioche a:hover .pioche {display:none;position:absolute;top:0;left:0;}*/

.game-menu .carte-pioche .mobile-icon {display:none;}
.game-menu .carte-pioche .mobile-icon svg {width:36px;height:45px;}
.game-menu .carte-pioche .mobile-icon svg .cls-1 {opacity:1!important;}

/*.game-menu .carte-pioche .mobile-icon:hover .cls-1 {fill:#ff0033;}*/





.glyphe-menu {width:150px;position:absolute;bottom:38px;left:36px;text-align:center;}


.glyphe-menu table {border:1px solid #660033;width:194px;height:154px;box-sizing: border-box;table-layout:fixed;background-color:#C8C8C8;}

.glyphe-menu tr {padding:0;margin:0;border: 1px solid #660033;line-height:39px;box-sizing: border-box;height:39px;height:39px;}
.glyphe-menu td {padding:0;border:1px solid #660033;box-sizing:border-box;width:39px;height:39px;}
.glyphe-menu td svg {width:39px;height:39px;display:block;pointer-events: none;}
.glyphe {width:39px;height:39px;display:inline-block;border:2px solid #660033;}

.glyphe-menu a .cls-2 {fill:#660033;opacity:1;}
.glyphe-menu a .glyphe-rect {opacity:0;width:29px;fill:#FF0033;}

.glyphe-menu a:hover .glyphe-rect {fill:#ff0033!important;opacity:1!important;}
.glyphe-menu a.active .glyphe-rect {fill:#ff0033;opacity:1;}

/*.glyphe-menu a.active .cls-2, .glyphe-menu a.show .cls-2 {opacity:1;}*/
/*.glyphe-menu a.show .glyphe-rect {fill:#c8c8c8;opacity:1;}*/


.glyphe-icone {width:43px;height:43px;border:1px solid #650034; display:inline-block;display:none;}
.glyphe-icone:hover {border-color:#FF0033;}



@media only screen and (min-width:600px) and (max-height:650px)
{
    /*.game-menu .global-info {display:none;}*/
    .game-menu .global-info {height:50px;}
    .game-menu .global-info a {height:50px;}
    .game-menu .global-info svg {width:50px;height:50px;}

}


@media only screen and (max-width: 600px)
{
    /*.game-menu {width:70px;padding-right:10px;}*/
    .game-menu {width:100%;height:70px;padding:12px;text-align:right;max-height:70px;}

    .game-menu .global-info {width:45px;margin:0;text-align:right;display:inline-block;}
    .game-menu .global-info a {width:100%;}
    /*.game-area {width:calc(100vw - 70px);}*/
    .game-area
    {
        width:100%;padding:12px;padding-top:82px;
        background: rgb(190,190,190);
        background: linear-gradient(180deg, rgba(190,190,190,1) 0%, rgba(200,200,200,1) 40%, rgba(200,200,200,1) 100%);
    }

    .game-area .cards-container {width:calc(100% - 24px);height:calc(100% - 94px);}

    .glyphe-menu {display:none;}
    .glyphe-menu {position:absolute;z-index:2000;right:12px;top:82px;left:auto;bottom:auto;width:191px;}


    .game-menu .carte-pioche {width:auto;height:45px;text-align:right;position:absolute;top:12px;left:12px;}
    .game-menu .carte-pioche img {position:initial;height:45px;width:auto;display:none!important;}
    .game-menu .carte-pioche .mobile-icon {display:initial;}


    .game-menu .global-icon svg {width:45px;}
    /*.game-menu .carte-pioche a .pioche {display:none;}
    .game-menu .carte-pioche a .pioche-over {display:none;}

    .game-menu .carte-pioche .mobile-icon {display:block;width:100%;}
    .mobile-icon .cls-1{fill:#603;opacity:1;}
    .mobile-icon .cls-2{fill:#fa0032;opacity:1;}*/

    /** on affiche plus l'icone sur mobile **/
    /**.glyphe-icone {display:inline-block;} **/
    .glyphe-icone {display:none;}
}



/************************************/
/*** GLOBAL INFO
/************************************/

.info-view {width:65%;margin:auto;background-color:#FFFFFF;height:100%;padding:36px;padding-right:36px;position:relative;overflow:hidden;z-index:20;}

.info-view .close-icon {position:absolute;top:0px;left:0px;width:36px;height:36px;padding-left:9px;padding-top:9px;}
.info-view .close-icon svg {width:18px;height:18px;}

.info-view .info-view-content {overflow-y: scroll;max-height:100%;padding-right:20px;position:relative;}
.info-view .info-view-content p {margin-bottom:0;text-indent:0px,color:#660033;margin-top:0;}
.info-view .info-view-content p.indent {text-indent:0px;}

.info-view .info-view-content p {color:#f03!important;}
.info-view .info-view-content h2 {color:#f03!important;}


/*************************************/
/*** GAME CARD
/*************************************/

.game-card
{
    width:194px;height:268px;
    position:relative;
    /*padding-right:17px;padding-left:17px;padding-top:30px;padding-bottom:30px;*/
    touch-action: none;
    user-select:none;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

.game-card.joker a {overflow:hidden;}
.game-card.joker img {width:100%;}

.game-card a
{
    background-color:#FFFFFF;
    border-radius: 12px;/*border:1px solid #e51b39;*/
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    display:block;
    width:100%;height:100%;

    perspective : 1000;
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
}

.game-card:hover a
{
    /*transform: rotateY(180deg);*/
}


.game-card .front
{
    padding-right:17px;padding-left:17px;padding-top:30px;padding-bottom:30px;
    width:100%;height:100%;overflow:hidden;
    pointer-events: none;
}

.game-card .side
{
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    box-sizing: border-box;
    backface-visibility: hidden;  /* W3C */
    -webkit-backface-visibility: hidden; /* Safari & Chrome */
    -moz-backface-v.info-card .card-versoisibility: hidden; /* Firefox */
    -ms-backface-visibility: hidden; /* Internet Explorer */
    -o-backface-visibility: hidden; /* Opera */
    /*box-shadow: 0 0 10px rgba(0,0,0,0.6);*/
    overflow: auto;
}

.game-card .back
{
    transform: rotateY(-180deg);
    -ms-transform:rotatey(-180deg); /* IE 9 */
    -moz-transform:rotatey(-180deg); /* Firefox */
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
    -o-transform:rotatey(-180deg); /* Opera */à
}

.game-card.active a
{
    /* background-color:#460324; */
    border:solid 1px #460324;
    /*transform: rotateY(180deg);*/
}

.game-card .projet-glyphe {width:30px;height:30px;position:absolute;backface-visibility: hidden;}
.game-card .projet-glyphe.top {top:0;left:0;}
.game-card .projet-glyphe.bottom {bottom:0;right:0;}

.game-card .content-container
{
    /*border:1px solid #e51b39;*/width:100%;height:100%;overflow:hidden;
    /*pointer-events: none;*/
}


.flipped {
  transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg); /* IE 9 */
  -moz-transform:rotatey(-180deg); /* Firefox */
  -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
  -o-transform:rotatey(-180deg); /* Opera */
}



.game-card svg .glyphe-rect {opacity:0;}
.game-card svg .cls-2 {fill:#fa0032;}

@media only screen and (max-width: 600px)
{
    /*.game-card {width:100px;height:130px;}*/
}


/*************************************/
/*** CARD VIEW
/*************************************/

.info-card
/*{position:absolute;width:calc(100vw - 260px);;height:100vh;padding:39;top:0;left:0;overflow:hidden;z-index:30;}*/
{
  width: 65%;
  margin: auto;
  /*background-color: #FFFFFF;*/
  height: 100%;
  /*padding: 45px;
  padding-right: 25px;*/
  position: relative;
  overflow: hidden;
  z-index: 20;
}

.info-card .info-card-inner {background-color:#FFFFFF;position:relative;height:100%;}


/*.info-card img {height:100%;width:100%;object-fit:cover;}*/

.info-card .card-recto {max-width:100%;position:relative;width:100%;height:100%;}
/*.info-card .card-recto .img-container {width:100%;height:100%;opacity:1;}*/
.info-card .card-recto .texte-container
{
    padding-top: 35px;
    padding-right: 20px;
    padding-left: 34px;
    padding-bottom: 60px;
    position:relative;
    height:100%;
}

.info-card .card-recto .texte-container p {color:#660033!important;margin:0;}
.info-card .card-recto .texte-container a {color:#660033!important;}
.info-card .card-recto .texte-container h2 {color:#660033!important;}



.info-card .card-recto .content-container {height:100%;position:relative;padding-right:20px;}

.info-card .card-recto img {display:block;position:relative;/*z-index:-100;*/àç}

.info-card .card-verso
{
  background-color:#FFFFFF;margin:auto;height:100%;overflow-y: scroll;position:relative;
  padding-top:36px;padding-right:36px;padding-left:36px;padding-bottom:45px;}

.info-card .card-verso svg {width:14px;height:auto;}
.info-card .card-verso svg .glyphe-rect {opacity: 0;}
.info-card .card-verso svg .cls-2 {fill:#ff0033;}

.info-card .card-verso .content-container {position:relative;overflow-y: scroll;width:100%;height:100%;}
.info-card .card-verso p {text-indent: 0;margin:0;}
.info-card .card-verso .projet-glyphe {position:relative;left:-11px;height:30px;}
.info-card .card-verso .projet-glyphe svg {width:35px;}

/** icone de fermeture **/
.info-card .close-icon {position:absolute;top:0px;left:0px;z-index:100;width:36px;height:36px;display:inline-block;padding:8px;}
.info-card .close-icon svg {width:100%;height:100%;}

/** icone de retour **/
.info-card .back-icon {position:absolute;width:36px;height:36px;bottom:0px;right:0px;z-index:101;padding-left:7px;padding-top:7px;}
.info-card .back-icon svg {width:22px!important;height:22px;}

.info-card .card-recto .close-icon svg .close-icon-cl1 {fill:#ff0033;}
.info-card .card-verso .close-icon svg .close-icon-cl1 {fill:#ff0033;}

/** icone info **/
.info-card .info-icon {position:absolute;width:36px;height:36px;bottom:0px;right:0px;padding-left: 14px;
    padding-right: 10px;
    padding-top: 6px;
    padding-bottom: 6px;}
.info-card .info-icon svg {height:22px;width:13px;}
.info-card .info-icon .st1 {fill:#FF0033;}

/** typologie **/

.no-width {width:auto!important;}
.info-card.video, .info-card.image
{
    height:auto;
    position: absolute;
    top: 50%!important; /* poussé de la moitié de hauteur du référent */
    left: 50%;
    transform: translate(-50%,-50%);
}

.info-card.image {width:85%}

.info-card.video .video-container {/*height:auto;*//*padding:40px;background-color:#ff0033;*/}
.info-card .video-inner {padding:36px;}
.info-card.video .img-container {display:none;}
.info-card.video .sound-container {display:none;}
.info-card.video .texte-container {display:none;}
.info-card.video .card-recto .close-icon svg .close-icon-cl1 {fill:#ff0033!important;}
.info-card.video .card-recto .info-icon svg .cls-2 {fill:#ff0033!important;}

.info-card.image .video-inner {display:none;}
.info-card.image .sound-container {display:none;}
.info-card.image .img-container {opacity:1;text-align:center;}
.info-card.image .texte-container {display:none;}

.info-card.sound {height:auto;position:absolute;top:50%!important;left: 50%;transform:translate(-50%,-50%);}
.info-card.sound .video-inner {display:none;}
.info-card.sound .img-container {display:none;}
.info-card.sound .texte-container {display:none;}
.info-card.sound .card-recto .close-icon svg .close-icon-cl1 {fill:#ff0033!important;}
.info-card.sound .card-recto .info-icon svg .cls-2 {fill:#ff0033!important;}

.info-card.texte .video-inner {display:none;}
.info-card.texte .img-container {display:none;}
.info-card.texte .sound-container {display:none;}


.sound-container
{
    padding-top:65px;padding-right:20px;padding-left:20px;padding-bottom:65px;height:50%;
    min-height: 400px;
    width: 100%;
}

.sound-container .player-icon {width:60px;height:60px;position:relative;display:inline;margin:auto;}
.sound-container .player-icon:hover .cls-icone {fill:#660033;}

.info-card .progress
{
    margin:auto;
    position:absolute;
    top:50%;
    left:calc(50% - 100px);
    width:200px;
    height:1px;
    background-color:#FF0033;
}

.info-card .progress .indeterminate {background-color:#fbd2cf;}


@media only screen and (max-width: 600px)
{
    .info-view {width:100%;}
    .info-card.image {width:100%;padding-top:5px;padding-bottom:5px;padding-left:5px;padding-right:5px;position:relative;}
    .info-card.video {position:relative;}
    .info-card.sound {position:relative;}
}

@media only screen and (max-width: 990px)
{
    .info-view {width:100%;}
    .info-card {width:100%;}


}


.mobile-intro {position:absolute;z-index:3000;width:100vw;height:100vh;background-color:#c8c8c8;top:0;left:0;margin:auto;text-align:center;display:none;}
.mobile-intro a {margin:auto;}
.mobile-intro img {width:280px;height:auto;}

@media only screen and (max-width: 600px)
{
    .mobile-intro {display:flex;}
}



/**************************************/
/*** UI SCROLLBAR
/**************************************/

.spinner-layer {border-color:#FF0000;}
.circle-clipper .circle {border-width:1px;}

.ps__thumb-y
{
  background-color: rgba(255,4,54)!important;
  border-radius: 0px!important;
  width:4px;
  right:-2px;
}

.ps__rail-y {width:2px;background-color: rgba(255,4,54,.3)!important;}
.ps__rail-y:hover,.ps .ps__rail-y:focus, .ps .ps__rail-y.ps--clicking
{
    background-color: rgba(255,4,54,.3)!important;
}

.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y
{
    width:4px;
}


/**************************************/
/*** UI TOOLTIP
/**************************************/

.pk-tooltip
{
    position:absolute;
    top:-1000px;
    left:-1000px;
    background-color:#000000;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:4px;
    padding-top:4px;
    color:rgba(255,255,255,.8);
    min-height:30px;
    min-width:20px;
    /*max-width:200px;*/
    z-index:2000;
    pointer-events: none;
    font-size:14px;
}

/**************************************/
/*** UI SOUND PROGRESS
/**************************************/

.sound-player {width:100%;height:80px;}
.sound-player svg {width:60px;height:60px;}
.sound-progress {width:50%;height:3px;position:relative;display:inline-block;}
.sound-progress .sound-progress-bg {position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#c8c8c8;}
.sound-progress .sound-download-bg {position:absolute;top:0px;left:0px;width:0%;height:100%;background-color:rgba(255,0,51,.3);transition: width 2s;}
.sound-progress .sound-play-bg {position:absolute;top:0px;left:0px;width:0%;height:100%;background-color:#FF0033;transition: width:1s;}

/**************************************/
/*** UI
/**************************************/

.clignote
{
    animation-duration: 2s;
    animation-name: clignoter;
    animation-iteration-count: infinite;
    transition: none;
    display:initial!important;
    opacity:1;
}

/*.clignote .pioche
{
    animation-duration: 1.5s;
    animation-name: clignoter;
    animation-iteration-count: infinite;
    transition: none;
    animation-delay:1.5s;
    display:initial!important;
    opacity:1!important;
}*/


@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}