/* =============================================
   THÈME 1: INDUSTRIEL / GRAFFITI
   Vision client: Ados, graffitis, shop, garage,
   acier, métal, croissance, développement
   Couleurs: Gris, jaune industrielle, noir
   ============================================= */

[data-theme="industrial"] {
    --font-heading: 'Bebas Neue', 'Oswald', sans-serif;
    --font-body: 'Inter', sans-serif;

    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;

    --text-primary: #f0f0f0;
    --text-secondary: #9e9e9e;
    --text-muted: #666666;

    --accent: #FFD600;
    --accent-hover: #FFEA00;
    --accent-rgb: 255, 214, 0;
    --accent-dark: #c7a800;

    --btn-text: #0a0a0a;

    --border-color: #2a2a2a;

    --header-bg: rgba(10, 10, 10, 0.92);
    --card-bg: #141414;

    --hero-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #111 100%);
    --hero-overlay: linear-gradient(135deg, rgba(10,10,10,0.85), rgba(10,10,10,0.6));

    --badge-bg: rgba(255, 214, 0, 0.08);
    --badge-border: rgba(255, 214, 0, 0.2);

    --cta-bg: linear-gradient(135deg, #111 0%, #1a1a0a 50%, #111 100%);

    --heading-spacing: 0.05em;
    --logo-spacing: 0.08em;

    --btn-radius: 4px;
    --btn-transform: uppercase;
    --btn-spacing: 0.1em;

    --card-radius: 4px;
}

/* Hero background image */
[data-theme="industrial"] .hero-bg {
    background: url('../img/themes/industrial/hero.png') center/cover no-repeat;
}
[data-theme="industrial"] .hero-bg::after {
    background: linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.7) 50%, rgba(10,10,10,0.5) 100%);
}

/* CTA background */
[data-theme="industrial"] .cta-section {
    background: url('../img/themes/industrial/cta.png') center/cover no-repeat;
}
[data-theme="industrial"] .cta-section::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(10,10,10,0.7);
    z-index: 0;
}
[data-theme="industrial"] .cta-section > .container { position: relative; z-index: 1; }

/* Section background */
[data-theme="industrial"] .section-dark {
    background: var(--bg-secondary);
}
[data-theme="industrial"] #mission {
    background: url('../img/themes/industrial/section.png') center/cover no-repeat;
    position: relative;
}
[data-theme="industrial"] #mission::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(10,10,10,0.85);
    z-index: 0;
}
[data-theme="industrial"] #mission > .container { position: relative; z-index: 1; }

/* Industrial texture overlays */
[data-theme="industrial"] .hero-bg::before {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255,214,0,0.02) 2px,
            rgba(255,214,0,0.02) 4px
        );
    pointer-events: none;
}

[data-theme="industrial"] .hero::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg, var(--accent) 0, var(--accent) 20px, transparent 20px, transparent 40px);
}

/* Graffiti-style accent borders */
[data-theme="industrial"] .feature-card {
    border-left: 4px solid var(--accent);
    border-radius: 0;
}

[data-theme="industrial"] .feature-card:hover {
    box-shadow: 4px 4px 0 var(--accent);
    transform: translate(-2px, -2px);
}

[data-theme="industrial"] .feature-icon {
    border-radius: 0;
    border: 2px solid var(--accent);
    background: transparent;
}

/* Industrial buttons */
[data-theme="industrial"] .btn {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    border-radius: 0;
}

[data-theme="industrial"] .btn-primary:hover {
    box-shadow: 4px 4px 0 rgba(var(--accent-rgb), 0.5);
    transform: translate(-2px, -2px);
}

/* Logo treatment */
[data-theme="industrial"] .logo-icon {
    border-radius: 0;
    border: 2px solid var(--accent);
    background: transparent;
    color: var(--accent);
}

/* Hazard stripe accents */
[data-theme="industrial"] .section-dark::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: repeating-linear-gradient(
        -45deg,
        var(--accent) 0, var(--accent) 10px,
        #0a0a0a 10px, #0a0a0a 20px
    );
}

[data-theme="industrial"] .pricing-card {
    border-radius: 0;
}

[data-theme="industrial"] .pricing-card.popular {
    border: 2px solid var(--accent);
    box-shadow: 6px 6px 0 var(--accent);
}

[data-theme="industrial"] .pricing-card.popular::before {
    border-radius: 0;
    font-family: var(--font-heading);
    letter-spacing: 0.15em;
}

/* Team cards with industrial feel */
[data-theme="industrial"] .team-card {
    border-radius: 0;
    border-left: 4px solid var(--accent);
}

[data-theme="industrial"] .team-photo {
    border-bottom: 3px solid var(--accent);
}

/* Dashboard */
[data-theme="industrial"] .dashboard-welcome {
    border-radius: 0;
    border-left: 4px solid var(--accent);
}

[data-theme="industrial"] .dashboard-welcome::before {
    background: var(--accent);
    height: 3px;
}

[data-theme="industrial"] .program-card {
    border-radius: 0;
}

[data-theme="industrial"] .program-card:hover {
    box-shadow: 4px 4px 0 var(--accent);
    transform: translate(-2px, -4px);
}

/* Auth pages */
[data-theme="industrial"] .auth-card {
    border-radius: 0;
    border-top: 4px solid var(--accent);
}

[data-theme="industrial"] .form-input {
    border-radius: 0;
}

/* Scratchy texture on hero */
[data-theme="industrial"] .hero h1 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[data-theme="industrial"] .section-header h2 {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Metal grid pattern */
[data-theme="industrial"] .cta-section::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle, rgba(255,214,0,0.03) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

/* Filter buttons */
[data-theme="industrial"] .filter-btn {
    border-radius: 0;
}

[data-theme="industrial"] .sidebar-card {
    border-radius: 0;
    border-top: 3px solid var(--accent);
}