script.js

// ===== AUTO THEME DETECTION =====
function setupAutoTheme() {
  if (window.matchMedia) {
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
      const theme = e.matches ? 'dark' : 'light';
      document.documentElement.setAttribute('data-theme', theme);
    });
  }
}


// ===== PIXEL ART BACKGROUND =====
class PixelArtBackground {
  constructor(canvasId) {
    this.canvas = document.getElementById(canvasId);
    if (!this.canvas) return;

    this.ctx = this.canvas.getContext('2d');
    this.ctx.imageSmoothingEnabled = false;
    this.animationId = null;
    this.stars = [];
    this.clouds = [];
    this.time = 0;

    this.init();
  }

  init() {
    this.resizeCanvas();
    this.createStars();
    this.createClouds();
    this.animate();
    this.setupEventListeners();
  }

  resizeCanvas() {
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
  }

  createStars() {
    this.stars = [];
    const starCount = 50;
    for (let i = 0; i < starCount; i++) {
      this.stars.push({
        x: Math.random() * this.canvas.width,
        y: Math.random() * this.canvas.height,
        size: Math.random() > 0.5 ? 2 : 3,
        twinkleSpeed: 0.02 + Math.random() * 0.03,
        twinkleOffset: Math.random() * Math.PI * 2
      });
    }
  }

  createClouds() {
    this.clouds = [];
    const cloudCount = 5;
    for (let i = 0; i < cloudCount; i++) {
      this.clouds.push({
        x: Math.random() * this.canvas.width,
        y: Math.random() * (this.canvas.height * 0.4),
        speed: 0.2 + Math.random() * 0.3,
        size: 30 + Math.random() * 20,
        opacity: 0.3 + Math.random() * 0.3
      });
    }
  }

  drawPixelRect(x, y, size, color) {
    this.ctx.fillStyle = color;
    this.ctx.fillRect(Math.floor(x), Math.floor(y), size, size);
  }

  drawStar(star) {
    const theme = document.documentElement.getAttribute('data-theme');
    const twinkle = Math.sin(this.time * star.twinkleSpeed + star.twinkleOffset);
    const opacity = 0.5 + (twinkle * 0.5);

    const starColor = theme === 'dark'
      ? `rgba(96, 165, 250, ${opacity})`
      : `rgba(0, 102, 255, ${opacity})`;

    this.drawPixelRect(star.x, star.y, star.size, starColor);
    this.drawPixelRect(star.x - star.size, star.y, star.size, starColor);
    this.drawPixelRect(star.x + star.size, star.y, star.size, starColor);
    this.drawPixelRect(star.x, star.y - star.size, star.size, starColor);
    this.drawPixelRect(star.x, star.y + star.size, star.size, starColor);
  }

  drawCloud(cloud) {
    const theme = document.documentElement.getAttribute('data-theme');
    const cloudColor = theme === 'dark'
      ? `rgba(96, 165, 250, ${cloud.opacity})`
      : `rgba(0, 102, 255, ${cloud.opacity})`;

    const pixelSize = 4;
    const cloudPattern = [
      [0, 0, 1, 1, 1, 1, 0, 0],
      [0, 1, 1, 1, 1, 1, 1, 0],
      [1, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 1, 1, 1, 1, 1, 1],
      [0, 1, 1, 1, 1, 1, 1, 0]
    ];

    cloudPattern.forEach((row, rowIndex) => {
      row.forEach((pixel, colIndex) => {
        if (pixel === 1) {
          this.drawPixelRect(
            cloud.x + colIndex * pixelSize,
            cloud.y + rowIndex * pixelSize,
            pixelSize,
            cloudColor
          );
        }
      });
    });

    cloud.x -= cloud.speed;
    if (cloud.x < -cloud.size * 2) {
      cloud.x = this.canvas.width + cloud.size;
      cloud.y = Math.random() * (this.canvas.height * 0.4);
    }
  }

  drawPixelGrid() {
    const theme = document.documentElement.getAttribute('data-theme');
    const gridColor = theme === 'dark'
      ? 'rgba(96, 165, 250, 0.03)'
      : 'rgba(0, 102, 255, 0.03)';

    const gridSize = 20;
    this.ctx.strokeStyle = gridColor;
    this.ctx.lineWidth = 1;

    for (let x = 0; x < this.canvas.width; x += gridSize) {
      this.ctx.beginPath();
      this.ctx.moveTo(x, 0);
      this.ctx.lineTo(x, this.canvas.height);
      this.ctx.stroke();
    }

    for (let y = 0; y < this.canvas.height; y += gridSize) {
      this.ctx.beginPath();
      this.ctx.moveTo(0, y);
      this.ctx.lineTo(this.canvas.width, y);
      this.ctx.stroke();
    }
  }

  animate() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.drawPixelGrid();
    this.stars.forEach(star => this.drawStar(star));
    this.clouds.forEach(cloud => this.drawCloud(cloud));
    this.time += 1;
    this.animationId = requestAnimationFrame(() => this.animate());
  }

  setupEventListeners() {
    let resizeTimer;
    window.addEventListener('resize', () => {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(() => {
        this.resizeCanvas();
        this.createStars();
        this.createClouds();
      }, 250);
    });

    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        if (this.animationId) {
          cancelAnimationFrame(this.animationId);
          this.animationId = null;
        }
      } else {
        if (!this.animationId) {
          this.animate();
        }
      }
    });
  }
}

// ===== SCROLL SPY NAVIGATION =====
class ScrollSpyNavigation {
  constructor() {
    this.navHeader = document.querySelector('.nav-header');
    this.navLinks = document.querySelectorAll('.nav-link');
    this.sections = document.querySelectorAll('.section, .hero-section');
    this.init();
  }

  init() {
    this.setupScrollSpy();
    this.setupSmoothScroll();
    this.setupScrollHeader();
  }

  setupScrollSpy() {
    // Utiliser scroll event pour plus de précision
    let scrollTimer;
    window.addEventListener('scroll', () => {
      clearTimeout(scrollTimer);
      scrollTimer = setTimeout(() => {
        this.updateActiveSection();
      }, 50);
    }, { passive: true });

    // Mise à jour initiale
    this.updateActiveSection();
  }

  updateActiveSection() {
    const scrollPosition = window.scrollY + 200; // Offset pour la navigation

    let currentSection = 'hero';

    this.sections.forEach(section => {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.offsetHeight;

      if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
        currentSection = section.id;
      }
    });

    this.updateActiveLink(currentSection);
  }

  updateActiveLink(sectionId) {
    this.navLinks.forEach(link => {
      link.classList.remove('active');
      if (link.getAttribute('href') === `#${sectionId}`) {
        link.classList.add('active');
      }
    });
  }

  setupSmoothScroll() {
    this.navLinks.forEach(link => {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        const targetId = link.getAttribute('href');
        const target = document.querySelector(targetId);

        if (target) {
          const offsetTop = target.offsetTop - 80;
          window.scrollTo({
            top: offsetTop,
            behavior: 'smooth'
          });
        }
      });
    });
  }

  setupScrollHeader() {
    let lastScrollY = window.scrollY;

    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        this.navHeader.classList.add('scrolled');
      } else {
        this.navHeader.classList.remove('scrolled');
      }
      lastScrollY = window.scrollY;
    }, { passive: true });
  }
}

// ===== MOBILE MENU =====
class MobileMenu {
  constructor() {
    this.toggle = document.querySelector('.mobile-menu-toggle');
    this.overlay = document.querySelector('.mobile-menu-overlay');
    this.closeBtn = document.querySelector('.mobile-menu-close');
    this.navLinks = document.querySelectorAll('.mobile-nav-link');
    this.init();
  }

  init() {
    if (!this.toggle || !this.overlay) return;

    this.toggle.addEventListener('click', () => this.open());
    this.closeBtn.addEventListener('click', () => this.close());
    this.overlay.addEventListener('click', (e) => {
      if (e.target === this.overlay) this.close();
    });

    this.navLinks.forEach(link => {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        const targetId = link.getAttribute('href');
        this.close();

        setTimeout(() => {
          const target = document.querySelector(targetId);
          if (target) {
            const offsetTop = target.offsetTop - 80;
            window.scrollTo({
              top: offsetTop,
              behavior: 'smooth'
            });
          }
        }, 300);
      });
    });
  }

  open() {
    this.overlay.classList.add('active');
    document.body.style.overflow = 'hidden';
  }

  close() {
    this.overlay.classList.remove('active');
    document.body.style.overflow = '';
  }
}

// ===== TYPED TEXT EFFECT =====
class TypedText {
  constructor(element, texts, speed = 100) {
    this.element = element;
    this.texts = texts;
    this.speed = speed;
    this.currentTextIndex = 0;
    this.currentCharIndex = 0;
    this.isDeleting = false;
    this.init();
  }

  init() {
    setTimeout(() => this.type(), 1000);
  }

  type() {
    const currentText = this.texts[this.currentTextIndex];

    if (this.isDeleting) {
      this.element.textContent = currentText.substring(0, this.currentCharIndex - 1);
      this.currentCharIndex--;
    } else {
      this.element.textContent = currentText.substring(0, this.currentCharIndex + 1);
      this.currentCharIndex++;
    }

    let typeSpeed = this.isDeleting ? this.speed / 2 : this.speed;

    if (!this.isDeleting && this.currentCharIndex === currentText.length) {
      typeSpeed = 2000;
      this.isDeleting = true;
    } else if (this.isDeleting && this.currentCharIndex === 0) {
      this.isDeleting = false;
      this.currentTextIndex = (this.currentTextIndex + 1) % this.texts.length;
      typeSpeed = 500;
    }

    setTimeout(() => this.type(), typeSpeed);
  }
}

// ===== PROJECT VIEW (FULL PAGE) =====
class ProjectModal {
  constructor() {
    this.view = document.getElementById('projectView');
    this.viewContent = document.getElementById('projectViewContent');
    this.projectData = this.getProjectData();
    this.savedScrollY = 0;
    this.init();
  }

  init() {
    document.querySelectorAll('.project-card').forEach(card => {
      card.addEventListener('click', () => {
        const projectId = card.dataset.projectId;
        this.open(projectId);
      });
    });

    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && this.view.classList.contains('active')) {
        this.close();
      }
    });
  }

  open(projectId) {
    const project = this.projectData[projectId];
    if (!project) return;

    this.savedScrollY = window.scrollY;
    this.viewContent.innerHTML = this.generateViewContent(project);
    this.view.classList.add('active');
    this.view.scrollTop = 0;
    document.body.style.overflow = 'hidden';

    // Bind back button
    const backBtn = this.view.querySelector('.project-view-back');
    if (backBtn) {
      backBtn.addEventListener('click', () => this.close());
    }
  }

  close() {
    this.view.classList.remove('active');
    document.body.style.overflow = '';
    window.scrollTo(0, this.savedScrollY);
  }

  generateViewContent(project) {
    const typeClass = project.type.includes('personnel') ? 'personal' : 'academic';

    // Build sidebar blocks
    let sidebarBlocks = '';

    // Info block (date + type)
    sidebarBlocks += `
      <div class="sidebar-block">
        <strong>Informations</strong>
        <div class="sidebar-info-row">
          <span class="sidebar-label">Date</span>
          <span class="sidebar-value">${project.date}</span>
        </div>
        <div class="sidebar-info-row">
          <span class="sidebar-label">Type</span>
          <span class="project-view-type ${typeClass}">${project.type}</span>
        </div>
      </div>
    `;

    if (project.competences && project.competences.length > 0) {
      sidebarBlocks += `
        <div class="sidebar-block">
          <strong>Compétences</strong>
          <div class="sidebar-tags">
            ${project.competences.map(c => `<span class="tag tag-competence">${c}</span>`).join('')}
          </div>
        </div>
      `;
    }

    if (project.tech && project.tech.length > 0) {
      sidebarBlocks += `
        <div class="sidebar-block">
          <strong>Technologies</strong>
          <div class="project-view-tech-logos">
            ${project.tech.map(t => `<img src="${t}" alt="Tech logo">`).join('')}
          </div>
        </div>
      `;
    }

    if (project.github || project.links) {
      let linksHtml = '';
      if (project.github) {
        linksHtml += `<a href="${project.github}" target="_blank" rel="noopener noreferrer">
          <img class="logo" src="img/logo/logo github.svg" alt="GitHub" style="display:inline;width:20px;height:20px;vertical-align:middle;margin-right:6px;">GitHub
        </a>`;
      }
      if (project.links) {
        project.links.forEach(link => {
          linksHtml += `<a href="${link.url}" target="_blank" rel="noopener noreferrer">${link.text}</a>`;
        });
      }
      sidebarBlocks += `
        <div class="sidebar-block">
          <strong>Liens</strong>
          <div class="project-view-links">${linksHtml}</div>
        </div>
      `;
    }

    return `
      <button class="project-view-back" aria-label="Retour">&larr; Retour</button>

      <div class="project-view-hero">
        <h1>${project.title}</h1>
      </div>

      <div class="project-view-layout">
        <div class="project-view-main">
          ${project.content}
        </div>
        <aside class="project-view-sidebar">
          ${sidebarBlocks}
        </aside>
      </div>
    `;
  }

  getProjectData() {
    return {
      'ndi': {
        title: 'Nuit de l\'Info - 2 éditions',
        date: '2024 & 2025',
        type: 'Projet personnel',
        competences: ['Réaliser', 'Collaborer', 'HTML / CSS', 'JavaScript'],
        content: `
          <p>J'ai participé à deux reprises à la <strong>Nuit de l'Info</strong>, un événement national où des équipes d'étudiants doivent concevoir un site web complet en une seule nuit, sur un thème imposé, tout en relevant de nombreux défis.</p>

          <h4>Édition 2024 - Première participation</h4>
          <p>Ma première participation m'a permis de découvrir cet événement intense. J'ai appris à travailler sous contrainte de temps, à collaborer efficacement en équipe et à développer rapidement des solutions fonctionnelles. Cette expérience a renforcé mes compétences en développement web, en gestion de projet et en résolution de problèmes, tout en apprenant à gérer la fatigue.</p>

          <h4>Édition 2025 - Deuxième participation</h4>
          <p>Pour cette deuxième participation, j'ai constaté une nette progression tant sur le plan technique — avec une plus grande rapidité dans les phases de conception, développement et déploiement — que sur le plan humain.</p>

          <p>La gestion de notre équipe s'est déroulée de manière exemplaire : coordination efficace, répartition claire des tâches et communication fluide. Résultat : un projet finalisé en avance, sans le stress de la dernière minute.</p>

          <p>Durant cette édition, nous avons développé le site principal, une extension navigateur pour bloquer les éléments indésirables, et un site d'information sur les <a href="https://fr.wikipedia.org/wiki/Common_Vulnerabilities_and_Exposures" target="_blank" rel="noopener noreferrer">CVE</a>.</p>
        `,
        links: [
          { text: 'Site NDI 2025', url: 'https://ndi.0v41n.fr/' },
          { text: 'Site CVE', url: 'https://cve.0v41n.fr/' }
        ],
        github: 'https://github.com/Les-3-singes',
        tech: ['img/logo/logo html.png', 'img/logo/logo css.svg', 'img/logo/logo js.png']
      },
      'encheres': {
        title: 'Plateforme de vente aux enchères communicantes et sécurisées',
        date: 'Deuxième semestre 2026',
        type: 'Projet académique',
        competences: ['Réaliser', 'Gérer', 'Java', 'SQL'],
        content: `
          <p>Dans le cadre de ma deuxième année de BUT Informatique, j'ai développé un logiciel d'enchères basé sur le principe de Vickrey (enchères à plis fermés). Ce projet comprend une interface graphique en JavaFX, la communication en temps réel entre un vendeur et plusieurs enchérisseurs, ainsi qu'une interface d'administration permettant de gérer les utilisateurs et de suivre l'évolution des enchères.</p>

          <p>L'ensemble des informations échangées entre le serveur et les différents clients est chiffré par le biais de sécurités cryptographiques.</p>

          <p>Ce projet m'a permis d'explorer en profondeur certains aspects de la cybersécurité, notamment en sécurisant la communication entre les différents clients. J'ai également essayé d'attaquer notre logiciel avec différents types d'attaques : Man in the Middle, injections SQL...</p>

          <img src="img/img-projets/j'avenchère co.png" alt="Interface de connexion j'avenchère" style="width: 100%; border-radius: 8px; margin: 0.5rem 0 1.5rem;">

          <img src="img/img-projets/j'avenchère admin.png" alt="Interface de l'administrateur de j'avenchère" style="width: 100%; border-radius: 8px; margin: 0.5rem 0 1.5rem;">


          <p><strong>Technologies utilisées:</strong> Java / JavaFX</p>
        `,
        tech: ['img/logo/logo java.svg']
      },
      'villes3d': {
        title: 'Geospatial Vector Extrusion',
        date: 'Janvier 2026',
        type: 'Projet personnel',
        competences: ['Réaliser', 'Python'],
        content: `
          <p>Ce projet représente l'un de mes travaux les plus ambitieux. Passionné à la fois par l'informatique et la cartographie, j'ai voulu allier ces deux domaines en créant un outil capable de <strong>générer des visualisations 3D de données cartographiques</strong>.</p>

          <img src="img/img-projets/en_mode_cartographe.jpg" alt="En mode cartographe" style="width: 80%; border-radius: 8px; margin: 0.5rem 0 1.5rem;">


          <p>L'idée est simple : entrer le nom d'une ville, un rayon, et le programme construit automatiquement une maquette 3D complète avec les bâtiments, les rues et le relief du terrain. Le tout est explorable librement.</p>

          <p>Ce programme a été développé en Python et m'a permis de me familiariser avec ce langage de programmation très célèbre mais que j'avais pourtant très rarement utilisé.</p>

          <h4>Les défis techniques</h4>
          <p>Le plus gros challenge a été l'optimisation des ressources. Malgré le fait que je possède un ordinateur doté d'une puissance de calcul remarquable. Générer Paris avec ses <strong>123 937 bâtiments</strong> demande énormément de calculs. J'ai donc implémenté un système de <a href="https://fr.wikipedia.org/wiki/Symmetric_multiprocessing" target="_blank">multiprocessing</a> qui exploite tous les cœurs du processeur, ainsi qu'une fusion rapide des <a href="https://support.esri.com/fr-fr/gis-dictionary/mesh" target="_blank"> meshes</a> pour éviter les goulots d'étranglement.</p>
          <p>Il m'a également fallu mettre en place <a href="https://fr.wikipedia.org/wiki/Projection_conique_conforme_de_Lambert" target="_blank">la projection de Lambert</a>. La projection de Lambert est une projection cartographique qui représente fidèlement les méridiens sur la France métropolitaine.</p>

          <h4>Projection de Lambert</h4>
          <img src="img/lambert.png" alt="Projection de Lambert" style="width: 100%; border-radius: 8px; margin: 0.5rem 0 1.5rem;">


          <h4>Ce que j'ai appris</h4>
          <p>Ce projet m'a permis de découvrir le traitement de données géospatiales (OpenStreetMap, données d'élévation SRTM), la visualisation 3D avec PyVista, et surtout l'optimisation de code Python pour des calculs intensifs.</p>

          <p>J'ai réalisé des rendus de plusieurs villes françaises :</p>

          <h4>Millau</h4>
          <img src="img/img-projets/Millau.png" alt="Rendu 3D de Millau" style="width: 100%; border-radius: 8px; margin: 0.5rem 0 1.5rem;">

          <h4>Paris</h4>
          <p>La capitale dans son intégralité avec ses 123 937 bâtiments. Ce rendu m'a forcé à optimiser le code en raison de la puissance de calcul nécessaire.</p>
          <img src="img/img-projets/Paris.png" alt="Rendu 3D de Paris" style="width: 100%; border-radius: 8px; margin: 0.5rem 0 1.5rem;">

          <h4>Montpellier</h4>
          <p>Avec les bâtiments et les routes.</p>
          <img src="img/img-projets/Montpellier.png" alt="Rendu 3D de Montpellier" style="width: 100%; border-radius: 8px; margin: 0.5rem 0;">
        `,
        github: 'https://github.com/flothival/geospatial-vector-extrusion',
        tech: ['img/logo/logo python.png']
      },
      'meuh': {
        title: 'meuh encoding',
        date: 'Mars 2025',
        type: 'Projet personnel',
        competences: ['Réaliser', 'Optimiser', 'Java'],
        content: `
          <p>MEUH encoding est une application Java qui explore la cryptographie appliquée au texte de manière originale. Le projet propose un système de chiffrement personnalisé basé sur le mot « MEUH », permettant de transformer un texte en une séquence codée et réversible.</p>

          <p>Il illustre la création d'un algorithme de cryptage simple mais unique, démontrant comment des principes de cryptographie peuvent être appliqués pour générer des codes lisibles et sécurisables à petite échelle. L'interface en ligne de commande facilite l'encodage et le décodage, rendant l'expérience interactive afin de conserver un aspect pratique pour tester différentes entrées textuelles. 🐄</p>
        `,
        github: 'https://github.com/flothival/meuh-encoding',
        tech: ['img/logo/logo java.svg']
      },
      'pokemon': {
        title: 'Jeu de cartes Pokémon TCG',
        date: 'Avril 2025',
        type: 'Projet académique',
        competences: ['Réaliser', 'Conduire', 'Java'],
        content: `
          <p>Lors de ma première année de BUT Informatique, j'ai réalisé une reproduction complète du jeu de cartes « Pokémon TCG ». Le projet comprenait le développement de l'intégralité du fonctionnement interne, incluant la gestion des règles du jeu, la logique des combats, et le suivi des cartes.</p>

          <p>J'ai également conçu l'interface utilisateur (IHM) en Java, offrant une expérience interactive et visuelle fidèle au jeu original. Ce projet m'a permis de mettre en pratique la programmation orientée objet, la gestion des événements et l'interaction avec l'utilisateur via une interface graphique.</p>
        `,
        tech: ['img/logo/logo java.svg']
      },
      'cesar': {
        title: 'Chiffrement Jules César',
        date: 'Octobre 2024',
        type: 'Projet personnel',
        competences: ['Réaliser', 'Optimiser', 'Java'],
        content: `
          <p>Un de mes projets en Java a été de réaliser le chiffrement de Jules César. Ce projet explore l'un des plus anciens principes de la cryptographie, popularisé par Jules César lui-même. Développé en Java, ce programme met en œuvre un algorithme de substitution permettant de chiffrer et déchiffrer un texte en décalant les lettres de l'alphabet selon une clé numérique.</p>

          <p>Ce projet m'a permis de consolider mes connaissances en manipulation de chaînes de caractères, en gestion des entrées utilisateur et en logique algorithmique tout en découvrant les bases de la cryptographie. Son approche simple mais rigoureuse illustre parfaitement comment un concept historique peut être transposé dans un contexte informatique moderne et pédagogique.</p>
        `,
        github: 'https://github.com/flothival/chiffrement-jules-cesar',
        tech: ['img/logo/logo java.svg']
      }
    };
  }
}

// ===== COMPETENCE GAUGES =====
class CompetenceGauges {
  constructor() {
    this.circumference = 2 * Math.PI * 52; // r=52 → ~326.73
    this.animated = new Set();
    this.init();
  }

  init() {
    this.setupTabs();
    this.setupGaugeObserver();
  }

  setupTabs() {
    const tabBtns = document.querySelectorAll('.tab-btn');
    const tabPanels = document.querySelectorAll('.tab-panel');

    tabBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        tabBtns.forEach(b => b.classList.remove('active'));
        tabPanels.forEach(p => p.classList.remove('active'));

        btn.classList.add('active');
        const targetPanel = document.getElementById('tab-' + btn.dataset.tab);
        if (targetPanel) {
          targetPanel.classList.add('active');
          // Animate gauges in newly visible panel
          targetPanel.querySelectorAll('.gauge').forEach(gauge => {
            if (!this.animated.has(gauge)) {
              this.animateGauge(gauge);
            }
          });
        }
      });
    });
  }

  setupGaugeObserver() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const gauges = entry.target.querySelectorAll('.gauge');
          gauges.forEach(gauge => {
            if (!this.animated.has(gauge)) {
              this.animateGauge(gauge);
            }
          });
        }
      });
    }, { threshold: 0.2 });

    document.querySelectorAll('.competence-card').forEach(card => {
      observer.observe(card);
    });
  }

  animateGauge(gauge) {
    this.animated.add(gauge);
    const percent = parseInt(gauge.dataset.percent, 10);
    const fill = gauge.querySelector('.gauge-fill');
    const text = gauge.querySelector('.gauge-text');

    if (!fill || !text) return;

    const offset = this.circumference * (1 - percent / 100);

    // Small delay for staggered effect
    requestAnimationFrame(() => {
      fill.style.strokeDashoffset = offset;
    });

    // Animate counter
    this.animateCounter(text, percent);
  }

  animateCounter(element, target) {
    const duration = 800;
    const start = performance.now();

    const update = (now) => {
      const elapsed = now - start;
      const progress = Math.min(elapsed / duration, 1);
      // Ease out cubic
      const eased = 1 - Math.pow(1 - progress, 3);
      const current = Math.round(eased * target);
      element.textContent = current + '%';

      if (progress < 1) {
        requestAnimationFrame(update);
      }
    };

    requestAnimationFrame(update);
  }
}

// ===== SCROLL ANIMATIONS =====
class ScrollAnimationManager {
  constructor() {
    this.observerOptions = {
      threshold: 0.1,
      rootMargin: '0px 0px -100px 0px'
    };
    this.init();
  }

  init() {
    this.setupObserver();
    this.markElementsForAnimation();
  }

  setupObserver() {
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-in');
        }
      });
    }, this.observerOptions);
  }

  markElementsForAnimation() {
    const groups = ['.competence-card', '.project-card', '.about-grid', '.contact-card'];

    groups.forEach(selector => {
      document.querySelectorAll(selector).forEach((el, index) => {
        el.classList.add('animate-on-scroll');
        el.style.transitionDelay = `${index * 0.05}s`;
        this.observer.observe(el);
      });
    });
  }
}

// ===== INFINITE SKILLS CAROUSEL =====
class InfiniteCarousel {
  constructor(trackSelector) {
    this.track = document.querySelector(trackSelector);
    if (!this.track) return;

    this.speed = 1; // vitesse défilement pc
    this.position = 0;
    this.isPaused = false;

    this.init();
  }

  init() {
    // Dupliquer les éléments pour créer l'effet infini
    const items = this.track.innerHTML;
    this.track.innerHTML = items + items;

    // Calculer la largeur d'un set complet
    this.track.style.animation = 'none';
    const children = this.track.children;
    const halfCount = children.length / 2;

    let totalWidth = 0;
    for (let i = 0; i < halfCount; i++) {
      totalWidth += children[i].offsetWidth;
      const style = window.getComputedStyle(children[i]);
      totalWidth += parseFloat(style.marginRight) || 0;
    }

    // Ajouter le gap
    const trackStyle = window.getComputedStyle(this.track);
    const gap = parseFloat(trackStyle.gap) || 0;
    this.resetPoint = totalWidth + (gap * halfCount);

    // Démarrer l'animation
    this.animate();

    // Ajuster la vitesse sur mobile
    if (window.innerWidth <= 768) {
      this.speed = 1.5; //vitesse défilement mobile
    }
  }

  animate() {
    if (!this.isPaused) {
      this.position -= this.speed;

      if (Math.abs(this.position) >= this.resetPoint) {
        this.position = 0;
      }

      this.track.style.transform = `translateX(${this.position}px)`;
    }

    requestAnimationFrame(() => this.animate());
  }
}

// ===== UTILITY FUNCTIONS =====
function isTouchDevice() {
  return (('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0));
}

// ===== MAIN INITIALIZATION =====
document.addEventListener('DOMContentLoaded', () => {
  if (isTouchDevice()) {
    document.body.classList.add('touch-device');
  }

  setupAutoTheme();

  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  if (!prefersReducedMotion) {
    new PixelArtBackground('particle-canvas');
    new ScrollAnimationManager();
    new InfiniteCarousel('.skills-track');
  }

  new ScrollSpyNavigation();
  new MobileMenu();
  new ProjectModal();
  new CompetenceGauges();

  const typedTextElement = document.getElementById('typed-text');
  if (typedTextElement) {
    new TypedText(typedTextElement, [
      'Étudiant en deuxième année de BUT Informatique',
      'Spécialisé en Réseaux & Cybersécurité',
    ], 50);
  }
});

// ===== CONTACT MODALS =====
function openContactModal(type) {
  const modalId = type + 'Modal';
  const modal = document.getElementById(modalId);
  if (modal) {
    modal.classList.add('active');
    document.body.style.overflow = 'hidden';
  }
}

function closeContactModal(type) {
  const modalId = type + 'Modal';
  const modal = document.getElementById(modalId);
  if (modal) {
    modal.classList.remove('active');
    document.body.style.overflow = '';
  }
}

function copyToClipboard(text, button) {
  navigator.clipboard.writeText(text).then(() => {
    const originalText = button.textContent;
    button.textContent = 'Copié !';
    button.style.background = 'var(--color-primary)';
    button.style.color = 'var(--text-inverse)';

    setTimeout(() => {
      button.textContent = originalText;
      button.style.background = '';
      button.style.color = '';
    }, 2000);
  }).catch(err => {
    console.error('Erreur lors de la copie:', err);
  });
}

// Fermer les modales contact avec Escape
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    ['email', 'location', 'linkedin'].forEach(type => {
      closeContactModal(type);
    });
  }
});