@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Miltonian&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Lora:wght@600&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Poppins:wght@500&display=swap');

@font-face {
  font-family: 'Glanity';
  src: url('/assets/fonts/Glanity.ttf') format('truetype');
}
@font-face {
  font-family: 'Libel';
  src: url('/assets/fonts/Libel.ttf') format('truetype');
}
@font-face {
  font-family: 'Nexa';
  src: url('/assets/fonts/Nexa.ttf') format('truetype');
}
@font-face {
  font-family: 'Cocogoose';
  src: url('/assets/fonts/Cocogoose.ttf') format('truetype');
}
@font-face {
  font-family: 'Madani';
  src: url('/assets/fonts/Madani.ttf') format('truetype');
}
@font-face {
  font-family: 'Hargloves';
  src: url('/assets/fonts/Hargloves.ttf') format('truetype');
}
.separator-teal-dark,
.separator-orange-teal,
.separator-gray-dark,
.separator-white-fade {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

:root {
    --dark: #1E1E1E;       /* Background principal */
    --light: #F4F4F5;      /* Texte clair */
    --green: #5EA08C;      /* Accent vert */
    --beige: #F5DEB3;      /* Accent beige */
    --blue: #2B6777;       /* Accent bleu */
    --lime: #CFEF00;       /* Lime flash */
    --orange: #F97316;     /* Accent orange */
    --yellow: #F59E0B;     /* Accent jaune */
    --border: #3C3C3C;     /* Bordures */
    --header-logo-size: 6rem;      /* Header logo size */
    --article-logo-size: 8rem;     /* Article/project logo */
    --footer-logo-size: 5rem;      /* Footer logo */
  }
  .chameleon-text {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #5EA08C, #2B6777, #F5DEB3, #CFEF00);
    background-size: 300% 300%;
    animation: chameleon 8s ease infinite;
  }
  #background-canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: transparent;
  }

  /* Reset & Base */
  *, ::before, ::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Madani', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--light);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Nexa', sans-serif;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  
  .prestigious-text {
    font-family: 'Nexa', sans-serif;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  
  /* Focus Accessible */
  a:focus, button:focus {
    outline: 2px dashed var(--green);
    outline-offset: 4px;
  }
  @keyframes float-smooth {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  
  .animate-float-smooth {
    animation: float-smooth 5s ease-in-out infinite;
  }
  
  /* Animations */
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  @keyframes chameleon {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  @keyframes slideInFromLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
  }
  
  @keyframes slideInFromRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes fadeInBars {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* Header */
  .header {
    background-color: rgba(30, 30, 30, 0.85) !important; /* Semi-transparent header */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    height: 128px; /* ou h-20 en Tailwind */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    overflow: visible;  z-index: 1000;
  }
  @media (min-width: 768px) {
    .header {
      height: 160px;
    }
  }
  
  
  .header-logo { width: var(--header-logo-size); /* USE THIS */
    height: auto;
    display: block;
    filter: drop-shadow(2px 6px 6px rgba(0, 0, 0, 5.5));
  }

  /* Add to your main.css */
.chart-bar {
    position: relative;
    overflow: visible !important;
  }
  .chart-bar::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 20%;
    width: 60%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: particle-fade 1.2s ease-in-out infinite alternate 0.3s;
  }
  .chart-bar::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    opacity: 0;
    animation: particle-fade 1s ease-in-out infinite alternate;
  }
  
  @keyframes particle-fade {
    0% {
      opacity: 0;
      transform: translateY(0) scale(0.8);
    }
    100% {
      opacity: 1;
      transform: translateY(-5px) scale(1.1);
    }
  }
  /* === Hamburger Button === */
  .hamburger {
    cursor: pointer;
    height: 100%;                  /* Center vertically */
    display: flex;
    align-items: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transition: all 0.3s ease;
  }
  
  .hamburger:hover {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
    transform: scale(1.05);
  }
  
  .hamburger input {
    display: none;
  }
  
  .hamburger svg {
    /* The size of the SVG defines the overall size */
    height: 3em;
    /* Define the transition for transforming the SVG */
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .line {
    fill: none;
    stroke: rgb(255, 255, 255);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    /* Define the transition for transforming the Stroke */
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
                stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .line-top-bottom {
    stroke-dasharray: 12 63;
  }
  
  .hamburger input:checked + svg {
    transform: rotate(-45deg);
  }
  
  .hamburger input:checked + svg .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
  }
  
  .menu-box {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    box-shadow: 0 0 8px rgba(94, 160, 140, 0.2), 0 0 16px rgba(245, 222, 179, 0.2);
    background: rgba(30, 30, 30, 0.9);
    z-index: 20;
    margin-top: 0.5rem;
    border-radius: 18px;
    padding: 0.5rem;
    width: 220px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    font-family: 'Madani', sans-serif;
  }
  .menu-box a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
  }
  
  .menu-box a::before {
    font-family: "Madani";
    font-weight: 900;
    width: 20px;
    display: inline-block;
  }
  
  .menu-box a[href*="#hero"]::before { content: "\f015"; } /* home */
  .menu-box a[href*="#works-section"]::before { content: "\f0e8"; } /* projects */
  .menu-box a[href*="#about"]::before { content: "\f2bb"; } /* about */
  .menu-box a[href*="#skills"]::before { content: "\f542"; } /* skills */
  .menu-box a[href*="#article-section"]::before { content: "\f15c"; } /* articles */
  .menu-box a[href*="#contact"]::before { content: "\f0e0"; } /* contact */
  /* === Menu Buttons (from your design) === */
  .input {
    display: flex;
    flex-direction: column;
    width: 230px;
    background-color: #0d1117;
    justify-content: center;
    border-radius: 10px;
    transition: 1s;
    padding: 10px;
    overflow: hidden;
  }
  .menu-box.block {
    opacity: 1;
    transform: translateY(0);
  }
 .value {
  background-color: transparent;
  border: none;
  padding: 12px 16px;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  cursor: pointer;
  font-family: 'Madani', serif;
  text-transform: uppercase;
  font-size: 0.9rem;
  border-radius: 6px;
  transition: background 0.3s ease;
}
.value:hover {
  background-color: #21262C;
}

  .value:not(:active):hover,
  .value:focus {
    border: 2px solid #1a1f24;
    color: #637185;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }
  
  .value:focus,
  .value:active {
    background-color: #1A1F24;
    outline: none;
    margin-left: 17px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 3px 12px rgba(0, 0, 0, 0.2);
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  }
  
  .value::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -10px;
    width: 5px;
    height: 80%;
    background-color: #2F81F7;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .value:focus::before,
  .value:active::before {
    opacity: 1;
  }
  
  .value svg {
    width: 20px;
  }
  .value i {
    font-size: 1rem;
    color: #7D8590;
  }
  .input:hover > :not(.value:hover) {
    transition: 300ms;
    filter: blur(1.5px);
    transform: scale(0.95, 0.95);
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }
  
  @keyframes appearFromBtn {
    0% {
      opacity: 0;
      transform: scale(0.4) translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  /* Google Fonts imports should be at the very top of the CSS file, before any other rules. 
     If this block is not at the top, move it there for best practice. 
     Otherwise, the imports themselves are correct. */

  button.learn-more {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: 'Libel', sans-serif;
    font-size: 4.5rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  
  button.learn-more .circle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #fa8a51;
    border-radius: 1.625rem;
    height: 3rem;
    width: 3rem;
    overflow: hidden;
    padding: 0 0.75rem;
    transition: all 0.4s ease;
    white-space: nowrap;
    gap: 1.5rem; /* 🔧 réduit l'espace entre flèche et texte */
    box-shadow: none;
    border: 2px solid transparent;
  }
  
  button.learn-more .icon.arrow {
    position: relative;
    width: 1.125rem;
    height: 0.125rem;
    flex-shrink: 0;
  }
  
  button.learn-more .icon.arrow::before {
    content: "";
    position: absolute;
    top: -0.29rem;
    right: 0;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid #2E2E2E;
    border-right: 0.125rem solid #2E2E2E;
    transform: rotate(45deg);
  }
  
  button.learn-more .button-text {
    opacity: 0;
    transform: translateX(-2rem);
    color: #2E2E2E;
    font-size: 1.6rem;
    transition: all 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 100; /* 🧵 thin text */

  }
  /* 🔁 Hover Effects */
  button.learn-more:hover .circle {
    width: 18rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 🟢 subtle glow */
    border-color: #d4af7f; /* optional golden-beige border */
  }
  
  button.learn-more:hover .button-text {
    opacity: 1;
    transform: translateX(0);
  }
  /* AJOUT POUR LA VIDÉO HERO */
#hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  animation: fadeInScale 1.5s ease-out forwards;
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
}

#hero .z-10 {
  color: white; /* Force le texte à être blanc pour la lisibilité sur la vidéo */
}
  /* 📱 Responsive Mobile Adjustment */
  @media (max-width: 640px) {
    button.learn-more .circle {
      height: 2.5rem;
      width: 2.5rem;
      font-size: 0.85rem;
      gap: 1.2rem;
    }
  
    button.learn-more:hover .circle {
      width: 13rem;
    }
  
    button.learn-more .button-text {
      font-size: 0.85rem;
    }
  }
  
  /* Coding Panel Button - Green & Blue Theme */
  #programming-panel .learn-more .circle {
    background: linear-gradient(135deg, #93f9da 0%, #2B6777 100%);
    border: none;
    box-shadow: none;
  }

  #programming-panel .learn-more .icon.arrow::before {
    border-top: 0.125rem solid #ffffff;
    border-right: 0.125rem solid #ffffff;
  }

  #programming-panel .learn-more .button-text {
    color: #F4F4F5;
  }

  #programming-panel .learn-more:hover .circle {
    background: linear-gradient(135deg, #00697a 0%, #1F5A6A 100%);
    border: none;
    box-shadow: 0 0 15px rgba(94, 160, 140, 0.4);
  }
  .input .hamburger {
    align-self: flex-end;
    z-index: 50;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  /* Hero */
  .hero {
    height: 100vh;
    min-height: 750px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    position: relative;
  }
  .hero::after {
    content: '';
    display: block;
    height: 80px;
  }
  
  .hero-content h1 {
    font-size: 18rem;
    margin-bottom: 0.6rem;
  }
  #hero-title img {
    height: 7em;
  }
  /* Sections */
  section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  section + section {
    margin-top: -80px;
  }
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* About */
  .about-content {
    display: flex;
    gap: 3rem;
    align-items: center;
    margin-top: 3rem;
  }
  .about-text {
    flex: 1;
  }
  .about-image {
    flex: 1;
  }
  .about-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  }
  #works-section {
    transform-origin: top center;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin-top: -1px; /* Pulls the section up */
  } 
  
  
  #works-section:not(.hidden) {
    display: block;
    opacity: 1;
    transform: scaleY(1);
  }
  
  #works-section.hidden {
    display: none;
    opacity: 0;
    transform: scaleY(0);
  }
  /* Works Section */
  .works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
  }
  .panel-button {
    padding: 3rem 2rem;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  #design-panel {
    background: linear-gradient(135deg, rgba(var(--yellow-rgb),0.08) 0%, rgba(var(--orange-rgb),0.08) 100%);
    animation: animatedGradientDesign 8s ease-in-out infinite alternate;
    border-radius: 1.5rem;
    /* Removed blur for visibility */
  }
  #programming-panel {
    background: linear-gradient(135deg, rgba(var(--blue-rgb),0.08) 0%, rgba(var(--green-rgb),0.08) 100%);
    animation: animatedGradientCoding 8s ease-in-out infinite alternate;
    border-radius: 1.5rem;
    /* Removed blur for visibility */
  }
  @keyframes animatedGradientDesign {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  @keyframes animatedGradientCoding {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  .panel-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  }
  
  /* Contact Form */
  .contact-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 12px;
    background: rgba(30, 30, 30, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
  }
  .form-group {
    position: relative;
    margin-bottom: 2rem;
  }
  .form-input {
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    transition: all 0.3s ease;
  }
  .form-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 3px var(--green);
    border-color: var(--green);
  }
/* ========== Shared Wave Separator Base ========== */
.separator-wave {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  position: relative;
  z-index: 1;
}

.separator-wave svg {
  display: block;
  width: 100%;
  height: 100px;
  transform-origin: center;
  transition: transform 0.6s ease;
}

/* ========== Color Presets ========== */
.separator-teal-dark svg path {
  fill: url(#teal-dark);
}

.separator-orange-teal svg path {
  fill: url(#orange-teal);
}

.separator-gray-dark svg path {
  fill: url(#gray-dark);
}

.separator-white-fade svg path {
  fill: url(#white-fade);
}

/* ========== Position Utilities ========== */
.separator-top {
  position: absolute;
  top: 0;
  left: 0;
}

.separator-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}

/* ========== Responsive Flip Utilities ========== */
.separator-flip {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .separator-wave svg {
    height: 70px;
  }
}

/* ========== Optional Animations ========== */
/* Note: Safari does not support animating the "d" attribute of path. Use transform-based alternatives instead. */
.separator-wave.animate-wave svg {
  animation: waveTranslate 4s ease-in-out infinite alternate;
}

@keyframes waveTranslate {
  0% {
    transform: scaleY(1) translateY(0px);
  }
  100% {
    transform: scaleY(1.05) translateY(-5px);
  }
}
  .chart-container {
  opacity: 1;
  transform: translateY(0);
  height: 400px !important;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#skillsRadarChart,
#skillsBarChart {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 300px;
  max-width: 100%;
  max-height: 100%;
}

canvas {
  animation: fadeInBars 0.8s ease-out forwards;
  max-height: 100%;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
  
  @keyframes fadeInBars {
    0% {
      opacity: 0;
      transform: scaleY(0.5);
    }
    100% {
      opacity: 1;
      transform: scaleY(1);
    }
  }
  /* Loader */
  .pl {
    width: 6em;
    height: 6em;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
  }
  .pl:before, .pl:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 0.5em solid transparent;
  }
  
  /* Utility Animations */
  .float-animation {
    animation: float 6s ease-in-out infinite;
    will-change: transform, opacity;

  }
  .slide-in-left {
    animation: slideInFromLeft 0.6s ease-out forwards;
  }
  .slide-in-right {
    animation: slideInFromRight 0.6s ease-out forwards;
  }
  .fade-in {
    animation: fadeIn 0.8s ease-out forwards;
  }
  /* Form Container */
.form-container {
    max-width: 700px;
    margin: 0 auto;
    background-color: #0a192f;
    padding: 30px;
    border-left: 5px solid #64ffda;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
    font-family: 'Montserrat', sans-serif;
}
  
  .heading {
    display: block;
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    font-family: 'Nexa', sans-serif;
}
  
  /* Input Fields */
  .form-container .form .input {
    color: #ccd6f6;
    width: 100%;
    background-color: #112240;
    border: none;
    outline: none;
    padding: 10px;
    margin-bottom: 20px;
    font-weight: 400;
    transition: all 0.2s ease-in-out;
    border-left: 1px solid transparent;
    font-family: 'Inter', sans-serif;
  }
  
  .form-container .form .input:focus {
    border-left: 5px solid #64ffda;
  }
  
  /* Textarea */
  .form-container .form .textarea {
    width: 100%;
    padding: 10px;
    border: none;
    outline: none;
    background-color: #112240;
    color: #64ffda;
    font-weight: 400;
    resize: none;
    max-height: 150px;
    margin-bottom: 20px;
    border-left: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    font-family: 'Inter', sans-serif;
  }
  
  .form-container .form .textarea:focus {
    border-left: 5px solid #64ffda;
  }
  
  /* Button Container */
  .form-container .form .button-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
  }
  .sendbtn-button {
    font-family: inherit;
    font-size: 20px;
    background: royalblue;
    color: white;
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
  }
  
  .sendbtn-button span {
    display: block;
    margin-left: 0.3em;
    transition: all 0.3s ease-in-out;
  }
  
  .sendbtn-button svg {
    display: block;
    transform-origin: center center;
    transition: transform 0.3s ease-in-out;
  }
  
  .sendbtn-button:hover .sendbtn-svg-wrapper {
    animation: sendbtn-fly-1 0.6s ease-in-out infinite alternate;
  }
  
  .sendbtn-button:hover svg {
    transform: translateX(1.2em) rotate(45deg) scale(1.1);
  }
  
  .sendbtn-button:hover span {
    transform: translateX(5em);
  }
  
  .sendbtn-button:active {
    transform: scale(0.95);
  }
  
  @keyframes sendbtn-fly-1 {
    from {
      transform: translateY(0.1em);
    }
  
    to {
      transform: translateY(-0.1em);
    }
  }
  .video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100; /* Behind all content */
    overflow: hidden;
  }
  .bg-dark {
    background-color: transparent !important; /* Remove solid bg colors */
  }
  
  .bg-border {
    background: rgba(30, 30, 30, 0.8) !important; /* More opaque for readability */
  }
  #bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
  }
  
  .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 30, 30, 0.7); /* Dark overlay for better text contrast */
    z-index: -99;
  }
  
  /* Ensure content has proper z-index */
  body {
    position: relative;
    z-index: 1;
  }
  /* Responsive */
  @media (max-width: 768px) {
    header {
      padding: 1rem 2rem !important;
      position: fixed !important;
    }
    .mobile-menu-toggle {
      display: none !important;
    }
    #mobile-menu {
      display: none !important;
    }
    nav, .nav-buttons, #desktop-nav-menu {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
    }
    .about-content {
      flex-direction: row !important;
    }
    .section {
      padding: 6rem 2rem !important;
    }
    .separator {
      height: 100px !important;
    }
   
    .nav-button .icon {
      transition: transform 0.3s;
    }
    .nav-button:hover .icon {
      transform: translateX(5px);
    }
  }
  

  /* ===== BACK BUTTON (existing - keep this) ===== */
.back-button-container {
    width: 2.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    background: var(--border);
    color: var(--light);
    font-weight: bold;
    padding: 0.5rem;
    border-radius: 1rem;
    cursor: pointer;
  }
  .back-button-container:hover {
    width: 7rem;
    background: var(--blue);
  }
  .back-button-text {
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    margin-left: 0.5rem;
  }
  .back-button-container:hover .back-button-text {
    opacity: 1;
  }
  
  /* ===== HOME BUTTON (new - add this) ===== */
  .home-button-container {
    display: flex;
    align-items: center;
    color: var(--green);
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: 1rem;
  }
  .home-button-container:hover {
    color: var(--lime);
  }
  .home-button-container svg {
    transition: transform 0.3s ease;
  }
  .home-button-container:hover svg {
    transform: scale(1.1);
  }
  .home-button-text {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: 
      opacity 0.3s ease,
      max-width 0.3s ease;
    white-space: nowrap;
    margin-left: 0.5rem;
    font-size: 0.875rem;
  }
  .home-button-container:hover .home-button-text {
    opacity: 1;
    max-width: 4rem;
  }
  
  /* Mobile adaptation */
  @media (max-width: 640px) {
    .home-button-text {
      display: none;
    }
  }
  .button {
    cursor: pointer;
    position: relative;
    padding: 14px 36px;
    font-size: 18px;
    color: #eb9b00;
    border: 2px solid rgb(193, 163, 98);
    border-radius: 34px;
    background-color: transparent;
    font-weight: 600;
    font-family: 'Nexa', sans-serif;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    width: 100%;
    max-width: 320px;
    z-index: 1;
  }
  
  .button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease-in-out;
    background-color: #eb9b00;
    border-radius: inherit;
  }
  
  .button:hover::before {
    transform: scaleX(1);
  }
  .button:hover {
    color: #212121;
    transform: scale(1.05);
    box-shadow: 0 0px 20px rgba(193, 163, 98, 0.4);
  }
  .button:active {
    transform: scale(0.98);
  }
  
  /* Specific styles for DESIGN button */
  .btn-design {
    color: #eb9d00;
    border: 2px solid rgb(193, 163, 98);
  }
  
  .btn-design::before {
    background-color: #eb9b00;
  }
  
  .btn-design:hover {
    color: #1E1E1E;
    box-shadow: 0 0px 20px rgba(193, 163, 98, 0.4);
  }
  
  /* Specific styles for CODE button */
  .btn-code {
    color: #5EA08C;
    border: 2px solid #5EA08C;
  }
  
  .btn-code::before {
    background-color: #5EA08C;
  }
  
  .btn-code:hover {
    color: #1E1E1E;
    box-shadow: 0 0px 20px rgba(94, 160, 140, 0.4);
  }
  /* --- Début du CSS du bouton --- */
  .btn-hero {
    position: relative;
    left: 0;
    margin-left: 0;
    z-index: 1;
    width: 320px;
    height: 72px;
    font-family: 'Nexa', sans-serif;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
    color: #FFFFFF; /* Texte en blanc pour plus de visibilité */
    letter-spacing: 2px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.5rem 0;
    background: transparent;
    border: none;
    cursor: pointer;
    /* Lignes en gris plus clair pour une meilleure visibilité */
    --line_color: #CCCCCC; 
    /* Fond de l'effet beige avec plus d'opacité */
    --back_color: rgba(245, 245, 220, 0.3); 
}

@keyframes fadeInScale {
    from { 
        opacity: 0;
        transform: translateX(-50%) translateY(-50%) scale(0.9);
    }
    to { 
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
}

.btn-hero__text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.btn-hero::before,
.btn-hero::after,
.btn-hero__text::before,
.btn-hero__text::after {
    content: "";
    position: absolute;
    height: 4px; /* Augmentation de l'épaisseur */
    border-radius: 2px;
    background: var(--line_color);
    transition: all 0.5s ease;
}

.btn-hero::before {
    top: 0;
    left: 54px;
    width: calc(100% - 56px * 2 - 16px);
}

.btn-hero::after {
    top: 0;
    right: 54px;
    width: 8px;
}

.btn-hero__text::before {
    bottom: 0;
    right: 54px;
    width: calc(100% - 56px * 2 - 16px);
}

.btn-hero__text::after {
    bottom: 0;
    left: 54px;
    width: 8px;
}

.btn-hero__line {
    position: absolute;
    top: 0;
    width: 56px;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.btn-hero__line::before {
    content: "";
    position: absolute;
    top: 0;
    width: 150%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 300px;
    /* Bordure circulaire en beige, plus épaisse */
    border: solid 4px #F5F5DC; 
}

.btn-hero__line:nth-child(1),
.btn-hero__line:nth-child(1)::before {
    left: 0;
}

.btn-hero__line:nth-child(2),
.btn-hero__line:nth-child(2)::before {
    right: 0;
}

.btn-hero:hover {
    /* Texte en noir au survol pour contraster avec l'animation */
    color: #000000; 
    animation: btn-hero-bounce 0.3s;
}

@keyframes btn-hero-bounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.08); }
    60% { transform: scale(0.97); }
    100% { transform: scale(1); }
}

.btn-hero:hover::before,
.btn-hero:hover .btn-hero__text::before {
    width: 8px;
}

.btn-hero:hover::after,
.btn-hero:hover .btn-hero__text::after {
    width: calc(100% - 56px * 2 - 16px);
}

.btn-hero__drow1,
.btn-hero__drow2 {
    position: absolute;
    z-index: -1;
    border-radius: 16px;
    transform-origin: 16px 16px;
    /* Effet de lueur animé en beige (Beige animated glow effect) */
    background: #F5F5DC; 
    transition: background 0.3s;
}
@keyframes menuSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 1px);
  }
  40% {
    transform: translate(-1px, -1px);
  }
  60% {
    transform: translate(1px, 2px);
  }
  80% {
    transform: translate(1px, -1px);
  }
  100% {
    transform: translate(0);
  }
}

.menu-box.glitch {
  animation: glitch 1s infinite linear alternate;
}

.menu-box.animate-in {
  animation: menuSlideIn 0.4s ease-out forwards;
}

/* Remove any white glow animation for .hero-glow and ensure only bounce is applied */
@keyframes bounceLogo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}
#article-section .hero-glow {
  animation: bounceLogo 2s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.btn-hero__drow1 {
    top: -16px;
    left: 40px;
    width: 32px;
    height: 0;
    transform: rotate(30deg);
}

.btn-hero__drow2 {
    top: 44px;
    left: 77px;
    width: 32px;
    height: 0;
    transform: rotate(-127deg);
}

.btn-hero__drow1::before,
.btn-hero__drow1::after,
.btn-hero__drow2::before,
.btn-hero__drow2::after {
    content: "";
    position: absolute;
    background: var(--back_color);
    transition: background 0.3s;
}

.btn-hero:hover .btn-hero__drow1,
.btn-hero:hover .btn-hero__drow2,
.btn-hero:hover .btn-hero__drow1::before,
.btn-hero:hover .btn-hero__drow1::after,
.btn-hero:hover .btn-hero__drow2::before,
.btn-hero:hover .btn-hero__drow2::after {
    background: #F5F5DC;
}

.btn-hero__drow1::before {
    bottom: 0;
    left: 0;
    width: 0;
    height: 32px;
    border-radius: 16px;
    transform-origin: 16px 16px;
    transform: rotate(-60deg);
}

.btn-hero__drow1::after {
    top: -10px;
    left: 45px;
    width: 0;
    height: 32px;
    border-radius: 16px;
    transform-origin: 16px 16px;
    transform: rotate(69deg);
}

.btn-hero__drow2::before {
    bottom: 0;
    left: 0;
    width: 0;
    height: 32px;
    border-radius: 16px;
    transform-origin: 16px 16px;
    transform: rotate(-146deg);
}

.btn-hero__drow2::after {
    bottom: 26px;
    left: -40px;
    width: 0;
    height: 32px;
    border-radius: 16px;
    transform-origin: 16px 16px;
    transform: rotate(-262deg);
}

.btn-hero:hover .btn-hero__drow1 {
    animation: drow1 ease-in 0.06s;
    animation-fill-mode: forwards;
}

.btn-hero:hover .btn-hero__drow1::before {
    animation: drow2 linear 0.08s 0.06s;
    animation-fill-mode: forwards;
}

.btn-hero:hover .btn-hero__drow1::after {
    animation: drow3 linear 0.03s 0.14s;
    animation-fill-mode: forwards;
}

.btn-hero:hover .btn-hero__drow2 {
    animation: drow4 linear 0.06s 0.2s;
    animation-fill-mode: forwards;
}

.btn-hero:hover .btn-hero__drow2::before {
    animation: drow3 linear 0.03s 0.26s;
    animation-fill-mode: forwards;
}

.btn-hero:hover .btn-hero__drow2::after {
    animation: drow5 linear 0.06s 0.32s;
    animation-fill-mode: forwards;
}

@keyframes drow1 {
    0% { height: 0; }
    100% { height: 100px; }
}

@keyframes drow2 {
    0% { width: 0; opacity: 0; }
    10% { opacity: 0; }
    11% { opacity: 1; }
    100% { width: 120px; }
}

@keyframes drow3 {
    0% { width: 0; }
    100% { width: 80px; }
}

@keyframes drow4 {
    0% { height: 0; }
    100% { height: 120px; }
}

@keyframes drow5 {
    0% { width: 0; }
    100% { width: 124px; }
}
#contact-section {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s, transform 0.8s;
}

#contact-logo {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s, transform 0.8s;
}

#contact-form-animated {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s, transform 0.8s;
}

.contact-field {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s, transform 0.6s;
}

/* Animation states for when elements are triggered */
#contact-section.animate-in {
  animation: fadeInUp 0.8s ease-out;
}

#contact-logo.animate-in {
  animation: scaleIn 0.8s ease-out;
}

#contact-form-animated.animate-in {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.contact-field.animate-in {
  animation: fadeInUp 0.6s ease-out both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
#scrollToTopBtn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #a1a1aa); /* White to Gray */
  color: #1f1f1f;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 1000;
  overflow: hidden;
  transition: all 0.3s ease;
}

#scrollToTopBtn:hover {
  background: linear-gradient(135deg, #e4e4e7, #d4d4d8); /* Subtle hover gradient */
  transform: scale(1.05);
}

#scrollToTopBtn.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

#scrollToTopBtn .scroll-icon {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease;
}

#scrollToTopBtn:hover .scroll-icon {
  transform: translateY(-4px);
}

#scrollToTopBtn .scroll-label {
  position: absolute;
  bottom: -22px;
  font-size: 0.7rem;
  color: #f1f1f1;
  opacity: 0;
  transition: opacity 0.4s ease;
  white-space: nowrap;
}

#scrollToTopBtn:hover .scroll-label {
  opacity: 1;
}

.animate-fade-in {
  animation: fadeInUpScale 0.8s cubic-bezier(0.4,0,0.2,1) both;
}
  
.bg-border {
  background: rgba(245, 245, 245, 0.08) !important;
  border: 1px solid var(--border);
}
  
/* Hero Title Hover Effect */
.hero-title-hover {
  transition: all 0.3s ease;
}

.hero-title-hover:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

/* Contact Section Background */
#contact-section {
  background: linear-gradient(135deg, rgba(94, 160, 140, 0.1) 0%, rgba(43, 103, 119, 0.1) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Social Icons Animations */
.social-icon {
  transition: all 0.3s ease;
  display: inline-block;
}

.social-icon:hover {
  transform: translateY(-3px) scale(1.1);
  filter: brightness(1.2);
}

.social-icon:nth-child(1):hover {
  color: #0077b5;
}

.social-icon:nth-child(2):hover {
  color: #333;
}

.social-icon:nth-child(3):hover {
  color: #ea4335;
}

/* Skills Section Background */
#skills {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(245, 158, 11, 0.08) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Separators */
.separator-gray {
  height: 4px;
  background: linear-gradient(90deg, transparent, #6b7280, transparent);
  margin: 0;
}

.separator-orange {
  height: 4px;
  background: linear-gradient(90deg, transparent, #f97316, transparent);
  margin: 0;
}

.separator-blue {
  height: 4px;
  background: linear-gradient(90deg, transparent, #2b6777, transparent);
  margin: 0;
}

.separator-green {
  height: 4px;
  background: linear-gradient(90deg, transparent, #5ea08c, transparent);
  margin: 0;
}

.min-h-400 {
  min-height: 400px;
}
  
.center-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
  
.animated-bg-design {
  background: linear-gradient(120deg, rgba(251,191,36,0.08), rgba(245,158,11,0.08), rgba(245,222,179,0.06));
  animation: animatedGradientDesign 8s ease-in-out infinite alternate;
  border-radius: 1.5rem;
  filter: blur(8px);
}
@keyframes animatedGradientDesign {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.animated-bg-coding {
  background: linear-gradient(120deg, rgba(34,211,238,0.08), rgba(14,165,233,0.08), rgba(94,160,140,0.06));
  animation: animatedGradientCoding 8s ease-in-out infinite alternate;
  border-radius: 1.5rem;
  filter: blur(8px);
}
@keyframes animatedGradientCoding {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}