/* --- VARIABLES (Identité visuelle Mode Sombre + Effets) --- */
:root {
    --couleur-principale: #0026b8; /* Ton bleu profond */
    --couleur-fond: #202020; /* Ton gris très sombre */
    /* NOUVEAU : Une version transparente de ton bleu pour le halo lumineux */
    --bleu-halo: rgba(0, 38, 184, 0.2); 
    --blanc: #ffffff;
    --noir: #000000;
    --texte-clair: #cccccc;
    
    /* Définition des polices */
    --font-titre: 'Futura Std', 'Futura', 'Trebuchet MS', sans-serif;
    --font-texte: 'Roboto', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-texte);
    color: var(--texte-clair);
    line-height: 1.6;
    
    /* 1. La couleur de fond globale de ton site (le gris sombre) */
    background-color: var(--couleur-fond);
    
    /* 2. LE ROND LUMINEUX */
    /* - "circle at center" le place parfaitement au milieu */
    /* - "0.08" est l'opacité (la luminosité). Baisse-le à 0.03 ou 0.01 s'il est trop fort ! */
    /* - "50%" est la taille du rond */
    background-image: radial-gradient(circle at top, rgba(0, 38, 184, 0.2) 0%, transparent 50%);
    
    /* 3. POUR QUE LE ROND RESTE FIGÉ AU DÉFILEMENT */
    background-attachment: fixed;
    background-repeat: no-repeat;
    
    min-height: 100vh;

    
}

/* --- AJOUT DE LA TEXTURE "BRUIT" (GRAIN PHOTO) --- */
body::after {
    content: "";
    position: fixed; /* Reste fixe par-dessus tout */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Permet de cliquer au travers, ne bloque pas le site */
    z-index: 9999; /* S'assure d'être au-dessus de tout */
    
    /* Réglage de l'intensité du grain */
    opacity: 0.01; /* Très subtil (4%). Augmente à 0.07 si tu veux plus de grain */
    
    /* Le motif de bruit (SVG généré pour être léger) */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}



/* --- TITRES --- */
h1, h2, h3 {
    font-family: var(--font-titre);
    color: var(--blanc); /* Les titres en blanc pur pour bien contraster */
}

/* --- NAVIGATION --- */
header {
    position: fixed;
    top: 0;
    width: 100%;
    /* Fond de la navigation de la même couleur que le site, avec un peu de transparence */
    background: rgba(32, 32, 32, 0.95); 
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0,0,0,0.5);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.branding-logo {
    font-family: var(--font-titre); 
    font-size: 1.8rem; 
    letter-spacing: 1px;
    display: flex;
    align-items: center; 
    cursor: default; 
}

.logo-t {
    color: var(--blanc);
    font-weight: 300; 
}

.logo-nom {
    color: var(--blanc); 
    font-weight: 300; 
    margin-left: 7px; 
}

.logo-cursor {
    color: var(--blanc); 
    font-weight: bold;
    margin-left: 5px; 
    display: inline-block;
    animation: blinkCursor 1.2s infinite; 
}

@keyframes blinkCursor {
    0%, 100% {
        opacity: 1; 
        text-shadow: 0 0 10px var(--couleur-principale); 
    }
    50% {
        opacity: 0; 
    }
}


.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: var(--texte-clair);
    font-weight: 400;
    transition: color 0.3s, text-shadow 0.3s;
    font-family: var(--font-titre);
    text-transform: uppercase;
    font-size: 0.9rem;
}

.nav-links a:hover {
    color: var(--blanc);
    /* Léger effet de halo bleu profond au survol du menu */
    text-shadow: 0 0 10px var(--couleur-principale);
}

/* --- SECTIONS GLOBALES --- */
section {
    min-height: 100vh;
    padding: 100px 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    text-align: center;
}

/* --- BOUTONS --- */
.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--couleur-principale);
    color: var(--blanc);
    text-decoration: none;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Ligne fine pour détacher le bouton du fond sombre */
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: var(--font-titre);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn:hover {
    background-color: var(--blanc);
    color: var(--couleur-principale); /* Inversion ultra-visible au survol */
    border-color: var(--blanc);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 38, 184, 0.4);
}

/* --- ACCUEIL --- */
.hero-content {
    text-align: center;
}

.hero-content h1 {
    font-size: 3.5rem; /* On réduit un tout petit peu la taille pour que ça rentre */
    width: 100%;
    
    /* L'ordre absolu de ne JAMAIS passer à la ligne */
    white-space: nowrap; 
    
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* --- PROJETS (Grille et Cartes) --- */
.grid-portfolio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    width: 100%;
}

.projet-carte {
    background: var(--noir);
    border: 1px solid #333333;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    
    /* NOUVEAU : On rend la carte flexible */
    display: flex;
    flex-direction: column;
    height: 100%; /* Force toutes les cartes de la ligne à faire la même taille */
}

.projet-carte:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5); /* La bordure devient bleue au survol ! */
}

.projet-carte img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.projet-info {
    padding: 25px;
    
    /* NOUVEAU : La zone de texte s'étire */
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

.projet-info h3 {
    margin-bottom: 10px;
    font-size: 1.3rem;
}

/* --- A PROPOS --- */
.about-flex {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.about-text {
    flex: 1;
    min-width: 300px;
}

.profil-img {
    width: 300px;
    height: 300px;
    border-radius: 5px;
    object-fit: cover;
    box-shadow: -15px 15px 0px var(--couleur-principale);
}

/* --- BADGES DE COMPÉTENCES --- */
/* --- BADGES DE COMPÉTENCES --- */
/* --- BADGES DE COMPÉTENCES AVEC LÉVITATION --- */
.competences {
    display: flex;
    flex-wrap: wrap; 
    gap: 12px;
    margin: 25px 0; 
}

.badge {
    background-color: rgba(0, 38, 184, 0.15); 
    color: var(--blanc);
    border: 1px solid var(--couleur-principale);
    padding: 8px 16px;
    border-radius: 30px; 
    font-size: 0.85rem;
    font-family: var(--font-titre);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: default; /* Toujours pas de curseur "main" */

    /* L'APPLICATION DE L'ANIMATION */
    /* Nom de l'anim | Durée (4s) | Type de mouvement (doux) | Répétition (infinie) */
    animation: levitationSubtile 4s ease-in-out infinite;
}

/* --- DÉCALAGE DES ANIMATIONS POUR UN EFFET NATUREL --- */
/* Le 2ème badge attend 0.5s avant de commencer, le 3ème attend 1s, etc. */
.badge:nth-child(2) { animation-delay: 0.5s; }
.badge:nth-child(3) { animation-delay: 1.0s; }
.badge:nth-child(4) { animation-delay: 1.5s; }
.badge:nth-child(5) { animation-delay: 2.0s; }
.badge:nth-child(6) { animation-delay: 2.5s; }
.badge:nth-child(7) { animation-delay: 3.0s; }
.badge:nth-child(8) { animation-delay: 3.5s; }
.badge:nth-child(9) { animation-delay: 4.0s; }
.badge:nth-child(10) { animation-delay: 4.5s; }
.badge:nth-child(11) { animation-delay: 5.0s; }
.badge:nth-child(12) { animation-delay: 5.5s; }
.badge:nth-child(13) { animation-delay: 6.0s; }
.badge:nth-child(14) { animation-delay: 6.5s; }
.badge:nth-child(15) { animation-delay: 7.0s; }
.badge:nth-child(16) { animation-delay: 7.5s; }
.badge:nth-child(17) { animation-delay: 8.0s; }
.badge:nth-child(18) { animation-delay: 8.5s; }
.badge:nth-child(19) { animation-delay: 9.0s; }
.badge:nth-child(20) { animation-delay: 9.5; }

/* --- ESPACEMENT DU BOUTON CV --- */
.action-cv {
    margin-top: 35px;
}

/* --- CONTACT --- */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 600px;
    margin-top: 30px;
}

.contact-form input, .contact-form textarea {
    padding: 15px;
    background-color: var(--noir);
    color: var(--blanc);
    border: 1px solid #444444;
    border-radius: 4px;
    font-family: var(--font-texte);
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Changement de couleur du texte par défaut (placeholder) dans les champs */
.contact-form input::placeholder, .contact-form textarea::placeholder {
    color: #777777;
}

.contact-form input:focus, .contact-form textarea:focus {
    outline: none;
    border-color: var(--couleur-principale);
    box-shadow: 0 0 8px rgba(0, 38, 184, 0.3);
}

/* --- FOOTER --- */
footer {
    text-align: center;
    padding: 30px;
    background: var(--noir);
    color: var(--texte-clair);
    margin-top: 50px;
    font-size: 0.9rem;
}

/* --- ANIMATIONS SCROLL --- */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- ADAPTATION POUR LES TÉLÉPHONES (RESPONSIVE) --- */
@media screen and (max-width: 768px) {
    
    /* --- 1. Éléments généraux du site --- */
    nav { flex-direction: column; gap: 15px; padding: 15px 5%; }
    .nav-links { gap: 15px; flex-wrap: wrap; justify-content: center; }
    .nav-links a { font-size: 0.85rem; }
    .hero-content h1 { font-size: 2rem; margin-top: 60px; white-space: normal; }
    .hero-content p { font-size: 1rem; padding: 0 20px; }
    h2 { font-size: 2rem; }
    .grid-portfolio { grid-template-columns: 1fr; gap: 30px; padding: 0 20px; }
    .projet-carte { min-height: auto; }

    /* --- 2. CORRECTION DE LA LIGHTBOX SUR MOBILE (V3) --- */
    
    /*
    - On assure que le conteneur peut scroller verticalement
    - On centre le tout horizontalement
    */
    #lightbox {
        justify-content: center;
        overflow-y: auto;
        padding-top: 80px; /* Beaucoup d'espace en haut pour que la croix ne couvre pas l'image */
        padding-bottom: 80px; /* Beaucoup d'espace en bas pour que le texte soit visible */
    }

    /*
    - On assure que le contenu prend toute la largeur
    - On centre le texte
    */
    .lightbox-content {
        width: 95%;
        max-width: 1000px;
        margin: auto;
        text-align: center;
    }

    /*
    - On limite la hauteur de l'image/vidéo pour qu'elle ne prenne pas tout l'écran
    - On lui laisse de la marge sur les côtés pour les flèches
    */
    #lightbox-media img, #lightbox-media iframe {
        max-width: 90vw;
        max-height: 50vh; /* L'image prend au maximum la moitié de l'écran */
        object-fit: contain;
        margin: 0 auto;
    }

    /* --- CORRECTION DE LA CROIX EN HAUT À DROITE --- */
    .close-lightbox {
        top: 25px; /* Plus d'espace en haut */
        right: 25px; /* Plus d'espace à droite */
        font-size: 45px; /* Plus grand et plus facile à cliquer */
        z-index: 10001; /* Assure qu'elle soit AU-DESSUS DE TOUT */
        font-family: sans-serif; /* Force une police standard pour régler le problème du symbole "A" */
        line-height: 1; /* Alignement vertical propre */
        width: 45px; /* Largeur fixe pour faciliter le clic */
        height: 45px; /* Hauteur fixe */
        text-align: center; /* Centre le X dans son carré */
        /* OPTIONNEL : Décommente la ligne suivante pour voir un fond gris derrière le X pour le repérer facilement */
        /* background: rgba(0,0,0,0.5); border-radius: 50%; */
    }

    /* --- Repositionnement des flèches pour mobile --- */
    .prev-lightbox, .next-lightbox {
        font-size: 35px;
        padding: 15px;
        z-index: 10001;
    }
    .prev-lightbox { left: 5px; }
    .next-lightbox { right: 5px; }

    /* --- CORRECTION DU TEXTE EN BAS --- */
    /*
    - On donne une largeur explicite au bloc de texte pour qu'il s'affiche
    - On centre le bloc
    */
    #lightbox-caption {
        display: block;
        width: 100%;
        max-width: 90vw;
        margin: 20px auto 0 auto; /* Espace au-dessus du texte */
    }
    
    /* On réduit légèrement la taille du texte pour qu'il rentre mieux */
    #lightbox-caption div {
        font-size: 0.95rem !important;
    }
}

/* --- MESSAGE DE STATUT DU FORMULAIRE --- */
#statut-message {
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
    font-family: var(--font-titre);
}

.succes {
    color: #4CAF50; /* Un vert rassurant */
}

.erreur {
    color: #f44336; /* Un rouge d'erreur */
}

/* --- DÉFINITION DE L'ANIMATION DE LÉVITATION --- */
@keyframes levitationSubtile {
    0%, 100% {
        /* Position de départ et de fin : normale */
        transform: translateY(0);
    }
    50% {
        /* Au milieu de l'animation : monte très légèrement de 4px */
        /* Tu peux changer "4px" en "2px" pour que ce soit encore plus subtil */
        transform: translateY(-4px);
    }
}

.titre-competences {
    /* On utilise la variable --font-titre que nous avons définie au début */
    font-family: var(--font-titre); 
    font-size: 1.6rem;
    color: var(--blanc);
    margin-top: 55px;
    margin-bottom: 35px;
    display: flex;
    align-items: center;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Le code pour créer la ligne à côté du texte */
.titre-competences::after {
    content: "";
    flex: 1; /* La ligne prend toute la place restante */
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1); /* Une ligne blanche très transparente */
    margin-left: 20px; /* L'espace entre le mot et la ligne */
}

/* --- LIGHTBOX --- */
.lightbox {
    display: none; /* Cachée par défaut */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(32, 32, 32, 0.9); /* Ton gris sombre transparent */
    backdrop-filter: blur(15px); /* EFFET FLOU SUR L'ARRIÈRE-PLAN */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#lightbox-media img, #lightbox-media iframe {
    max-width: 100%;
    max-height: 75vh;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

/* Boutons de navigation */
.close-lightbox, .prev-lightbox, .next-lightbox {
    position: absolute;
    color: white;
    font-size: 40px;
    cursor: pointer;
    background: none;
    border: none;
    transition: color 0.3s;
    user-select: none;
}

.close-lightbox { top: 30px; right: 40px; }
.prev-lightbox { left: 30px; top: 50%; transform: translateY(-50%); }
.next-lightbox { right: 30px; top: 50%; transform: translateY(-50%); }

.close-lightbox:hover, .prev-lightbox:hover, .next-lightbox:hover {
    color: var(--couleur-principale); /* Ton bleu */
}

#lightbox-caption {
    color: white;
    margin-top: 20px;
    font-family: var(--font-titre);
    font-size: 1.2rem;
    text-align: center;
}

.projet-carte {
    /* ... tes styles existants ... */
    cursor: pointer; /* Transforme la flèche en main au survol */
}

#lightbox-caption {
    color: white;
    margin-top: 20px;
    font-family: var(--font-texte); /* Utilise Roboto pour la description */
    font-size: 1.1rem;
    text-align: center;
    max-width: 600px; /* Évite que le texte ne s'étale trop sur les côtés */
    line-height: 1.5;
}

.miniature-video {
    position: relative;
    width: 100%;
    height: 250px; /* Force la même hauteur que tes projets photo */
    overflow: hidden;
}

.miniature-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* Le bouton Play au centre de l'image */
.play-icone {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 38, 184, 0.85); /* Ton bleu avec un peu de transparence */
    color: var(--blanc);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    padding-left: 4px; /* Ajustement visuel pour centrer le triangle ▶ */
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    transition: all 0.3s ease;
    pointer-events: none; /* Empêche le bouton de bloquer le clic sur la carte */
}

/* Animations au survol de la carte (Zoom de l'image + Bouton qui s'allume) */
.projet-carte:hover .miniature-video img {
    transform: scale(1.05);
}

.projet-carte:hover .play-icone {
    background: var(--blanc);
    color: var(--couleur-principale);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 20px rgba(0, 38, 184, 0.8);
}

/* --- TAILLE DE LA VIDÉO DANS LA LIGHTBOX --- */
#lightbox-media iframe {
    width: 85vw;           /* La vidéo prend 85% de la largeur de l'écran */
    max-width: 1000px;     /* Elle ne dépasse pas 1000px sur les très grands écrans */
    aspect-ratio: 16 / 9;  /* Maintient le format rectangulaire parfait de la vidéo */
    height: auto;          /* Laisse le format 16/9 calculer la hauteur */
    max-height: 75vh;      /* LIMITE : s'arrête à la même hauteur que tes photos ! */
}

/* --- STYLE POUR L'ANNÉE DU PROJET --- */
.annee-projet {
    display: block; /* Pour forcer le texte à aller sur sa propre ligne */
    font-size: 0.85rem; /* Texte plus petit */
    color: #999999; /* Couleur grise */
    margin-top: -5px; /* Rapproche un peu l'année du titre */
    margin-bottom: 10px; /* Laisse un peu d'espace avant la description */
    font-style: italic; /* Optionnel : met l'année en italique */
}

/* --- STYLE POUR LES OUTILS DU PROJET --- */
.outils-projet {
    display: block;
    
    /* NOUVEAU : L'astuce magique ! "auto" pousse l'élément tout en bas */
    margin-top: auto; 
    padding-top: 30px; /* Garde un espace minimum de sécurité avec le texte au-dessus */
    
    font-size: 0.6rem;
    color: #888888;
    font-family: var(--font-titre);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- CARTE "À VENIR" (PROJET 9) --- */
.carte-avenir {
    /* On la centre parfaitement dans la grille */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px;
    
    /* Le design "en attente" */
    background: rgba(255, 255, 255, 0.02); /* Un fond presque transparent */
    border: 2px dashed #444444; /* La fameuse bordure en pointillés */
    border-radius: 8px;
    min-height: 380px; /* Pour avoir environ la même hauteur que tes autres cartes */
    
    transition: all 0.3s ease;
    cursor: default; /* Curseur normal (pas de main), car ce n'est pas cliquable */
}

/* L'animation subtile au survol */
.carte-avenir:hover {
    border-color: var(--couleur-principale); /* La bordure s'allume en bleu */
    background: rgba(0, 38, 184, 0.05); /* Léger fond bleuté */
    box-shadow: 0 0 20px rgba(0, 38, 184, 0.15);
}

.contenu-avenir h3 {
    color: #888888; /* Gris clair pour ne pas voler la vedette aux vrais projets */
    font-size: 1.8rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.contenu-avenir p {
    color: #666666; /* Gris un peu plus foncé */
    font-size: 0.95rem;
    font-style: italic;
}

/* --- EFFET MACHINE À ÉCRIRE (ACCUEIL) --- */
.typewriter-cursor {
    color: var(--couleur-principale); /* Ton bleu électrique */
    font-weight: bold;
    animation: blinkCursor 1.2s infinite; /* Utilise la même animation que le logo */
}

/* --- BOUTON REMONTER (SCROLL TO TOP) --- */
#btn-remonter {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--couleur-principale);
    color: var(--blanc);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    z-index: 999; /* Reste par-dessus le contenu */
    
    /* Caché par défaut (légèrement vers le bas) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

#btn-remonter svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

/* Effet au survol */
#btn-remonter:hover {
    background-color: var(--blanc);
    color: var(--couleur-principale);
    box-shadow: 0 0 20px rgba(0, 38, 184, 0.6);
}

#btn-remonter:hover svg {
    transform: translateY(-3px); /* La flèche monte un peu */
}

/* La classe qui sera ajoutée en JavaScript quand on descend */
#btn-remonter.afficher {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Ajustement pour mobile */
@media screen and (max-width: 768px) {
    #btn-remonter {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}