{include ../../system/css/reset.css}
{include ../../system/css/common.css}

html, body{
    width: 100%;
	height: 100%;
	background-image: radial-gradient(#FFFFFF,#A9C810,#5EB030);
	background-repeat: no-repeat;
	margin:0;
    position: fixed;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

html, body, canvas {
	/*touch-action-delay: none;
	touch-action: none;*/
}
header {
    position: fixed;
    width: 100%;
    top: 0;
    height: 10vh;
    display: grid;
    grid-template-columns: 10% 10% 40% 40%;
    z-index: 99999;
    /*background: linear-gradient(to right, #094074, #12664F, #F3B700, #C81D25, #F1A9A7);*/
  }
canvas {
	position: absolute;
}
html[ioswebview] canvas {
	-webkit-user-select: none;
	user-select: none;
}
em{
	display: none;
}

#extra, #view{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 640px;
	height: 480px;
	margin: -50vh auto auto -320px;
	text-align: left;
	background: #fff;
}

#view{
	display: block;
	background: transparent url(blank.gif) repeat 0 0;
	cursor: default;
	z-index: 20;
    pointer-events: auto;
    touch-action: none;
}

#extra{
	background: #000;
    background-image: radial-gradient(#FFFFFF,#A9C810,#5EB030);
	background-repeat: no-repeat;
}

#extra .layer{
	position: absolute;
	left: 0;
	top: 0;
	width: 640px;
	height: 480px;
	z-index: 10;
}



#desc{
	width: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	height: 80px;
	color: #ccc;
	line-height: 40px;
	margin-top: 200px;
	text-align: center;
	font-size: 14px;
}

#desc a{
	color: #318fe1;
}

#browser{
	font-size: 14px;
	line-height: 16px;
}

#browser .b{
	color: #fff;
	font-weight: 700;
}
.rotate-notification{
	display:none;
	z-index: 999999;
	background-color: black;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	}
	
	.rotate-notification img{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	}
	
	@media (orientation: landscape) and (max-width: 1024px){
	body.is-touchdevice .rotate-notification{
	display: block;
	}
	}
	.notif {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: 5rem auto;
    position: absolute;
    width: 100%;
	  }
	.phone {
		height: 50px;
		width: 100px;
		border: 3px solid white;
		border-radius: 10px;
		animation: rotate 1.5s ease-in-out infinite alternate;
		/* display: none; */
	  }
	  
	  .message {
		color: white;
		font-size: 1em;
		margin-top: 40px;
		/* display: none; */
	  }
	  
	  @keyframes rotate {
		0% {
			  transform: rotate(0deg)
		  }
		  50% {
			  transform: rotate(-90deg)
		  }
		  100% {
			  transform: rotate(-90deg)
		  }
	  }
	  
	  @media only screen and  (orientation: landscape) {
		.phone, .message {
		  display: none;
		}
	  }

/* Masquer le canvas et afficher la notification en mode portrait */
@media (orientation: portrait) {
    #extra, #view, .canvas-container {
        display: none !important;
    }

    .notif {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
		background-image: radial-gradient(#FFFFFF,#A9C810,#5EB030);
		background-repeat: no-repeat;
        z-index: 1000;
    }

    .phone {
        display: block;
        height: 50px;
        width: 100px;
        border: 3px solid black;
        border-radius: 10px;
        animation: rotate 1.5s ease-in-out infinite alternate;
    }

    .message {
        display: block;
        color: black;
        font-size: 1.2em;
        margin-top: 40px;
        text-align: center;
    }
}

/* Afficher le canvas et masquer la notification en mode paysage */
@media (orientation: landscape) {
    #extra, #view, .canvas-container {
        display: block;
    }

    .notif, .phone, .message {
        display: none;
    }
}

/* Styles pour la tablette - uniquement pour les grands écrans */
@media screen and (min-width: 768px) {
    .tablet-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 90vh;
        /*padding: 20px;*/
    }

    .tablet-frame {
        position: relative;
        background: #1a1a1a;
        border-radius: 40px;
        padding: 20px;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
        width: fit-content;
        margin: auto;
    }

    .tablet-screen {
        position: relative;
        background: #000;
        border-radius: 20px;
        overflow: hidden;
        width: 640px;
        height: 480px;
        pointer-events: auto;
    }

    #extra {
        position: relative;
        width: 640px;
        height: 480px;
        margin: 60px auto; /* Centrage avec marges égales */
        transform: none;
        left: auto;
        top: auto;
		margin-top: 19vh;
    }

    .canvas-container {
        width: 640px;
        height: 480px;
        margin: auto;
    }

    #view {
        width: 640px;
        height: 480px;
        position: absolute;
        left: 0;
        top: 0;
        transform: none;
    }
}

/* Ajustements pour très grands écrans */
@media screen and (min-width: 1440px) {
    .tablet-frame {
        padding: 30px;
    }

    .tablet-screen {
        width: 640px;
        height: 480px;
    }

    #extra {
        margin: 120px auto;
		margin-top: 22vh;
    }
}

/* Ajustements pour les écrans moyens */
@media screen and (max-width: 1024px) and (min-width: 768px) {
    .tablet-screen {
        width: 640px;
        height: 480px;
    }

    #extra {
        margin: 30px auto;
		margin-top: 22vh;
    }
}

/* Ajustement des dimensions de base */
#extra, #view {
    position: absolute;
    width: 640px;
    height: 480px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
}


/* Ajustements pour très grands écrans */
@media screen and (min-width: 1440px) {
    .tablet-frame {
        padding: 30px;
    }

    .tablet-screen {
        width: 640px;
        height: 480px;
    }

    #extra {
        margin: 120px auto;
		margin-top: 22vh;
    }
}

/* Ajustements pour les écrans moyens */
@media screen and (max-width: 1024px) and (min-width: 768px) {
    .tablet-screen {
        width: 640px;
        height: 480px;
    }

    #extra {
        margin: 30px auto;
		margin-top: 22vh;
    }
}

/* Ajustements pour différentes hauteurs d'écran */
@media screen and (min-height: 600px) and (max-height: 700px) {
    #extra {
		margin-top: 0vh;
        }
}
@media screen and (min-height: 701px) and (max-height: 800px) {
    #extra {
		margin-top: 14vh;
        }
}

@media screen and (min-height: 801px) and (max-height: 1000px) {
    #extra {
		margin-top: 18vh;
    }
}

@media screen and (min-height: 1001px) {
    #extra {
		margin-top: 22vh;
    }
}

/* Ajustement pour les très petits écrans en hauteur */
@media screen and (max-height: 599px) {
    #page{
        scale: 0.8;
        
    }
    #extra {
		margin-top: 50vh;
    }
}
@media screen and (max-height: 450px) {
    #page{
        scale: 0.8;
        
    }
    #extra {
        margin-top: -13vh;
    }
}
@media screen and (max-height: 450px) and (max-width: 900px){
    #page{
        scale: 0.8;
        
    }
    #extra {
        margin-top: 7vh;
        height: 130vh !important;
    }
}
@media screen and (max-height: 450px) and (max-width: 950px){
    #page{
        scale: 0.8;
        
    }
    #extra {
        margin-top: 9vh;
        height: 130vh !important;
    }
}
@media screen and (max-height: 400px) {
    #page{
        scale: 0.7;
        
    }
    #extra {
        margin-top: -17vh;
    }
}
@media screen and (max-height: 400px) and (max-width: 860px) {
    #page{
        scale: 0.7;
        
    }
    #extra {
        margin-top: 8vh;
        height: 140vh !important;
    }
}
@media screen and (max-height: 376px) {
    #page{
        /*margin-top: 7em;*/
        scale: 0.7;
       
    }
    #extra {
        margin-top: 40vh;
    }
}
@media screen and (max-height: 321px) {
    #page{
        /*margin-top: 7em;*/
        scale: 0.7;
       
    }
    #extra {
        margin-top: 40vh;
    }
}
#page {
    touch-action: pan-y pinch-zoom;
}