/* =========================================
   00. CONFIGURATION & VARIABLES
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter:wght@300;400;600;800&display=swap');

:root {
    /* Palette de couleurs basée sur ton CV */
    --fond-principal: #1e1e1e;       /* Gris très sombre, style VS Code */
    --fond-secondaire: #252526;      /* Légèrement plus clair pour les cartes */
    --texte-principal: #e1e4e8;      /* Blanc cassé pour ne pas fatiguer les yeux */
    --texte-secondaire: #959da5;     /* Gris pour les descriptions */
    
    /* Accents de syntaxe */
    --accent-vert: #4ade80;          /* Vert néon pour les commentaires /* */
    --accent-bleu: #58a6ff;          /* Bleu pour les balises < > */
    
    /* Typographie */
    --font-texte: 'Inter', sans-serif;
    --font-code: 'Fira Code', monospace;
}

/* =========================================
   01. RESET & BASE
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--fond-principal);
    color: var(--texte-principal);
    font-family: var(--font-texte);
    line-height: 1.6;
    overflow-x: hidden;
}

/* =========================================
   02. TYPOGRAPHIE & CLASSES UTILES
   ========================================= */
h1, h2, h3 {
    font-weight: 800;
    line-height: 1.2;
}

/* Classe pour tout ce qui ressemble à du code */
.syntaxe-code {
    font-family: var(--font-code);
    color: var(--accent-vert);
    font-size: 0.9rem;
}

.balise {
    color: var(--accent-bleu);
}

/* =========================================
   03. STRUCTURE DE L'EN-TÊTE
   ========================================= */
.header-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10%;
    background: radial-gradient(circle at top left, #2a2a2a 0%, var(--fond-principal) 60%);
}

.titre-principal {
    font-size: 4rem;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.sous-titre {
    font-size: 1.5rem;
    color: var(--texte-secondaire);
    margin-bottom: 30px;
    max-width: 600px;
}

/* =========================================
   04. SECTION PROJETS (GRILLE)
   ========================================= */
.section-projets {
    padding: 100px 10%;
    background-color: var(--fond-principal);
}

.titre-section {
    font-size: 2.5rem;
    margin-bottom: 50px;
    letter-spacing: -0.5px;
}

/* Grille responsive automatique : s'adapte sans media queries ! */
.grille-projets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Style de chaque carte projet */
.carte-projet {
    background-color: var(--fond-secondaire);
    border: 1px solid #30363d; /* Bordure discrète style GitHub */
    border-radius: 8px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.projet-entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.projet-technos {
    font-size: 0.8rem;
    color: var(--texte-secondaire);
    font-weight: 600;
}

.projet-titre {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.projet-description {
    color: var(--texte-secondaire);
    font-size: 0.95rem;
    margin-bottom: 25px;
    flex-grow: 1; /* Pousse le lien vers le bas pour aligner les boutons */
}

.lien-code {
    font-family: var(--font-code);
    color: var(--accent-bleu);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s ease, letter-spacing 0.2s ease;
}

/* =========================================
   05. EFFETS AU SURVOL (ANIMATIONS)
   ========================================= */
.carte-projet:hover {
    transform: translateY(-6px); /* Effet de lévitation */
    border-color: var(--accent-vert); /* La bordure s'illumine en vert au survol */
    box-shadow: 0 15px 30px rgba(74, 222, 128, 0.08); /* Halo lumineux très subtil */
}

.carte-projet:hover .lien-code {
    color: var(--accent-vert); /* Le lien passe au vert */
    letter-spacing: 1px; /* Léger écartement dynamique */
}

/* =========================================
   06. ANIMATIONS AU DÉFILEMENT (REVEAL)
   ========================================= */

/* État initial : invisible et décalé de 40px vers le bas */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    /* Une courbe de transition très douce et professionnelle */
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

/* État final : visible et à sa position d'origine */
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Optionnel : Gérer les délais pour que les éléments apparaissent l'un après l'autre */
.delai-1 { transition-delay: 0.1s; }
.delai-2 { transition-delay: 0.3s; }
.delai-3 { transition-delay: 0.5s; }
.delai-4 { transition-delay: 0.7s; }

/* =========================================
   03.B. MISE EN PAGE DU HERO (2 COLONNES)
   ========================================= */
.hero-contenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.hero-texte {
    flex: 1; /* Prend l'espace disponible */
}

/* Sur mobile, on repasse sur 1 seule colonne centrée */
@media (max-width: 900px) {
    .hero-contenu {
        flex-direction: column;
        text-align: center;
        margin-top: 80px;
    }
}

/* =========================================
   03.C. ANIMATION MACHINE À ÉCRIRE
   ========================================= */
.conteneur-typing {
    display: inline-block;
}

.typing-effect {
    overflow: hidden; /* Cache le texte non tapé */
    white-space: nowrap; /* Empêche le retour à la ligne */
    border-right: 3px solid var(--accent-vert); /* Le curseur clignotant */
    animation: 
        typing 2s steps(20, end),
        blink-caret 0.75s step-end infinite;
    margin-bottom: 20px;
}

/* L'animation d'écriture */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* L'animation du curseur */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--accent-vert); }
}

/* =========================================
   03.D. BOUTONS D'ACTION
   ========================================= */
.hero-boutons {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

@media (max-width: 900px) {
    .hero-boutons {
        justify-content: center;
    }
}

.bouton-primaire, .bouton-secondaire {
    font-family: var(--font-code);
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 4px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.bouton-primaire {
    background-color: transparent;
    color: var(--accent-bleu);
    border: 1px solid var(--accent-bleu);
}

.bouton-primaire:hover {
    background-color: rgba(88, 166, 255, 0.1);
    box-shadow: 0 0 15px rgba(88, 166, 255, 0.3);
    transform: translateY(-3px);
}

.bouton-secondaire {
    color: var(--texte-secondaire);
    border: 1px dashed #30363d;
}

.bouton-secondaire:hover {
    color: var(--texte-principal);
    border-color: var(--texte-secondaire);
    transform: translateY(-3px);
}

/* =========================================
   03.E. LE VISUEL (AVATAR LUMINEUX)
   ========================================= */
.hero-visuel {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* C'est ici qu'on retrouve un peu l'esprit "Lifeblood" de ton ancien CSS */
.cercle-lumineux {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: var(--fond-secondaire);
    border: 2px solid rgba(74, 222, 128, 0.3); /* Bordure verte subtile */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(74, 222, 128, 0.1); /* Halo vert */
    position: relative;
    transition: all 0.5s ease;
}

.cercle-lumineux::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px dashed rgba(88, 166, 255, 0.4); /* Anneau bleu pointillé autour */
    animation: rotation-lente 20s linear infinite;
}

.cercle-lumineux:hover {
    box-shadow: 0 0 60px rgba(74, 222, 128, 0.2);
    transform: scale(1.05);
}

.avatar-texte {
    font-family: var(--font-code);
    font-size: 3rem;
    color: var(--accent-vert);
    font-weight: bold;
    letter-spacing: -2px;
}

@keyframes rotation-lente {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================
   03.F. ANIMATION DU BELUGA SVG
   ========================================= */
.beluga-lowpoly {
    width: 120px;
    height: 120px;
    /* Donne un effet néon aux lignes SVG */
    filter: drop-shadow(0 0 8px rgba(88, 166, 255, 0.6));
    animation: nage-beluga 4s ease-in-out infinite;
}

/* L'animation de flottement */
@keyframes nage-beluga {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(2deg); /* Monte légèrement et s'incline */
    }
}

/* =========================================
   07. SECTION COMPÉTENCES
   ========================================= */
.section-competences {
    padding: 100px 10%;
    background-color: var(--fond-principal);
}

.grille-categories {
    display: grid;
    /* S'adapte automatiquement : 1 colonne sur mobile, jusqu'à 4 sur grand écran */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}

.categorie-carte {
    background-color: var(--fond-secondaire);
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 25px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.categorie-carte:hover {
    transform: translateY(-5px);
    border-color: var(--accent-bleu);
}

.categorie-titre {
    font-family: var(--font-code);
    color: var(--texte-secondaire);
    font-size: 1.1rem;
    margin-bottom: 25px;
}

.conteneur-badges {
    display: flex;
    flex-wrap: wrap; /* Permet aux badges de passer à la ligne naturellement */
    gap: 12px;
}

/* Le style de base d'un badge de compétence */
.badge-competence {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--texte-principal);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: var(--font-code);
    transition: all 0.3s ease;
    cursor: default; /* Indique que ce n'est pas un lien cliquable */
}

/* L'effet d'illumination au survol de la souris */
.badge-competence:hover {
    background-color: rgba(88, 166, 255, 0.1);
    border-color: var(--accent-bleu);
    color: var(--accent-bleu);
    box-shadow: 0 0 12px rgba(88, 166, 255, 0.2);
    transform: scale(1.05);
}

/* Variante esthétique pour les Soft Skills (Bordure en pointillés) */
.badge-competence.outline {
    border-style: dashed;
    color: var(--texte-secondaire);
    background-color: transparent;
}

.badge-competence.outline:hover {
    border-color: var(--accent-vert);
    color: var(--accent-vert);
    background-color: rgba(74, 222, 128, 0.05);
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.2);
}

/* =========================================
   08. GESTION DES IMAGES (PAGES PROJETS)
   ========================================= */

/* Règle globale pour toutes les images dans le contenu principal */
.conteneur-principal img {
    max-width: 100%; /* L'image ne dépassera jamais la largeur de son conteneur */
    height: auto; /* Conserve les proportions sans déformer l'image */
    display: block; /* Évite les petits espaces blancs sous l'image */
    margin: 40px auto; /* Centre l'image et ajoute de l'espace en haut et en bas */
    
    /* Le style Cyber-Élégant */
    border-radius: 8px; /* Coins légèrement arrondis */
    border: 1px solid #30363d; /* Bordure discrète type éditeur de code */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Ombre portée pour détacher l'image du fond */
    
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Petit effet interactif au survol (optionnel mais très pro) */
.conteneur-principal img:hover {
    transform: scale(1.02); /* Léger zoom */
    border-color: var(--accent-bleu); /* La bordure s'illumine en bleu */
    box-shadow: 0 15px 40px rgba(88, 166, 255, 0.15); /* Le halo lumineux s'intensifie */
}

/* =========================================
   08.B. GRILLES D'IMAGES (Si tu mets 2 images côte à côte)
   ========================================= */
.grille-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.grille-images img {
    margin: 0; /* Annule la marge automatique quand l'image est dans une grille */
    width: 100%; /* Force l'image à prendre toute la case de la grille */
    object-fit: cover; /* Recadre proprement si les images n'ont pas la même taille */
}