/*──────────────────
         home
──────────────────*/

#home{  
        margin: auto;
        height: 100vh;
        color: var(--main-fonts-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
        padding-top: 70px; /* Ajoute un espace entre la navbar et la section home sur desktop */
}

#home .filter{
        background: url('ai.png') no-repeat;
        background-size: cover;
        background-position: center;
        position: absolute;
        top: 0px;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: .20;
        z-index: 0;
        height: 100%;
        width: 100%; /* Assurer que le fond couvre toute la largeur */
}  

.intro {
        text-align: center;
        color: var(--main-fonts-color);
        z-index: 1;
        margin: auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 900px;
        box-sizing: border-box;
}

/* Profile picture circle */
.profile-picture {
        width: 280px; /* Dimensions fixes réduites */
        height: 280px;
        border-radius: 50%;
        overflow: hidden;
        margin: 70px 25px 25px 25px; /* Added right margin for spacing on desktop */
        border: 5px solid var(--main-decor-color);
        box-shadow: 0 0 20px rgba(93, 64, 55, 0.25); /* Ombre plus prononcée et dans la teinte marron */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        flex-shrink: 0; /* Empêche l'image de se rétrécir */
}

.profile-picture:hover {
        transform: scale(1.03); /* Effet de zoom plus subtil */
        box-shadow: 0 0 25px rgba(93, 64, 55, 0.4); /* Ombre plus intense au survol */
}

.profile-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
        z-index: 0;
        display: block; /* Assure un meilleur rendu */
}

.intro p {
        margin: 5px;
        font-size: 1.2rem;
        font-family: var(--main-font-family);
        text-align: center;
        width: 100%;
        max-width: 700px;
}

h3{
        padding-bottom: 15px;
        letter-spacing: normal;
        font-family: var(--main-font-family);
        font-style: normal;
        font-size: 60px;
        color: var(--main-fonts-color);
        text-shadow: 0px 0px 40px var(--main-decor-color);
}

/* Style pour la flèche de défilement */
.scroll-down {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 10px;
        /* Style mis à jour pour forcer le rechargement */
}

.scroll-down a {
        color: var(--main-fonts-color) !important; /* Forcer la couleur marron */
        font-size: 24px;
        transition: all 0.3s ease;
}

.scroll-down a:hover {
        color: var(--main-decor-color) !important; /* Couleur plus claire au survol */
        transform: translateY(5px);
}

/* Styles responsifs pour section home sur mobile */
@media only screen and (max-width: 768px) {
        #home {
                height: auto;
                min-height: 100vh;
                padding-top: 100px;
                padding-bottom: 50px;
                position: relative;
                overflow-x: hidden;
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
        }

        #home .filter {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                height: 100%;
                min-height: 100%;
                width: 100%;
                overflow: hidden;
        }

        .profile-picture {
                width: 250px;
                height: 250px;
                min-width: 200px;
                min-height: 200px;
                max-width: 80vw;
                max-height: 80vw;
                margin: 0 auto 20px;
                display: block;
        }

        .intro {
                width: 100%;
                max-width: 100%;
                padding: 10px 5px;
                box-sizing: border-box;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
                z-index: 2;
                overflow: visible !important;
        }

        .intro h3 {
                font-size: 22px; /* Taille légèrement réduite pour s'adapter aux petits écrans */
                width: 100%;
                max-width: 100%; /* Utiliser toute la largeur disponible */
                padding-left: 3px;
                padding-right: 3px;
                box-sizing: border-box;
                white-space: normal; /* Permettre le retour à la ligne */
                word-wrap: break-word; /* Assurer que les mots longs sont coupés */
                overflow-wrap: break-word;
                text-align: center;
                margin: 0 auto; /* Centrer le texte */
                overflow: visible; /* Assurer que le texte ne soit pas coupé */
        }

        .intro p {
                font-size: 0.9rem; /* Légèrement réduit */
                padding-left: 5px;
                padding-right: 5px;
                width: 95%; /* Réduire légèrement pour éviter le débordement */
                max-width: 95%;
                box-sizing: border-box;
                margin: 5px auto; /* Centrage horizontal */
                word-wrap: break-word;
                overflow-wrap: break-word;
                text-align: center;
                hyphens: auto; /* Coupure des mots longs si nécessaire */
                overflow: visible !important; /* Assurer que tout le contenu est visible */
        }

        /* Ajouter une classe pour mieux gérer le texte d'introduction */
        .intro-text {
                width: 100%;
                max-width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin: 0 auto;
                padding: 0 5px;
                box-sizing: border-box;
        }

        .typewriter h3 {
                width: 100% !important; /* Utiliser toute la largeur disponible */
                margin: 0 auto; /* Centrage horizontal */
                overflow: visible !important; /* Empêcher la troncation */
                display: block; /* Assurer que l'élément prend tout l'espace nécessaire */
        }

        /* Style spécifique pour le titre sur mobile */
        h3.mobile-title {
                text-align: center;
                width: 100% !important;
                font-size: 21px !important;
                letter-spacing: -0.5px;
                padding: 0 !important;
                overflow: visible !important;
                white-space: normal !important;
                word-break: keep-all !important;
        }

        .typing-effect {
                display: inline-block;
                width: auto;
                max-width: 95%;
                text-align: center;
                font-size: 0.9rem;
                white-space: normal;
                overflow-wrap: break-word;
                word-wrap: break-word;
                overflow: visible !important;
                box-sizing: border-box;
        }

        /* Styles spécifiques pour les tout petits écrans */
        @media only screen and (max-width: 375px) {
                .intro h3 {
                        font-size: 20px;
                        padding: 0;
                        letter-spacing: -0.5px; /* Réduire légèrement l'espacement des lettres */
                        width: 100% !important;
                }
                .typewriter h3 {
                        font-size: 19px !important; /* Encore plus petit pour garantir l'affichage */
                        width: 100% !important;
                }
                .mobile-title {
                        font-size: 18px !important; /* Encore plus petit pour les très petits écrans */
                        letter-spacing: -0.7px !important;
                        transform: scale(0.95) !important; /* Légèrement réduit pour s'adapter */
                }
                .intro p {
                        font-size: 0.85rem;
                }
                /* Fix pour le titre Compétences & Expertise */
                #chakra-section h3 {
                        font-size: 22px !important;
                        padding: 0 5px !important;
                        box-sizing: border-box;
                        overflow: visible;
                        white-space: normal;
                        width: 100%;
                        max-width: 100%;
                }
        }
}