/*
 ===========================================================================
  Project Name: xLCZ.2025
  File Name:    menu.css
  Description:  Feuille de style pour le menu et selevteur de design du site 
  de Xavier Lacaze

  Author:       Xavier Lacaze
  Created On:   22/08/2025
  Version:      1.0.0
  Last Updated: 10/01/2025

  License:      CC-BY-NC-ND
  Website:      www.xlcz.fr
  Contact:      xavier@xlcz.fr

 ===========================================================================
  
  Change Log:
  ---------------------------------------------------------------------------
  Version 1.0.0: Initial release
  Version 1.0.0: Ajout du design selectionné en menu tournant
  Version 1.0.0: Design gris avec selecteur de design, modif message tournant 
                 et burger menu



 ===========================================================================
*/


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');



nav.selecteur {
    position: fixed;
    bottom: 50px; /* Distance par rapport au bas de la page */
    left: 50%; /* Centre le menu horizontalement */
    transform: translateX(-50%); /* Centre le menu */
    height: 82px; /* Hauteur du menu */
    width: 600px; /* Largeur du menu */
    font-family: "Montserrat", sans-serif; 
    z-index: 1000; 

/*
    border: 2px solid black; 
    border-radius: 8px; 
    background-color: rgba(255,255,255,0.9); 
    backdrop-filter: blur(3px);
    font-size: 16px;
    color: black; */
     
}
#design-name > strong{
    color: #b1ff69;  /* Change la couleur du caractère ◉ */
}

nav.selecteur .design-alive {
    background-color: #000000;
    letter-spacing: 1px;
    line-height: 1em;
    text-transform: uppercase;
    font-size: 9px;
    min-height: 12px;
    left: 50%;
    transform: translateX(-51.5%); /* Centre le menu */
    color: #ffffff;
    font-weight: 400;
    padding: 5px 0px 2px 0px;
    overflow: hidden; /* Masque le texte en dehors du conteneur */
    white-space: nowrap;
    position: relative;
    width: 75%;
    border-radius: 0px 0px 8px 8px;
}

nav.selecteur .design-alive span{

}


        .marquee {
           overflow: hidden;
       }


       .marquee span {   
        --tw: 300px; 
        --ad: 15s;
        display: inline-block;
        white-space: nowrap;
        width: var(--tw);
        text-shadow: var(--tw) 0 currentColor, 
        calc(var(--tw) * 2) 0 currentColor, 
        calc(var(--tw) * 3) 0 currentColor,
        calc(var(--tw) * 4) 0 currentColor;

        will-change: transform;
        animation: marquee var(--ad) linear infinite;
    }



    @keyframes marquee {
        0% { 
            transform: translateX(0); 
            opacity : 0%;
        }
        10% {
            opacity: 100%;
        }
    
        45% {
            opacity: 100%;
        }
        50% {
            opacity : 0%;
        }
        60% {
            opacity : 100%;
        }
        95% {
            opacity : 100%;

        }
        100% { 
            transform: translateX(-100%); 
            opacity: 0%;
        }
    }



nav.selecteur a {
        font-family: "Montserrat", sans-serif;
        font-weight: 400; /* Police */
}

nav.selecteur ul.navbar {
    /*padding: 8px 10px 10px 10px; /* Espace intérieur du menu */
    list-style: none; /* Supprime les points de puce */
    margin: 0; /* Supprime la marge par défaut */
    display: flex; /* Active Flexbox */
    justify-content: space-between; /* Répartit l'espace entre les éléments */
    align-items: center; /* Aligne les éléments verticalement au centre */

    height: 70px;
    border-radius: 8px; 
    background-color: rgba(0,0,0,0.55); 
    backdrop-filter: blur(10px);
    font-size: 16px;
    color: black; 
    width: fit-content;

}

nav.selecteur > ul > li {
    position: relative; /* Nécessaire pour le positionnement du sous-menu */
    text-align: center; /* Centre le texte dans chaque élément */
    display: block;
    line-height: 0em;
}

nav.selecteur > ul > li > a {
    text-decoration: none; /* Supprime le soulignement des liens */
    color: black; /* Couleur du texte */
    display: block; /* Permet de cliquer sur toute la zone du lien */
    transition: font-weight 0.5s ease;
}

nav.selecteur > ul > li:hover > a {
    font-weight: 800; Met le lien en gras au survol */
}

/*nav.selecteur > ul > li:last-child {
    padding-right: 10px; /* Ajustez la valeur selon vos besoins 
}*/


/* Sous-menu */
.sous-menu {
    display: none; /* Masque les sous-menus par défaut */
    position: absolute; /* Positionne les sous-menus par rapport à leur parent */
    left: 0; /* Aligne les sous-menus à gauche */
    bottom: 77px; /* Positionne le sous-menu juste au-dessus du parent */
    z-index: 1000; /* Assure que le sous-menu est au-dessus d'autres éléments */
    height: auto; /* Hauteur automatique pour le sous-menu */
}

/* Enlever les largeurs fixes pour permettre l'adaptation à chaque groupe */
.sous-menu#style-options,
.sous-menu#skills-options {
    width: auto; /* Ajuste automatiquement la largeur des sous-menus à leur contenu */
}

/* Liste des éléments dans les sous-menus */
.sous-menu li {
    padding: 4px; /* Espace intérieur des éléments du sous-menu */
    text-align: left; /* Aligne le texte à gauche dans le sous-menu */
}

/* Liens dans les sous-menus */
.sous-menu a {
    padding: 10px; /* Espace autour des liens dans le sous-menu */
    color: white; /* Couleur du texte du sous-menu */
    text-decoration: none; /* Supprime le soulignement par défaut */
    transition: font-weight 0.5s ease, color 0.5s ease; /* Ajoute une transition de couleur */
    line-height: 1em; /* Espacement des lignes */
}

.sous-menu a:hover {
    font-weight: 800; /* Met le texte en gras au survol */
}

/* État actif - souligne le lien actif sans être affecté par le hover */
.sous-menu a.active {
    font-weight: bold; /* Met le texte actif en gras */
    text-decoration: underline; /* Souligne le lien actif */
}

/* Ne pas souligner l'élément actif au survol */
.sous-menu a:hover:not(.active) {
    text-decoration: underline; /* Souligne les autres éléments au survol */
}

/* Styles pour les groupes */
.group {
    background-color: #474747; /* Couleur de fond des sous-menus */
    border-radius: 8px; /* Coins arrondis pour le sous-menu */
    padding: 8px; /* Espacement intérieur */
    margin-bottom: 8px; /* Espacement vertical entre les groupes */
    display: block; /* Place chaque groupe sur une nouvelle ligne */
    width: fit-content; /* Ajuste la largeur du groupe à son contenu */
    white-space: nowrap; /* Empêche le texte de se diviser en plusieurs lignes */
    text-align: left; /* Assure que le contenu est bien aligné à gauche */
}


.group p {
    padding : 4px 0px 4px 16px;
    color : rgba(255,255,255,0.7);
    text-transform : uppercase;
    letter-spacing: 4px;
    font-size: 10px;

}

.group:nth-child(2){
    padding-bottom: 12px;

}




nav.selecteur ul.navbar li {
    padding : 8px;
    height : calc(100% - 16px);

}

li#design-menu {
    width : 100%;
}

li#design-menu ul#style-options {
    display: flex ;
    flex-direction: row;
    justify-content: flex-start;    align-items: center;
    flex-wrap: wrap;
    line-height: inherit;
    background-color: #3E3E3E ;
    border-radius : 8px;
    height: 55px;
    padding: 0px 4px;
    width: fit-content;

}

li#design-menu ul#style-options li {
line-height: 2em;
padding : 8px 6px ;



}

li#design-menu ul#style-options li a {
    font-size: 12px;
    color: #DEDEDE;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #4e4e4e;
    border-radius: 5px;
    padding: 3px 16px;
    display: block;
    transition: all 1s ease; /* Transition douce pour d'autres propriétés */
}


li#design-menu ul#style-options li a.active {
    color: #fff;
    border: 1px solid #fff;
    box-shadow: inset 0 0 7px 2px rgba(72, 138, 19,  0.9)

}

@keyframes fadeColor {
    0% {
        font-weight : 500; 
        color: white;
        border-color: #5C5CD6; /* Couleur initiale de la bordure */
    }

    50% {
        color: white;
        border-color: #FFF200; /* Couleur finale de la bordure */
    }
    100% {
        font-weight : 500; 
        color: white;
        border-color: #FFF; /* Couleur initiale de la bordure */
    }
}

li#design-menu ul#style-options li a:hover {
    animation: fadeColor 1s ease forwards; /* Lancer l'animation en 1 seconde */
}




li.mark svg {
    background-color: #222222;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.5s ease;
    width: 35px; /* Largeur souhaitée */
    height: auto; /* Hauteur automatique pour conserver les proportions */
}

/* Animation arc-en-ciel */
@keyframes rainbow {
    0% {
        fill: #00ccff; /* Bleu fluo */
        filter: drop-shadow(0 0 10px #ff007f);
    }
    16.66% {
        fill: #6600ff; /* Violet fluo */
        filter: drop-shadow(0 0 10px #ff6600);
    }
    33.33% {
        fill: #ff6600; /* Orange fluo */ 
        filter: drop-shadow(0 0 10px #ffff00);
    }
    50% {
        fill: #00ff00; /* Vert fluo */
        filter: drop-shadow(0 0 10px #00ff00);
    }
    66.66% {
        fill: #ff007f; /* Rose fluo */
        filter: drop-shadow(0 0 10px #00ccff);
    }
    83.33% {
        fill: #ffff00; /* Jaune fluo */
        filter: drop-shadow(0 0 10px #6600ff);
    }
    100% {
        fill: #ffffff; /* Blanc */
        filter: drop-shadow(0 0 10px #ffffff);
    }
}

li.mark svg:hover .cls-1 {
    animation: rainbow 0.5s ease forwards;
}

li.mark svg path{
    stroke: white; /* Couleur par défaut */}


/* Animation arc-en-ciel lumineux pour stroke */
@keyframes rainbowStroke {
    
    0% {
        stroke: #fff; /* Rose fluo */}

    2% {
        stroke: #ff007f; /* Rose fluo */
        stroke-width: 3px;
        filter: drop-shadow(0 0 1px #ff007f);
    }
    16.66% {
        stroke: #ff6600; /* Orange fluo */
        stroke-width: 2px;
        filter: drop-shadow(0 0 1px #ff6600);
    }
    50.33% {
        stroke: #00ff00; /* Vert fluo */
        stroke-width: 2px;
        filter: drop-shadow(0 0 1px #ffff00);
    }
    70% {
        stroke: #ffff00; /* Jaune fluo */
        stroke-width: 2px;
        filter: drop-shadow(0 0 1px #00ff00);
    }
    100% {
        stroke: #ffffff; /* Blanc */
        stroke-width: 3px;
        filter: drop-shadow(0 0 0px #ffffff); /* Effet lumineux au blanc */
    }
}

/* Quand on survole l'élément SVG, appliquer l'animation de l'arc-en-ciel sur le stroke */
li.mark svg:hover path {
    animation: rainbowStroke 3s ease forwards; /* Animation arc-en-ciel */
    stroke-width: 3px; /* Épaisseur de ligne plus large au survol */
}


li.mark .cls-1 {
    fill: white; /* Couleur par défaut */

    stroke-width: 0px; /* Épaisseur du contour */
    transition: fill 0.5s ease; /* Transition pour le changement de couleur */

}














/***************************************************/
/************** Responsive < 768px *****************/
/***************************************************/

@media only screen and (max-width: 768px) {
      .sous-menu#skills-options {
        margin-left: 0px;
    }
}

@media only screen and (max-width: 768px) {

    /* Ajustements pour le nav.selecteur */
    nav.selecteur {
        width : 95vw;
        bottom: 70px;
    }



    nav.selecteur .design-alive {
        transform: translateX(-50%);
        width: 80%;
    }

    
    /* Affiche le sous-menu au survol de l'élément parent */
    nav.selecteur > ul > li:hover > ul.sous-menu {
        display: block; /* Affiche le sous-menu */
    }

    /* Animation de slide vers le bas pour une transition plus fluide */
    @keyframes slide-down {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


    .sous-menu {
        bottom : 100px;
}

nav.selecteur ul.navbar {
height : 100px;
width: 95vw;
}



li#design-menu ul#style-options {
    justify-content: space-between;
        padding : 2px 4px;
        height : 82px;
        width : 100%;
}

li#design-menu ul#style-options li {
    line-height: 1em;
    height :auto;
    width: calc((100% / 2) - 4px);    
    padding : 0px;

}

li#design-menu ul#style-options li a {
    padding : 8px 0px;
}



    /* S'assurer que le body permet de faire sortir les sous-menus */
    body {
        overflow-x: visible !important;
    }
}






/***************************************************/
/************** FLOTTING BUTTONS   *****************/
/***************************************************/



/************** Contact *****************/



div.fb {
    position: fixed;
    height: 54px;
    border-radius: 8px; 
    padding : 8px;
    background-color: rgba(0,0,0,0.55); 
    backdrop-filter: blur(10px);
    color: black; 
    margin-bottom: 16px;
    width: fit-content;
    z-index: 999; 
    display: block;
}

div.fb img{
    height: 36px;
    filter: invert(100%);
    padding : 9px;
}

div.fb a {
    display: block;
    cursor: pointer;
    background-color: #222222;
    border-radius: 6px;
    transition: all 0.5s ease;
    width: 54px; /* Largeur souhaitée */
    height: 54px; /* Hauteur automatique pour conserver les proportions */
}

div.fb.contact {
    bottom: 50px;
    right : 50px;

}

div.fb.contact a {

}

/* Style pour le bouton de contact */
.fb.contact {
    opacity: 1; /* Initialement visible */
    transition: opacity 0.2s ease-in-out; /* Transition fluide pour l'effet de fade */
}

/* Style pour cacher le bouton avec un fade-out */
.fb.contact.fade-out {
    opacity: 0; /* Rendre le bouton invisible */
}

/* Style pour le bouton "Retour en haut" */
.fb.top {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.fb.top.fade-out {
    opacity: 0;
}



div.fb.top {
    bottom: 50px;
    left : 50px;
     opacity: 0;          /* Caché par défaut */
    visibility: hidden;  /* Cache l'élément pour qu'il ne prenne pas d'espace */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

div.fb.top.show {
    opacity: 1;         /* Devient visible */
    visibility: visible;
}



@media only screen and (max-width: 768px) {
     div.fb{
       display: none;
    }
}