/* ========================================= */
/* Fichier CSS dédié aux boutons et lien    */
/* ========================================= */

/* Réinitialisation de base pour tous les liens */
a, a.nav-link { /* Ici attention : class nav-link correspond à la balise Blazor NAVLINK */
    text-decoration: none;
    color: var(--color-CTA-secondary);
    transition: color 0.3s ease;
}


a:hover, a.nav-link:hover {
    text-decoration: none;
    color: var(--color-CTA-secondary-hover);
}


.nav-link:hover {
    cursor: pointer;
}
.nav-link.active::after {
    transform: scaleX(1);
}

/**************************************************/
/* SECTION : BOUTONS PRINCIPAUX ET TYPE DE BASE */
/**************************************************/

/* 1. CLASSE DE BASE (.btn) - Toutes les propriétés communes */
button, .button, .btn, .btn-view-action, .btn-view, .btnedit, .btndelete, .btn-add, .btndelete-all {
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease-in-out;
    transform-origin: center; /* Ancrer la transformation au centre évite effet Jiggle */
    /* Flexbox pour l'alignement Icône/Texte */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

/**********************/

/* Button close / error */
.btndelete, .btndelete-all, btn-delete {
    background-color: var(--color-error);
    color: var(--color-white);
}

    .btndelete:hover, .btndelete-all:hover, btn-delete:hover {
        background-color: var(--color-error-hover);
        transform: scale(1.02);
        color: var(--color-white);
        text-decoration: none;
    }


/******************/


/* Bouton d'ajout spé green */
.btn-add {
    background-color: var(--color-success);
    box-shadow: 0 3px 8px var(--color-success-shadow);
}

    .btn-add:hover {
        background-color: var(--color-success-hover);
    }

    /**********************/


    /* :active */
    .button:active, .btn:active, .btnedit:active, .btndelete:active, .btn-view-action:active, .btn-view:active, .btn-add:active, .btndelete-all:active {
        background-color: var(--color-primary-active);
        color: var(--color-primary);
        transform: scale(0.98);
    }
    /* :disabled */
    .button:disabled, .btn:disabled, .btnedit:disabled, .btndelete:disabled, .btn-add:disabled, .btndelete-all:disabled, .btn-view-action:disabled, .btn-view:disabled {
        background-color: var(--color-disabled);
        color: var(--color-white);
        cursor: not-allowed;
        transform: none !important;
        opacity: 0.7;
    }



/**************************************************/
/* SECTION : BOUTONS CTA & PRIMAIRE */
/**************************************************/
.btn-CTA-1, .btn-CTA-2, .btn-primary {
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex; /*inline-flex;  inline-flex évite que le bouton prenne toute la largeur par défaut */
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1em; /* S'adapte à la typo globale */
    flex-shrink: 0; /* Force le bouton à garder sa largeur nécessaire */
    white-space: nowrap; /* Interdit le retour à la ligne du texte */
}

.btn-CTA-1 {
    /*border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease-in-out;
    transform-origin: center;*/ /* Ancrer la transformation au centre évite effet Jiggle */
    /* Flexbox pour l'alignement Icône/Texte */
    /*display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;*/
    /* Typographie: Taille réduite pour Desktop */
    /*font-weight: 600;
    font-size: 1.2em;*/ /* Taille Desktop */
    /****************/
    background-color: var(--color-CTA-primary);
    color: var(--color-CTA-primary-txt);
}


    .btn-CTA-1:hover {
        background-color: var(--color-CTA-primary-hover);
        color: var(--color-CTA-primary-txt);
    }

    .btn-CTA-1.btnActive {
        background-color: var(--color-white);
        color: var(--color-primary);
        cursor: default;
    }

    /* Désactiver le :hover lorsque la classe btnActive est présente. */
        .btn-CTA-1.btnActive:hover {
            background-color: var(--color-white);
            color: var(--color-primary);
            cursor: default;
        }

/****************************/

.btn-CTA-2 {
    /*border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease-in-out;
    transform-origin: center;*/ /* Ancrer la transformation au centre évite effet Jiggle */
    /* Flexbox pour l'alignement Icône/Texte */
    /*display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;*/
    /* Typographie: Taille réduite pour Desktop */
    /*font-weight: 600;
    font-size: 1.2em;*/ /* Taille Desktop */
    /****************/
    background-color: var(--color-CTA-secondary);
    color: var(--color-primary-hover);
}


    .btn-CTA-2:hover {
        background-color: var(--color-CTA-secondary-hover);
        color: var(--color-primary-hover);
    }

    .btn-CTA-2.btnActive {
        background-color: var(--color-CTA-secondary-hover);
        color: var(--color-primary-hover);
        cursor: default;
    }

        /* C'est la ligne CRUCIALE : Désactiver le :hover lorsque la classe btnActive est présente. */
        .btn-CTA-2.btnActive:hover {
            background-color: var(--color-CTA-secondary-hover);
            color: var(--color-primary-hover);
            cursor: default;
        }

/****************************/
.btn-primary {
    /*border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease-in-out;
    transform-origin: center;*/ /* Ancrer la transformation au centre évite effet Jiggle */
    /* Flexbox pour l'alignement Icône/Texte */
    /*display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;*/
    /* Typographie: Taille réduite pour Desktop */
    /*font-weight: 600;
    font-size: 1.2em;*/ /* Taille Desktop */
    background-color: var(--color-primary);
    color: var(--color-white);
}


    .btn-primary:hover {
        background-color: var(--color-primary-hover);
        color: var(--color-white);
    }

    .btn-primary.btnActive {
        background-color: var(--color-white);
        color: var(--color-primary-hover);
        cursor: default;
    }

        /* C'est la ligne CRUCIALE : Désactiver le :hover lorsque la classe btnActive est présente. */
        .btn-primary.btnActive:hover {
            background-color: var(--color-white);
            color: var(--color-primary-hover);
            cursor: default;
        }

/******************************/

/* Boutton particulier - utilisé dans le composant Menu */
/*.btnTypeB1 {*/
    /* Mise en page de base */
    /*position: relative;*/ /* ESSENTIEL pour que ::after se positionne correctement */
    /*border: none;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;*/
    /* Typographie et Couleurs */
    /*font-weight: 600;
    font-size: 0.8em;
    color: var(--color-white);*/
    /* Marge/Padding pour laisser de la place à la ligne */
    /*padding-bottom: 1rem;*/
    /* Transitions générales (pour le texte et le fond) */
    /*transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease-in-out;
    transform-origin: center;*/ /* Ancrer la transformation au centre évite effet Jiggle */
/*}


    .btnTypeB1::after {
        content: '';
        position: absolute;
        width: 100%;*/ /* ⚠️ L'élément CRUCIAL qui garantit la largeur de référence */
        /* Positionne la ligne à 0px du bas du bouton (donc sous le padding-bottom) */
        /* Place la ligne 1rem (environ 16px) au-dessus du bas du bouton */
        /* Assurez-vous que 1rem est la valeur que vous voulez ! */
        /*bottom: 0;
        left: 0;
        height: 5px;
        background-color: var(--color-white);*/
        /* Animation de "slide" via scaleX */
        /*transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease-out;
    }*/

    /* État au survol (bouton non actif) */
    /*.btnTypeB1:hover {
        background-color: var(--color-primary-hover);*/
        /* Note : Pas besoin de 'position: relative' ici, car il est déjà dans .btnTypeB */
    /*}*/

    /* État Actif */
    /*.btnTypeB1.btnActive {
        z-index: 100;*/ /* Ajoutez un z-index élevé */
        /*color: var(--color-white);
        cursor: default;*/ /* Indique qu'il n'est plus cliquable */
        /* Note : Pas besoin de 'position: relative' ici, car il est déjà dans .btnTypeB */
    /*}*/

        /* 📣 Déclenchement de l'Animation du Slide */
        /*.btnTypeB1.btnActive::after {
            transform: scaleX(1);*/ /* Fait apparaître la ligne de 0 à 100% avec l'effet slide */
        /*}*/

        /* Gestion du survol sur le bouton DÉJÀ actif (optionnel mais recommandé) */
        /*.btnTypeB1.btnActive:hover {
            color: var(--color-white);*/ /* Garde la couleur de l'état actif (annule le hover) */
            /* La ligne reste active grâce à .btnActive::after */
        /*}*/

/****************************/

/* Boutton particulier - utilisé dans le composant Menu */

.btnTypeB2 {
    /* Mise en page de base */
    position: relative; /* ESSENTIEL pour que ::after se positionne correctement */
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Typographie et Couleurs */
    font-weight: 600;
    font-size: 0.8em;
    color: var(--color-primary);
    /* Marge/Padding pour laisser de la place à la ligne */
    /*padding-bottom: 1rem;*/
    /* Transitions générales (pour le texte et le fond) */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease-in-out;
    transform-origin: center; /* Ancrer la transformation au centre évite effet Jiggle */
}


    .btnTypeB2::after {
        content: '';
        position: absolute;
        width: 100%; /* ⚠️ L'élément CRUCIAL qui garantit la largeur de référence */
        /* Positionne la ligne à 0px du bas du bouton (donc sous le padding-bottom) */
        /* Place la ligne 1rem (environ 16px) au-dessus du bas du bouton */
        /* Assurez-vous que 1rem est la valeur que vous voulez ! */
        bottom: 0;
        left: 0;
        height: 5px;
        background-color: var(--color-primary-hover);
        /* Animation de "slide" via scaleX */
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease-out;
    }

    /* État au survol (bouton non actif) */
    .btnTypeB2:hover {
        color: var(--color-primary-hover);
        /* Note : Pas besoin de 'position: relative' ici, car il est déjà dans .btnTypeB */
    }

    /* État Actif */
    .btnTypeB2.btnActive {
        z-index: 100; /* Ajoutez un z-index élevé */
        color: var(--color-primary-hover);
        cursor: default; /* Indique qu'il n'est plus cliquable */
        /* Note : Pas besoin de 'position: relative' ici, car il est déjà dans .btnTypeB */
    }

        /* 📣 Déclenchement de l'Animation du Slide */
        .btnTypeB2.btnActive::after {
            transform: scaleX(1); /* Fait apparaître la ligne de 0 à 100% avec l'effet slide */
        }

        /* Gestion du survol sur le bouton DÉJÀ actif (optionnel mais recommandé) */
        .btnTypeB2.btnActive:hover {
            color: var(--color-primary-hover); /* Garde la couleur de l'état actif (annule le hover) */
            /* La ligne reste active grâce à .btnActive::after */
        }






/* --- Boutons Spécifiques modal --- */

/* Bouton de Fermeture Circulaire */
.btn-close-circle {
    background-color: var(--color-grey);
    border-radius: var(--radius-circle);
    height: 2rem;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-size: 1.5em;
    line-height: 1.2em;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease;
    transform-origin: center; /* Ancrer la transformation au centre évite effet Jiggle */
}

    .btn-close-circle:hover {
        background-color: var(--color-grey-hover);
    }

    .btn-close-circle:active {
        background-color: var(--color-grey-active);
    }




/**************************/
/* Dimension des bouttons */
/**************************/
.min-width-content {
    min-width: calc(max-content + 1rem);
}
.btnSizeAuto {
    width: auto;
    height: auto;
}

.btnSize1 {
    width: 1rem;
    height: 1rem;
}

.btnSize2 {
    width: 2rem;
    height: 2rem;
}

.btnSize3 {
    width: 3rem;
    height: 3rem;
}

.btnSize4 {
    width: 4rem;
    height: 4rem;
}

.btnSize5 {
    width: 5rem;
    height: 5rem;
}


.btnSize1Wauto {
    width: auto;
    height: 1rem;
}

.btnSize2Wauto {
    width: auto;
    height: 2rem;
}

.btnSize3Wauto {
    width: auto;
    height: 3rem;
    
}

.btnSize4Wauto {
    width: auto;
    height: 4rem;
}


.btnSize5Wauto {
    width: auto;
    height: 5rem;
}

/* Nouvelle Classe de base pour les liens textuels (simplification de .link-log, .nav-link) */
/*.link-base {*/ /* Cible les liens qui sont du texte simple, pas un bouton */
    /*font-size: clamp(1.1rem, 3vw, 1.4rem);*/ /* Taille de lien lisible */
    /*cursor: pointer;
    font-weight: 400;
    padding: 0.5rem;*/ /* Augmente la zone de clic/touch sans changer l'apparence */
    /*display: inline-block;*/ /* Pour que le padding fonctionne */
/*}*/
/* Lien pour le Log (spécificité) */
/*.link-log {
    font-weight: 600;
    color: var(--color-CTA-secondary);
    text-decoration: none;
}*/

/* Bouton Secondaire Clair pour le Footer de la modale */
/*.btn-secondary-light {
    background-color: var(--color-grey);
    color: var(--color-text-dark);
    width: unset !important;
}

    .btn-secondary-light:hover {
        background-color: var(--color-grey-hover);
    }

    .btn-secondary-light:active {
        background-color: #8f8f8f;
    }*/