.btn-reset {
    all: unset; /* Annule TOUT le style hérité de la balise button */
    cursor: pointer; /* Force le curseur main, car 'unset' peut parfois le remettre en flèche */
    display: inline-flex; /* Permet de centrer facilement l'icône à l'intérieur */
    box-sizing: border-box; /* Évite les surprises de calcul de taille */
}


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

/* Réinitialisation de base pour tous les liens */
a, a.nav-link {
    text-decoration: none;
    color: var(--color-text-link);
    transition: color 0.3s ease;
}


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

/* 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-primary);
    text-decoration: none;
}

.btn-radius {
    border-radius: var(--radius-double);
}

/**************************************************/
/* SECTION : BOUTONS (BASE & TAILLES - DESKTOP PAR DÉFAUT) */
/* -> Les styles de base sont les petites cibles pour la souris (2.75rem min) */
/**************************************************/
/* 1. CLASSE CTA DE BASE (.btn) - Toutes les propriétés communes */
button .button, .btn, .btn-view-action, .btn-view, .btnedit, .btndelete, .btn-add, .btndelete-all {
    background-color: var(--color-primary);
    color: var(--color-text-button);
   
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease-in-out;
    /* Flexbox pour l'alignement Icône/Texte */
    display: flex;
    /*gap: 0.5rem; */ /* Espacement réduit pour Desktop */
    justify-content: center;
    align-items: center;
    text-decoration: none;
    /* Typographie: Taille réduite pour Desktop */
    font-weight: 600;
    font-size: 1.1rem; /* Taille Desktop */
    /*line-height: 1.2;
    min-width: 50px;*/
    /*color: white;
    font-family: 'Inter', sans-serif;
    font-size: 2.5rem;
    border-radius: 3rem;*/
    /* ... autres styles ... */
    /*box-shadow: 0 6px 0 #D97706,*/ /* Ombre 3D plus foncée pour le "dessous" du bouton */
    /*0 0 20px rgba(255, 140, 0, 0.7);*/ /* Lueur orange autour du bouton */
    /* Dégradé de couleur (plus clair en haut pour l'effet de volume) */
    /* Ombre subtile pour le relief et l'effet "pressable" */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), /* Ombre extérieure */
    inset 0 1px 0 rgba(255, 255, 255, 0.4), /* Ligne de surbrillance claire en haut */
    inset 0 -3px 0 rgba(224, 130, 18, 0.8); /* Ombre intérieure foncée en bas */
}

    /* :hover (Appliqué aux boutons primaires par défaut) */
    .button:hover, .btn:hover, .btn-view-action:hover, .btn-view:hover,
    .btnedit:hover, .btn-icon-base:hover {
        background-color: var(--color-primary-hover);
        transform: scale(1.02);
        color: var(--color-white);
        text-decoration: none;
    }

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

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

    .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 rgba(var(--color-success-rgb), 0.3);
}

    .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);
        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-text-button);
        cursor: not-allowed;
        transform: none !important;
        opacity: 0.7;
    }



.btn img {
    height: 1.8rem; /* Légèrement plus petit que la hauteur du bouton */
    width: auto;
    object-fit: contain;
    flex-shrink: 0; /* Pour que l'icône ne devienne pas une galette */
}


.btnSizeAuto {
    width: max-content; /* Force le bouton à prendre la largeur exacte de son contenu */
    min-width: fit-content;
    height: max-content; /* Force le bouton à prendre la largeur exacte de son contenu */
    min-height: fit-content;
}

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

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

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


.btnSize1Wauto {
    /*width: max-content;*/ /* Force le bouton à prendre la largeur exacte de son contenu */
    /*min-width: fit-content;*/
    width: auto; /* Autorise l'étirement par le parent Flex */
    min-width: max-content; /* GARANTIT que le bouton ne sera JAMAIS plus petit que son texte */
    height: 3rem;
}


.btnSize2Wauto {
    width: auto; /* Autorise l'étirement par le parent Flex */
    min-width: max-content; /* GARANTIT que le bouton ne sera JAMAIS plus petit que son texte */
    height: 4rem;
}

.btnSize3Wauto {
    width: auto; /* Autorise l'étirement par le parent Flex */
    min-width: max-content; /* GARANTIT que le bouton ne sera JAMAIS plus petit que son texte */
    height: 5rem;
}




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

/* Bouton de Fermeture Circulaire */
.btn-close-circle {
    background-color: #bfbfbf;
    border-radius: var(--radius-circle);
    height: 2rem;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-size: 1.5rem;
    line-height: 1.2rem;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease;
}

    .btn-close-circle:hover {
        background-color: #b1b1b1;
    }

    .btn-close-circle:active {
        background-color: #8f8f8f;
    }

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

    .btn-secondary-light:hover {
        background-color: #b1b1b1;
    }

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


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

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

/* Bouton de Fermeture Circulaire (S'assure d'avoir la base de bouton pour le font-size/color, puis surcharge) */
.btn-close-circle {
    /* ... (Règles inchangées, qui devraient être ici pour le bouton de fermeture) ... */
    /* Base de style circulaire */
    background-color: #bfbfbf;
    border-radius: var(--radius-circle);
    height: 2rem;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-size: 1.5rem;
    line-height: 1.2rem;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease;
}

    .btn-close-circle:hover {
        background-color: #b1b1b1;
    }

    .btn-close-circle:active {
        background-color: #8f8f8f;
    }

/* Bouton Secondaire Clair (Utilisé dans le footer) */
.btn-secondary-light {
    /* Cette classe est ajoutée APRES .button dans le Razor, elle surcharge donc couleur et fond */
    background-color: #bfbfbf;
    color: var(--color-text-dark);
}

    .btn-secondary-light:hover {
        background-color: #b1b1b1;
    }

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



.btn-style-radius {
    /* Forme générale */
    text-decoration: none;
    /*padding: 12px 25px;*/ /* Ajuster selon la taille de police */
    border: none;
    border-radius: 15px; /* Bords très arrondis pour l'aspect ludique */
    cursor: pointer;
    font-weight: bold; /* Texte en gras */
    text-align: center;
    transition: all 0.2s ease-in-out; /* Transition pour l'effet de survol */
    /* Pour l'accessibilité: texte blanc sur fond coloré */
    color: #FFFFFF;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); /* Ombre légère sur le texte */
    align-items: center;
    align-content: center;
}

    /*.btn-style-radius:hover {*/
    /* ... autres styles ... */
    /*box-shadow: 0 8px 0 #B96500,*/ /* Ombre 3D plus prononcée au survol */
    /*0 0 25px rgba(255, 140, 0, 0.9);*/ /* Lueur un peu plus intense au survol */
    /*}

    .btn-style-radius:active {
        transform: translateY(4px);*/ /* Effet d'enfoncement lorsque le bouton est cliqué */
    /*box-shadow: 0 2px 0 #B96500;*/ /* Ombre réduite pour simuler que le bouton est "enfoncé" */
    /*}*/
    /* Style pour le bouton "Créer le compte" (CTA principal) */


    /* Effet de survol (Hover) */
    .btn-style-radius:hover {
        /* Assombrir légèrement l'ombre pour simuler une pression */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(224, 130, 18, 0.8);
        transform: translateY(-1px); /* Légère élévation */
    }

    /* Effet au clic (Active) */
    .btn-style-radius:active {
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), /* Ombre plus petite (bouton pressé) */
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
        transform: translateY(1px); /* Décalage vers le bas */
    }