/**
* DISCORAK - Styles globaux
* Thème dark néon disco années 80
**/

/*

/* ============================================================
   VARIABLES CSS
   ============================================================ */
   :root{
    --bg-primary:               #0d0d1a;
    --bg-secondary:             #12122a;
    --bg-card:                  #1a1a35;
    --bg-dark-800:               rgb(17 24 39 / var(--tw-bg-opacity, 1));
    --bg-dark-800-30:            rgb(17 24 39 / 0.3);
    --tw-bg-opcity:             1;
    --neon-cyan:                #00f5ff;
    --neon-pink:                #ff006e;
    --neon-yellow:              #ffe600;
    --neon-purple:              #bf00ff;
    --neon-green:               #00ff88;
    --text-primary:             #ffffff;
    --text-secondary:           #a0a0c0;
    --text-tertiary:            #000000;
    --border-color:             #2a2a4a;
    --font-primary:             'Exo 2', sans-serif;
    --font-logo:                'Orbitron', sans-serif;
    --radius:                   12px;
    --transition:               all 0.3s ease;
   }

/* ============================================================
   RESET
   ============================================================ */
   *, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   }

   button{
    font-family: var(--font-primary);
    cursor: pointer;
    border: none;
    background: none;
    transition: var(--transition);
   }

/* ============================================================
   BASE
   ============================================================ */
   html{
    scroll-behavior: smooth;
    font-size: 16px;
   }

   body{
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
   }

   /* ============================================================
   SCROLLBAR
   ============================================================ */
   ::-webkit-scrollbar{
    width: 6px;
   }

   ::-webkit-scrollbar-track{
    background: var(--bg-secondary);
   }

   ::-webkit-scrollbar-thumb{
    background: var(--neon-cyan);
    border-radius: 3px;
   }

   /* ============================================================
   TYPOGRPHIE
   ============================================================ */
   h1, h2, h3, h4, h5,h6{
    font-family: var(--font-logo);
    line-height: 1.2;
    color: var(--text-primary);
   }

   p{
    color: var(--text-secondary);
    font-size: 1em;
   }

   a{
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition);
   }

   /* ============================================================
   COULEUR NEON
   ============================================================ */
   .cyan{
    color: var(--neon-cyan);
   }

   .pink{
    color: var(--neon-pink);
   }

   .yellow{
    color: var(--neon-yellow);
   }

   .purple{
    color: var(--neon-purple);
   }

   .green{
    color: var(--neon-green);
   }

   /* ============================================================
   BOUTONS
   ============================================================ */
   .btn-primary{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--neon-pink);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
   }

   .btn-primary:hover{
    box-shadow: 0 0 25px var(--neon-pink);
    transform: translateY(-2px);
   }

   .btn-secondary{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
   }

   .btn-secondary:hover{
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    box-shadow: 0 0 15px #00f5ff33;
   }

   .btn-cta{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: transparent;
    color: var(--neon-pink);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.1rem;
    border: 2px solid var(--neon-pink);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
   }

   .btn-cta:hover{
    background: var(--neon-pink);
    color: var(--text-primary);
    box-shadow: 0 0 30px #ff006e55;
    transform: translateY(-2px);
   }

   /* ============================================================
   CARDS
   ============================================================ */
   .card{
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: var(--transition);
   }

   .card:hover{
    border-color: var(--neon-cyan);
    box-shadow: 0 0 20px #00f5ff22;
   }

   /* ============================================================
   SECTIONS
   ============================================================ */
   .section-padding{
    padding: 5rem 2rem;
   }

   .section-title{
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--text-primary);
   }

   .section-subtitle{
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    font-size: 1.1rem;
   }

   /* ============================================================
   LOGO TEXTE
   ============================================================ */
   .logo-text{
    font-family: var(--font-logo);
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 2px;
   }

   .logo-disco{
    color: var(--neon-cyan)
   }

   .logo-rak{
    color: var(--neon-pink);
   }

   /* ============================================================
   ANIMATION ROTATION ICONE LOGO
   ============================================================ */
   @keyframes spin{
    from{ transform: rotate(0deg); }
    to { transform: rotate(360deg); }
   }

   .logo-rotate{
    animation: spin 4s linear infinite;
    color: var(--neon-cyan);
   }

   /* ============================================================
   ANIMATION PULSE
   ============================================================ */
   @keyframes pulse-neon{
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
   }

   .pulse{
    animation: pulse-neon 2s infinite;
   }

   /* ============================================================
   ANIMATION SLIDE IN
   ============================================================ */
   @keyframes slide-in{
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0px); }
   }

   .slide-in{
    animation: slide-in 0.5s ease forwards;
   }

   /* ============================================================
   RESPONSIVE
   ============================================================ */
   @media (max-width: 768px){
    section{
        padding: 3rem 1rem;
    }
    

    .section-title{
        font-size: 1.5rem;
    }
   }