/**
 * Module Animations CSS - Opified Vitrine
 * Animations distinctes pour chaque module
 *
 * Classes:
 * - .anim-opiclaim : Audit de conformité + scan
 * - .anim-opilex   : Base de données + loupe
 * - .anim-opilaunch: Packaging + validation
 * - .anim-opimarket: Graphique + optimisation
 * - .anim-opicheck : Scanner circulaire + checkmarks
 * - .anim-opiagent : Bulles de dialogue + noyau IA pulsant
 * - .anim-opiform  : Documents empilés + connexions
 * - .anim-opiscan  : Radar sweep + points détectés
 */

/* ============================================
   VARIABLES & BASE
   ============================================ */
:root {
  --anim-primary: #10b981;
  --anim-primary-light: #34d399;
  --anim-primary-glow: rgba(16, 185, 129, 0.4);
  --anim-secondary: #f59e0b;
  --anim-danger: #ef4444;
  --anim-speed: 1;
}

.module-anim-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  overflow: hidden;
}

.module-anim-label {
  margin-top: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--anim-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.9;
}

.module-anim-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

/* ============================================
   OPICLAIM - Audit + scan
   ============================================ */
.anim-opiclaim {
  position: relative;
  width: 150px;
  height: 120px;
}

.opiclaim-sheet {
  position: absolute;
  width: 110px;
  height: 120px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.opiclaim-sheet::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  height: 6px;
  background: var(--anim-primary);
  border-radius: 4px;
  opacity: 0.8;
}

.opiclaim-sheet::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 30px;
  bottom: 18px;
  background: repeating-linear-gradient(
    to bottom,
    #e5e7eb 0px,
    #e5e7eb 4px,
    transparent 4px,
    transparent 12px
  );
}

.opiclaim-scanline {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 90px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--anim-primary), transparent);
  animation: opiclaim-scan 2.8s ease-in-out infinite;
}

.opiclaim-stamp {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--anim-primary);
  box-shadow: 0 0 10px var(--anim-primary-glow);
  opacity: 0;
  transform: scale(0.8) rotate(-10deg);
  animation: opiclaim-stamp 2.8s ease-in-out infinite;
}

.opiclaim-stamp::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 16px;
  border: solid var(--anim-primary);
  border-width: 0 3px 3px 0;
  left: 11px;
  top: 6px;
  transform: rotate(45deg);
}

@keyframes opiclaim-scan {
  0%, 100% { opacity: 0; transform: translate(-50%, 0) scaleX(0.3); }
  35% { opacity: 1; transform: translate(-50%, 55px) scaleX(1); }
  70% { opacity: 0.8; transform: translate(-50%, 90px) scaleX(0.8); }
}

@keyframes opiclaim-stamp {
  0%, 50% { opacity: 0; transform: scale(0.7) rotate(-15deg); }
  60% { opacity: 1; transform: scale(1.05) rotate(-6deg); }
  85% { opacity: 1; transform: scale(1) rotate(-6deg); }
  100% { opacity: 0; transform: scale(0.95) rotate(-10deg); }
}

/* ============================================
   OPILEX - Base de données + loupe
   ============================================ */
.anim-opilex {
  position: relative;
  width: 150px;
  height: 120px;
}

.opilex-db {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 110px;
  height: 18px;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  transform: translateX(-50%);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  animation: opilex-stack 3.6s ease-in-out infinite;
}

.opilex-db:nth-child(2) { top: 40px; animation-delay: 0.3s; }
.opilex-db:nth-child(3) { top: 68px; animation-delay: 0.6s; }

.opilex-db::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 5px;
  width: 26px;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--anim-primary), transparent);
  opacity: 0.6;
}

.opilex-lens {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--anim-primary);
  box-shadow: 0 0 12px var(--anim-primary-glow);
  transform: rotate(-15deg);
  animation: opilex-scan 3.6s ease-in-out infinite;
}

.opilex-lens::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 4px;
  background: var(--anim-primary);
  right: -10px;
  bottom: -2px;
  border-radius: 4px;
}

@keyframes opilex-stack {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.03); }
}

@keyframes opilex-scan {
  0%, 30% { transform: translate(-10px, 8px) rotate(-20deg); opacity: 0.6; }
  50% { transform: translate(-4px, -6px) rotate(0deg); opacity: 1; }
  80%, 100% { transform: translate(-12px, 12px) rotate(-15deg); opacity: 0.7; }
}

/* ============================================
   OPILAUNCH - Packaging + validation
   ============================================ */
.anim-opilaunch {
  position: relative;
  width: 150px;
  height: 120px;
}

.opilaunch-box {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 110px;
  height: 80px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  border: 1px solid #e2e8f0;
  transform: translateX(-50%);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.opilaunch-box::before,
.opilaunch-box::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  height: 6px;
  border-radius: 4px;
  background: #e2e8f0;
}

.opilaunch-box::before { top: 18px; }
.opilaunch-box::after { top: 34px; width: 60%; }

.opilaunch-corners {
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  border: 1px dashed rgba(16, 185, 129, 0.35);
  animation: opilaunch-scan 2.6s ease-in-out infinite;
}

.opilaunch-check {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--anim-primary);
  box-shadow: 0 0 14px var(--anim-primary-glow);
  opacity: 0;
  transform: scale(0.6);
  animation: opilaunch-check 2.6s ease-in-out infinite;
}

.opilaunch-check::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 9px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

@keyframes opilaunch-scan {
  0%, 100% { opacity: 0.4; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.02); }
}

@keyframes opilaunch-check {
  0%, 50% { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.05); }
  85% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}

/* ============================================
   OPIMARKET - Graphique + optimisation
   ============================================ */
.anim-opimarket {
  position: relative;
  width: 150px;
  height: 120px;
}

.opimarket-chart {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 120px;
  height: 80px;
  transform: translateX(-50%);
  border-radius: 14px;
  background: white;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  padding: 14px 12px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.opimarket-bar {
  width: 16px;
  background: linear-gradient(180deg, var(--anim-primary), #34d399);
  border-radius: 6px 6px 4px 4px;
  transform-origin: bottom;
  animation: opimarket-bars 2.8s ease-in-out infinite;
}

.opimarket-bar:nth-child(2) { height: 28px; animation-delay: 0.2s; }
.opimarket-bar:nth-child(3) { height: 40px; animation-delay: 0.4s; }
.opimarket-bar:nth-child(4) { height: 52px; animation-delay: 0.6s; }

.opimarket-line {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 34px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--anim-primary), transparent);
  animation: opimarket-line 2.8s ease-in-out infinite;
}

.opimarket-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--anim-primary);
  box-shadow: 0 0 8px var(--anim-primary-glow);
  animation: opimarket-node 2.8s ease-in-out infinite;
}

.opimarket-node.node-1 { left: 32px; top: 46px; animation-delay: 0.1s; }
.opimarket-node.node-2 { left: 58px; top: 40px; animation-delay: 0.3s; }
.opimarket-node.node-3 { left: 84px; top: 34px; animation-delay: 0.5s; }
.opimarket-node.node-4 { left: 102px; top: 28px; animation-delay: 0.7s; }

@keyframes opimarket-bars {
  0%, 100% { transform: scaleY(0.9); opacity: 0.7; }
  50% { transform: scaleY(1.1); opacity: 1; }
}

@keyframes opimarket-line {
  0%, 100% { opacity: 0.2; transform: translateY(6px); }
  50% { opacity: 1; transform: translateY(0); }
}

@keyframes opimarket-node {
  0%, 100% { transform: scale(0.7); opacity: 0.4; }
  50% { transform: scale(1); opacity: 1; }
}

/* ============================================
   OPICHECK - Scanner circulaire + checkmarks
   Animation : cercle rotatif + lignes de scan + checks
   ============================================ */
.anim-opicheck {
  position: relative;
  width: 140px;
  height: 140px;
}

/* Cercle externe */
.anim-opicheck::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  border: 2px solid rgba(16, 185, 129, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Cercle interne tournant */
.anim-opicheck::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border: 2px dashed rgba(16, 185, 129, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: opicheck-rotate 8s linear infinite;
}

@keyframes opicheck-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Scanner central */
.opicheck-scanner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78px;
  height: 78px;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), transparent);
  border: 1px solid rgba(16, 185, 129, 0.2);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* Ligne de scan horizontale */
.opicheck-scanline {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, var(--anim-primary), transparent);
  animation: opicheck-scan 2s ease-in-out infinite;
}

@keyframes opicheck-scan {
  0%, 100% { transform: translate(-50%, -50%) scaleX(0.3); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) scaleX(1); opacity: 1; }
}

/* Checkmarks */
.opicheck-check {
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--anim-primary);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  box-shadow: 0 6px 16px var(--anim-primary-glow);
}

.opicheck-check::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.opicheck-check:nth-child(2) {
  top: 15px;
  right: 20px;
  animation: opicheck-pop 3s ease-out infinite;
  animation-delay: 0.5s;
}

.opicheck-check:nth-child(3) {
  bottom: 25px;
  left: 15px;
  animation: opicheck-pop 3s ease-out infinite;
  animation-delay: 1s;
}

.opicheck-check:nth-child(4) {
  bottom: 15px;
  right: 25px;
  animation: opicheck-pop 3s ease-out infinite;
  animation-delay: 1.5s;
}

@keyframes opicheck-pop {
  0%, 20% { opacity: 0; transform: scale(0); }
  30%, 80% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(0.8); }
}

/* Mini cartes type agentia */
.opicheck-card {
  position: absolute;
  left: 50%;
  width: 112px;
  height: 42px;
  background: white;
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.12);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  transform: translateX(-50%) scale(0.9);
  opacity: 0;
}

.opicheck-card:nth-of-type(3) { /* first card after scanline */
  top: 16%;
  animation: opicheck-card 3s ease-in-out infinite;
}

.opicheck-card:nth-of-type(4) {
  bottom: 14%;
  animation: opicheck-card 3s ease-in-out infinite;
  animation-delay: 0.4s;
}

.opicheck-card::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  height: 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.4);
}

.opicheck-card::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 35px;
  top: 22px;
  height: 4px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.18);
}

@keyframes opicheck-card {
  0%, 15% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.9); }
  25%, 75% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  90%, 100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.94); }
}

/* ============================================
   OPIAGENT - Bulles de dialogue + noyau IA
   Animation : noyau pulsant + bulles connectées
   ============================================ */
.anim-opiagent {
  position: relative;
  width: 140px;
  height: 120px;
}

/* Noyau central IA */
.opiagent-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--anim-primary), #059669);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px var(--anim-primary-glow);
  animation: opiagent-pulse 2s ease-in-out infinite;
}

@keyframes opiagent-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 20px var(--anim-primary-glow);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 35px var(--anim-primary-glow);
  }
}

/* Icône IA dans le noyau */
.opiagent-core::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: white;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect x='4' y='8' width='16' height='12' rx='2'/%3E%3Cpath d='M8 12h.01M12 12h.01M16 12h.01'/%3E%3C/svg%3E");
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect x='4' y='8' width='16' height='12' rx='2'/%3E%3Cpath d='M8 12h.01M12 12h.01M16 12h.01'/%3E%3C/svg%3E");
}

/* Bulles de dialogue */
.opiagent-bubble {
  position: absolute;
  background: white;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 6px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  opacity: 0;
}

.opiagent-bubble::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  top: 6px;
  left: 8px;
  right: 8px;
  background: rgba(16, 185, 129, 0.4);
  border-radius: 2px;
}

.opiagent-bubble::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 3px;
  top: 14px;
  left: 8px;
  background: rgba(16, 185, 129, 0.2);
  border-radius: 2px;
}

.opiagent-bubble:nth-child(2) {
  top: 5px;
  left: 10px;
  width: 45px;
  height: 28px;
  animation: opiagent-bubble-left 4s ease-out infinite;
}

.opiagent-bubble:nth-child(3) {
  top: 10px;
  right: 5px;
  width: 50px;
  height: 28px;
  animation: opiagent-bubble-right 4s ease-out infinite;
  animation-delay: 1s;
}

.opiagent-bubble:nth-child(4) {
  bottom: 5px;
  left: 20px;
  width: 40px;
  height: 24px;
  animation: opiagent-bubble-left 4s ease-out infinite;
  animation-delay: 2s;
}

/* Lignes de connexion */
.opiagent-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--anim-primary), transparent);
  opacity: 0;
}

.opiagent-line:nth-child(5) {
  top: 35px;
  left: 55px;
  width: 15px;
  transform: rotate(-30deg);
  animation: opiagent-line 4s ease-out infinite;
}

.opiagent-line:nth-child(6) {
  top: 40px;
  right: 50px;
  width: 15px;
  transform: rotate(30deg);
  animation: opiagent-line 4s ease-out infinite;
  animation-delay: 1s;
}

@keyframes opiagent-bubble-left {
  0%, 10% { opacity: 0; transform: translateX(10px) scale(0.8); }
  20%, 70% { opacity: 1; transform: translateX(0) scale(1); }
  80%, 100% { opacity: 0; transform: translateX(-5px) scale(0.9); }
}

@keyframes opiagent-bubble-right {
  0%, 10% { opacity: 0; transform: translateX(-10px) scale(0.8); }
  20%, 70% { opacity: 1; transform: translateX(0) scale(1); }
  80%, 100% { opacity: 0; transform: translateX(5px) scale(0.9); }
}

@keyframes opiagent-line {
  0%, 15% { opacity: 0; }
  25%, 65% { opacity: 0.6; }
  75%, 100% { opacity: 0; }
}

/* ============================================
   OPIFORM - Documents empilés + connexions
   Animation : cartes générées + lignes de liaison
   ============================================ */
.anim-opiform {
  position: relative;
  width: 120px;
  height: 140px;
}

/* Documents empilés */
.opiform-doc {
  position: absolute;
  width: 70px;
  height: 90px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  left: 50%;
  opacity: 0;
}

/* Ligne de titre verte */
.opiform-doc::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 10px;
  right: 10px;
  height: 4px;
  background: var(--anim-primary);
  border-radius: 2px;
}

/* Lignes de texte */
.opiform-doc::after {
  content: '';
  position: absolute;
  top: 24px;
  left: 10px;
  right: 10px;
  bottom: 15px;
  background: repeating-linear-gradient(
    to bottom,
    #e5e7eb 0px,
    #e5e7eb 3px,
    transparent 3px,
    transparent 10px
  );
}

.opiform-doc:nth-child(1) {
  z-index: 3;
  transform: translateX(-50%) rotate(-3deg);
  animation: opiform-slide 4s ease-out infinite;
}

.opiform-doc:nth-child(2) {
  z-index: 2;
  transform: translateX(-50%) rotate(2deg) translateY(8px);
  animation: opiform-slide 4s ease-out infinite;
  animation-delay: 0.3s;
}

.opiform-doc:nth-child(3) {
  z-index: 1;
  transform: translateX(-50%) rotate(-1deg) translateY(16px);
  animation: opiform-slide 4s ease-out infinite;
  animation-delay: 0.6s;
}

@keyframes opiform-slide {
  0% { opacity: 0; transform: translateX(-50%) translateY(-20px) rotate(0deg); }
  15%, 75% { opacity: 1; }
  20% { transform: translateX(-50%) translateY(0) rotate(-3deg); }
  85%, 100% { opacity: 0; transform: translateX(-50%) translateY(10px) rotate(-3deg); }
}

/* Points de connexion */
.opiform-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--anim-primary);
  border-radius: 50%;
  opacity: 0;
}

.opiform-dot:nth-child(4) {
  top: 30px;
  right: 15px;
  animation: opiform-dot 4s ease-out infinite;
  animation-delay: 1s;
}

.opiform-dot:nth-child(5) {
  bottom: 40px;
  right: 10px;
  animation: opiform-dot 4s ease-out infinite;
  animation-delay: 1.3s;
}

/* Lignes de connexion */
.opiform-line {
  position: absolute;
  width: 20px;
  height: 1px;
  background: var(--anim-primary);
  opacity: 0;
  right: 5px;
}

.opiform-line:nth-child(6) {
  top: 33px;
  animation: opiform-line 4s ease-out infinite;
  animation-delay: 1.1s;
}

.opiform-line:nth-child(7) {
  bottom: 42px;
  animation: opiform-line 4s ease-out infinite;
  animation-delay: 1.4s;
}

@keyframes opiform-dot {
  0%, 20% { opacity: 0; transform: scale(0); }
  30%, 70% { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(0.5); }
}

@keyframes opiform-line {
  0%, 25% { opacity: 0; transform: scaleX(0); }
  35%, 65% { opacity: 0.6; transform: scaleX(1); }
  75%, 100% { opacity: 0; transform: scaleX(0); }
}

/* ============================================
   OPISCAN - Radar sweep + points détectés
   Animation : balayage radar + alertes
   ============================================ */
.anim-opiscan {
  position: relative;
  width: 140px;
  height: 140px;
}

/* Cercles du radar */
.opiscan-circle {
  position: absolute;
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 50%;
  top: 50%;
  left: 50%;
}

.opiscan-circle:nth-child(1) {
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
}

.opiscan-circle:nth-child(2) {
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
}

.opiscan-circle:nth-child(3) {
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
}

/* Centre du radar */
.opiscan-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--anim-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px var(--anim-primary-glow);
}

/* Ligne de balayage */
.opiscan-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--anim-primary), transparent);
  transform-origin: left center;
  animation: opiscan-rotate 3s linear infinite;
}

@keyframes opiscan-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Trainée du sweep */
.opiscan-trail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(16, 185, 129, 0.15) 30deg,
    transparent 60deg
  );
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: opiscan-rotate 3s linear infinite;
}

/* Points détectés (alertes) */
.opiscan-alert {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--anim-secondary);
  border-radius: 50%;
  opacity: 0;
  animation: opiscan-blink 3s ease-in-out infinite;
}

.opiscan-alert:nth-child(7) {
  top: 25%;
  left: 65%;
  animation-delay: 0.5s;
}

.opiscan-alert:nth-child(8) {
  top: 60%;
  left: 25%;
  animation-delay: 1.5s;
}

.opiscan-alert:nth-child(9) {
  top: 35%;
  left: 30%;
  animation-delay: 2.2s;
}

@keyframes opiscan-blink {
  0%, 20% { opacity: 0; transform: scale(0.5); }
  30%, 70% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px var(--anim-secondary); }
  80%, 100% { opacity: 0; transform: scale(0.5); }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
.dark .opiagent-bubble,
.dark .opiform-doc,
.dark .opiclaim-sheet,
.dark .opimarket-chart,
.dark .opilaunch-box {
  background: #1e293b;
  border-color: #334155;
}

.dark .opiform-doc::after,
.dark .opiclaim-sheet::after {
  background: repeating-linear-gradient(
    to bottom,
    #475569 0px,
    #475569 3px,
    transparent 3px,
    transparent 10px
  );
}

.dark .opilex-db {
  background: #1e293b;
  border-color: #334155;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
  .module-anim-container {
    min-height: 160px;
    padding: 20px 15px;
  }

  .anim-opiclaim,
  .anim-opilex,
  .anim-opilaunch,
  .anim-opimarket,
  .anim-opicheck,
  .anim-opiagent,
  .anim-opiform,
  .anim-opiscan {
    transform: scale(0.85);
  }
}

/* ============================================
   SECTEURS - Cards animation
   Animations subtiles pour la section Secteurs
   ============================================ */

/* Animation icônes - pulse doux */
.sector-icon-pulse {
  animation: sector-pulse 3s ease-in-out infinite;
}

.sector-icon-pulse:nth-child(2) { animation-delay: 0.5s; }
.sector-icon-pulse:nth-child(3) { animation-delay: 1s; }
.sector-icon-pulse:nth-child(4) { animation-delay: 1.5s; }

@keyframes sector-pulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.9;
  }
  50% { 
    transform: scale(1.08);
    opacity: 1;
  }
}

/* Carte secteur - hover élégant */
.sector-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sector-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(16, 185, 129, 0.12), 
              0 8px 16px rgba(0, 0, 0, 0.06);
}

.sector-card:hover .sector-icon-pulse {
  animation: none;
  transform: scale(1.15);
  color: var(--anim-primary);
}

/* Bordure animée au hover */
.sector-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.sector-card:hover::before {
  background: linear-gradient(135deg, var(--anim-primary), var(--anim-primary-light));
  opacity: 1;
}

/* Apparition au scroll - fade in up */
.sector-fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: sector-appear 0.7s ease-out forwards;
}

.sector-fade-in:nth-child(1) { animation-delay: 0.1s; }
.sector-fade-in:nth-child(2) { animation-delay: 0.2s; }
.sector-fade-in:nth-child(3) { animation-delay: 0.3s; }
.sector-fade-in:nth-child(4) { animation-delay: 0.4s; }

@keyframes sector-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glow subtil sur icône */
.sector-glow {
  position: relative;
}

.sector-glow::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--anim-primary-glow) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.sector-card:hover .sector-glow::after {
  opacity: 0.6;
}

/* ============================================
   SECTEURS V2 - Animation plus visible
   ============================================ */

/* Icône flottante continue */
.sector-float-icon {
  animation: sector-float 3s ease-in-out infinite !important;
}

@keyframes sector-float {
  0%, 100% { 
    transform: translateY(0) scale(1);
  }
  50% { 
    transform: translateY(-8px) scale(1.05);
  }
}

/* Halo pulsant derrière l'icône */
.sector-halo {
  position: relative;
}

.sector-halo::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, transparent 70%);
  animation: sector-halo-pulse 2.5s ease-in-out infinite;
  z-index: -1;
}

@keyframes sector-halo-pulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.4;
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.8;
  }
}

/* Bordure qui tourne */
.sector-border-spin {
  position: relative;
  overflow: hidden;
}

.sector-border-spin::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(16, 185, 129, 0.3),
    transparent,
    transparent
  );
  border-radius: inherit;
  animation: sector-spin 4s linear infinite;
  z-index: -1;
}

@keyframes sector-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Point qui pulse dans le coin */
.sector-dot-pulse::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  background: var(--anim-primary);
  border-radius: 50%;
  animation: sector-dot 2s ease-in-out infinite;
}

@keyframes sector-dot {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% { 
    transform: scale(1.2);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
}