@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');
        
        :root {
            --primary: #ffc70d; 
            --primary-rgb: 255, 202, 28;
            --bg-custom: #050505;
            --fixed-gold: #ffc70d;
        }

        body { 
            font-family: 'Outfit', sans-serif; 
            background-color: var(--bg-custom); 
            color: #e2e8f0; 
            transition: background-color 0.6s ease;
            overflow-x: hidden;
        }

        .glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); }
        .glass-vivid { background: rgba(var(--primary-rgb), 0.04); border: 1px solid rgba(var(--primary-rgb), 0.2); transition: all 0.4s ease; }
        .text-gradient { background: linear-gradient(to right, var(--primary), #ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        
        .text-primary { color: var(--primary) !important; }
        .bg-primary { background-color: var(--primary) !important; }
        .border-primary { border-color: var(--primary) !important; }

        .hover-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .hover-card:hover { transform: translateY(-10px); border-color: var(--primary); box-shadow: 0 20px 40px -15px rgba(var(--primary-rgb), 0.4); }

        .skill-bar { height: 100%; background-color: var(--primary); box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.6); transition: width 1.5s ease-in-out; }

        .section-title-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 3.5rem; }
        .section-title-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 250px; height: 60px; background: var(--primary); filter: blur(60px); opacity: 0.25; z-index: -1; }
        
        .project-category-title { 
            color: var(--primary); 
            text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.5), 0 0 40px rgba(var(--primary-rgb), 0.2);
            letter-spacing: 0.4em;
            position: relative;
            text-align: center;
        }
        
        .title-accent-bar { 
            width: 80px; 
            height: 4px; 
            background: linear-gradient(90deg, transparent, var(--primary), transparent); 
            margin-top: 15px; 
            border-radius: 99px; 
            box-shadow: 0 0 15px var(--primary); 
        }

        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Container logic */
.logo-container { 
    position: relative; 
    cursor: pointer; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Important: keeps the line inside the logo area */
    border-radius: 50%; /* Matches your circular logo style */
    width: 50px; /* Adjust based on your logo size */
    height: 50px;
}

.logo-img { 
    transition: transform 0.5s ease; 
    position: relative; 
    z-index: 2; 
}

/* The Scanning Line */
.logo-container::after {
    content: "";
    position: absolute;
    top: -100%; /* Start above the logo */
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary);
    box-shadow: 0 0 15px var(--primary), 0 0 30px var(--primary);
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Hover Actions */
.logo-container:hover .logo-img {
    transform: scale(1.1);
}

.logo-container:hover::after {
    opacity: 1;
    animation: scan-move 1.5s linear infinite;
}

/* Scan Animation */
@keyframes scan-move {
    0% { top: -10%; }
    100% { top: 110%; }
}

        .color-picker-wrapper {
            width: 100%; height: 40px; border-radius: 12px; overflow: hidden;
            border: 1px solid rgba(255,255,255,0.1); position: relative; cursor: pointer;
        }
        input[type="color"] { position: absolute; top: -5px; left: -5px; width: 120%; height: 120%; cursor: pointer; border: none; background: none; }

        #theme-sidebar { transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(-50%) translateX(180%); width: 200px; }
        #theme-sidebar.active { transform: translateY(-50%) translateX(0); }
        #mobile-menu { transition: 0.4s; transform: translateX(100%); visibility: hidden; }
        #mobile-menu.active { transform: translateX(0); visibility: visible; }
/* --- REPLACE FROM HERE --- */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            /* Background of the scrollbar matches your site background */
            background: var(--bg-custom);
        }

        ::-webkit-scrollbar-thumb {
            /* Highlighted part matches your accent theme color */
            background: var(--primary);
            border-radius: 6px;
            /* Added a small border to create a "floating" effect against the track */
            border: 2px solid var(--bg-custom);
        }

        section[id] {
            scroll-margin-top: 190px; 
        }
        /* Prevent user from scrolling during load */
        body.is-loading {
            overflow: hidden;
        }

        /* Class to trigger the fade-out */
        .preloader-hidden {
            opacity: 0 !important;
            pointer-events: none !important;
            visibility: hidden;
        }
        /* Style pour les titres de sections principales */
.section-header-box {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: rgba(255, 202, 28, 0.05); /* Fond doré très léger */
    border: 1px solid rgba(255, 202, 28, 0.2); /* Bordure dorée subtile */
    border-radius: 100px; /* Forme pilule */
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    margin-bottom: 3rem;
    position: relative;
}

/* Effet de lueur derrière le titre */
.section-header-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary);
    filter: blur(40px);
    opacity: 0.1;
    z-index: -1;
}
/* High-Impact Social Header */
.social-header-container {
    position: relative;
    padding: 6rem 0 4rem 0; /* More space to isolate the section */
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-title-card {
    background: rgba(255, 202, 28, 0.03);
    border: 1px solid rgba(255, 202, 28, 0.3);
    padding: 1.5rem 4rem;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    position: relative;
    transform: rotate(-1deg); /* Slight tilt for a dynamic look */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), 
                inset 0 0 20px rgba(255, 202, 28, 0.05);
}

.social-title-card h3 {
    margin-bottom: 0 !important;
    letter-spacing: 0.4em !important;
    text-shadow: 0 0 15px rgba(255, 202, 28, 0.4);
}

/* Decorative glowing circles in the background */
.social-glow-orb {
    position: absolute;
    width: 300px;
    height: 300px;
    background: var(--primary);
    filter: blur(100px);
    opacity: 0.07;
    border-radius: 50%;
    z-index: -1;
}

.social-icon-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%) rotate(1deg);
    background: var(--primary);
    color: black;
    padding: 5px 20px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}
.ia-productivity-card {
    background: linear-gradient(135deg, rgba(255, 202, 28, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 202, 28, 0.15);
    border-radius: 24px; /* Smaller radius for a tighter look */
    padding: 1.5rem 2rem; /* Significantly reduced padding */
    position: relative;
    backdrop-filter: blur(10px);
    max-width: 900px; /* Limits the width so it's not too "big" on desktop */
    margin: 0 auto;
}

.ia-productivity-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 3px;
    background: var(--primary);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 10px var(--primary);
}

.tech-tag-mini {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--primary);
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 0.25rem;
    display: block;
}
/**/
.content-monument {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
}

.monument-card {
    background: linear-gradient(135deg, rgba(255, 202, 28, 0.1) 0%, rgba(0,0,0,0.8) 100%);
    border: 1px solid rgba(255, 202, 28, 0.2);
    padding: 25px 20px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 140px;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.monument-card:hover {
    border-color: var(--primary);
    transform: translateY(-10px);
    background: linear-gradient(135deg, rgba(255, 202, 28, 0.2) 0%, rgba(0,0,0,0.9) 100%);
}

.monument-card i {
    font-size: 2.5rem;
    color: var(--primary);
    opacity: 0.3;
    position: absolute;
    top: 20px;
    right: 20px;
    transition: 0.5s;
}

.monument-card:hover i {
    opacity: 1;
    transform: scale(1.2) rotate(-10deg);
}

.monument-card span {
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.2;
    color: #fff;
    z-index: 1;
}

/* On fait un élément plus large que les autres pour casser la monotonie */
.wide-card {
    grid-column: span 2;
    min-height: 100px;
}




/*/////////////////////////////////*/


/* Standard Navigation Links */
.nav-link {
    color: white; /* Default color */
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s ease; /* Smooth transition for the text color */
}

.nav-link:hover {
    color: var(--primary); /* Changes to theme color on hover */
}

/* Animated Underline */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--primary); /* Underline is always theme color */
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}

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

/* Standout "Me contacter" Button */
.contact-btn-custom {
    color: white !important; /* Default white text */
    border: 1px solid white; /* Default white border */
    padding: 8px 20px;
    border-radius: 50px;
    transition: all 0.4s ease;
    text-transform: uppercase;
}

.contact-btn-custom:hover {
    color: var(--primary) !important;
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.4);
    transform: translateY(-2px);
}
        /* --- TO HERE --- */

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }


    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');
    
    :root {
        --primary: #ffc70d; 
        --primary-rgb: 255, 202, 28;
        --bg-custom: #050505;
    }

    body { font-family: 'Outfit', sans-serif; background-color: var(--bg-custom); color: #e2e8f0; overflow-x: hidden; }

    /* Glass Effects */
    .glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); }
    .text-primary { color: var(--primary) !important; }
    .bg-primary { background-color: var(--primary) !important; }

    /* Nav Links */
    .nav-link { position: relative; transition: color 0.3s; }
    .nav-link:hover { color: var(--primary); }
    .contact-btn-custom { border: 1px solid var(--primary); padding: 8px 20px; border-radius: 50px; transition: all 0.3s; }

    /* --- THE FIX: TRANSITION STATES --- */
    #theme-sidebar { 
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); 
        transform: translateY(-50%) translateX(150%); /* Hidden by default */
    }
    #theme-sidebar.active { transform: translateY(-50%) translateX(0); }

    #mobile-menu.active { transform: translateX(0); }

    /* Logo Scan Effect */
    .logo-container::after {
        content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 4px;
        background: var(--primary); box-shadow: 0 0 15px var(--primary);
        z-index: 3; opacity: 0; transition: opacity 0.3s;
    }
    .logo-container:hover::after { opacity: 1; animation: scan-move 1.5s linear infinite; }
    @keyframes scan-move { 0% { top: -10%; } 100% { top: 110%; } }

    /* Shimmer Effect */
    @keyframes shimmer { 100% { transform: translateX(100%); } }
    
    .color-picker-wrapper { width: 100%; height: 40px; border-radius: 12px; overflow: hidden; position: relative; }
    input[type="color"] { position: absolute; top: -5px; left: -5px; width: 120%; height: 120%; cursor: pointer; border: none; background: none; }

    @keyframes fade-loop {
    0%, 45% { opacity: 1; transform: scale(1); }
    55%, 100% { opacity: 0; transform: scale(0.95); }
}

@keyframes fade-loop-delayed {
    0%, 45% { opacity: 0; transform: scale(0.95); }
    55%, 100% { opacity: 1; transform: scale(1); }
}

.animate-fade-in-out {
    animation: fade-loop 6s infinite alternate ease-in-out;
}

.animate-fade-in-out-delayed {
    animation: fade-loop-delayed 6s infinite alternate ease-in-out;
}


    /* --- Animation de battement de cœur (Heartbeat) --- */

@keyframes heartbeat {
  0% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  10% {
    transform: scale(1.15); /* Premier battement */
    animation-timing-function: ease-in;
  }
  17% {
    transform: scale(1.05); /* Retour partiel */
    animation-timing-function: ease-out;
  }
  33% {
    transform: scale(1.25); /* Deuxième battement, plus fort */
    animation-timing-function: ease-in;
  }
  45% {
    transform: scale(1); /* Retour au repos */
    animation-timing-function: ease-out;
  }
}

/* La classe Tailwind personnalisée pour l'appliquer */
.hover\:animate-heartbeat:hover {
  animation: heartbeat 1s infinite;
}


    @keyframes heartbeat-large {
  0% { transform: scale(1); }
  15% { transform: scale(1.3); }
  30% { transform: scale(1.1); }
  45% { transform: scale(1.4); }
  70% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* L'animation tourne par défaut */
#theme-toggle-btn {
  animation: heartbeat-large 1.2s ease-in-out infinite;
  display: inline-flex;
  transform-origin: center;
  will-change: transform;
}

/* Cette classe supprimera l'animation dès qu'elle sera ajoutée */
#theme-toggle-btn.stop-animation {
  animation: none !important;
  transform: scale(1); /* Remet le bouton à sa taille normale */
}


   body::before {
    /* Utilisation de \A pour les sauts de ligne */
    content: "\A\A MIGUEL HEUYA\A\A";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    
    /* Typographie */
    font-size: 5.5vw; 
    font-weight: 900;
    line-height: 1.2; 
    text-transform: uppercase;
    white-space: pre; 
    
    /* Apparence */
    color: white;
    opacity: 0.03; 
    pointer-events: none;
    z-index: -1;
    letter-spacing: 0.4em;

    /* --- LA MAGIE DU DÉCALAGE --- */
    /* On utilise l'alignement à gauche par défaut pour contrôler les marges */
    text-align: left; 
    display: flex;
    flex-direction: column;
}

/* Version avec Padding Intégré (Plus robuste) */
/* Pour décaler spécifiquement chaque ligne, nous allons modifier le bloc CSS 
   en utilisant des espaces ou des retours à la ligne simulés. 
   Voici la méthode la plus propre en CSS pur : */

body::before {
    /* "MIGUEL HEUYA" reste à gauche (par défaut) */
    /* "DATA ANALYST" est poussé par des espaces */
    /* "DATA ENGINEER" est poussé par un nombre moyen d'espaces */
    content: "\A\A     MIGUEL HEUYA\A\A";
}

    .phrasemiguelheuya {
        font-size: 0.75rem;
        font-weight: 900;
        text-transform: uppercase;
        color: var(--primary);
        background: rgba(var(--primary-rgb), 0.1);
        padding: 2px 8px;
        border-radius: 12px;
        display: inline-block;
        box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.4);
    }

  @keyframes scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
  }

  .animate-infinite-scroll-right {
    display: flex;
    width: max-content;
    animation: scroll-right 22s linear infinite;
  }

  .animate-infinite-scroll-right:hover {
    animation-play-state: paused;
  }


.skill-bar {
width: 0%; /* État initial : vide */
transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); /* Animation fluide */
}

@keyframes sophisticated-morph-1 {
    0%, 40% { opacity: 1; transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 15px rgba(255, 202, 28, 0.4)); }
    60%, 100% { opacity: 0; transform: scale(0.8) rotate(-10deg); filter: blur(10px); }
}

@keyframes sophisticated-morph-2 {
    0%, 40% { opacity: 0; transform: scale(0.8) rotate(10deg); filter: blur(10px); }
    60%, 100% { opacity: 1; transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2)); }
}

.animate-sophisticated-morph-1 { animation: sophisticated-morph-1 8s infinite alternate ease-in-out; }
.animate-sophisticated-morph-2 { animation: sophisticated-morph-2 8s infinite alternate ease-in-out; }

    .gift-note-anim {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }
    .gift-note-anim.show {
        max-height: 500px;
        opacity: 1;
    }

    #typewriter {
    font-family: 'Inter', sans-serif;
    display: inline-block;
    min-height: 1.2em;
}

@keyframes permanentBreath {
    0%, 100% { transform: scale(1.05); }
    50% { transform: scale(1.2); }
}

/* Contrôle la vitesse et la fluidité de l'animation */
.animated-bar {
    transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}


@keyframes slide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(150%); }
}
.animate-slide {
    animation: slide 2s ease-in-out infinite;
}

@keyframes liquid-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 202, 28, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(255, 202, 28, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 202, 28, 0); }
}

.hover-liquid:hover {
  animation: liquid-pulse 1.5s infinite;
  background: rgba(255, 202, 28, 0.1);
}
/* ===================================================================== */
/* Adaptation automatique du texte quand la couleur de fond choisie est  */
/* claire (classe ajoutée/retirée par theme.js selon la luminosité)      */
/* ===================================================================== */
html.light-bg body {
    color: #1a1a1a;
}

html.light-bg [class*="text-white"] {
    color: #1a1a1a !important;
}

html.light-bg .text-slate-100,
html.light-bg .text-slate-200,
html.light-bg .text-slate-300 {
    color: #2b2b2b !important;
}

html.light-bg .text-slate-400,
html.light-bg .text-slate-500 {
    color: #4a4a4a !important;
}

html.light-bg .nav-link,
html.light-bg .monument-card span {
    color: #1a1a1a !important;
}

html.light-bg .contact-btn-custom {
    color: #1a1a1a !important;
    border-color: #1a1a1a;
}

html.light-bg .text-gradient {
    background-image: linear-gradient(to right, var(--primary), #1a1a1a);
}