/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Design tokens - Black & White with ultra-transparent glassmorphism */
  --background-dark: #0a0a0a;
  --background: #0f0f0f;
  /* Changed to ultra-transparent rgba values using 0A0E0F color */
  --surface-primary: rgba(10, 14, 15, 0);
  --surface-secondary: rgba(10, 14, 15, 0.274);
  --surface-hover: rgba(10, 13, 14, 0.334);
  --foreground: #ffffff;
  --foreground-muted: #c1c1c1;
  --border: rgba(255, 255, 255, 0.259);
  --border-hover: rgba(255, 255, 255, 0.355);
  --portfolio-overlay-opacity: 0.76;
}

html {
  scroll-behavior: smooth;
}

body {
  /* Updated font family to use Zalando Sans */
  font-family: "Zalando Sans Expanded", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
  color: var(--foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--background-dark);
  position: relative;
  min-height: 100vh;
}

/* Background with subtle pattern */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-image: url('../assets/rooftop.webp');
  background-size: cover;
  background-position: center var(--bg-pos-y, 0%);
  background-repeat: no-repeat;
  will-change: background-position;
  transform: translateZ(0);
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: rgba(0, 0, 0, 0.293);
}

/* Utility Classes */
.min-h-screen {
  min-height: 100vh;
}

.bg-background {
  background-color: transparent;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Navigation */
.navbar {
  /* Changed from sticky to fixed */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--surface-primary);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.67rem 0;
  height: 60px;
}

.nav-logo {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--foreground);
  text-decoration: none;
  transition: all 0.3s ease;
  max-width: 100px;
  margin-top: 12px;
  height: auto;
}

.nav-logo:hover {
  color: var(--foreground-muted);
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: var(--foreground-muted);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--foreground);
  transition: width 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--foreground);
}

.nav-link.active::after {
  width: 100%;
}

/* Hero Section */
.hero-section {
  /* Added padding-top to account for fixed navbar */
  padding: calc(60px + 4rem) 0 2rem;
}

.hero-content {
  max-width: 600px;
  margin: 0 auto 7rem;
  text-align: center;
  background: var(--surface-secondary);
  backdrop-filter: blur(16px);
  padding: 3rem 2rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  transition: all 0.3s ease;
  animation: fadeInUp 0.6s ease-out;
}

/* Pseudonyme (Le titre principal) */
.hero-pseudo {
  font-size: 3rem;
  /* Très grand */
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--foreground);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.501);
}

.hero-description {
  font-size: 0.9rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--foreground-muted);

  /* Ajout pour justifier le texte */
  text-align: justify;
}

/* Nom et Prénom (Sous-titre) */
.hero-name {
  font-size: 1.5rem;
  /* Plus petit que le pseudo */
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--foreground);
  margin-bottom: 0.5rem;

  /* Force le texte sur une seule ligne */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Localisation (Gris) */
.hero-location {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--foreground-muted);
  /* Couleur grise */
  margin-top: 0;
}

/* Responsive : Ajustement pour mobile */
@media (max-width: 768px) {
  .hero-pseudo {
    font-size: 2.2rem;
  }

  .hero-name {
    font-size: 1.2rem;
  }
}

.hero-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.icon-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  width: 140px;
  background: var(--surface-secondary);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  /* overflow: hidden est nécessaire pour couper l'image en rond, 
       mais attention : si la bordure est à l'extérieur (inset négatif), elle sera coupée. 
       On met donc la bordure à l'intérieur (inset: 0) */
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.446);
}

/* La bordure qui tourne (au-dessus de tout) */
.icon-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  /* La bordure est collée au bord intérieur */
  border-radius: 50%;
  border: 2px solid var(--border);
  z-index: 10;
  /* Z-INDEX LE PLUS HAUT : Pour passer au-dessus de l'image */
  transition: all 0.3s ease;
  pointer-events: none;
  /* Permet de cliquer au travers si besoin */
}

/* L'image (juste en dessous de la bordure) */
.hero-profile-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  /* En dessous de la bordure (10) mais au-dessus de la vidéo (1) */
  transition: opacity 0.3s ease;
}

/* La vidéo (tout au fond) */
.hero-profile-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  /* Tout au fond */
}

/* Flèche de défilement */
.scroll-down-arrow {
  display: inline-block;
  margin-top: 2.5rem;
  animation: bounce 2s ease-in-out 3; /* Limité à 3 itérations */
  /* Espace après le texte */
  color: var(--foreground-muted);
  transition: all 0.3s ease;
  cursor: pointer;
  animation: bounce 2s infinite;
}

.scroll-down-arrow:hover {
  color: var(--foreground);
  transform: translateY(5px);
  /* Petit mouvement vers le bas au survol */
}

.arrow-svg {
  width: 48px;
  /* Largeur augmentée pour l'effet "V large" */
  height: 24px;
  /* Hauteur réduite pour accentuer la largeur */
  display: block;
}

/* Animation de rebond subtile */
@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-6px);
  }

  60% {
    transform: translateY(-3px);
  }
}

/* Désactiver parallax sur appareils mobiles/tactiles pour meilleures performances */
@media (hover: none) and (pointer: coarse) {
  body::before {
    background-position: center center !important;
    background-attachment: scroll;
  }
  body.portfolio-mode::before {
    background-position: center center !important;
    background-attachment: scroll;
  }
}

/* Interaction */
.icon-circle:hover .hero-profile-img {
  opacity: 0;
  /* L'image disparaît pour révéler la vidéo */
}

/* Animation rotate supprimée - inutilisée */

.hero-icon-svg {
  width: 40px;
  height: 40px;
  color: var(--foreground);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--foreground);
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-role {
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  color: var(--foreground);
  font-weight: 500;
}

.hero-location {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--foreground-muted);
  margin-top: 0.5rem;
}

.hero-separator {
  max-width: 100%;
  margin: 2rem auto 0;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}

.hero-description {
  font-size: 0.9rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--foreground-muted);
}

/* =========================================
   STYLE SPÉCIFIQUE PORTFOLIO (FOND NOIR)
   ========================================= */

/* 1. Configuration du fond noir et suppression de l'image de bg */
/* Configuration du parallax pour le Portfolio */
body.portfolio-mode {
  background-color: transparent !important; /* Allow background image to show */
  overflow-x: hidden;
}

/* Enable parallel background for portfolio with der2.jpg */
body.portfolio-mode::before {
  display: block !important;
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-image: url('../assets/der2.webp');
  background-size: cover;
  background-position: center var(--bg-pos-y, 0%);
  background-repeat: no-repeat;
  will-change: background-position;
  transform: translateZ(0);
}

/* Enable darkening overlay (50% opacity) */
body.portfolio-mode::after {
  display: block !important;
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: rgba(0, 0, 0, var(--portfolio-overlay-opacity));
}


/* 2. Conteneur large */
.container-fluid {
  width: 100%;
  max-width: 1800px;
  /* Très large pour contenir beaucoup d'images */
  margin: 0 auto;
  padding: 0 2rem;
}

/* 3. Réinitialisation de la grille pour le style "Libre" */
body.portfolio-mode .gallery-grid {
  width: 100%;
  padding-bottom: 4rem;
}

body.portfolio-mode .gallery-item {
  width: calc(33.333% - 14px);
  /* ~3 par ligne avec marges */
  margin-bottom: 20px;
  background: transparent;
  border: none;
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

body.portfolio-mode .gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  /* Important : auto pour garder le ratio */
  border-radius: 15px;
}

/* Effets au survol */
body.portfolio-mode .gallery-item:hover {
  transform: scale(1.02);
  /* Léger zoom */
  z-index: 2;
  filter: brightness(1.1);
}

/* Suppression des overlays/boutons "Voir" pour un style plus galerie pure */
body.portfolio-mode .gallery-overlay {
  display: none;
}


/* =========================
   MODAL (IMAGE EN GRAND)
   ========================= */
.modal {
  display: none;
  /* Caché par défaut */
  position: fixed;
  z-index: 2000;
  /* Très haut pour passer au-dessus de tout, même de la navbar */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  /* C'est ici que la magie du flou opère */
  /* Fond noir semi-transparent */
  background: rgba(0, 0, 0, 0.85);
  /* Flou puissant sur tout ce qui est derrière la modale */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Pour Safari */

  animation: fadeIn 0.3s ease;
  /* Empêche le scroll du body quand la modale est ouverte */
  overflow: hidden;
  cursor: pointer;
}

/* Animation d'apparition du fond */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Conteneur pour centrer l'image */
.modal-content {
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2rem;
  /* Un peu d'espace autour de l'image */
}

/* L'image en grand */
.modal-image {
  display: block;
  /* Occupe la majorité de l'écran tout en gardant ses proportions */
  max-width: 95%;
  max-height: 95vh;
  width: auto;
  height: auto;

  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  /* Ombre portée pour la détacher du fond */

  /* Animation de zoom déplacée dans une classe JS */
  /* animation: zoomIn 0.4s ease-out; */
  /* Petit effet de rebond retiré */
  cursor: default;
}

.anim-zoom-in {
  animation: zoomIn 0.4s ease-out;
}

/* Animation de zoom de l'image */
/* Animation de zoom de l'image */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animations de slide pour la galerie mobile */
@keyframes slideOutLeft {
  to {
    transform: translateX(-100px);
    opacity: 0;
  }
}

@keyframes slideOutRight {
  to {
    transform: translateX(100px);
    opacity: 0;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-out-left {
  animation: slideOutLeft 0.3s ease forwards;
}

.slide-out-right {
  animation: slideOutRight 0.3s ease forwards;
}

.slide-in-right {
  animation: slideInRight 0.3s ease forwards;
}

.slide-in-left {
  animation: slideInLeft 0.3s ease forwards;
}

/* Bouton de fermeture (X) */
.close {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 2003;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #ffffff;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  /* Ajustement pour centrer visuellement le × */
  padding-bottom: 4px;
}

.close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1) rotate(90deg);
  text-decoration: none;
}

.close:active {
  transform: scale(0.95) rotate(90deg);
}

/* Navigation arrows in modal */
.modal-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2003;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #ffffff;
}

.modal-nav svg {
  width: 28px;
  height: 28px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modal-nav:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.1);
}

.modal-nav:active {
  transform: translateY(-50%) scale(0.95);
}

.modal-nav-prev {
  left: 24px;
}

.modal-nav-next {
  right: 24px;
}

/* Responsive navigation arrows and close button */
@media (max-width: 768px) {
  .modal-nav {
    width: 44px;
    height: 44px;
  }
  
  .modal-nav svg {
    width: 22px;
    height: 22px;
  }
  
  .modal-nav-prev {
    left: 12px;
  }
  
  .modal-nav-next {
    right: 12px;
  }
  
  .close {
    width: 44px;
    height: 44px;
    font-size: 24px;
    top: 16px;
    right: 16px;
  }
}

.portfolio-spacer {
  height: 80px;
  /* Espace pour la navbar fixe */
}

.portfolio-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--foreground);
  margin-bottom: 5rem;
  margin-top: 2rem;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.501);
}

/* Responsive : Sur mobile, on autorise les images à être plus grandes */
@media (max-width: 768px) {
  body.portfolio-mode .gallery-item {
    width: calc(50% - 10px);
    /* 2 images par ligne sur tablette */
  }
}

@media (max-width: 480px) {
  body.portfolio-mode .gallery-item {
    width: 100%;
    /* 1 image par ligne sur mobile */
  }
}

/* Responsive */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }

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

  .nav-links {
    gap: 1rem;
  }

  .nav-link {
    font-size: 0.8rem;
  }

  .links-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
  }

  .link-card {
    padding: 1.5rem;
  }
}

/* --- Styles Spécifiques aux Icônes --- */

/* 1. LinkedIn : Blanc par défaut, Bleu au survol (#0A66C2) */
.link-professional .icon path {
  /* Utilise la couleur du foreground (blanc) par défaut */
  fill: var(--foreground);
  transition: fill 0.2s ease;
}

.link-professional:hover .icon path {
  /* Couleur Bleu LinkedIn */
  fill: #00a6ff;
}

/* 2. Hack The Box : Blanc par défaut, Vert au survol (#9FE808) */
.htb-icon path {
  /* Couleur de base pour l'icône HTB (devrait être blanche par défaut) */
  fill: var(--foreground);
  transition: fill 0.2s ease;
}

.link-security:hover .htb-icon path {
  /* Couleur Vert Hack The Box au survol du lien parent */
  fill: #aaff00;
}

.github-icon path {
  /* Surcharge la couleur par défaut du path pour qu'elle soit blanche */
  fill: var(--foreground);
  transition: fill 0.2s ease;
}

.link-professional:hover .github-icon path {
  /* La couleur de la marque au survol (Noir ou Gris foncé) */
  fill: #000000;
}

/* 5. Writeups : Blanc par défaut, Violet vif au survol */
.writeups-icon path {
  fill: var(--foreground);
  transition: fill 0.2s ease;
}

.link-professional:hover .writeups-icon path {
  /* Violet vif */
  fill: #A855F7;
}

/* 6. Galerie : Blanc par défaut, Jaune confortable au survol */
.galerie-icon path {
  stroke: var(--foreground);
  transition: stroke 0.2s ease;
}

.link-creative:hover .galerie-icon path {
  /* Jaune confortable */
  stroke: #FBBF24;
}

/* 3. Root Me : Blanc par défaut, Rouge Vif au survol (#FF0000) */
.rootme-icon path {
  fill: var(--foreground);
  transition: fill 0.2s ease;
}

.link-security:hover .rootme-icon path {
  /* Couleur Rouge Vif au survol */
  fill: #FF0000;
}

/* Links Section - New Structure */
.links-section {
  padding: 1rem 0;
}

.links-header {
  text-align: center;
  margin-bottom: 3rem;
  animation: fadeInUp 0.6s ease-out;
}

.links-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--foreground);
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.links-subtitle {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--foreground-muted);
}

.links-grid {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  /* Espace entre les groupes */
}

.link-group {
  flex: 1 1 280px;
  /* Flexibilité pour une disposition réactive */
  min-width: 280px;
  background: var(--surface-secondary);
  /* Fond du groupe légèrement plus opaque */
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.group-title {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--foreground);
  text-align: center;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.link-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-primary);
  /* Fond des cartes, effet de glassmorphisme */
  backdrop-filter: blur(10px);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  /* Espace entre les cartes dans le groupe */
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  color: var(--foreground);
  border: 1px solid transparent;
}

.link-card:last-child {
  margin-bottom: 0;
}

.link-card:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.link-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  min-width: 36px;
  /* Suppression du border et du background spécifiques pour un look plus épuré */
  border-radius: 6px;
  transition: all 0.2s ease;
}

.icon {
  height: 20px;
  width: 20px;
  color: var(--foreground);
  stroke-width: 1.5;
}

.link-title {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--foreground);
  font-weight: 500;
}

.link-description {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--foreground-muted);
}

/* Responsive */
@media (max-width: 600px) {
  .links-grid {
    flex-direction: column;
    gap: 1.5rem;
  }
}

img {
  /* Empêche le glisser-déposer de l'image (Drag & Drop) */
  -webkit-user-drag: none;

  /* Empêche la sélection de l'image (Surlignage bleu) */
  user-select: none;

  /* Empêche le menu contextuel au clic long sur mobile (iOS/Android) */
  -webkit-touch-callout: none;
}

@keyframes fadeInGallery {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery-fade-in {
  animation: fadeInGallery 0.8s ease-out forwards;
}

/* =============================================
   RESPONSIVE MOBILE - SMARTPHONES
   ============================================= */

/* Menu hamburger - visible uniquement sur mobile */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.mobile-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--foreground);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Overlay du menu mobile - floute le contenu de la page */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 480px) {
  /* Affichage du menu hamburger */
  .mobile-menu-toggle {
    display: flex;
  }

  /* Navigation mobile */
  .navbar {
    padding: 0.5rem 0;
  }

  .nav-content {
    height: 50px;
    padding: 0.75rem 0;
  }

  .nav-logo {
    max-width: 80px;
    margin-top: 8px;
  }

  .nav-links {
    position: fixed;
    top: 50px;
    left: auto;
    right: 0;
    bottom: 0;
    width: 50%;
    max-width: 280px;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    
    /* Pas de fond - l'overlay floute déjà la page */
    background: transparent;
    
    padding: 1.5rem 0;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    z-index: 999;
  }

  .nav-links.active {
    transform: translateX(0);
    opacity: 1;
  }

  .nav-link {
    font-size: 0.95rem;
    padding: 1rem 1.5rem;
    width: 100%;
    text-align: right;
    letter-spacing: 0.1em;
    /* Pas de séparateur */
  }

  .nav-link:last-child {
    border-bottom: none;
  }

  .nav-link::after {
    display: none;
  }

  /* Hero Section Mobile */
  .hero-section {
    padding: 150px 0 1.5rem;
  }

  .container {
    padding: 0 1rem;
  }

  .hero-content {
    padding: 2rem 1.25rem;
    margin-bottom: 3rem;
    border-radius: 12px;
  }

  .hero-icon {
    margin-bottom: 1.5rem;
  }

  .icon-circle {
    height: 100px;
    width: 100px;
  }

  .hero-pseudo {
    font-size: 1.8rem;
    letter-spacing: 0.08em;
  }

  .hero-name {
    font-size: 1rem !important;
  }

  .hero-location {
    font-size: 0.8rem;
  }

  .hero-separator {
    margin: 1.5rem auto 0;
    padding-top: 1.5rem;
  }

  .hero-description {
    font-size: 0.85rem;
    line-height: 1.6;
  }

  .scroll-down-arrow {
    margin-top: 1.5rem;
  }

  .arrow-svg {
    width: 36px;
    height: 18px;
  }

  /* Section Liens Mobile */
  .links-section {
    padding: 0.5rem 0;
  }

  .links-header {
    margin-bottom: 2rem;
  }

  .links-title {
    font-size: 1.2rem;
    letter-spacing: 0.12em;
  }

  .links-grid {
    flex-direction: column;
    gap: 1.25rem;
  }

  .link-group {
    flex: 1 1 auto;
    min-width: unset;
    width: 100%;
    padding: 1.25rem;
    border-radius: 10px;
  }

  .group-title {
    font-size: 0.8rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .link-card {
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
  }

  .link-content {
    gap: 0.75rem;
  }

  .icon {
    height: 18px;
    width: 18px;
  }

  .link-title {
    font-size: 0.8rem;
  }

  .link-description {
    font-size: 0.65rem;
  }

  /* Portfolio mode mobile */
  body.portfolio-mode .gallery-grid {
    columns: 1;
    column-gap: 12px;
  }

  body.portfolio-mode .gallery-item {
    margin-bottom: 12px;
    border-radius: 10px;
  }

  body.portfolio-mode .gallery-item img {
    border-radius: 10px;
  }

  .portfolio-spacer {
    height: 60px;
  }

  .portfolio-title {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
  }

  .container-fluid {
    padding: 0 1rem;
  }

  /* Modal mobile */
  .modal-content {
    padding: 1rem;
  }

  .modal-image {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 6px;
  }

  .close {
    top: 15px;
    right: 15px;
    font-size: 32px;
  }

  .modal-nav {
    display: none !important;
  }
}

/* Tablettes et petits écrans (entre 481px et 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  body.portfolio-mode .gallery-grid {
    columns: 2;
  }

  .hero-section {
    padding-top: 150px;
  }

  .hero-content {
    padding: 2.5rem 1.5rem;
  }
}