/*
Auteur     PM!Informatique (pmi@pm-informatique.xyz)
Copyright  PM!Informatique 2025 (http://www.pm-informatique.xyz/)
v3.3
*/


:root {--pmi:#F00;}


body {background-color:#000; color:#FFF;}

#LayerP {z-index:1; position:absolute; top:50%; left:50%; width:1120px; height:740px; border-radius:10px; margin-left:-560px; margin-top:-370px;
         border: 1px groove #1D66FF; box-shadow: 0px 0px 15px 6px #1D22F8; background:linear-gradient(#000 15%, #00F 30%, #000 70%); color:#000; transition: border, box-shadow, 1s;}

#LayerC {z-index:2; position:absolute; top:164px; left:214px; width: 900px; height:570px; border-radius: 45px 0px 10px 0px; border:inset; background-color:#FFF; opacity:0.9; overflow:auto;}

/*Anim pts*/
#LayerPta {position:absolute; top:610px; left:50px; width:1px; height:70px; background-color:#0FF; box-shadow: 0px 0px 8px 1px #0FF; transition: background-color, box-shadow, 1s;}

#LayerPtap {position:relative; top:0px; left:0px; width:2px; height:2px; animation: Panim 16s linear alternate infinite;}

@keyframes Panim {
    0%   {box-shadow: 6px 10px #FF0, -6px 10px #FF0, 6px 20px #FF0, -6px 20px #FF0, 6px 30px #FF0, -6px 30px #FF0, 6px 40px #FF0, -6px 40px #FF0, 6px 50px #FF0, -6px 50px #FF0, 6px 60px #FF0, -6px 60px #FF0;}
    20%  {box-shadow: 19px 10px #FF0, -5px 10px #FF0, 14px 20px #FF0, -9px 20px #FF0, 5px 30px #FF0, -14px 30px #FF0, 17px 40px #FF0, -4px 40px #FF0, 12px 50px #FF0, -11px 50px #FF0, 16px 60px #FF0, -6px 60px #FF0;}
    40%  {box-shadow: 4px 10px #FF0, -15px 10px #FF0, 8px 20px #FF0, -20px 20px #0FF, 12px 30px #FF0, -6px 30px #FF0, 16px 40px #FF0, -11px 40px #FF0, 20px 50px #FF0, -9px 50px #F0F, 24px 60px #F00, -13px 60px #FF0;}
    60%  {box-shadow: 9px 10px #FFF, -9px 10px #FF0, 4px 20px #FF0, -4px 20px #FF0, 14px 30px #FF0, -14px 30px #FF0, 7px 40px #0FF, -7px 40px #FF0, 20px 50px #FF0, -20px 50px #FF0, 9px 60px #FF0, -9px 60px #FF0;}
    80%  {box-shadow: 6px 10px #FF0, -5px 10px #FF0, 12px 20px #FF0, -25px 20px #FF00FF, 18px 30px #FF0, -12px 30px #FF0, 24px 40px #FF0, -4px 40px #FF0, 15px 50px #FF0, -8px 50px #FF0, 6px 60px #FF0, -16px 60px #FF0;}
    100% {box-shadow: 13px 10px #FF0, -22px 10px #FF0, 6px 20px #FF0, -22px 20px #FF0, 11px 30px #FF0, -22px 30px #FF0, 18px 40px #FF0, -22px 40px #FF0, 9px 50px #FF0, -22px 50px #FF0, 20px 60px #FF0, -22px 60px #FF0;}
}
/*end Anim pts*/

#LP1 {z-index:2; position:absolute; top:305px; left:180px; width:755px; height:0px; transform: rotate(-46deg); transition: box-shadow, 1.3s;}
.LPd1 {box-shadow: 0px 0px 15px 5px #F0F;}
.LPo1 {box-shadow: 0px 0px 25px 5px #FF0;}

#LP2::before {content:">0-share@knowledge!8>"; position:absolute; top:18px; left:760px; font-size:9px; font-weight:bold; font-style:italic; font-family:"Times New Roman";}
.LPd2 {text-shadow: 9px 0px 8px #F0F, -9px 0px 8px #F0F, 0px 9px 8px #F0F, 0px -9px 8px #F0F;}
.LPo2 {text-shadow: 9px 0px 8px #FF0, -9px 0px 8px #FF0, 0px 9px 8px #FF0, 0px -9px 8px #FF0;}

#LP3 {z-index:1; position:absolute; top:24px; left:740px; width:120px; height:0px; transition: box-shadow, 1.3s;}
.LPd3 {box-shadow: 0px 0px 30px 6px #F0F;}
.LPo3 {box-shadow: 0px 0px 30px 9px #FF0;}

#LP4 {z-index:1; position:absolute; top:160px; left:1px; width:320px; height:0px; transform:rotate(-20deg); transition: box-shadow, 1s;}
.LPd4 {box-shadow: 0px 0px 40px 9px #0F0;}
.LPo4 {box-shadow: 0px 0px 30px 9px #FF0;}

#LP5 {z-index:1; position:absolute; top:580px; left:-30px; width:500px; height:1px; background-color:#FFF; box-shadow: 0px 0px 15px 1px #FFF; transform:rotate(32deg);}
#LP6 {z-index:1; position:absolute; top:580px; left:80px; width:820px; height:1px; background-color:#FFF; box-shadow: 0px 0px 12px 1px #FFF; transform:rotate(-22deg);}
#LP7 {position:absolute; top:280px; left:1px; width:1090px; height:90px; border-radius:50%; box-shadow: 1px -10px 15px 0px #FFF; transform:rotate(10deg);}
.tPx567 {transition: background-color, box-shadow, 1s; transition-delay:1s;}

#LayerPx2 {position:absolute; top:120px; left:600px; width:400px; height:300px; border-radius:50%; box-shadow: 35px 10px 25px 0px #FFF00A;}

#LayerPx3 {position:absolute; top:360px; left:680px; width:80px; height:50px; background-color:#FFF00A; border-radius:50%; box-shadow: 0px 0px 25px 11px #FFF00A; transform:rotate(15deg);}

#LayerPx4a {z-index:2; position:absolute; top:610px; left:190px; width:50px; height:0;
            border-style:solid; border-color: transparent transparent #F0F transparent; border-width: 0 25px 25px 25px; margin: 20px 0 50px 0; transform:rotate(220deg);}

#LayerPx4a::after {content:""; position:absolute; top:25px; left:-25px; width:0; height:0; border-style:solid; border-color: #F0F transparent transparent transparent; border-width: 70px 50px 0 50px;}

#LayerPx4b {position:absolute; top:590px; left:230px; width:60px; height:60px; border-radius:50%; box-shadow: 0px 0px 50px 15px #F0F;}

#LayerPx6b {position:absolute; top:630px; left:760px; width:200px; height:100px; border-radius:50%; box-shadow: 15px -30px 15px 0px #0FF; transform:rotate(29deg);}

#LayerPx11 {z-index:2; position:absolute; top:720px; left:200px; color:#FF0; background:#F0F; width:1em; height:1em;
	    	box-shadow: 1em 0em,2em -1em,3em 0em,3em -2em,4em -3em,5em -2em,6em -1em, 7em 0em, 7em -2em, 8em -3em, 9em 0em;}

#LayerPx12 {position:absolute; top:670px; left:770px; width:350px; height:1px; background-color:#FFF; box-shadow: 0px 0px 10px 1px #FFF; transform:rotate(-20deg);}

#LayerPx13 {position:absolute; top:460px; left:870px; width:240px; height:0px; box-shadow: 0px 0px 10px 4px #0FF; transform:rotate(15deg);}

/*main Logo*/
#logoP {z-index:10; position:absolute; top:50px; left:50px; width:126px; height:126px; border-radius:50%; background:linear-gradient(#0000CD 40%, #5990F5);}
#logoP:hover {background:linear-gradient(#000 60%, #F0F); --pmi:#FFF;}

#logoP::before {content:""; position:absolute; top:8px; left:24px; width:80px; height:55px; border-radius:50%; background:linear-gradient(#C0C4E2 1%, #0000CD);}

#pmi::before {content:"PM!"; position:absolute; top:38px; left:33px; color:#FFF; font-size:38px; font-weight:bold; font-style:italic; font-family:"Times New Roman";
              text-shadow: -1px -1px 0px #999, -2px -2px 0px #888, -3px -3px 0px #777, -4px -4px 3px #000000, 3px 5px 4px #000000; transform:rotate(-7deg);}

#pmi::after {content:"Informatique"; position:absolute; top:90px; left:22px; color:var(--pmi); font-size:15px; font-weight:bold; font-style:italic; font-family:"Times New Roman";}

.Flogo {z-index:3; position:absolute; top:1px; left:0px; width:124px; height:124px; border: 1px solid #F0F; border-radius:50%; box-shadow: -8px -8px 20px 18px #F0F; opacity:0; transition: border, 1.6s;}
.Flogo:hover {opacity:1;}