/* --- 1. LOGO DE FOND (EFFET PROFONDEUR) --- */
body::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('YD-icon.png'); /* Vérifie que le nom du fichier est exact */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 500px; 
    opacity: 0.05; 
    z-index: -1; /* Reste derrière tout le contenu */
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: block !important;
}

/* 1. LA BARRE : Pilule fine et centrée */
nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 60px !important;
    padding: 0 30px !important;
    border-radius: 100px !important;
    width: auto !important;
    min-width: 800px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
}

/* 2. ALIGNEMENT Y-DESIGN (LOGO + NOM) */
.nav-logo-link {
    display: flex !important;
    flex-direction: row !important; /* Force l'horizontalité */
    align-items: center !important;
    gap: 10px !important;
}

.nav-logo {
    width: 32px !important;
    height: 32px !important;
}

.nav-brand-name {
    font-size: 15px !important;
    font-weight: 800 !important;
    margin: 0 !important; /* Supprime les décalages */
    line-height: 1 !important; /* Centre verticalement par rapport au logo */
}

/* 3. ALIGNEMENT DES LIENS (Accueil, Services...) */
nav .flex.gap-8 {
    display: flex !important;
    align-items: center !important; /* Centre verticalement dans la barre */
    gap: 25px !important;
}

/* 1. STYLE DE BASE DES LIENS */
.nav-link {
    position: relative !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    padding: 8px 0 !important;
    transition: color 0.3s ease !important;
}

/* 2. CRÉATION DE LA BARRE SOUS LE LIEN */
.nav-link::after {
    content: '' !important;
    position: absolute !important;
    width: 0 !important; /* Invisible au départ */
    height: 2px !important;
    bottom: 0 !important;
    left: 0 !important;
    background-color: #0004ff !important; /* Même bleu que ton CV */
    transition: width 0.3s cubic-bezier(0.65, 0, 0.35, 1) !important; /* Animation fluide */
}

/* 3. EFFET AU SURVOL (HOVER) */
.nav-link:hover {
    color: #0004ff !important; /* Le texte devient bleu */
}

.nav-link:hover::after {
    width: 100% !important; /* La barre se déploie sur toute la largeur */
}

/* 4. ÉTAT ACTIF (La page où tu te trouves) */
.nav-link.active {
    color: #0004ff !important;
}

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

/* --- BOUTON CV STYLE NAV --- */
.btn-cv-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100px !important; /* Largeur fixe pour l'effet de remplissage */
    height: 40px !important; /* Plus fin pour la nav */
    border-radius: 10px !important;
    border: 1px solid #0004ff !important;
    position: relative !important;
    overflow: hidden !important;
    background: white !important;
    cursor: pointer !important;
    z-index: 1 !important;
    text-decoration: none !important;
}

/* Les deux pans qui se rejoignent au survol */
.btn-cv-nav::before, 
.btn-cv-nav::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    width: 0 !important;
    height: 100% !important;
    transform: skew(15deg) !important;
    transition: 0.5s !important;
    z-index: -1 !important;
}

.btn-cv-nav::before {
    left: -10px !important;
    background: #0004ff !important; /* Bleu foncé */
}

.btn-cv-nav::after {
    right: -10px !important;
    background: #0004ff !important; /* Bleu primaire */
}

/* Animation au survol */
.btn-cv-nav:hover::before, 
.btn-cv-nav:hover::after {
    width: 65% !important;
}

.btn-cv-nav:hover span {
    color: #ffffff !important;
}

/* Texte interne */
.btn-cv-nav span {
    color: #0004ff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: 0.3s !important;
    z-index: 2 !important;
}

/* 5. BLOC DROITE (EN + CV) */
.flex.items-center.gap-6 {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}
/* 4. ANIMATIONS & REVEAL */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 1, 0.3, 1), transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.reveal.active { opacity: 1; transform: translateY(0); }

@keyframes pulse-soft {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(37, 99, 235, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* 5. FOOTER NOIR COMPLET */
.footer-final {
    background-color: #000 !important;
    padding: 60px 0 30px 0;
    width: 100%;
    color: white;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.footer-contact-links { display: flex; flex-direction: column; gap: 12px; }

.contact-item {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-item i { color: #0004ff; font-size: 18px; }

.footer-social-right { display: flex; gap: 20px; }

.social-box {
    width: 65px; height: 65px;
    background: #1a1a1a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.3s;
}

.social-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 0; height: 100%;
    background: #0004ff;
    z-index: -1;
    transition: width 0.4s ease-in-out;
}

.social-box:hover::before { width: 100%; }
.social-box:hover { transform: scale(1.1); }

.footer-sep { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.15); margin: 20px 0; }

.footer-bottom { display: flex; justify-content: space-between; color: #888; font-size: 14px; }

/* 6. GESTION DU CV (Caché par défaut) */
.cv-floating-container, .btn-cv-round, #cv-mobile-link, .cv-extra, #cv {
    display: none !important;
}


@media (max-width: 1024px) {
    /* 1. LA PILULE : Taille fixe et alignement horizontal */
    nav {
        width: auto !important;
        min-width: 280px !important;
        height: 54px !important;
        display: flex !important;
        flex-direction: row !important; /* Force l'alignement en ligne */
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 12px 0 15px !important;
        background: white !important;
        border-radius: 50px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        gap: 10px !important;
    }

    /* 2. SUPPRESSION DES LIENS ET DU TRAIT | */
    .nav-link, .w-[1px], .bg-white\/30,
    nav > div.flex.gap-8:not(:has(.nav-logo-link)) {
        display: none !important;
    }

    /* 3. LOGO + NOM : Alignement horizontal strict */
    .nav-logo-link {
        display: flex !important;
        flex-direction: row !important; /* Aligne logo et texte sur la même ligne */
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    .nav-logo {
        width: 26px !important;
        height: 26px !important;
    }

    .nav-brand-name {
        display: block !important;
        font-weight: 800 !important;
        font-size: 14px !important;
        white-space: nowrap !important; /* Empêche le retour à la ligne */
    }

    /* 4. GROUPE DROITE : EN + CV */
    .flex.items-center.gap-6 {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    #lang-switch {
        font-size: 12px !important;
        font-weight: 900 !important;
        color: #1a1a1a !important;
    }

/* 3. BOUTON CV NAV (Desktop) */
.btn-cv-nav {
    width: 80px; height: 35px;
    border-radius: 8px;
    border: 1px solid #0004ff;
    position: relative;
    overflow: hidden;
    background: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 1;
}

.btn-cv-nav::before, .btn-cv-nav::after {
    content: '';
    position: absolute;
    top: 0; width: 0; height: 100%;
    transform: skew(20deg);
    transition: all 0.4s ease;
    z-index: -1;
    background: #0004ff;
}

.btn-cv-nav::before { left: -20px; }
.btn-cv-nav::after { right: -20px; }
.btn-cv-nav:hover::before, .btn-cv-nav:hover::after { width: 100%; }

.btn-cv-nav span {
    color: #0004ff;
    font-size: 14px;
    font-weight: 800;
    transition: all 0.3s;
}

.btn-cv-nav:hover span { color: #ffffff; }

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

.title-phare {
    font-family: 'Inter', sans-serif !important;
    font-weight: 900 !important;      /* Poids "Black" de l'index */
    font-style: italic !important;      /* Inclinaison demandée */
    letter-spacing: -3px !important;    /* Lettres serrées */
    text-transform: none !important;    /* INDISPENSABLE pour les minuscules */
}

blockquote {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.5px; /* Un peu plus aéré pour la lecture d'une phrase */
}

cite.title-phare {
    /* Reprend le style ultra-gras et serré mais en plus petit */
    font-size: 1.2rem !important;
    letter-spacing: -1px !important;
    display: block;
    margin-top: 10px;
}

/* --- ANIMATION DE LA CROIX (ACCORDÉON) --- */

/* Style de l'icône par défaut */
.accordion-header i {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-block;
    font-size: 1.2rem;
    color: #1a1a1a;
}

/* État de la croix quand l'accordéon est ouvert */
/* (La rotation à 45° transforme le "+" en "x") */
.accordion-header.active i {
    transform: rotate(45deg);
    color: #0004ff; /* Optionnel : change la couleur en bleu au clic */
}

/* Ajustement du curseur pour indiquer que c'est cliquable */
.accordion-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}




#services .grid {
    align-items: center !important; /* Aligne les services et l'image sur la même ligne horizontale */
}

/* --- OPTIMISATION MOBILE (Harmonie et Pro) --- */
@media (max-width: 768px) {
    /* 1. SECTIONS : Équilibre des espaces */
    #services, #projects, #trust {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* 2. À PROPOS : On ajoute de l'espace en bas pour ne pas coller au footer */
    #about {
        padding-top: 60px !important;
        padding-bottom: 80px !important; /* Ajoute l'espace que tu voulais */
    }

    #services h2, #projects h2, #about h2 {
        margin-bottom: 30px !important;
        font-size: 2.8rem !important;
    }

    /* 3. SUPPRESSION DE L'IMAGE PC */
    .reveal-img-container {
        display: none !important;
    }

    /* 4. FOOTER : Centrage pro des logos sous les contacts */
    .footer-top {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
        text-align: center !important;
    }

    .footer-contact-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .footer-social-right {
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-top: 5px !important;
    }

    .social-box {
        width: 50px !important;
        height: 50px !important;
        border-radius: 12px !important;
    }

    /* 5. COPYRIGHT */
    .footer-bottom {
        margin-top: 25px !important;
        padding-top: 15px !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 768px) {
    /* Ajoute de l'espace entre Services et Projets */
    #services {
        padding-bottom: 80px !important; /* Espace après les services */
    }

    #projects {
        padding-top: 80px !important; /* Espace avant les projets */
    }

    /* Reste de ton code pour À propos et Footer */
    #about {
        padding-top: 60px !important;
        padding-bottom: 100px !important; /* Décolle bien du footer noir */
    }
}