* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
			font-family:arial;
			font-size:16px;
			background-color:#F6F6F6;
			
        }
	
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
        }
		
		.construction{
			position:absolute;
			top:20px;
			left:50%;
			transform:translate(-50%,0);
			background-image:url('/inc/img/construction.png');
			background-repeat:no-repeat;
			background-size:contain;
			background-position:left center;
			z-index:99;
			padding:10px 0 10px 55px;
			color:red;
			font-family:arial;
			font-size:18px;
			font-weight:bold
			
		}
		ul{
			list-style:none;
		}
        .left, .right {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .right {
		background-image: url('/inc/img/chapo.jpg');
			background-repeat:no-repeat;
			background-size:cover;
			clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
			text-align:left;
        }
		
		.right .voile{
			background-color:rgb(255,255,255,0.7);
			height:100vh;
			padding-left:15%;
			padding-top:50px;
		}
		
		.left .voile .pts{
			position:relative;
			margin-top:10px;
		}
		
		.left .voile .pts h3{
			color:#0082C0;
			padding:10px 0;
		}
		
		.left .voile .pts h4{
			color:#DE1684;
			padding:5px 0;
		}
		
        .left {
            background-image: url('/inc/img/cs2.jpg');
			background-repeat:no-repeat;
			background-size:cover;
            clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
			text-align:right;
        }
		
		.left .voile{
			background-color:rgb(255,255,255,0.7);
			height:100vh;
			padding-right:15%;
			padding-top:50px;
		}
		
		.left .voile a.insertion{
			position:relative;
			margin-top:20px;
			padding:5px 10px 5px 25px;
			border:1px #DE1684 solid;
			color:#FFF;
			background-color:#DE1684;
			background-image:url('/inc/img/fb.png');
			background-repeat:no-repeat;
			background-position:left center;
			background-size:contain;
			border-radius:5px;
			text-decoration:none;
		}
		
		.left .voile a.insertion:hover{
			background:#FFF;
			color:#DE1684;
		}
		
		.right .voile a.legumes{
			position:relative;
			margin-top:20px;
			padding:5px 10px;
			border:1px #316387 solid;
			color:#FFF;
			background:#316387;
			border-radius:5px;
			text-decoration:none;
		}
		
		.right .voile a {color:#316387}
		.right .voile a.legumes:hover{
			background:#FFF;
			color:#316387;
		}
		
		.right .voile .pts{
			position:relative;
			margin-top:10px;
		}
		.right .voile .pts h3{
			color:#316387;
			padding:10px 0;
		}
		
		.right .voile .pts h4{
			color:#316387;
			padding:5px 0;
		}
		
		.footer{
			position:fixed;
			z-index:9;
			padding:15px 15px 25px;;
			background-color:#316387;
			bottom:0;
			width:100%;
			display:flex;
			color:#FFF;
		}
		
		.footer div:nth-child(1){
			width:35%;
		}
		.footer div:nth-child(2){
			width:25%;
		}
		.footer div:nth-child(3){
			width:30%;
		}
		.footer div:nth-child(4){
			width:10%;
			text-align:right;
		}
		.footer a{color:#FFF;}
		
		.footer div h2{font-size:18px;}

		.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .popup-content {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    max-width: 500px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    text-align: center;
  }

  .popup-content h2 {
    margin-top: 0;
  }

  .popup-content ul {
    text-align: left;
    padding-left: 1.2rem;
  }

  .popup-content button {
    margin-top: 1.5rem;
    padding: 0.5rem 1rem;
    border: none;
    background: #007b5e;
    color: white;
    border-radius: 0.5rem;
    cursor: pointer;
  }

  .popup-content button:hover {
    background: #005f46;
  }
@media screen and (max-height: 600px)
{
	 body, html {
		 font-size:14px;
	 }
}

@media screen and (max-height: 550px)
{
	body, html {
		 font-size:12px;
	 }
}

@media screen and (max-width: 1130px)
{
	.right .voile{
		padding-left: 10%;
	}
	.left .voile{
		padding-right: 10%;
	}
}

@media screen and (max-width: 990px)
{
	.right .voile{
		padding-left: 5%;
	}
	.left .voile{
		padding-right: 5%;
	}
}

@media screen and (max-width: 840px)
{
	.right .voile{
		padding-left: 2%;
	}
	.left .voile{
		padding-right: 2%;
	}
}
@media screen and (max-width: 780px)
{
	  body, html {
		  overflow:auto;
	  }
	  .construction{position: relative;
        margin: 10px auto 20px;
        display: block;
        left: 0;
        transform: none;
        width: 320px;}
	  .container{height:auto;}
	.left,.right{
		position:relative;
		    clip-path: none;
	}
	.left .voile p.link , .right .voile p.link {
		text-align:center;
	}
	.left .voile,.right .voile{
		text-align:center;
			padding-left:10px;
			padding-right:10px;
			padding-bottom:15px;
			height:auto;
	}
	.left .voile .pts,.right .voile .pts
	{
		text-align:left;
	}
	.footer{position:relative;display:block}
	.footer div{position:relative;width:100%!important;margin-bottom:15px;}
	.footer div:nth-child(4){text-align:center}
}