/* ========== Style global ========== */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background: #f5f5f5;
    scroll-padding-top: 110px; /* ✅ Correspond à la hauteur de ton header fixe */
    scroll-behavior: smooth;   /* ✅ Pour un défilement fluide */
}

.separator {
    color: white;
    font-weight: bold;
}

/* ========== HEADER NAVIGATION ========== */
header {
    background: #222;
    height: 90px; /* ✅ Augmente la hauteur pour inclure le bandeau social */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

nav {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav ul li {
    display: inline-block;
    margin: 0 15px;
}

nav ul li a {
    font-size: 14px; /* ✅ Augmente la taille du texte du menu */
    color: white;
    text-decoration: none;
    font-weight: normal;
}

/* ========== BANDEAU SOCIAL ========== */
.social-banner {
    display: flex;
    justify-content: center;
    align-items: center; /* ✅ Centre verticalement les icônes */
    padding: 5px 0;
    margin-top: 5px; /* ✅ Ajoute un peu d'espace sous le menu */
}

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

.social-icons img {
    width: 30px;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.social-icons img:hover {
    transform: scale(1.2);
}

/* === Texte au survol === */
.icon-text {
    position: absolute;
    background: rgba(255, 255, 255, 0.8); /* ✅ Fond semi-transparent */
    color: black;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.icon-link:hover .icon-text {
    opacity: 1; /* ✅ Affichage du texte au survol */
}

/* === Icône du menu hamburger === */
.menu-toggle {
    font-size: 30px;
    color: white;
    cursor: pointer;
    display: none;
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 5px;
}

/* === Croix ✖ pour fermer le menu === */
.close-menu {
    position: absolute;
    top: 10px;
    right: 15px; /* ✅ Place la croix à droite */
    font-size: 25px;
    color: white;
    cursor: pointer;
    display: none; /* Cachée par défaut */
}


/* === Cacher le menu normal en mobile === */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav ul li {
    display: inline-block;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: normal;
}

/* === Mode Mobile : Affichage du menu hamburger et menu caché === */
/* === Affichage du menu mobile === */
@media (max-width: 768px) {
    header {
        height: 80px; /* ✅ Ajuste la hauteur du header */
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1000;
    }
    
    .close-menu {
        display: block; /* ✅ Affiche la croix seulement en mobile */
        position: absolute;
        top: 30px;
        right: 20px; /* ✅ Ajoute une marge pour ne pas être collé */
        font-size: 25px;
        color: white; /* ✅ Assure que la croix est bien blanche */
        cursor: pointer;        
    }

    .menu-toggle {
        font-size: 35px;
        display: block; /* ✅ Affiche l'icône hamburger */
    }


    .social-icons {
        position: absolute;
        top: 50%;
        right: 40px; /* ✅ Ajuste l'alignement pour ne pas sortir de l'écran */
        transform: translateY(-50%);
        display: flex;
        gap: 10px; /* ✅ Réduit l’espace pour que tout rentre */
        max-width: 100%; /* ✅ Évite tout dépassement */
        align-items: center;
    }

    .social-icons img {
        width: 30px; /* ✅ Icônes sociales légèrement plus petites */
        height: auto;
    }
    
    nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 60%%;
        height: 50%;
        background: #222;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 50px;
        padding-left: 5px;
        transition: transform 0.3s ease-in-out;
        transform: translateX(-100%);
    }

    nav.active {
        transform: translateX(0); /* ✅ Fait apparaître le menu avec un slide-in */
    }

    nav ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* ✅ Aligner le menu à gauche */
        padding: 5px; /* Marge gauche */
        margin: 15px 0; /* Espacement */
    }
    
    nav ul li {
        padding: 15px 0; /* ✅ Augmente l’espace entre les éléments */
    }
    
    .separator {
        display: none; /* Cache les | en version mobile */
    }
}

/* === TITRE DES SECTIONS === */
.section-titre {
    background: #000;               /* Fond noir élégant */
    color: #fff;                    /* Texte blanc lisible */
    text-align: center;             /* Centrage horizontal du texte */
    padding: 20px 0;                /* Espacement vertical haut/bas */
    margin-top: 40px;               /* Marge avant le titre (séparation avec la section précédente) */
    margin-bottom: 40px;
}

.section-titre h2 {
    font-size: 28px;                /* Taille du titre */
    font-weight: normal;            /* Poids standard (pas trop gras) */
    margin: 0;                      /* Supprime les marges par défaut autour du h2 */
}

.section-description {
    background: #fff;               /* Fond blanc neutre */
    color: #000;                    /* Texte noir classique */
    font-family: 'Montserrat', sans-serif;  /* Police cohérente avec le reste du site */
    font-size: 1.1em;               /* Taille de texte agréable à lire */
    text-align: center;             /* Texte centré */
    padding: 20px 5%;               /* Espacement intérieur (haut/bas + marges latérales) */
    max-width: 900px;               /* Largeur maximale pour une bonne lisibilité */
    margin: 0 auto 40px auto;       /* Centre horizontalement + marge bas entre description et contenu suivant */
    line-height: 1.6;               /* Espacement entre les lignes pour une lecture fluide */
}

/* === FIN TITRE DES SECTIONS === */

/* ========== SECTION PROJETS DATA ========== */

.project-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0 2%;
}

.project-category {
    background: #1c1c1c;
    padding: 25px 20px;
    border-radius: 15px;
    box-shadow: 0px 6px 15px rgba(255, 255, 255, 0.1);
    text-align: center;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 550px;
    box-sizing: border-box;
}

/* ✅ Image parfaitement centrée */
.project-category img {
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease-in-out;
    max-width: 220px;
    margin: 0 auto 20px auto;
    display: block;
}

/* ✅ Titre bien positionné */
.project-category h3 {
    font-size: 1.3em;
    color: #fff;
    margin-bottom: 15px;
    font-weight: normal;
}

/* ✅ Texte bien calé et hauteur flexible */
.project-category p {
    font-size: 1em;
    color: #ccc;
    line-height: 1.6;
    text-align: justify;
    flex-grow: 1;
    margin-bottom: 10px; /* ✅ réduit pour coller au bouton */
}

/* ✅ Bouton bien calé bas du bloc */
.project-category .btn {
    align-self: center;
    padding: 10px 22px;
    background: none;
    color: #ffb347;
    border: 2px solid #ffb347;
    border-radius: 30px;
    font-weight: normal;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    margin-top: auto; /* ✅ force le bouton tout en bas */
}

/* ✅ Hover effet */
.project-category:hover img {
    transform: scale(1.05);
}

.project-category .btn:hover {
    background: #ffb347;
    color: #1c1c1c;
    box-shadow: 0px 6px 12px rgba(255, 179, 71, 0.5);
}


/* ========== ADAPTATION MOBILE ========== */

@media (max-width: 768px) {
    .project-container {
        grid-template-columns: 1fr; /* ✅ 1 seul bloc par ligne */
        gap: 20px;
    }

    .project-category {
        height: auto; /* ✅ Adaptatif */
        padding: 20px;
    }

    .project-category img {
        max-width: 180px;
    }

    .project-category h3 {
        font-size: 1.2em;
    }

    .project-category p {
        font-size: 0.95em;
        padding: 0 5px;
    }

    .project-category .btn {
        padding: 8px 16px;
        font-size: 0.9em;
        border-radius: 25px;
    }
}


/* ANIMATION INTRO */
.intro {
    display: flex;
    flex-direction: column;
    justify-content: center; /* ✅ Centre verticalement */
    align-items: center; /* ✅ Centre horizontalement */
    margin-top: 80px;
    padding: 90px 0; /* ✅ Espace suffisant pour tout afficher */
    background: linear-gradient(to bottom, #68a0b4, #a1c4fd);
    color: white;
    font-family: 'Montserrat', sans-serif;
    height: auto; /* ✅ Assure que la hauteur s'ajuste dynamiquement */
}

@media (max-width: 768px) {
    .intro {
        padding: 60px 0; /* ✅ Réduit le padding pour absorber les variations */
        min-height: 250px; /* ✅ Hauteur minimum pour éviter les sauts visuels */
    }
}


/* Titre fixe */
.title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 25px;
}

/* Conteneur du texte qui change */
#text-container {
    font-size: 22px;
    font-weight: bold;
    height: 60px; /* ✅ Hauteur fixe pour éviter les sauts */
    overflow: hidden;
    position: relative; /* ✅ Essentiel pour l'animation */
    width: 100%;
}

/* Texte animé */
#text-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    transition: opacity 1s ease-in-out; /* ✅ Augmente la durée pour un meilleur effet */
    opacity: 1; /* ✅ Doit être visible au départ */
}

/* FIN ANIMATION INTRO */


/* === Section Skills (Fond Noir) === */
.skills-section {
    background-color: black;
    color: white;
    padding: 40px;
    display: flex;
    justify-content: center;
}

/* Conteneur principal */
.skills-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    max-width: 1200px;
}

/* Partie gauche : Logos et Titre */
.skills-left {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logos */
.skills-logos {
    display: flex;
    gap: 30px; /* Espacement entre les logos */
}

.skills-logos img {
    height: 70px; /* Taille des logos */
    filter: brightness(1.2); /* Accentue le blanc sur fond noir */
}

/* Titre sous les logos */
.skills-title {
    font-size: 24px;
    font-weight: 700;
    margin-top: 30px;
    text-align: center;
}

/* Partie droite : Texte */
.skills-text {
    max-width: 600px;
    text-align: justify;
    font-size: 16px;
    line-height: 1.5;
}

/* === Correction du texte déroulant en mode mobile === */
@media (max-width: 768px) {
    #text-container {
        height: auto; /* ✅ Ajuste la hauteur */
        min-height: 50px; /* ✅ Évite le tronquage */
        overflow: visible; /* ✅ Empêche le texte d'être caché */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px
    }
    
    .title {
        font-size: 28px; /* ✅ Titre plus petit en mobile */
    }

    #text-slide {
        position: relative;
        width: 100%;
        text-align: center;
    }
}

/* === Ajustement du bloc Skills en mobile === */
@media (max-width: 768px) {
    .skills-container {
        flex-direction: column; /* ✅ Change la disposition en colonne */
        text-align: center;
    }

    .skills-left {
        margin-bottom: 20px; /* ✅ Ajoute un espace entre les logos et le texte */
    }

    .skills-text {
        max-width: 95%; /* ✅ Plus large que les 600px du desktop */
        padding: 0 10px;
        text-align: justify;
    }

    .skills-logos {
            display: flex;
            flex-direction: column; /* ✅ Affiche les logos en colonne */
            align-items: center; /* ✅ Centre les logos */
            gap: 20px; /* ✅ Espacement plus large entre chaque logo */
        }

    .skills-logos img {
        height: auto; /* ✅ Réduit légèrement la taille des logos pour s'adapter */
        max-width: 100px; /* ✅ Empêche que les images dépassent */
        height: auto; /* ✅ Garde le ratio d'origine */
    }
}

/* === SECTION STACK === */

/* ========== STACK GALLERY ========== */
.stack-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* ✅ 6 par ligne */
    gap: 40px;
    padding: 40px 6%;
    background-color: #ffffff;
    justify-items: center;
    align-items: center;
}

.stack-item img {
    max-width: 90px;     /* ✅ Plus gros */
    max-height: 90px;
    object-fit: contain;
    transition: transform 0.3s ease-in-out;
    filter: grayscale(0%);
}

.stack-item img:hover {
    transform: scale(1.1);
    filter: grayscale(0%);
}

/* ✅ Responsive mobile : 4 par ligne */
@media (max-width: 768px) {
    .stack-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
        padding: 30px 5%;
    }

    .stack-item img {
        max-width: 100px;
        max-height: 100px;
    }
}



/* === PATCHWORK GALLERY === */
/* === Bandeau de la galerie Dataviz === */

.dataviz-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* ✅ Ajustement dynamique */
    gap: 15px;
    padding: 20px;
    justify-content: center;
}

/* === Images du patchwork === */
.dataviz-item {
    position: relative;
    overflow: hidden;
    background: white; /* ✅ Fond blanc pour les images carrées */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    height: 200px; /* ✅ Hauteur fixe pour toutes les images */
}

/* === Ajuster les images === */
.dataviz-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* ✅ Conserve les proportions, sans déformation */
}

/* === Info au survol === */
.dataviz-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7); /* ✅ Fond gris semi-transparent */
    color: white;
    text-align: center;
    padding: 10px;
    opacity: 0; /* ✅ Caché par défaut */
    transition: opacity 0.3s ease-in-out;
}

/* === Apparition au survol === */
.dataviz-item:hover .dataviz-info {
    opacity: 1;
}

/* === Conteneur du mode plein écran === */
#fullscreen-container {
    display: none; /* ✅ Caché par défaut */
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 9999;
}

/* ✅ Affichage du plein écran */
.fullscreen-visible {
    display: flex !important; /* ✅ Forcer l'affichage */
    opacity: 1 !important;
    visibility: visible !important;
}

/* ✅ Image en plein écran */
#fullscreen-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
}

/* ✅ Bouton de fermeture */
.close-fullscreen {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}

@media (max-width: 768px) {
    .dataviz-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* ✅ 2 images par ligne */
        gap: 10px; /* ✅ Réduit l'espace entre les images */
        padding: 10px;
        overflow: hidden; /* ✅ Évite le défilement infini */
    }

    .dataviz-item {
        width: 100%;
        height: 150px; /* ✅ Hauteur ajustée pour un ratio 3:2 */
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        transition: opacity 1.5s ease-in-out; /* ✅ Transition fluide */
    }

    .dataviz-item img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* ✅ Ajuste sans recadrer */
    }
}


/* === FIN PATCHWORK GALLERY === */

/* ========== SECTION EXERCICES TECHNIQUES HARMONISÉE ========== */

/* === TITRE DE CATÉGORIE EXERCICES TECHNIQUES === */
/* Titre de catégorie */
.category-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color: #1c1c1c;
    margin: 40px 0 20px 0;
    gap: 20px;
}

.category-title::before,
.category-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #999;
    max-width: 150px;
}

/* === FIN TITRE DE CATÉGORIE EXERCICES TECHNIQUES === */

.tech-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0 2%;
    justify-items: center;
    align-items: center;
}

.tech-category {
    flex-direction: column;
    background: #1c1c1c;
    border-radius: 15px;
    box-shadow: 0px 6px 15px rgba(255, 255, 255, 0.1);
    padding: 20px;
    display: flex;
    align-items: center; /* ✅ Centre verticalement l’ensemble */
    gap: 20px;
    height: auto; /* ✅ Hauteur fixe harmonisée */
    min-height: 280px;
    transition: all 0.3s ease-in-out;
}

.tech-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* ✅ Centre verticalement */
    align-items: center;      /* ✅ Centre horizontalement */
    height: 100%;
    gap: 15px;
    text-align: center;
}


/* ✅ Colonne gauche : image + bouton */
.tech-category .tech-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* ✅ Image */
.tech-left img {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.tech-left img:hover {
    transform: scale(1.05);
}

/* ✅ Bouton plus étroit */
.tech-left .btn {
    padding: 6px 14px;
    font-size: 0.8em;
    border-radius: 20px;
    border: 2px solid #ffb347;
    background: none;
    color: #ffb347;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    text-align: center;
    width: auto;
}

.tech-left .btn:hover {
    background: #ffb347;
    color: #1c1c1c;
    box-shadow: 0px 4px 8px rgba(255, 179, 71, 0.4);
}

/* ✅ Bloc texte centré verticalement */
.tech-text {
    /*flex: 1;*/
    display: flex;
    flex-direction: column;
    justify-content: center; /* ✅ Centre verticalement */
    text-align: justify;
}

/* ✅ Titre aligné */
.tech-text h3 {
    font-size: 1.1em;
    margin-bottom: 6px;
    color: #fff;
    text-align: center;
    line-height: 1.3;
}

/* ✅ Texte descriptif */
.tech-text p {
    font-size: 0.95em;
    color: #ccc;
    line-height: 1.4;
    margin: 0;
}

/* ✅ Ligne contenant image + texte */
.tech-top {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;     /* ✅ centre horizontalement les colonnes */
}

/* ✅ Tags techniques */
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    justify-content: flex-start; /* ✅ Aligne les tags à gauche */
    align-items: center;     /* ✅ Évite l'effet centrage vertical */
}

.tech-tags .tag {
    background-color: #e0e0e0;
    color: #1c1c1c;
    font-size: 0.75em;
    padding: 4px 10px;
    border-radius: 15px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
}


/* ========== MOBILE ========== */
@media (max-width: 768px) {
    .tech-container {
        grid-template-columns: 1fr;
    }

    .tech-category {
        flex-direction: column;
        height: auto;
        align-items: center;
        text-align: center;
    }

    .tech-left {
        margin-bottom: 2px;
    }

    .tech-left img {
        width: 90px;
        height: 90px;
        margin-bottom: 8px;
    }

    .tech-text {
        margin-top: 0;
        text-align: justify;
    }

    .tech-text h3 {
        margin-top: 0;
        text-align: center;
    }
}



/* === SECTION STORY === */

/* === GALERIE ANIMÉE MA STORY === */
.story-gallery-wrapper {
    overflow: hidden;
    width: 100%;
    background: #111;
    padding: 10px 0;
    margin-bottom: 40px;
    filter: sepia(0.6) contrast(1.1);
}

.story-gallery {
    display: flex;
    gap: 20px;
    animation: scroll-gallery 60s linear infinite;
    width: max-content;
}

.story-gallery img {
    height: 200px;
    border-radius: 8px;
    opacity: 0.9;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.story-gallery img:hover {
    transform: scale(1.05);
}

/* ✅ Défilement fluide gauche vers droite */
@keyframes scroll-gallery {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}

/* ✅ Mode mobile — images plus petites */
@media (max-width: 768px) {
    .story-gallery img {
        height: 120px;
    }

    .story-gallery {
    animation: scroll-gallery 30s linear infinite;
    }
}




/* ✅ Introduction sous "Ma Story" */
.story-content {
    background: #fff;
    color: #000;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    text-align: justify;
    padding: 30px 8%;
    max-width: 900px;
    margin: 0 auto 50px auto; /* ✅ Bien espacé et centré */
    line-height: 1.8;
}

.story-title {
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 30px;
}



/* ========== Pied de page ========== */
footer {
    background: #222;
    color: white;
    padding: 15px;
    margin-top: 20px;
}