/* Animations Héros CYBERSEC */
.font-orbitron { font-family: 'Orbitron', sans-serif; }
.glitch { position: relative; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch::before { left: 2px; text-shadow: -1px 0 rgba(255,0,0,0.7); clip: rect(44px,450px,56px,0); animation: glitch-anim 5s infinite linear alternate-reverse; }
.glitch::after { left: -2px; text-shadow: -1px 0 rgba(0,0,255,0.7); clip: rect(44px,450px,56px,0); animation: glitch-anim2 5s infinite linear alternate-reverse; }
@keyframes glitch-anim { 0%{clip:rect(31px,9999px,94px,0);} 100%{clip:rect(82px,9999px,61px,0);} }
@keyframes glitch-anim2 { 0%{clip:rect(65px,9999px,100px,0);} 100%{clip:rect(38px,9999px,49px,0);} }
.neon-glow { text-shadow: 0 0 8px #00ff00, 0 0 16px #00ff00; }
.cursor-blink { animation: blink 1s step-end infinite; }
@keyframes blink { from, to { opacity: 1; } 50% { opacity: 0; } }

/* Boutons neon et orange */
.neon-button {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  background: #00ffb3 !important;
  color: #15171a !important;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  border-radius: 1rem;
  border: none;
  box-shadow: 0 0 12px #00ffb3, 0 2px 8px #0006;
  transition: box-shadow 0.22s, background 0.22s, color 0.22s, transform 0.18s;
}
.neon-button:hover {
  background: #00ffea !important;
  color: #fff !important;
  box-shadow: 0 0 32px #00ffea, 0 0 64px #00ffea44;
  transform: translateY(-2px) scale(1.04);
}
.orange-button {
  box-shadow: 0 0 16px #ff3e00, 0 0 32px #ff3e0044;
  transition: box-shadow 0.3s, background 0.3s, color 0.3s;
}
.orange-button:hover {
  box-shadow: 0 0 32px #ff3e00, 0 0 64px #ff3e0044;
  filter: brightness(1.1);
}

/* Zoom progressif image */
.img-zoom-hover {
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
}
.img-zoom-hover:hover {
  transform: scale(1.05);
}

/* Prompt animé et améliorations console */
.console-prompt-anim {
  color: #00ff00;
  font-weight: bold;
  margin-right: 0.3em;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.console-blink {
  animation: blink 1s step-end infinite;
}
.console-cybersec-body .console-line {
  display: block;
  margin-bottom: 0.2em;
  text-shadow: 0 0 4px #00ff00, 0 0 2px #00ff00;
  letter-spacing: 0.01em;
  padding: 2px 0;
  border-left: 2px solid transparent;
  transition: background 0.2s, border-color 0.2s;
  overflow: visible;
  white-space: normal;
  position: static;
  animation: none;
  width: auto;
}
.console-cybersec-body .console-line:last-child {
  background: rgba(0,255,0,0.07);
  border-left: 2px solid #00ff00;
}
.console-cybersec-body a {
  color: #00ff00;
  text-decoration: underline;
  transition: color 0.2s;
}
.console-cybersec-body .text-primary {
  color: #00ff00;
  text-shadow: 0 0 4px #00ff00;
}
.console-cybersec-body .text-lime-400 {
  color: #a3e635;
  text-shadow: 0 0 4px #a3e635;
}

/* Console cyber */
.console-line {
  font-family: 'JetBrains Mono', monospace;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  animation: cyber-type 5s linear infinite;
  width: 0;
  text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
}
.console-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(0,255,0,0.1), transparent);
  animation: scan-line 2s linear infinite;
  z-index: -1;
}
.console-line::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 0;
  height: 100%;
  width: 3px;
  background: linear-gradient(to bottom, #00ff00, #00cc00, #00ff00);
  box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
  animation: cyber-cursor 0.8s ease-in-out infinite;
}
.console-line-1 { animation-delay: 0s; }
.console-line-2 { animation-delay: 1.25s; }
.console-line-3 { animation-delay: 2.5s; }
.console-line-4 { animation-delay: 3.75s; }
@keyframes cyber-type {
  0%{width:0;filter:hue-rotate(0deg);}
  10%{width:100%;filter:hue-rotate(0deg);}
  15%{filter:hue-rotate(10deg) brightness(1.2);}
  20%{filter:hue-rotate(0deg) brightness(1);}
  80%{width:100%;filter:hue-rotate(0deg);}
  90%{width:0;filter:hue-rotate(-10deg) brightness(0.8);}
  100%{width:0;filter:hue-rotate(0deg);}
}
@keyframes cyber-cursor {
  0%,100%{opacity:1;transform:scaleY(1);box-shadow:0 0 10px #00ff00,0 0 20px #00ff00;}
  50%{opacity:0.3;transform:scaleY(1.5);box-shadow:0 0 20px #00ff00,0 0 40px #00ff00;}
}
@keyframes scan-line {
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}
.console-line:hover {
  animation: glitch-text 0.3s ease-in-out;
}
@keyframes glitch-text {
  0%{transform:translate(0);}
  20%{transform:translate(-2px,2px);text-shadow:2px 0 #ff0000,-2px 0 #00ffff;}
  40%{transform:translate(2px,-2px);text-shadow:-2px 0 #ff0000,2px 0 #00ffff;}
  60%{transform:translate(-2px,-2px);text-shadow:2px 0 #ff0000,-2px 0 #00ffff;}
  80%{transform:translate(2px,2px);text-shadow:-2px 0 #ff0000,2px 0 #00ffff;}
  100%{transform:translate(0);}
}

/* Styles de base pour le corps de la page */
body {
    background-color: #0a0a0a; /* Fond très sombre */
    color: #f0f0f0; /* Texte clair */
    font-family: 'JetBrains Mono', monospace; /* Police monospace pour un look "code" */
}

/* Animations section À propos (Mission & Vision) */
.anim-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
}
.anim-card.visible {
  opacity: 1;
  transform: none;
}
.anim-card:hover {
  box-shadow: 0 0 32px #00ff00, 0 0 64px #00ff0044;
  transform: scale(1.04) rotateY(4deg);
}
.scanline::before {
  content: '';
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, #00ff0033 50%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
  animation: scanline-move 2.5s linear infinite;
}
@keyframes scanline-move {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.anim-icon {
  opacity: 0;
  transform: scale(0.7) rotate(-20deg);
  transition: opacity 0.7s, transform 0.7s;
}
.anim-icon.visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.anim-icon:hover {
  filter: drop-shadow(0 0 12px #00ff00);
  transform: scale(1.1) rotate(8deg);
}
.anim-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s, transform 0.7s, color 0.3s;
}
.anim-title.visible {
  opacity: 1;
  transform: none;
}
.anim-title:hover {
  color: #00ff00;
  text-shadow: 0 0 8px #00ff00;
}
.anim-title.glitch {
  animation: glitch-anim 1.2s linear 1;
}
.anim-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s, transform 0.7s, color 0.3s;
}
.anim-text.visible {
  opacity: 1;
  transform: none;
}
.anim-text:hover {
  color: #00ff00;
  text-shadow: 0 0 8px #00ff00;
}
.anim-vision {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.9s, transform 0.9s;
}
.anim-vision.visible {
  opacity: 1;
  transform: scale(1);
}
.anim-vision:hover {
  box-shadow: 0 0 32px #00ff00, 0 0 64px #00ff0044;
}
.anim-vision-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s, transform 0.7s;
}
.anim-vision-title.visible {
  opacity: 1;
  transform: none;
}
.anim-vision-title.anim-glitch {
  animation: glitch-anim 1.2s linear 1;
}
.anim-vision-text {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s, transform 0.7s;
}
.anim-vision-text.visible {
  opacity: 1;
  transform: none;
}
.anim-vision-img {
  opacity: 0;
  transform: scale(0.9) rotate(-8deg);
  transition: opacity 0.9s, transform 0.9s;
}
.anim-vision-img.visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.anim-vision-img:hover {
  filter: drop-shadow(0 0 16px #00ff00);
  transform: scale(1.04) rotate(2deg);
}

/* Animations section Catégories de CTF */
.anim-title {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s, transform 0.7s, color 0.3s;
}
.anim-title.visible {
  opacity: 1;
  transform: none;
}
.anim-title.glitch {
  animation: glitch-anim 1.2s linear 1;
}
.anim-title:hover {
  color: #00ff00;
  text-shadow: 0 0 8px #00ff00;
}
.anim-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
}
.anim-card.visible {
  opacity: 1;
  transform: none;
}
.anim-card:hover {
  box-shadow: 0 0 32px #00ff00, 0 0 64px #00ff0044;
  transform: scale(1.04) rotateY(4deg);
}
.anim-icon {
  opacity: 0;
  transform: scale(0.7) rotate(-20deg);
  transition: opacity 0.7s, transform 0.7s;
}
.anim-icon.visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.anim-icon:hover {
  filter: drop-shadow(0 0 12px #00ff00);
  transform: scale(1.1) rotate(8deg);
}
.anim-list {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s, transform 0.7s, color 0.3s;
}
.anim-list.visible {
  opacity: 1;
  transform: none;
}
.anim-list:hover {
  color: #00ff00;
  text-shadow: 0 0 8px #00ff00;
}
.anim-btn, .ctf-btn-cyber {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.7s, transform 0.7s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.anim-btn.visible, .ctf-btn-cyber.visible {
  opacity: 1;
  transform: scale(1);
}
.ctf-btn-cyber::before {
  content: '';
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, #00ff0033 50%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
  animation: scanline-move 2.5s linear infinite;
}
.ctf-btn-cyber.glitch {
  animation: glitch-anim 1.2s linear 1;
}
.ctf-btn-cyber:focus {
  outline: 2px solid #00ff00;
}
/* Ripple effect */
.ripple-effect {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-anim 0.6s linear;
  background: rgba(0,255,0,0.3);
  pointer-events: none;
  z-index: 2;
}
@keyframes ripple-anim {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Classement leaderboard */
.leaderboard-row {
  transition: box-shadow 0.3s, transform 0.3s;
}
.leaderboard-row:hover {
  box-shadow: 0 0 32px #00ff00, 0 0 64px #00ff0044;
  transform: scale(1.03);
  z-index: 2;
}
.leaderboard-row:hover .leaderboard-rank {
  animation: leaderboard-rank-color 1.2s linear infinite alternate;
}
.leaderboard-row:hover .leaderboard-score {
  animation: leaderboard-score-flicker 0.7s steps(2) infinite;
}
.leaderboard-row:hover .leaderboard-niveau {
  animation: leaderboard-niveau-scan 1.2s linear infinite;
}
@keyframes leaderboard-rank-color {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(90deg); }
}
@keyframes leaderboard-score-flicker {
  0%, 100% { opacity: 1; }
  20% { opacity: 0.7; }
  40% { opacity: 1; }
  60% { opacity: 0.5; }
  80% { opacity: 1; }
}
@keyframes leaderboard-niveau-scan {
  0% { box-shadow: 0 0 0 #00ff00; }
  50% { box-shadow: 0 0 16px #00ff00; }
  100% { box-shadow: 0 0 0 #00ff00; }
}
.leaderboard-svg-anim {
  display: inline-block;
  animation: svg-pulse-rotate 2.5s linear infinite;
}
@keyframes svg-pulse-rotate {
  0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 0 #00ff00); }
  50% { transform: rotate(180deg) scale(1.15); filter: drop-shadow(0 0 8px #00ff00); }
  100% { transform: rotate(360deg) scale(1); filter: drop-shadow(0 0 0 #00ff00); }
}
/* Glitch pseudo leaderboard */
.leaderboard-glitch-1 { position: relative; }
.leaderboard-glitch-1::before, .leaderboard-glitch-1::after {
  content: attr(data-text);
  position: absolute; left: 0; width: 100%; height: 100%; top: 0;
  opacity: 0.7; pointer-events: none;
}
.leaderboard-glitch-1::before {
  color: #00fff7; left: 2px; top: 1px; z-index: 1; animation: glitch1 1.2s infinite linear alternate-reverse;
}
.leaderboard-glitch-1::after {
  color: #ff00c8; left: -2px; top: -1px; z-index: 1; animation: glitch2 1.2s infinite linear alternate-reverse;
}
@keyframes glitch1 { 0%{opacity:0.2;} 20%{opacity:0.7;} 40%{opacity:0.2;} 60%{opacity:0.7;} 100%{opacity:0.2;} }
@keyframes glitch2 { 0%{opacity:0.7;} 20%{opacity:0.2;} 40%{opacity:0.7;} 60%{opacity:0.2;} 100%{opacity:0.7;} }
.leaderboard-glitch-2 { position: relative; }
.leaderboard-glitch-2::before, .leaderboard-glitch-2::after {
  content: attr(data-text);
  position: absolute; left: 0; width: 100%; height: 100%; top: 0;
  opacity: 0.7; pointer-events: none;
}
.leaderboard-glitch-2::before {
  color: #00ff00; left: 2px; top: 1px; z-index: 1; animation: glitch3 1.2s infinite linear alternate-reverse;
}
.leaderboard-glitch-2::after {
  color: #ffea00; left: -2px; top: -1px; z-index: 1; animation: glitch4 1.2s infinite linear alternate-reverse;
}
@keyframes glitch3 { 0%{opacity:0.2;} 20%{opacity:0.7;} 40%{opacity:0.2;} 60%{opacity:0.7;} 100%{opacity:0.2;} }
@keyframes glitch4 { 0%{opacity:0.7;} 20%{opacity:0.2;} 40%{opacity:0.7;} 60%{opacity:0.2;} 100%{opacity:0.7;} }
.leaderboard-glitch-3 { position: relative; }
.leaderboard-glitch-3::before, .leaderboard-glitch-3::after {
  content: attr(data-text);
  position: absolute; left: 0; width: 100%; height: 100%; top: 0;
  opacity: 0.7; pointer-events: none;
}
.leaderboard-glitch-3::before {
  color: #ff3e00; left: 2px; top: 1px; z-index: 1; animation: glitch5 1.2s infinite linear alternate-reverse;
}
.leaderboard-glitch-3::after {
  color: #00fff7; left: -2px; top: -1px; z-index: 1; animation: glitch6 1.2s infinite linear alternate-reverse;
}
@keyframes glitch5 { 0%{opacity:0.2;} 20%{opacity:0.7;} 40%{opacity:0.2;} 60%{opacity:0.7;} 100%{opacity:0.2;} }
@keyframes glitch6 { 0%{opacity:0.7;} 20%{opacity:0.2;} 40%{opacity:0.7;} 60%{opacity:0.2;} 100%{opacity:0.7;} }
.leaderboard-glitch-4 { position: relative; }
.leaderboard-glitch-4::before, .leaderboard-glitch-4::after {
  content: attr(data-text);
  position: absolute; left: 0; width: 100%; height: 100%; top: 0;
  opacity: 0.7; pointer-events: none;
}
.leaderboard-glitch-4::before {
  color: #00bfff; left: 2px; top: 1px; z-index: 1; animation: glitch7 1.2s infinite linear alternate-reverse;
}
.leaderboard-glitch-4::after {
  color: #ff00c8; left: -2px; top: -1px; z-index: 1; animation: glitch8 1.2s infinite linear alternate-reverse;
}
@keyframes glitch7 { 0%{opacity:0.2;} 20%{opacity:0.7;} 40%{opacity:0.2;} 60%{opacity:0.7;} 100%{opacity:0.2;} }
@keyframes glitch8 { 0%{opacity:0.7;} 20%{opacity:0.2;} 40%{opacity:0.7;} 60%{opacity:0.2;} 100%{opacity:0.7;} }
.leaderboard-glitch-5 { position: relative; }
.leaderboard-glitch-5::before, .leaderboard-glitch-5::after {
  content: attr(data-text);
  position: absolute; left: 0; width: 100%; height: 100%; top: 0;
  opacity: 0.7; pointer-events: none;
}
.leaderboard-glitch-5::before {
  color: #a259ff; left: 2px; top: 1px; z-index: 1; animation: glitch9 1.2s infinite linear alternate-reverse;
}
.leaderboard-glitch-5::after {
  color: #00ff00; left: -2px; top: -1px; z-index: 1; animation: glitch10 1.2s infinite linear alternate-reverse;
}
@keyframes glitch9 { 0%{opacity:0.2;} 20%{opacity:0.7;} 40%{opacity:0.2;} 60%{opacity:0.7;} 100%{opacity:0.2;} }
@keyframes glitch10 { 0%{opacity:0.7;} 20%{opacity:0.2;} 40%{opacity:0.7;} 60%{opacity:0.2;} 100%{opacity:0.7;} }

/* Animations section Calendrier */
.anim-title {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s, transform 0.7s, color 0.3s;
}
.anim-title.visible {
  opacity: 1;
  transform: none;
}
.anim-title.glitch {
  animation: glitch-anim 1.2s linear 1;
}
.anim-title:hover {
  color: #00ff00;
  text-shadow: 0 0 8px #00ff00;
}
.anim-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
}
.anim-card.visible {
  opacity: 1;
  transform: none;
}
.anim-card:hover {
  box-shadow: 0 0 32px #00ff00, 0 0 64px #00ff0044;
  transform: scale(1.04) rotateY(4deg);
}
.anim-icon {
  opacity: 0;
  transform: scale(0.7) rotate(-20deg);
  transition: opacity 0.7s, transform 0.7s;
}
.anim-icon.visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.anim-icon:hover {
  filter: drop-shadow(0 0 12px #00ff00);
  transform: scale(1.1) rotate(8deg);
}
.anim-btn, .calendar-btn-cyber {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.7s, transform 0.7s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.anim-btn.visible, .calendar-btn-cyber.visible {
  opacity: 1;
  transform: scale(1);
}
.calendar-btn-cyber::before {
  content: '';
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, #00ff0033 50%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
  animation: scanline-move 2.5s linear infinite;
}
.calendar-btn-cyber.glitch {
  animation: glitch-anim 1.2s linear 1;
}
.calendar-btn-cyber:focus {
  outline: 2px solid #00ff00;
}
/* Ripple effect */
.ripple-effect {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-anim 0.6s linear;
  background: rgba(0,255,0,0.3);
  pointer-events: none;
  z-index: 2;
}
@keyframes ripple-anim {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Galerie - overlay et bouton Voir animés au hover */
.gallery-overlay-cyber {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s, transform 0.5s;
  transform: translateY(30px);
}
.gallery-card-cyber:hover .gallery-overlay-cyber {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.gallery-btn-cyber {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s, transform 0.4s, background 0.3s, color 0.3s;
}
.gallery-card-cyber:hover .gallery-btn-cyber {
  opacity: 1;
  transform: translateY(0);
}

/* Équipe & Crédits */
.team-member-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
}
.team-member-card.visible {
  opacity: 1;
  transform: none;
}
.team-member-card:hover {
  box-shadow: 0 0 32px #00ff00, 0 0 64px #00ff0044;
  transform: scale(1.04) rotateY(4deg);
}
.team-avatar-cyber {
  transition: box-shadow 0.4s, filter 0.4s;
}
.team-avatar-cyber:hover {
  box-shadow: 0 0 32px #00ff00, 0 0 64px #00ff0044;
  filter: drop-shadow(0 0 16px #00ff00);
}
.team-cybername-1 {
  position: relative;
  animation: team-glitch-1 2.2s infinite linear alternate-reverse;
  transition: text-shadow 0.3s;
}
.team-cybername-1:hover {
  text-shadow: 0 0 8px #00ff00;
}
@keyframes team-glitch-1 {
  0%{text-shadow:2px 0 #00fff7,-2px 0 #ff00c8;}
  20%{text-shadow:-2px 0 #00fff7,2px 0 #ff00c8;}
  40%{text-shadow:2px 0 #00fff7,-2px 0 #ff00c8;}
  60%{text-shadow:-2px 0 #00fff7,2px 0 #ff00c8;}
  100%{text-shadow:2px 0 #00fff7,-2px 0 #ff00c8;}
}
.team-cybername-2 {
  position: relative;
  animation: team-glitch-2 2.2s infinite linear alternate-reverse;
  transition: text-shadow 0.3s;
}
.team-cybername-2:hover {
  text-shadow: 0 0 8px #00ff00;
}
@keyframes team-glitch-2 {
  0%{text-shadow:2px 0 #00ff00,-2px 0 #ffea00;}
  20%{text-shadow:-2px 0 #00ff00,2px 0 #ffea00;}
  40%{text-shadow:2px 0 #00ff00,-2px 0 #ffea00;}
  60%{text-shadow:-2px 0 #00ff00,2px 0 #ffea00;}
  100%{text-shadow:2px 0 #00ff00,-2px 0 #ffea00;}
}
.team-cybername-3 {
  position: relative;
  animation: team-glitch-3 2.2s infinite linear alternate-reverse;
  transition: text-shadow 0.3s;
}
.team-cybername-3:hover {
  text-shadow: 0 0 8px #00ff00;
}
@keyframes team-glitch-3 {
  0%{text-shadow:2px 0 #ff3e00,-2px 0 #00fff7;}
  20%{text-shadow:-2px 0 #ff3e00,2px 0 #00fff7;}
  40%{text-shadow:2px 0 #ff3e00,-2px 0 #00fff7;}
  60%{text-shadow:-2px 0 #ff3e00,2px 0 #00fff7;}
  100%{text-shadow:2px 0 #ff3e00,-2px 0 #00fff7;}
}
.team-cybername-4 {
  position: relative;
  animation: team-glitch-4 2.2s infinite linear alternate-reverse;
  transition: text-shadow 0.3s;
}
.team-cybername-4:hover {
  text-shadow: 0 0 8px #00ff00;
}
@keyframes team-glitch-4 {
  0%{text-shadow:2px 0 #00bfff,-2px 0 #ff00c8;}
  20%{text-shadow:-2px 0 #00bfff,2px 0 #ff00c8;}
  40%{text-shadow:2px 0 #00bfff,-2px 0 #ff00c8;}
  60%{text-shadow:-2px 0 #00bfff,2px 0 #ff00c8;}
  100%{text-shadow:2px 0 #00bfff,-2px 0 #ff00c8;}
}
.team-timeline-scan {
  animation: scan-sweep 3s linear infinite;
  background-size: 200% 100%;
  background-position: 0 0;
}
@keyframes scan-sweep {
  0% { background-position: 0 0; }
  100% { background-position: 200% 0; }
}
.team-bg-pattern {
  animation: pattern-move 12s linear infinite;
  background-image: repeating-linear-gradient(135deg,rgba(0,255,0,0.04) 0 2px,transparent 2px 20px);
  background-size: 200% 200%;
}
@keyframes pattern-move {
  0% { background-position: 0 0; }
  100% { background-position: 100% 100%; }
}

/* Zoom au hover pour toutes les images */
img:not(.no-zoom), .img-zoom-hover {
  transition: transform 0.5s cubic-bezier(.4,0,.2,1), box-shadow 0.4s;
}
img:not(.no-zoom):hover, .img-zoom-hover:hover,
.group:hover .img-zoom-hover {
  transform: scale(1.05);
  box-shadow: 0 0 24px #00ff00, 0 0 48px #00ff0044;
}

/* Animation impressionnante galerie au hover (correction) */
@keyframes gallery-wow-tilt {
  0% { transform: scale(1.05) rotateY(0deg) rotateZ(0deg); filter: drop-shadow(0 0 24px #00ff00); }
  20% { transform: scale(1.09) rotateY(10deg) rotateZ(-3deg); filter: drop-shadow(0 0 40px #00fff7); }
  40% { transform: scale(1.07) rotateY(-10deg) rotateZ(3deg); filter: drop-shadow(0 0 40px #ff00c8); }
  60% { transform: scale(1.11) rotateY(8deg) rotateZ(-2deg); filter: drop-shadow(0 0 56px #00ff00); }
  80% { transform: scale(1.08) rotateY(-8deg) rotateZ(2deg); filter: drop-shadow(0 0 56px #00fff7); }
  100% { transform: scale(1.05) rotateY(0deg) rotateZ(0deg); filter: drop-shadow(0 0 24px #00ff00); }
}
.gallery-card-cyber:hover .img-zoom-hover {
  animation: gallery-wow-tilt 1.2s cubic-bezier(.4,0,.2,1) infinite alternate;
  will-change: transform, filter;
}

/* Effets JS globaux cyber */
.cyber-flicker {
  animation: cyber-flicker 0.7s linear;
}
@keyframes cyber-flicker {
  0%,100% { opacity: 1; }
  10% { opacity: 0.7; }
  20% { opacity: 1; }
  30% { opacity: 0.5; }
  40% { opacity: 1; }
  50% { opacity: 0.8; }
  60% { opacity: 1; }
  70% { opacity: 0.6; }
  80% { opacity: 1; }
  90% { opacity: 0.9; }
}
.cyber-glow {
  animation: cyber-glow 1.2s infinite alternate;
}
@keyframes cyber-glow {
  0% { box-shadow: 0 0 8px #00ff00, 0 0 16px #00ff00; }
  100% { box-shadow: 0 0 32px #00ff00, 0 0 64px #00ff0044; }
}
.cyber-tilt {
  animation: cyber-tilt 0.5s cubic-bezier(.4,0,.2,1);
}
@keyframes cyber-tilt {
  0% { transform: rotateY(0deg); }
  20% { transform: rotateY(8deg); }
  40% { transform: rotateY(-8deg); }
  60% { transform: rotateY(6deg); }
  80% { transform: rotateY(-6deg); }
  100% { transform: rotateY(0deg); }
}
.cyber-shake {
  animation: cyber-shake 0.4s cubic-bezier(.4,0,.2,1);
}
@keyframes cyber-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* Effet 3D sur l'image principale de la section héros */
.img-3d-hover {
  transition: transform 0.5s cubic-bezier(.25,.8,.25,1), box-shadow 0.5s;
  will-change: transform;
  box-shadow: 0 8px 32px 0 rgba(0,255,0,0.15), 0 1.5px 8px 0 rgba(0,0,0,0.25);
  cursor: pointer;
}
.img-3d-hover:active {
  transform: scale(0.98);
}

/* Section Console Cybersec */
.console-cybersec-section {
  background: #0a0a0a;
}
.console-cybersec-container {
  box-shadow: 0 8px 32px 0 rgba(0,255,0,0.10), 0 1.5px 8px 0 rgba(0,0,0,0.25);
  border-radius: 1.2rem;
  overflow: hidden;
}
.console-cybersec-bar {
  background: #101010;
  border-bottom: 1px solid #00ff00;
  border-radius: 1.2rem 1.2rem 0 0;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}
.console-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #00ff00, 0 0 2px #00ff00;
}
.console-dot.bg-cyan-400 {
  box-shadow: 0 0 8px #22d3ee, 0 0 2px #22d3ee;
}
.console-dot.bg-fuchsia-400 {
  box-shadow: 0 0 8px #e879f9, 0 0 2px #e879f9;
}
.console-cybersec-body {
  background: #0a0a0a;
  color: #00ff00;
  font-family: 'JetBrains Mono', monospace;
  min-height: 180px;
  max-height: 340px;
  overflow-y: auto;
  border-radius: 0 0 0.8rem 0.8rem;
  box-shadow: 0 0 16px 0 #00ff0033;
  border-bottom: 1px solid #00ff00;
}
.console-cybersec-input-bar {
  background: #101010;
  border-radius: 0 0 1.2rem 1.2rem;
  border-top: 1px solid #00ff00;
}
.console-cybersec-input {
  background: transparent;
  color: #00ff00;
  font-family: 'JetBrains Mono', monospace;
  border: none;
  outline: none;
  font-size: 1.1rem;
  width: 100%;
}
.console-cybersec-body .text-cyan-400 {
  color: #22d3ee;
  text-shadow: 0 0 4px #22d3ee;
}
.console-cybersec-body .text-fuchsia-400 {
  color: #e879f9;
  text-shadow: 0 0 4px #e879f9;
}
.console-cybersec-body a {
  color: #e879f9;
  text-decoration: underline;
}

/* RESET styles console animée */
#console-cybersec-animated, #console-cybersec-animated .console-cybersec-container, #console-cybersec-animated .console-cybersec-bar, #console-cybersec-animated .console-cybersec-body, #console-cybersec-animated-body .console-line {
  all: unset;
  box-sizing: border-box;
}

/* Console minimaliste & pro */
#console-cybersec-animated {
  background: #0a0a0a;
  border-radius: 0.35rem;
  width: 100%;
  max-width: 540px;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  position: relative;
}
#console-cybersec-animated .console-cybersec-container {
  background: #0a0a0a;
  border-radius: 0.35rem;
  width: 100%;
  box-shadow: none;
  border: none;
  padding: 0;
}
#console-cybersec-animated .console-cybersec-bar {
  background: #111;
  border-radius: 0.35rem 0.35rem 0 0;
  min-height: 1.3rem;
  padding: 0.2rem 0.7rem 0.2rem 1.7rem;
  display: flex;
  align-items: center;
  font-size: 0.93em;
  color: #bdbdbd;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  position: relative;
  border-bottom: 1px solid #181818;
  transition: background 0.2s;
}
#console-cybersec-animated .console-cybersec-bar:hover {
  background: #181818;
}
#console-cybersec-animated .console-mac-dots {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 0.22rem;
}
#console-cybersec-animated .console-mac-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  display: inline-block;
  background: #222;
  border: 1px solid #191919;
  opacity: 0.7;
  transition: box-shadow 0.2s, background 0.2s;
}
#console-cybersec-animated .console-mac-dot.red { background: #ff5f56; }
#console-cybersec-animated .console-mac-dot.yellow { background: #ffbd2e; }
#console-cybersec-animated .console-mac-dot.green { background: #27c93f; }
#console-cybersec-animated .console-mac-dot:hover {
  box-shadow: 0 0 0 2px #fff2, 0 0 4px #fff2;
  opacity: 1;
}
#console-cybersec-animated .console-cybersec-body {
  background: #0a0a0a;
  border-radius: 0 0 0.35rem 0.35rem;
  min-height: 180px;
  max-height: 340px;
  padding: 0.7rem 1rem 0.7rem 1rem;
  overflow-y: auto;
  font-size: 1.01em;
  font-family: 'JetBrains Mono', monospace;
  color: #b6ffb6;
  scrollbar-width: thin;
  scrollbar-color: #222 #0a0a0a;
  transition: background 0.2s;
}
#console-cybersec-animated .console-cybersec-body:hover {
  background: #111;
}
#console-cybersec-animated-body .console-line {
  font-family: 'JetBrains Mono', monospace;
  color: #b6ffb6;
  background: transparent;
  border: none;
  box-shadow: none;
  text-shadow: none;
  white-space: pre;
  letter-spacing: 0.01em;
  font-size: 1.01em;
  position: relative;
  font-weight: 400;
  padding: 0;
  margin: 0;
  opacity: 0;
  animation: fadeInLine 0.5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes fadeInLine {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
#console-cybersec-animated-body .console-prompt-anim {
  color: #00ff00;
  font-weight: bold;
  margin-right: 0.2em;
  display: inline-block;
  position: relative;
  filter: none;
  /* Glitch effect */
  animation: glitch-prompt 1.2s infinite linear alternate-reverse;
}
@keyframes glitch-prompt {
  0% { text-shadow: 0 0 0 #00ff00, 0 0 0 #fff; }
  10% { text-shadow: 1px 0 #00ff00, -1px 0 #fff; }
  20% { text-shadow: -1px 0 #00ff00, 1px 0 #fff; }
  30% { text-shadow: 0 1px #00ff00, 0 -1px #fff; }
  40% { text-shadow: 0 -1px #00ff00, 0 1px #fff; }
  50% { text-shadow: 1px 1px #00ff00, -1px -1px #fff; }
  60% { text-shadow: -1px -1px #00ff00, 1px 1px #fff; }
  70% { text-shadow: 0 0 0 #00ff00, 0 0 0 #fff; }
  100% { text-shadow: 0 0 0 #00ff00, 0 0 0 #fff; }
}
#console-cybersec-animated-body .console-cursor {
  display: inline-block;
  width: 8px;
  height: 1.1em;
  background: none;
  color: #00ff00;
  font-weight: bold;
  vertical-align: middle;
  animation: blink 1s steps(1) infinite;
  margin-left: 1px;
}

@media (max-width: 640px) {
  #console-cybersec-animated {
    max-width: 99vw;
    border-radius: 0.25rem;
  }
  #console-cybersec-animated .console-cybersec-container {
    border-radius: 0.25rem;
  }
  #console-cybersec-animated .console-cybersec-bar {
    min-height: 1rem;
    padding: 0.08rem 0.3rem 0.08rem 1.1rem;
    font-size: 0.81em;
    border-radius: 0.25rem 0.25rem 0 0;
  }
  #console-cybersec-animated .console-mac-dot {
    width: 0.8rem !important;
    height: 0.8rem !important;
  }
  #console-cybersec-animated .console-mac-dots {
    gap: 0.13rem;
    left: 0.18rem;
  }
  #console-cybersec-animated .console-cybersec-body {
    min-height: 120px;
    max-height: 220px;
    padding: 0.3rem 0.2rem 0.3rem 0.2rem;
    font-size: 0.93em;
    border-radius: 0 0 0.25rem 0.25rem;
  }
  #console-cybersec-animated-body .console-line {
    font-size: 0.93em;
  }
  #console-cybersec-animated-body .console-prompt-anim {
    font-size: 1em;
  }
}

/* Effet glitch général au survol pour la section hero */
.hero-glitch-hover:hover {
  animation: glitch-text-hero 0.4s linear;
}
@keyframes glitch-text-hero {
  0% { text-shadow: none; transform: none; }
  15% { text-shadow: 2px 0 #00fff7, -2px 0 #ff3e00; transform: translate(-1px,1px); }
  30% { text-shadow: -2px 0 #00ff00, 2px 0 #ff3e00; transform: translate(1px,-1px); }
  45% { text-shadow: 2px 2px #00fff7, -2px -2px #ff3e00; transform: translate(-2px,2px); }
  60% { text-shadow: -2px -2px #00ff00, 2px 2px #ff3e00; transform: translate(2px,-2px); }
  75% { text-shadow: 1px 0 #00fff7, -1px 0 #ff3e00; transform: translate(-1px,1px); }
  100% { text-shadow: none; transform: none; }
}

/* --- NOUVEL EFFET CYBERPUNK/GAMER/PRO POUR LE TITRE HERO --- */
.hero-title-glitch {
  position: relative;
  color: #00ff00;
  text-shadow:
    0 0 4px #00ff00,
    0 0 8px #00fff7,
    0 0 10px #ff00ea,
    0 0 5px #22d3ee,
    0 0 7px #ff4ecd,
    0 0 8px #ff3e00;
  animation: hero-title-pulse 2.2s infinite cubic-bezier(.4,0,.2,1), hero-title-shake 1.7s infinite linear;
  overflow: visible;
  filter: saturate(0.7) brightness(0.95);
}
.hero-title-glitch .scanline {
  position: absolute;
  left: -10%;
  top: 0;
  width: 120%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, #fff 40%, #00fff7 50%, #ff00ea 60%, transparent 100%);
  opacity: 0.13;
  filter: blur(1.5px) brightness(1.7);
  mix-blend-mode: lighten;
  animation: hero-title-scanline-new 2.8s linear infinite;
  z-index: 10;
}
.hero-title-glitch:hover .scanline {
  animation-duration: 0.7s;
  opacity: 0.22;
  filter: blur(0.7px) brightness(2.2);
}
.hero-title-glitch:hover {
  text-shadow:
    0 0 8px #00ff00,
    0 0 12px #00fff7,
    0 0 14px #ff00ea,
    0 0 8px #22d3ee,
    0 0 10px #ff4ecd,
    0 0 12px #ff3e00;
  animation: hero-title-pulse 0.7s infinite cubic-bezier(.4,0,.2,1), hero-title-shake 0.3s infinite linear;
  filter: brightness(1.08) saturate(0.85);
  transition: filter 0.1s, text-shadow 0.1s;
}
@keyframes hero-title-pulse {
  0% { color: #00ff00; filter: brightness(0.98) saturate(0.7); }
  20% { color: #00fff7; filter: brightness(1.05) saturate(0.8); }
  40% { color: #ff00ea; filter: brightness(1.01) saturate(0.7); }
  60% { color: #22d3ee; filter: brightness(0.98) saturate(0.7); }
  80% { color: #ff4ecd; filter: brightness(1.05) saturate(0.8); }
  100% { color: #00ff00; filter: brightness(0.98) saturate(0.7); }
}
@keyframes hero-title-shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-1.5px); }
  20% { transform: translateX(1.5px); }
  30% { transform: translateX(-1px); }
  40% { transform: translateX(1px); }
  50% { transform: translateX(-0.5px); }
  60% { transform: translateX(0.5px); }
  70% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
  90% { transform: translateX(-0.5px); }
}
@keyframes hero-title-scanline-new {
  0% { left: -10%; opacity: 0.13; }
  40% { left: 40%; opacity: 0.18; }
  50% { left: 60%; opacity: 0.22; }
  60% { left: 80%; opacity: 0.18; }
  100% { left: 120%; opacity: 0.13; }
}

/* Scanline et flash cyberpunk */
.hero-title-glitch::after {
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, #00ff0033 3px, #ff3e0033 4px, #22d3ee33 5px, #ff4ecd33 6px, #00bfff33 7px, transparent 8px);
  mix-blend-mode: lighten;
}
.hero-title-glitch.flash {
  animation: hero-title-flash 0.15s steps(1, end) infinite alternate;
}
@keyframes hero-title-flash {
  0% { opacity: 1; }
  50% { opacity: 0.7; filter: brightness(1.7) blur(1.5px); }
  100% { opacity: 1; }
}

/* Effets de survol cyberpunk/hacker/moderne sur tous les éléments interactifs */

/* Boutons principaux */
button, .neon-button, .orange-button, .anim-btn, .calendar-btn-cyber {
  transition: box-shadow 0.18s, filter 0.18s, transform 0.13s, background 0.18s, color 0.18s;
}
button:hover, .neon-button:hover, .orange-button:hover, .anim-btn:hover, .calendar-btn-cyber:hover {
  box-shadow: 0 0 16px #00fff7, 0 0 24px #ff00ea, 0 0 12px #00ff00, 0 0 8px #ff3e00;
  filter: brightness(1.15) saturate(1.3);
  transform: translateY(-2px) scale(1.03) skewX(-2deg);
}

/* Cartes (cards) */
.anim-card, .about-mission-card, .calendar-btn-cyber, .group {
  transition: box-shadow 0.18s, filter 0.18s, transform 0.13s, border-color 0.18s;
}
.anim-card:hover, .about-mission-card:hover, .calendar-btn-cyber:hover, .group:hover {
  box-shadow: 0 0 32px #00fff7, 0 0 40px #ff00ea, 0 0 24px #00ff00, 0 0 16px #ff3e00;
  filter: brightness(1.12) saturate(1.2);
  border-color: #00fff7 !important;
  transform: scale(1.025) skewY(-1deg);
}

/* Titres et sous-titres */
.anim-title, h1, h2, h3, h4, h5, h6 {
  transition: text-shadow 0.18s, color 0.18s, filter 0.18s, transform 0.13s;
  cursor: pointer;
}
.anim-title:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
  text-shadow: 0 0 12px #00fff7, 0 0 18px #ff00ea, 0 0 8px #00ff00, 0 0 6px #ff3e00;
  color: #00fff7;
  filter: brightness(1.2) saturate(1.2);
  transform: translateX(-2px) scale(1.01);
}

/* Liens */
a, .anim-list, .underline {
  transition: color 0.18s, text-shadow 0.18s, border-color 0.18s, filter 0.18s;
  position: relative;
}
a:hover, .anim-list:hover, .underline:hover {
  color: #ff00ea !important;
  text-shadow: 0 0 8px #00fff7, 0 0 12px #ff00ea;
  filter: brightness(1.15) saturate(1.2);
}
a::after, .underline::after {
  content: '';
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, #00ff00, #00fff7, #ff00ea, #ff3e00);
  opacity: 0;
  transition: opacity 0.18s;
}
a:hover::after, .underline:hover::after {
  opacity: 1;
}

/* Icônes */
.ri-*, .icon-box {
  transition: color 0.18s, filter 0.18s, text-shadow 0.18s;
}
.ri-*:hover, .icon-box:hover {
  color: #ff00ea !important;
  filter: brightness(1.3) drop-shadow(0 0 8px #00fff7);
  text-shadow: 0 0 8px #00fff7, 0 0 12px #ff00ea;
}

/* Scanline/flash sur les cards au hover */
.anim-card:hover::before, .about-mission-card:hover::before {
  content: '';
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, #fff 50%, transparent 100%);
  opacity: 0.08;
  pointer-events: none;
  animation: card-scanline 0.7s linear;
  z-index: 20;
}
@keyframes card-scanline {
  0% { opacity: 0.08; left: -100%; }
  50% { opacity: 0.18; left: 50%; }
  100% { opacity: 0.08; left: 100%; }
}

/* === Nouvelle section vidéo cyberpunk minimaliste === */
.cyber-video-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 48px 0 32px 0;
  background: none;
}
.cyber-video-container {
  position: relative;
  width: 560px;
  max-width: 96vw;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 32px #00fff7, 0 0 64px #ff00ea33;
  background: linear-gradient(120deg, #0a0a0a 80%, #1a1a1a 100%);
  border: 3px solid #00fff7;
  transition: box-shadow 0.3s, border-color 0.3s;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cyber-video-container:hover {
  box-shadow: 0 0 48px #00fff7, 0 0 96px #ff00ea66;
  border-color: #ff00ea;
}
#cyber-video {
  width: 100%;
  display: block;
  background: #000;
  filter: brightness(0.95) contrast(1.08);
  max-height: 340px;
  object-fit: cover;
}
.cyber-video-title {
  position: absolute;
  top: 18px;
  left: 24px;
  color: #fff;
  font-family: 'Orbitron', 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px #00fff7, 0 0 16px #ff00ea;
  background: rgba(10,10,20,0.55);
  padding: 6px 18px 6px 12px;
  border-radius: 8px;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
.cyber-video-scanline {
  pointer-events: none;
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, rgba(0,255,247,0.08) 2px,
    transparent 4px, transparent 8px
  );
  mix-blend-mode: lighten;
  opacity: 0.18;
  z-index: 2;
  animation: cyber-video-scanline-move 2.5s linear infinite;
}
@keyframes cyber-video-scanline-move {
  0% { background-position-y: 0; }
  100% { background-position-y: 16px; }
}
.cyber-video-playpause {
  position: absolute;
  bottom: 18px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: rgba(10,10,20,0.7);
  border: 2px solid #00fff7;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
  box-shadow: 0 0 8px #00fff7, 0 0 16px #ff00ea44;
  transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
  opacity: 0.92;
}
.cyber-video-playpause:hover {
  box-shadow: 0 0 24px #00fff7, 0 0 32px #ff00ea;
  border-color: #ff00ea;
  background: rgba(10,10,40,0.95);
}
.icon-play, .icon-pause {
  display: none;
  width: 22px;
  height: 22px;
}
.icon-play {
  border-style: solid;
  border-width: 11px 0 11px 20px;
  border-color: transparent transparent transparent #00fff7;
  margin-left: 4px;
}
.icon-pause {
  width: 18px;
  height: 22px;
  position: relative;
}
.icon-pause::before, .icon-pause::after {
  content: '';
  position: absolute;
  top: 0;
  width: 6px;
  height: 22px;
  background: #ff00ea;
  border-radius: 2px;
}
.icon-pause::before { left: 0; }
.icon-pause::after { right: 0; }
/* Affichage dynamique via JS */
.cyber-video-playpause.playing .icon-pause { display: block; }
.cyber-video-playpause:not(.playing) .icon-play { display: block; }

@media (max-width: 700px) {
  .cyber-video-container { width: 98vw; min-width: 0; border-radius: 10px; }
  #cyber-video { max-height: 200px; }
  .cyber-video-title { font-size: 0.98rem; left: 10px; top: 10px; padding: 4px 10px 4px 8px; }
  .cyber-video-playpause { right: 10px; bottom: 10px; width: 38px; height: 38px; }
}

/* Ajout : Effet de zoom sur la vidéo lors de la lecture */
#cyber-video.is-playing {
  transform: scale(1.045);
  box-shadow: 0 0 48px #00fff7, 0 0 96px #ff00ea66, 0 0 0 4px #00fff7, 0 0 0 8px #ff00ea22;
  z-index: 2;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1), box-shadow 0.5s;
}

/* Centrage vertical/horizontal de la vidéo dans le cadre */
.cyber-video-container video {
  margin: 0 auto;
  display: block;
}