<style>
    /* ========================================================================
       ARASAKA DATA TERMINAL - CYBERPUNK 2077 STYLE
       ======================================================================== */
    
    @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500;700&family=Share+Tech+Mono&display=swap');
    
    /* ========== KEYFRAMES ========== */
    @keyframes scanline {
        0% { top: 0; }
        100% { top: 100%; }
    }
    
    @keyframes glitch {
        0%, 100% { transform: translate(0); text-shadow: 0 0 10px #fcee0a; }
        25% { transform: translate(-2px, 2px); text-shadow: -2px 0 10px #ff0080, 2px 0 10px #00f3ff; }
        50% { transform: translate(2px, -2px); text-shadow: 2px 0 10px #ff0080, -2px 0 10px #00f3ff; }
        75% { transform: translate(-2px, -2px); text-shadow: 0 0 10px #fcee0a; }
    }
    
    @keyframes tactical-grid {
        0% { background-position: 0 0; }
        100% { background-position: 20px 20px; }
    }
    
    @keyframes status-blink {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0.3; }
    }
    
    /* ========== SIDEBAR CONTAINER ========== */
    .cyberpunk-sidebar {
        background: #0a0a0f;
        color: #b0b0b0;
        font-family: 'Rajdhani', sans-serif;
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
        position: relative;
        border-right: 3px solid #fcee0a;
        box-shadow: 3px 0 20px rgba(252, 238, 10, 0.5);
    }
    
    /* Grille tactique de fond */
    .cyberpunk-sidebar::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            linear-gradient(rgba(252, 238, 10, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(252, 238, 10, 0.03) 1px, transparent 1px);
        background-size: 20px 20px;
        pointer-events: none;
        opacity: 0.5;
        animation: tactical-grid 30s linear infinite;
        z-index: 0;
    }
    
    /* ========== ZONE FIXE : IDENTITY HEADER ========== */
    .identity-header {
        flex-shrink: 0;
        padding: 25px 20px;
        border-bottom: 3px solid #fcee0a;
        background: linear-gradient(180deg, #0a0a0f 0%, #000000 100%);
        position: relative;
        z-index: 10;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
    }
    
    /* Avatar Container */
    .avatar-container {
        width: 120px;
        height: 120px;
        margin: 0 auto 20px;
        position: relative;
        overflow: hidden;
        clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    }
    
    .avatar-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, #00f3ff, transparent);
        animation: scanline 3s linear infinite;
        z-index: 2;
    }
    
    .avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.9) contrast(1.2);
    }
    
    .avatar-placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #1a1a1f 0%, #0a0a0f 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        color: #fcee0a;
    }
    
    /* Identity Info */
    .identity-name {
        font-family: 'Share Tech Mono', monospace;
        font-size: 1.4rem;
        font-weight: 700;
        color: #fcee0a;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 3px;
        margin: 0 0 5px 0;
        text-shadow: 0 0 10px rgba(252, 238, 10, 0.8);
    }
    
    .identity-name:hover {
        animation: glitch 0.3s ease-in-out;
    }
    
    .identity-title {
        font-size: 0.85rem;
        color: #808080;
        text-align: center;
        font-weight: 500;
        letter-spacing: 1px;
        margin: 0 0 15px 0;
    }
    
    .status-badge {
        display: inline-block;
        padding: 6px 12px;
        background: transparent;
        border: 2px solid #00f3ff;
        color: #00f3ff;
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
        margin: 0 auto;
        display: block;
        text-align: center;
        width: fit-content;
    }
    
    .status-badge::before {
        content: '◆ ';
        animation: status-blink 1.5s infinite;
    }
    
    /* ========== ZONE SCROLLABLE ========== */
    .sidebar-scrollable {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px;
        position: relative;
        z-index: 5;
    }
    
    /* Scrollbar Custom */
    .sidebar-scrollable::-webkit-scrollbar {
        width: 4px;
    }
    
    .sidebar-scrollable::-webkit-scrollbar-track {
        background: #0a0a0f;
    }
    
    .sidebar-scrollable::-webkit-scrollbar-thumb {
        background: #fcee0a;
    }
    
    .sidebar-scrollable::-webkit-scrollbar-thumb:hover {
        background: #00f3ff;
    }
    
    /* ========== SECTION TITLES ========== */
    .section-title {
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.75rem;
        font-weight: 700;
        color: #fcee0a;
        text-transform: uppercase;
        letter-spacing: 3px;
        margin: 0 0 25px 0;
        padding-left: 12px;
        border-left: 4px solid #fcee0a;
        text-shadow: 0 0 8px rgba(252, 238, 10, 0.6);
    }
    
    /* ========== NAVIGATION ========== */
    .sidebar-nav {
        margin-bottom: 35px;
    }
    
    .nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .nav-item {
        margin-bottom: 3px;
    }
    
    .nav-link {
        display: block;
        padding: 12px 15px;
        background: transparent;
        border: 2px solid #2a2a2a;
        color: #808080;
        text-decoration: none;
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: all 0.2s ease;
        clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
        position: relative;
        overflow: hidden;
    }
    
    .nav-link::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background: linear-gradient(90deg, #fcee0a 0%, #00f3ff 100%);
        transition: width 0.3s ease;
        z-index: 0;
    }
    
    .nav-link::after {
        content: '';
        position: absolute;
        right: -2px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        transition: all 0.3s ease;
        opacity: 0;
    }
    
    .nav-link i {
        margin-right: 10px;
        width: 18px;
        text-align: center;
        position: relative;
        z-index: 1;
        transition: transform 0.3s ease;
    }
    
    .nav-link span {
        position: relative;
        z-index: 1;
    }
    
    .nav-link:hover::before,
    .nav-link.active::before {
        width: 100%;
    }
    
    .nav-link:hover::after,
    .nav-link.active::after {
        border-left-color: #fcee0a;
        opacity: 1;
        right: 5px;
    }
    
    .nav-link:hover,
    .nav-link.active {
        border-color: #fcee0a;
        color: #000000;
        transform: translateX(8px);
        box-shadow: 
            0 0 20px rgba(252, 238, 10, 0.6),
            0 0 40px rgba(0, 243, 255, 0.4),
            inset 0 0 20px rgba(252, 238, 10, 0.2);
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }
    
    .nav-link:hover i,
    .nav-link.active i {
        transform: scale(1.2) rotate(5deg);
        filter: drop-shadow(0 0 5px #000000);
    }
    
    /* ========== BIO SECTION ========== */
    .bio-section {
        margin-bottom: 35px;
        padding: 15px;
        background: rgba(0, 0, 0, 0.5);
        border: 2px solid #2a2a2a;
        border-left: 4px solid #00f3ff;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    }
    
    .bio-text {
        font-size: 0.85rem;
        line-height: 1.6;
        color: #a0a0a0;
        margin: 0;
    }
    
    /* ========== TECH ARSENAL (SKILLS) ========== */
    .skills-section {
        margin-bottom: 35px;
    }
    
    .skill-category {
        margin-bottom: 30px;
    }
    
    .category-title {
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.7rem;
        font-weight: 700;
        color: #00f3ff;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 18px;
        padding-left: 10px;
        border-left: 3px solid #00f3ff;
    }
    
    .skills-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    
    .skill-item {
        aspect-ratio: 1;
        background: #0a0a0f;
        border: 1px solid #2a2a2a;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.15s ease;
        position: relative;
        clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    }
    
    .skill-item:hover {
        border-color: #fcee0a;
        background: rgba(252, 238, 10, 0.1);
        transform: scale(1.05);
        box-shadow: 0 0 15px rgba(252, 238, 10, 0.6);
    }
    
    .skill-icon {
        font-size: 1.8rem;
        color: #808080;
        transition: color 0.15s ease;
        z-index: 1;
    }
    
    .skill-item:hover .skill-icon {
        color: #fcee0a;
    }
    
    .skill-img {
        width: 70%;
        height: 70%;
        object-fit: contain;
        filter: grayscale(0.5) brightness(0.8);
        transition: filter 0.15s ease;
    }
    
    .skill-item:hover .skill-img {
        filter: grayscale(0) brightness(1);
    }
    
    /* Tooltip Custom CSS */
    .skill-item::after {
        content: attr(data-title);
        position: absolute;
        bottom: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        background: linear-gradient(135deg, #fcee0a 0%, #ffd700 100%);
        color: #000000;
        padding: 8px 14px;
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
        clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
        opacity: 0;
        pointer-events: none;
        z-index: 99999;
        box-shadow: 
            0 0 20px rgba(252, 238, 10, 1),
            0 0 40px rgba(252, 238, 10, 0.6),
            inset 0 0 10px rgba(255, 215, 0, 0.4);
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        letter-spacing: 2px;
        border: 2px solid #000000;
    }
    
    .skill-item::before {
        content: '';
        position: absolute;
        bottom: calc(100% + 5px);
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #fcee0a;
        opacity: 0;
        pointer-events: none;
        z-index: 99998;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    
    .skill-item:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    
    .skill-item:hover::before {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    
    /* ========== FOOTER SECTIONS ========== */
    .sidebar-footer {
        margin-top: auto;
        padding-top: 30px;
        border-top: 3px solid #fcee0a;
    }
    
    /* Socials */
    .social-section {
        margin-bottom: 30px;
    }
    
    .social-links {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .social-link {
        width: 40px;
        height: 40px;
        background: #0a0a0f;
        border: 2px solid #2a2a2a;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #808080;
        font-size: 1.2rem;
        text-decoration: none;
        transition: all 0.15s ease;
        clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
        position: relative;
    }
    
    .social-link:hover {
        background: #00f3ff;
        border-color: #00f3ff;
        color: #000000;
        box-shadow: 0 0 15px rgba(0, 243, 255, 0.8);
        transform: scale(1.1);
    }
    
    /* Tooltip pour socials */
    .social-link::after {
        content: attr(title);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        background: #00f3ff;
        color: #000000;
        padding: 4px 8px;
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        z-index: 9999;
        transition: all 0.2s ease;
    }
    
    .social-link:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    
    /* Languages */
    .languages-section {
        margin-bottom: 30px;
    }
    
    .languages-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .language-badge {
        padding: 6px 12px;
        background: transparent;
        border: 1px solid #2a2a2a;
        color: #808080;
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.75rem;
        font-weight: 700;
        transition: all 0.15s ease;
        clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
    }
    
    .language-badge:hover {
        background: #00f3ff;
        border-color: #00f3ff;
        color: #000000;
        transform: translateY(-2px);
    }
    
    /* Contact Info */
    .contact-info {
        margin-bottom: 30px;
    }
    
    .contact-item {
        display: flex;
        align-items: center;
        padding: 8px 0;
        color: #808080;
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.8rem;
    }
    
    .contact-item i {
        width: 20px;
        margin-right: 10px;
        color: #fcee0a;
    }
    
    .contact-item a {
        color: inherit;
        text-decoration: none;
    }
    
    .contact-item:hover {
        color: #fcee0a;
    }
    
    /* CV Download Button */
    .cv-download {
        display: block;
        padding: 12px 20px;
        background: #fcee0a;
        color: #000000;
        text-align: center;
        text-decoration: none;
        font-family: 'Share Tech Mono', monospace;
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: all 0.15s ease;
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
        box-shadow: 0 0 15px rgba(252, 238, 10, 0.6);
    }
    
    .cv-download:hover {
        background: #00f3ff;
        box-shadow: 0 0 20px rgba(0, 243, 255, 0.8);
        transform: translateY(-2px);
    }
    
    .cv-download i {
        margin-right: 8px;
    }
</style>

<!-- ========== SIDEBAR HTML ========== -->
<div class="cyberpunk-sidebar">
    
    <!-- ZONE FIXE : IDENTITY HEADER -->
    <div class="identity-header">
        <!-- Avatar -->
        <div class="avatar-container">
            {% if sidebar.identity.photo %}
                <img src="{{ sidebar.identity.photo.url }}" alt="{{ sidebar.identity.name }}" class="avatar-img">
            {% else %}
                <div class="avatar-placeholder">
                    <i class="fas fa-user-astronaut"></i>
                </div>
            {% endif %}
        </div>
        
        <!-- Nom & Titre -->
        <h1 class="identity-name">{{ sidebar.identity.name }}</h1>
        <p class="identity-title">{{ sidebar.identity.title }}</p>
        
        <!-- Status Badge -->
        {% if sidebar.identity.availability %}
        <div class="status-badge">{{ sidebar.identity.availability }}</div>
        {% endif %}
    </div>
    
    <!-- ZONE SCROLLABLE -->
    <div class="sidebar-scrollable">
        
        <!-- NAVIGATION -->
        <nav class="sidebar-nav">
            <h3 class="section-title">/// NAVIGATION</h3>
            <ul class="nav-list">
                <li class="nav-item">
                    <a href="{% url 'home:index' %}" class="nav-link">
                        <i class="fas fa-home"></i>
                        <span>ACCUEIL</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{% url 'projects:list' %}" class="nav-link">
                        <i class="fas fa-code"></i>
                        <span>PROJETS</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{% url 'services:list' %}" class="nav-link">
                        <i class="fas fa-terminal"></i>
                        <span>SERVICES</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{% url 'about:index' %}" class="nav-link">
                        <i class="fas fa-user-astronaut"></i>
                        <span>À PROPOS</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{% url 'contact:index' %}" class="nav-link">
                        <i class="fas fa-envelope"></i>
                        <span>CONTACT</span>
                    </a>
                </li>
            </ul>
        </nav>
        
        <!-- BIO EXPRESS -->
        {% if sidebar.identity.bio_short %}
        <div class="bio-section">
            <h3 class="section-title">/// SYSTEM INFO</h3>
            <p class="bio-text">{{ sidebar.identity.bio_short }}</p>
        </div>
        {% endif %}
        
        <!-- TECH ARSENAL (SKILLS) -->
        <div class="skills-section">
            <h3 class="section-title">/// TECH ARSENAL</h3>
            
            {% for category in sidebar.skill_categories %}
            <div class="skill-category">
                <h4 class="category-title">{{ category.name }}</h4>
                <div class="skills-grid">
                    {% for skill in category.skills.all %}
                    <div class="skill-item trigger-skill-modal" 
                         data-id="{{ skill.id }}" 
                         data-title="{{ skill.name }}">
                        {% if skill.icon_image %}
                            <img src="{{ skill.icon_image.url }}" alt="{{ skill.name }}" class="skill-img">
                        {% elif skill.icon_class %}
                            <i class="{{ skill.icon_class }} skill-icon"></i>
                        {% else %}
                            <i class="fas fa-code skill-icon"></i>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
        
        <!-- FOOTER -->
        <div class="sidebar-footer">
            
            <!-- Réseaux Sociaux -->
            {% if sidebar.social_links %}
            <div class="social-section">
                <h3 class="section-title">/// NETWORK</h3>
                <div class="social-links">
                    {% for link in sidebar.social_links %}
                    <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer" class="social-link" title="{{ link.name|upper }}">
                        <i class="{{ link.icon_class }}"></i>
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            
            <!-- Langues -->
            {% if sidebar.languages %}
            <div class="languages-section">
                <h3 class="section-title">/// LANGUAGES</h3>
                <div class="languages-list">
                    {% for language in sidebar.languages %}
                    <span class="language-badge">{{ language.name }} · {{ language.level }}</span>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            
            <!-- Contact Info -->
            <div class="contact-info">
                <h3 class="section-title">/// CONTACT</h3>
                
                {% if sidebar.identity.email %}
                <div class="contact-item">
                    <i class="fas fa-envelope"></i>
                    <a href="mailto:{{ sidebar.identity.email }}">{{ sidebar.identity.email }}</a>
                </div>
                {% endif %}
                
                {% if sidebar.identity.phone %}
                <div class="contact-item">
                    <i class="fas fa-phone"></i>
                    <span>{{ sidebar.identity.phone }}</span>
                </div>
                {% endif %}
                
                {% if sidebar.identity.location %}
                <div class="contact-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>{{ sidebar.identity.location }}</span>
                </div>
                {% endif %}
            </div>
            
            <!-- Bouton CV -->
            {% if sidebar.identity.cv_file %}
            <a href="{{ sidebar.identity.cv_file.url }}" download class="cv-download">
                <i class="fas fa-download"></i>
                TÉLÉCHARGER CV
            </a>
            {% endif %}
            
        </div>
        
    </div>
    
</div>