<?php
//session_start();
if(@$_GET['la']){
	echo 'getla:'.$_GET['la'];
    $_SESSION['la'] = $_GET['la'];
	setcookie(  "la",  $_GET['la'],  time() + (10 * 365 * 24 * 60 * 60));
    header('Location:'.$_SERVER['PHP_SELF']);  
    exit();
}
// else{ 
	// $lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
    // $acceptLang = ['fr', 'en']; 
    // $_SESSION['la']= in_array($lang, $acceptLang) ? $lang : 'en';
	
// }
	if (isset($_COOKIE['la'])){
		$la=$_COOKIE['la'];
	}else{ $la=@$_SESSION['la'];}
switch($la){     
	case "en":
        require('lang/en.php');
    break;
    case "fr":
        require('lang/fr.php');
    break;
	case "es":
        require('lang/es.php');
    break;
	case "ar":
        require('lang/ar.php');
    break;
    default:
        require('lang/en.php');
    }
	
 $jour = new DateTime('now');
 $startdate = new DateTime("2024-05-07");
 // $startdate = new DateTime("2023-05-07");
 $enddate = new DateTime("2024-05-12");
 $pos_diff ='';
 
$pos_diff0 = $jour->diff($startdate)->format("%r%a");
$pos_diff = ($pos_diff0>1)?($pos_diff0.$ilreste):"";
 // if($pos_diff0>1){
	// $pos_diff =($landc=='ar')?('&rlm;'.$pos_diff0.$ilreste):($pos_diff0.$ilreste);
 // }

$pos_diff = ($startdate <= $jour && $jour <= $enddate)?($ilencours):$pos_diff;

// echo $pos_diff0;
$dirar=($landc=='ar')?' dir="rtl" lang="ar"':'';
$textend=($landc=='ar')?'text-start':'text-end';
$va=( isset( $_GET['va']))? $_GET['va']:"0";
?>

<html <?=$dirar?>>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZKMH9290EY"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-ZKMH9290EY');
</script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Mehdi">   
 


    	 <title><?=$lang['index-title'];?></title>	 
    	 <link rel="icon" type="image/png" href="logo_04.ico" />
		 <link href="css/bootstrap.min.css" rel="stylesheet">
		 <link href="css/flag-icon.min.css" rel="stylesheet">
		 <link href="css/font/bootstrap-icons.css" rel="stylesheet">
		<script src="js/bootstrap.bundle.min.js"></script>
		<!--<script src="js/jquery-3.7.0.min.js"></script>
		-->
<style>
body, html {
  height: 100%;
  margin:0;
}
.bg { margin:10px;
 /* background-image: url("bg01.png");
   height:100vh; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;*/
}
@font-face {
    font-family: 'blair_itcmedium';
    src: url('css/blair_itc_medium-webfont.woff2') format('woff2'),
         url('css/blair_itc_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
:root {
  --imprtxt-height: 1.2;
  --bs-body-bg:#fffaf3 !important;
  --bs-link-color: #0F72B5;
}

.imprtxt{font-family: 'blair_itcmedium', Arial, sans-serif;font-size: calc(75% * var(--imprtxt-height)) }
.imprtxt1{font-family: 'blair_itcmedium', Arial, sans-serif;font-size: calc(100% * var(--imprtxt-height)) }

.imprcolor{color:#0F72B5;}
.grisclair{ 	color:#9CAEBC; }
.bggrisclair{ 	background-color:#9CAEBC; }
.grisfonce{ 	color:#536071; }
.bggrisfonce{ 	background-color:#536071; }
.beige{ 	color:#EAE2D5; }
.beigec{ 	color:#fffaf3; }						  
.bgbeige{ 	background-color:#EAE2D5; }
.bgbeigec{ 	background-color:#fffaf3; color:black;}
.greige{ 	color:#C8BFB6; }							 
.bggreige{ 	background-color:#C8BFB6; }	
.gorange{ 	color:#ff4000; }	
.txtband{
    font-weight: 800;
    text-align: center;	
	}
.divrot01{
	overflow:hidden;
	max-width:390px;
	width: 45vw;
}
.rot01{
	transform: rotate(-8deg);
	max-width:350px;
	width: 40vw;
}
.img02{
	
	max-width:350px;
	/*width: 40vw;*/
	
}
.txtitalic{font-style: italic;}
.txtitalicr {
    -moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(25deg, 0deg);
    -webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(25deg, 0deg);
    -o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(25deg, 0deg);
    -ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(25deg, 0deg);
    transform: scale(1) rotate(0deg) translate(0px, 0px) skew(25deg, 0deg);
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .open>.dropdown-toggle.btn {   
    background-color: #7e8da0;
    border-color: #536071; /*set the color you want here*/
}
.likepre{
	display: block;
    margin-top: 10px;
    margin-bottom: 1rem;
    overflow: auto;
   padding:10px;
	white-space: pre-line;
}
.tab-content{ max-width:95vw;}

.animate {  
  animation-duration: 1s; 
  animation-delay: 0.8s;
  animation-name: animate-fade;
  animation-timing-function: cubic-bezier(.26,.53,.74,1.48);
  animation-fill-mode: backwards;
}
.animate.fade {
  animation-name: animate-fade;
  animation-timing-function: ease;
}
@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.animate.pop {
  animation-name: animate-pop;
}
@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
.delay-1 {animation-delay: 0.6s;}
.delay-2 {animation-delay: 0.8s;}
.delay-3 {animation-delay: 0.10s;}

#nav-0x-tab00 {animation-delay: 3s;animation-duration: 5s; 
  animation-iteration-count:infinite;
}
.modalpop{
	  text-decoration: underline  dotted ;
	  cursor: pointer;
}
.modalpop::after {
    content: "\f1c0";
	display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.blink {
            animation: blinker 2.5s linear 20;
           /*  color: red;
            font-size: 1.5em;
            Larger, responsive font size 
            margin-bottom: 20px;*/
        }

        @keyframes blinker {
            50% {
                opacity: 0;
            }
        }
</style>
<script type="text/javascript">
function onstart(){
	var nodeclic = document.getElementsByClassName('modalpop');
	for (i = 0; i < nodeclic.length; i++) {		
		nodeclic[i].addEventListener("click", ff01);
		nodeclic[i].setAttribute("data-bs-toggle", "modal");
		nodeclic[i].setAttribute("data-bs-target", "#acpmodal");
	}
	<?php if ($va!=0){echo "go5()";}?>
}
function go5(){
	var nodeclic = document.getElementsByClassName('nav-link');
	for (i = 0; i < nodeclic.length; i++) {		
		nodeclic[i].classList.remove("active");
		nodeclic[i].setAttribute("aria-selected", "false");		
	}
	var tab5= document.getElementById("nav-05-tab");
	tab5.classList.add("active");
	tab5.setAttribute("aria-selected", "true");
	
	var nodeclic = document.getElementsByClassName('tab-pane');
	for (i = 0; i < nodeclic.length; i++) {		
		nodeclic[i].classList.remove("active");
		nodeclic[i].classList.remove("show");
		nodeclic[i].setAttribute("aria-selected", "false");		
	}
	var tab5= document.getElementById("nav-05");
	tab5.classList.add("active");
	tab5.classList.add("show");	
}
function ff01(e) {
	data=e.target.getAttribute('data');
	typ=e.target.getAttribute('typ');
	hh='__';
	
	if(typ=='img'){hh='<img class="img-fluid" src="'+data+'">';}
	else{hh=data;}
	// console.log('ff01:',data,typ,hh);
	document.getElementById("acpmodalbody").innerHTML = hh;
	
};  

</script>

</head>
<body class="bggreige" onload="onstart()">
<div class="bg user-select-none0" style="height0:1200px"> 

<div class="container-fluid  row ">  
<div class="col-6    ">
	<div class=" dropdown">
			  <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
				 <i class="flag-icon <?=$flag?> flag m-0"></i>
			  </a>
			  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">            
				<li><a class="dropdown-item" href="?la=en"><span class="flag-icon flag-icon-gb"></span> <?=$lang['lang-eng']?> </a></li>
				<li><a class="dropdown-item" href="?la=fr"><span class="flag-icon flag-icon-fr"></span> <?=$lang['lang-fre']?> </a></li>
				<li><a class="dropdown-item" href="?la=ar"><span class="flag-icon flag-icon-ma"></span> <?=$lang['lang-ara']?> </a></li>
				<li><a class="dropdown-item" href="?la=es"><span class="flag-icon flag-icon-es"></span> <?=$lang['lang-esp']?> </a></li>
			  </ul>
	</div>
</div>
<div class="col-6 <?=$textend?>  ">	
	<a class="text-muted" href="https://www.instagram.com/pcamorocco2024/" target="ig"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
	  <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
	</svg></a>
	<a class="text-muted" href="https://www.facebook.com/profile.php?id=100093418459422" target="fb"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
	  <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
	</svg></svg></a>
</div>
</div>
	
  <div class="container-fluid justify-content-center row ">  		
		<div class="col-6    "><img class="img-fluid" style="max-height:150px" src="logo_04_<?=$landc?>.png">	</div>
		<div class="col-6 <?=$textend?>   "><a href="http://www.institut-psychotherapie.ma/" target="impr"><img class="img-fluid" style="max-height:150px" src="impr.png">	</a>	</div>
  </div>

<hr class="beige">
   <div class="container-fluid justify-content-center row txtitalic"> 		
		<div class=" col-4 grisfonce h4 text-center txtitalic animate delay-1 pop">		  <?=$lang['tit01']?>	</div>
		<div class=" col-4 grisfonce h4 text-center txtitalic animate delay-2 pop">		  Words beyond worlds		</div>
		<div class=" col-4 grisfonce h4 text-center txtitalicr animate delay-3 pop" >		  كلمات تتجاوز العالم 		</div>
  </div>
<hr class="beige">
     <div class="container-fluid justify-content-center row "> 		
		<div class=" col-12 imprcolor h4 text-center ">		 <?=$lang['index-welcome']?>		</div>
		
		
  </div>
<hr class="beige">

<nav class="sticky-top">
  <div class="nav nav-tabs bgbeige" id="nav-tab" role="tablist" style="    font-weight: bold;">
  
    <button class="nav-link" id="nav-01-tab" data-bs-toggle="tab" data-bs-target="#nav-01" type="button" role="tab" aria-controls="nav-01" aria-selected="false"><?=$lang['mnu_01']?></button>
    <button class="nav-link" id="nav-02-tab" data-bs-toggle="tab" data-bs-target="#nav-02" type="button" role="tab" aria-controls="nav-02" aria-selected="false"><?=$lang['mnu_02']?></button>
    <button class="nav-link active" id="nav-03-tab" data-bs-toggle="tab" data-bs-target="#nav-03" type="button" role="tab" aria-controls="nav-03" aria-selected="true"><?=$lang['mnu_03']?></button>
    <button class="nav-link" id="nav-04-tab" data-bs-toggle="tab" data-bs-target="#nav-04" type="button" role="tab" aria-controls="nav-04" aria-selected="false"><?=$lang['mnu_04']?></button>
    <button class="nav-link" id="nav-06-tab" data-bs-toggle="tab" data-bs-target="#nav-06" type="button" role="tab" aria-controls="nav-06" aria-selected="false"><?=$lang['mnu_06']?></button>
    
	<button class="  bggrisclair beigec blink  nav-link animate " id="nav-05-tab" data-bs-toggle="tab" data-bs-target="#nav-05" type="button" role="tab" aria-controls="nav-05" aria-selected="false"> <?=$lang['inscript']?>	   </button>
	
	<div class="ms-auto d-flex"   style=""   >
	<div class="bggrisclair  grisfonce text-center"   style="    padding: 9px;"   ><?= $hber_diff?></div>
	<div class="  grisclair  bggrisfonce text-center"   style="    padding: 9px;"   ><?= $pos_diff?></div>
	</div>
	<!--<div class="nav-link ms-auto dropup dnone"   type="button"   ><span onclick="location.href='#top'" class="dropdown-toggle">top</span></div>
   -->
  </div>
</nav>
<div class="tab-content bgbeigec" id="nav-tabContent">
  
  <div class="tab-pane fade likepre" id="nav-01" role="tabpanel" aria-labelledby="nav-01-tab"><?=$lang['page_01']?>  </div>
  <div class="tab-pane fade likepre" id="nav-02" role="tabpanel" aria-labelledby="nav-02-tab"><?=$lang['page_02']?>  </div>
  <div class="tab-pane fade likepre active show" id="nav-03" role="tabpanel" aria-labelledby="nav-03-tab"><?=$lang['page_03']?>  </div>
  <div class="tab-pane fade likepre" id="nav-04" role="tabpanel" aria-labelledby="nav-04-tab"><?=$lang['page_04']?>  </div>
  
  <div class="tab-pane fade likepre" id="nav-05" role="tabpanel" aria-labelledby="nav-05-tab"><?=$lang['page_05']?>  </div>
  <div class="tab-pane fade likepre" id="nav-06" role="tabpanel" aria-labelledby="nav-06-tab"><?=$lang['page_06']?>  </div>
  
  
</div>

	


 
    <br>
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
    <div class="col-md-4 d-flex align-items-center"><span class="mb-3 mb-md-0 text-muted">© 2023 IMPR</span></div>    
    <div class="col-md-4 d-flex d-end">
		<a href="https://docs.google.com/spreadsheets/d/1CHLNOa_hMgJrRiPTVFtSa9JvGPG7eZwH0PyUq6bkHmg/edit?usp=sharing" target="gs">
		<span class="mb-3 mb-md-0 text-muted bi-file-earmark-lock"></span>
		</a>
		</div>   
  </footer>
  
</div>

<div id="acpmodal" class="modal fade " aria-labelledby="my-modalLabel" aria-hidden="true" tabindex="-1" role="dialog">
        <div class="modal-dialog" data-dismiss="modal">X
            <div class="modal-content"  >              
                <div class="modal-body" id="acpmodalbody" style="    text-align: center;">          </div> 
            </div>
        </div>
</div>
</body>
