@keyframes particleFloat{0%,100%{background-position:0% 0%,100% 100%,50% 50%,0% 100%,100% 0%,33% 66%,10% 90%}50%{background-position:100% 100%,0% 0%,75% 25%,100% 0%,0% 100%,66% 33%,90% 10%}}.et_pb_button{background-color:#2563EB!important;background:#2563EB!important;color:#FFFFFF!important;border:none!important;opacity:1!important}.et_pb_button:hover{background-color:#1D4ED8!important;background:#1D4ED8!important;color:#FFFFFF!important;opacity:1!important}@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Inter:wght@300;400;500;600;700&display=swap');```---## 📋 **RÉCAPITULATIF COMPLET**
Voici ce que tu dois faire **dans l'ordre** :

### **ÉTAPE 1 : Importer les fonts**
```
WordPress Admin → Divi → Options du thème → CSS personnalisé

/* ============================================
   D-SIGN DEV - DUAL THEME (LIGHT + DARK)
   Compatible avec WP Dark Mode plugin
   ============================================ */

/* ----- VARIABLES GLOBALES ----- */

/* Light Mode (défaut) */
:root,
body:not(.wp-dark-mode-active) {
  --primary: #00D9FF;
  --secondary: #8B5CF6;
  --background: #FFFFFF;
  --surface: #F8F9FA;
  --text: #1A1A1A;
  --text-secondary: #6B7280;
  --border: #E5E7EB;
  --shadow: rgba(0, 0, 0, 0.1);
}

/* Dark Mode (avec plugin WP Dark Mode) */
body.wp-dark-mode-active {
  --primary: #00D9FF;
  --secondary: #8B5CF6;
  --background: #0A0A0F;
  --surface: #1E1E2E;
  --text: #FFFFFF;
  --text-secondary: #A0AEC0;
  --border: #8B5CF6;
  --shadow: rgba(0, 217, 255, 0.3);
}

/* ----- STYLES DE BASE ----- */

body {
  background: var(--background);
  color: var(--text);
  transition: background 0.3s ease, color 0.3s ease;
}

/* ----- HEADER ----- */

#main-header {
  background: var(--background);
  border-bottom: 1px solid var(--border);
  transition: all 0.3s ease;
}

/* Logo */
.logo_container img {
  transition: filter 0.3s ease;
}

body.wp-dark-mode-active .logo_container img {
  filter: drop-shadow(0 0 10px var(--primary));
}

/* Navigation */
#top-menu li a {
  color: var(--text) !important;
  transition: all 0.3s ease;
}

#top-menu li a:hover {
  color: var(--primary) !important;
}

body.wp-dark-mode-active #top-menu li a:hover {
  text-shadow: 0 0 10px var(--primary);
}

/* ----- HERO SECTION ----- */

.et_pb_section_0 {
  background: var(--background);
  transition: background 0.3s ease;
}

/* Dark Mode uniquement : gradient néon */
body.wp-dark-mode-active .et_pb_section_0 {
  background: linear-gradient(135deg, #00D9FF 0%, #8B5CF6 100%) !important;
  position: relative;
}

/* Overlay texture cyberpunk (dark mode only) */
body.wp-dark-mode-active .et_pb_section_0::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,217,255,0.03) 2px, rgba(0,217,255,0.03) 4px);
  pointer-events: none;
}

/* ----- BOUTONS CTA ----- */

.et_pb_button {
  background: transparent !important;
  border: 2px solid var(--primary) !important;
  color: var(--primary) !important;
  transition: all 0.3s ease;
}

.et_pb_button:hover {
  background: var(--primary) !important;
  color: var(--background) !important;
  transform: translateY(-2px);
}

/* Light Mode : ombre douce */
body:not(.wp-dark-mode-active) .et_pb_button {
  box-shadow: 0 4px 12px rgba(0, 217, 255, 0.2);
}

body:not(.wp-dark-mode-active) .et_pb_button:hover {
  box-shadow: 0 8px 20px rgba(0, 217, 255, 0.3);
}

/* Dark Mode : glow néon */
body.wp-dark-mode-active .et_pb_button {
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
}

body.wp-dark-mode-active .et_pb_button:hover {
  box-shadow: 0 0 30px rgba(0, 217, 255, 0.8);
  animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 30px rgba(0, 217, 255, 0.8); }
  50% { box-shadow: 0 0 40px rgba(0, 217, 255, 1); }
}

/* ----- CARTES SERVICES (WHAT WE DO) ----- */

.et_pb_blurb {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  padding: 40px 30px;
  transition: all 0.3s ease;
}

/* Light Mode : ombre douce */
body:not(.wp-dark-mode-active) .et_pb_blurb {
  box-shadow: 0 2px 8px var(--shadow);
}

body:not(.wp-dark-mode-active) .et_pb_blurb:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(0, 217, 255, 0.15);
  transform: translateY(-5px);
}

/* Dark Mode : bordure néon + glow */
body.wp-dark-mode-active .et_pb_blurb {
  border-color: var(--secondary);
}

body.wp-dark-mode-active .et_pb_blurb:hover {
  border-color: var(--primary);
  box-shadow: 0 0 30px var(--shadow);
  transform: translateY(-8px);
}

/* Icônes */
.et_pb_blurb .et_pb_main_blurb_image {
  transition: filter 0.3s ease;
}

body.wp-dark-mode-active .et_pb_blurb .et_pb_main_blurb_image {
  filter: drop-shadow(0 0 15px var(--primary));
}

/* ----- GRID PORTFOLIO ----- */

.et_pb_portfolio_item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* Light Mode */
body:not(.wp-dark-mode-active) .et_pb_portfolio_item:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--primary);
}

/* Dark Mode */
body.wp-dark-mode-active .et_pb_portfolio_item {
  border-color: var(--secondary);
}

body.wp-dark-mode-active .et_pb_portfolio_item:hover {
  border-color: var(--primary);
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
}

/* ----- TYPOGRAPHIE ----- */

h1, h2, h3 {
  font-family: 'Orbitron', sans-serif !important;
  color: var(--text) !important;
  transition: all 0.3s ease;
}

/* Dark Mode : glow sur titres */
body.wp-dark-mode-active h1,
body.wp-dark-mode-active h2,
body.wp-dark-mode-active h3 {
  color: var(--primary) !important;
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
}

p, li {
  font-family: 'Inter', sans-serif !important;
  color: var(--text);
}

/* ----- FOOTER ----- */

#main-footer {
  background: var(--background);
  border-top: 1px solid var(--border);
  color: var(--text);
}

/* ----- EFFETS CYBERPUNK (DARK MODE ONLY) ----- */

/* Grille hexagonale animée */
body.wp-dark-mode-active::after {
  content: '';position:fixed;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(30deg,transparent 40%,rgba(139,92,246,0.05) 40%,rgba(139,92,246,0.05) 60%,transparent 60%);background-size:80px 140px;pointer-events:none;z-index:1;opacity:0;animation:fadeIn 1s ease-in forwards}@keyframes fadeIn{to{opacity:1}}@media (max-width:768px){.et_pb_blurb{padding:30px 20px}h1{font-size:32px!important}h2{font-size:24px!important}}