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

/* common */
#sam {z-index:9; position:absolute; top:330px; left:370px; opacity:0; transform:scale(0.1,0.1); transition-duration:1s; color:#F0F; width:1em; height:1em; box-shadow:0 0,1em 0em 6px #F00,1em -1em 6px #F00,11em 0em 6px #F00,11em -1em 6px #F00,4em 1em 9px 4px #0FF,8em 1em 9px 4px #0FF,4em -6em 8px -1px #F90,3em -7em 8px -2px #F90,2em -7em 8px -4px #F90, 8em -6em 8px -1px #F90,9em -7em 8px -2px #F90,10em -7em 8px -4px #F90,1em -2em,2em -2em,2em -3em,3em 0em,3em -1em,3em -2em,3em -3em,3em -4em,3em -5em,4em -1em,4em -2em,4em -5em,5em -1em,5em -2em,5em -3em,5em -4em,5em -5em,6em -1em,6em -2em,6em -3em,6em -4em,6em -5em,7em -1em,7em -2em,7em -3em,7em -4em,7em -5em,8em -1em,8em -2em,8em -5em,9em 0em,9em -1em,9em -2em,9em -3em,9em -4em,9em -5em,10em -2em,10em -3em,11em -2em;}


/* -- p2 -- */
.network {position:relative; float:right; width:190px; height:190px;}

/* ---- Anim ---- */
.LogoClicN, .LogoClicN::before, .LogoClicN::after {z-index:-1; position:absolute;}

.LogoClicN {top:9px; left:18px; width:170px; height:170px; border: 1px solid #00F;}

.LogoClicN::before {content:""; top:20px; left:-50px; width:150%; height:77%; background-color: #FFF; animation: RlogoclicN 9s linear infinite;}

.LogoClicN::after {content:""; top:5px; left:5px; width:92%; height:92%; border: 2px solid #F0F;}

@keyframes RlogoclicN {
   0%   {}
   100% {transform: rotate(360deg);}
}
/* ---- Fin Anim ---- */

/* ----- Logo Intranet ----- */
.LogoIntranet {position:absolute; top:22px; left:22px; width:125px; height:125px; border-radius:50%; background: linear-gradient(#0000FF 30%, #FF00FF); transform: rotate(-25deg);}

.L1, .L2, .L3, .L4 {position:absolute; background-color: #0FF; height:30px;}

.L1 {top:30px; left:47px; width:3px; transform: rotate(-50deg);}
.L2 {top:30px; left:75px; width:3px; transform: rotate(50deg);}
.L3 {top:54px; left:75px; width:6px; transform: rotate(-50deg);}
.L4 {top:54px; left:45px; width:6px; transform: rotate(50deg);}

.C1, .C1::after, .C3, .C3::after, .C5 {position:absolute; background-color: #0FF; border-radius: 50%;}

.C1 {top:30px; left:32px; width:16px; height:16px;}    .C1::after {content:""; top:0px; left:45px; width:16px; height:16px;}
.C3 {top:67px; left:17px; width:30px; height:30px;}    .C3::after {content:""; top:0px; left:61px; width:30px; height:30px;}
.C5 {top:44px; left:49px; width:27px; height:27px;}
/* ----- Fin Logo Intranet ----- */
/* p2 */


/* -- p3 -- */
.support {position:relative; float:right; width:255px; height:255px;}

/* ---- Anim ---- */
.LogoClic {position:absolute; top:38px; left:38px; width:161px; height:161px; border: 10px solid #F0F; box-shadow: 0px 0px 9px 6px #F0F; border-radius: 50%;}

.LogoClic::before, .LogoClic::after {content:""; position:absolute; background-color: #FFF; animation: Rlogoclic 8s linear infinite;}

.LogoClic::before {top:-30px; left:40px; width:80px; height:220px;}    .LogoClic::after {top:40px; left:-30px; width:220px; height:80px;}

@keyframes Rlogoclic {
   0%   {}
   100% {transform: rotate(360deg);}
}
/* ---- Fin Anim ---- */

/* ----- Logo Courrier ----- */
.LogoCourrier {z-index:1; position:absolute; top:18px; left:18px; width:125px; height:125px; border-radius: 50%; background-color: #FF5A00;
   background-image: radial-gradient(circle 125px at 0 0, rgba(0,0,0,0), rgba(0,0,0,0)), radial-gradient(circle 80px at 30px 30px, rgba(255,255,0,0.8), rgba(0,0,0,0)), radial-gradient(circle 9px at 30px 30px, rgba(255,255,255,1), rgba(0,0,0,0)), radial-gradient(circle 40px at 50px 120px, rgba(0,0,0,1), rgba(0,0,0,0)), radial-gradient(circle 40px at 99px 20px, rgba(0,0,0,1), rgba(0,0,0,0)), radial-gradient(circle 30px at 110px 100px, rgba(255,255,255,1), rgba(0,0,0,0));
   background-repeat: no-repeat, no-repeat;
}

.LogoCourrier::before {content:""; position:absolute; top:60px; left:33px; width:80px; height:20px; border: 1px solid #000; border-radius: 50%;
                       transform: rotate(-63deg); box-shadow: 0px 0px 25px 16px #000, inset 0px 0px 7px 7px #000;}

.lettrec {position:absolute; top:30px; left:45px; width:70px; height:50px; border: 1px solid #FF0; opacity: 0.6;
          background-color:#A9A9A9; border-radius:3px; transform: perspective(44px) rotateX(11deg) rotateY(22deg);}

.lettrec::before {content:""; position:absolute; top:-25px; border-style:solid; border-color: transparent transparent #EDEDED transparent; border-width: 35px 35px 40px 35px;}

.lettrec::after {content:""; position:absolute; top:0px; border-style:solid; border-color: #C0C0C0 transparent transparent transparent; border-width: 35px 35px 0 35px;}

.txtlc {position:absolute; top:60px; left:54px; transform:rotate(-7deg); color:#FF4500; font-size:8px; font-weight:bold; font-family:"Times New Roman";}
/* ----- Fin Logo Courrier ----- */
/* p3 */


/* -- p4 -- */
.dessinfin {position:relative; top:130px; left:650px; width:10px; height:10px; border: 1px solid #3300FF; border-radius:50%; box-shadow: 0px 0px 4px 1px #3300FF, inset 0px 0px 4px 1px #3300FF;}

.dessinfin::before {content:""; position:absolute; top:-40px; left:80px; width:10px; height:10px; border: 2px solid #FF99FF; border-radius:50%; box-shadow: 0px 0px 4px 1px #FF99FF, inset 0px 0px 4px 1px #FF99FF;}

.dessinfin::after {content:""; position:absolute; top:-40px; left:-80px; width:10px; height:10px; border: 2px solid #FF99FF; border-radius:50%; box-shadow: 0px 0px 4px 1px #FF99FF, inset 0px 0px 4px 1px #FF99FF;}

.Logo-E1 {position:relative; top:85px; left:652px; width:9px; height:9px; border: 1px solid #0F0; border-radius:50%;
          box-shadow: 0px 0px 4px 1px #0F0, inset 0px 0px 4px 1px #0F0; animation: Rlogo-E1 3s linear infinite;}

.Logo-E2, .Logo-E3 {position:relative; width:7px; height:7px; border: 1px solid #F00; border-radius:50%;
                    box-shadow: 0px 0px 4px 1px #F00, inset 0px 0px 4px 1px #F00; animation: Rlogo-E2 3s linear infinite;}

.Logo-E2 {top:90px; left:695px; animation-delay:-1s;}

.Logo-E3 {top:82px; left:610px; animation-delay:-2s;}

@keyframes Rlogo-E1 {
     0% { transform: rotate(  0deg) translateX(110px);}
    25% { transform: rotate( 90deg) translateX( 90px);}
    50% { transform: rotate(180deg) translateX(110px);}
    75% { transform: rotate(270deg) translateX( 90px);}
   100% { transform: rotate(360deg) translateX(110px);}
}

@keyframes Rlogo-E2 {
     0% { transform: rotate(  0deg) translateX(70px);}
   100% { transform: rotate(360deg) translateX(70px);}
}
/* p4 */


/* -- p5 -- */
.class-canvas-fond {position:absolute;}

.Rota1 {transform: perspective(180px) rotateY(-15deg);}
/* p5 */


/* -- p6 -- */
.Illustr7 {position:absolute; top:45px; left:600px; width:190px; height:70px; border-radius:8px; transform: perspective(90px) rotateY(-15deg);}

.behind {background:#000; box-shadow: 0px 0px 9px 6px #FF0; overflow:hidden;}

.above {box-shadow: 0px 0px 30px 10px #FF0 inset;}

.msglink {position:absolute; width:205px; top:26px; color:#FF0; font-size:16px; font-family:"Times New Roman";
          text-shadow: 0px -2px 15px #FF0, 0px 2px 15px #FF0, -2px 0px 15px #FF0, 2px 0px 15px #FF0; background:#000; animation: linkmov linear 10s infinite;}

@keyframes linkmov {
    0%   {transform: translateX(210px);}
    100% {transform: translateX(-190px);}
}

p {padding-bottom:1px;}

.point {width:0px; height:0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #F00; float:left;}

.link {margin-left:30px; margin-right:20px; font-size:16px; font-weight: bold; font-family:"Times New Roman";}

a.ca       {color:#FF9933; text-decoration:none;}
a.ca:hover {text-decoration:underline; text-shadow: -3px -3px 4px #FF9933;}

#Ral {z-index:10; position:absolute; top:20px; left:20px; width:25px; height:25px; border:3px solid red; visibility:hidden; border-radius:50%; box-shadow: 0px 0px 15px 10px red; animation: Ranim 4s linear infinite;}

.ral1 {position:absolute; top:11px; left:-12.5px; width:50px; height:3px; background-color:red;}

.ral2 {position:absolute; top:14px; left:-12.5px; width:3px; height:11px; background-color:yellow;}

.ral3 {position:absolute; top:0px; left:35px; width:3px; height:11px; background-color:yellow;}

@keyframes Ranim {
    0%   {box-shadow: 0px 0px 15px 15px #FF0;}
    100% {transform: rotate(360deg);}
}
/* p6 */


/* -- p7 -- */
#canvas-HorlC {/* taille Horl scale by browser on 'width' et 'height' div */
    position: absolute; top:50px; left:600px; width:220px; height:220px; border: 0px solid #FFF; transform: perspective(110px) rotateX(-9deg) rotateY(-15deg);
}

.diamond {position:absolute; top:150px; left:260px; width:100px; height:120px; border: 0px solid #FFF; transform: rotateY(45deg);}

.diam1 {position:absolute; top:30px; left:20px; width:50px; height:50px; border: 1px solid #F00; transform: rotate(54deg) skew(18deg); box-shadow: 0px 0px 6px 6px #F00, inset 0px 0px 6px 6px #F00;}
.diam1:hover {background-color: yellow;}

#zoneSupport {/* for overflow:hidden in -webkit- > Add last code */
    position:absolute; top:340px; left:200px; width:450px; height:180px; border: 0px solid blue; border-radius: 200px 250px 71px 39px / 20px 100px 71px 39px; background-color:black;
    overflow: hidden; -webkit-transform: translateZ(0);
}

#rLum {position:absolute; width:10px; height:10px; top:80px; left:220px; border: 1px solid red; animation: Rotation-rLum 10s linear infinite;}

#zLum {
    position:absolute; width:0; height:0; top:-250px; left:-50px; filter:blur(3px);
    border-left:  55px solid transparent;
    border-right: 55px solid transparent;
    border-top:   250px solid #F00;
    animation: Change-zLum 9s linear alternate infinite;
}

#zoneL {
    position:absolute; top:5px; left:5px; width:440px; height:170px; border: 0px solid blue; border-radius: 200px 250px 71px 39px / 20px 100px 71px 39px;
    background-image : -webkit-radial-gradient(center top, blue, black 85%);
    background-image :    -moz-radial-gradient(center top, blue, black 85%);
    background-image :     -ms-radial-gradient(center top, blue, black 85%);
    background-image :         radial-gradient(center top, blue, black 85%);
}

@keyframes Rotation-rLum {
    0%   {}
    100% {transform: rotate(360deg);}
}

@keyframes Change-zLum {
    0%   {border-top: 250px solid #F00;}
    25%  {border-top: 250px solid #FF0;}
    50%  {border-top: 250px solid #0FF;}
    75%  {border-top: 250px solid #0F0;}
    100% {border-top: 250px solid #FFF;}
}

a.gLien {color:#0F0; text-decoration:none; font-size:18px; font-weight: bold; font-style: italic; font-family: "Times New Roman"; padding-left:30px;}

a.gLien:hover {text-decoration:underline; animation: Colanim 0.7s linear infinite alternate;}

@keyframes Colanim {
    0%   {}
    100% {color:#F00;}
}

.sLettre {position:absolute; top:10px; left:10px; width:400px; height:150px; border: 0px solid #FFF; opacity: 0; transition-duration: 4s;}

.sLettre:hover {opacity: 1; transition-duration: 4s;}

.lettre {position:absolute; top:50px; left:290px; width:99px; height:70px; border: 1px solid #FFF;}

.lettre::before {content:""; position: absolute; top:-40px; left:0px; width:0; height:0; border-style: solid; border-color: transparent transparent #FFF transparent; border-width: 50px 50px 60px 50px;}

.lettre::after {content:""; position: absolute; top:0px; left:0px; width:0; height:0; border-style: solid; border-color: #FAF transparent transparent transparent; border-width: 50px 50px 0 50px;}
/* p7 */