@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@500&family=Orbitron:wght@600&display=swap");

body {
  margin: 0;
  font-family: "Cairo", sans-serif;
  background-color: #050505;
  color: #f5f5f5;
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
}

/* Effet sur les <li> */
li:hover {
  transform: scale(1.01);
  transition: transform 0.2s ease;
}

/* ======= Effet fond animé ======= */
.bg-animation {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 20% 20%, #003366, transparent 60%),
              radial-gradient(circle at 80% 80%, #0066cc, transparent 60%);
  animation: pulse 6s infinite alternate;
  z-index: -1; opacity: 0.4;
}
@keyframes pulse {
  0% { filter: brightness(1);}
  100% {filter: brightness(1.3);}
}

/* ======= Hero Section ======= */
.hero {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(135deg,#003366,#0066cc);
  box-shadow: 0 0 20px #0066cc;
  position: relative;
  overflow: hidden;
}

/* === LSPD Icon améliorée === */
.logo {
  width: 140px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: none;
  box-shadow: 0 0 25px #00bfff, 0 0 50px #1ec0ff, inset 0 0 20px #0066cc;
  animation: glow 4s ease-in-out infinite alternate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.logo:hover {
  transform: scale(1.1) rotate(2deg);
  box-shadow: 0 0 35px #00ffff, 0 0 70px #1ec0ff, inset 0 0 30px #0077ff;
}
@keyframes glow {
  0% { filter: drop-shadow(0 0 8px #00bfff); }
  100% { filter: drop-shadow(0 0 20px #00ffff); }
}

.hero h1 {
  font-family:"Orbitron",sans-serif;
  color:#1ec0ff;
}
.hero p {
  margin:5px 0 10px 0;
  color:#ddd;
  font-size:1.1em;
}

/* ======= Powered By Section ======= */
.powered {
  margin-top:10px;
  font-family:"Orbitron",sans-serif;
  font-size:1.2em;
  color:#1ec0ff;
  position:relative;
  display:inline-block;
}
.z4ck {
  font-weight:bold;
  color:#ffffff;
  transition: all 0.3s ease;
  position:relative;
}
.emoji {
  position:absolute;
  bottom:-25px;
  left:50%;
  transform:translateX(-50%) scale(0);
  opacity:0;
  font-size:1.2em;
  transition: all 0.4s ease;
}
.powered:hover .z4ck {
  color:#00ffff;
  text-shadow:0 0 15px #1ec0ff;
}
.powered:hover .emoji {
  transform:translateX(-50%) scale(1);
  opacity:1;
}

/* ======= Navbar ======= */
.navbar {
  background:#003366;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:15px;
  padding:15px;
  border-bottom:2px solid #1ec0ff;
}
.navbar a {
  color:#f5f5f5;
  text-decoration:none;
  font-weight:bold;
  font-family:"Orbitron",sans-serif;
  letter-spacing:1px;
}
.navbar a:hover {
  color:#1ec0ff;
  text-shadow:0 0 5px #1ec0ff;
}

/* ======= Sections ======= */
.section {
  padding:50px 20px;
  border-bottom:1px solid #333;
  backdrop-filter: blur(3px);
}
.section h2 {
  color:#1ec0ff;
  font-family:"Orbitron",sans-serif;
  margin-bottom:15px;
}
.section p, .section ul, .section pre {
  font-size:1.05em;
  line-height:1.8;
}
.section ul {
  list-style:none;
  padding:0;
}
.section ul li {
  margin-bottom:10px;
  background:rgba(0,51,102,0.5);
  padding:8px 12px;
  border-left:4px solid #1ec0ff;
  border-radius:6px;
}

/* ======= Images générales ======= */
.photo-container .photo {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(30, 192, 255, 0.5);
}

/* ======= Footer ======= */
footer {
  text-align:center;
  padding:20px;
  background:#003366;
  color:#ccc;
  border-top:2px solid #1ec0ff;
}

/* ======= Quick Links CTA ======= */
.cta-checkbox {display:none;}
.cta-panel {
  position:fixed;
  bottom:0; right:0;
  width:300px; max-height:450px;
  background:#003366;
  border:2px solid #1ec0ff;
  border-radius:10px 10px 0 0;
  box-shadow:0 0 20px #1ec0ff;
  transform:translateY(100%);
  transition: transform 0.4s ease;
  z-index:1001;
  overflow-y:auto;
  padding-bottom:20px;
}
.cta-checkbox:checked + .cta-open-tab + .cta-panel {transform:translateY(0);}
.cta-open-tab {
  position:fixed;
  bottom:20px; right:20px;
  background:#1ec0ff;
  color:#050505;
  padding:8px 15px;
  border-radius:10px 10px 0 0;
  font-weight:bold;
  cursor:pointer;
  z-index:1002;
  box-shadow:0 0 10px #1ec0ff;
}
.cta-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#0066cc;
  padding:10px 15px;
}
.cta-title strong {color:#1ec0ff;font-size:1rem;}
.cta-title span {color:#fff;font-size:0.9rem;}
.cta-close {cursor:pointer;color:#ff5555;font-size:1.2rem;}
.cta-body {padding:10px 15px;}
.cta-links {list-style:none;padding:0;}
.cta-links li {margin-bottom:8px;}
.cta-btn {
  display:block;
  text-decoration:none;
  color:#f5f5f5;
  background:#003366;
  border:1px solid #1ec0ff;
  border-radius:5px;
  padding:6px 10px;
  text-align:center;
  transition:all 0.3s ease;
}
.cta-btn:hover {
  background:#00ffff;
  color:#050505;
  transform:scale(1.05);
}
.cta-btn.subtle {
  background:transparent;
  border:none;
  color:#ff5555;
}
.cta-footer {
  text-align:center;
  padding:8px;
  background:#0066cc;
  font-size:0.8rem;
  color:#1ec0ff;
}