/* ==========================================================================
   BOUTONS R-WEGO – STYLES COMMUNS (Utilise Bootstrapau maximum)
   ========================================================================== */

/* Base commune pour tous les boutons (plein & outline) */
.btn,
.btn-outline {
    /* Structure flex pour alignement horizontal et vertical */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Confort de lecture et affichage responsive */
    line-height: 0.3;
    vertical-align: middle !important;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
    /* Padding wego classique trop restrictif */
    padding: 15px 20px; /* 10px de hauteur, 20px de largeur */
    box-shadow: none !important;
}

.btn:disabled,
.btn-outline:disabled {
    font-style: oblique ;
}
/* Lucide dans les boutons (taille adaptée) */
.btn i.lucide,
.btn svg.lucide {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    margin-right: 0.5em;
    stroke-width: 2;
}

/* Marges si l’icône est à gauche */
.btn .icon-left,
.btn-outline .icon-left {
    margin-right: 0.5em; /* Utilisable aussi avec .me-2 dans HTML */
}

/* Marges si l’icône est à droite */
.btn .icon-right,
.btn-outline .icon-right {
    margin-left: 0.5em; /* Utilisable aussi avec .ms-2 dans HTML */
}

/* -------------------------------------------------------------------------- */
/* 3. Boutons Pleins (Filled Buttons)                                         */
/* -------------------------------------------------------------------------- */
/* ===============================================================
   3. Boutons R-WeGo – Gestion des états (hover, focus, disabled)
   Basé sur les déclinaisons -500 et -600 pour hover/focus
   ============================================================ */

/* BOUTON PRIMARY (FEU CENTRAL) */
.btn-primary {
    background-color: var(--mdb-primary) !important;   /* Utilise ta variable centrale */
    border-color: var(--wego-primary) !important;       /* Ajouté pour cohérence avec outline */
    color: var(--wego-dark) !important; /* Couleur du texte du bouton */
}
/* Bouton Primary Hover et Focus) */
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
    color: var(--wego-light) !important;
}
/* Bouton Primary actif) */
.btn-primary:active,
.btn-primary:focus-visible { /* cible aussi bien tab que click */
    background-color: var(--primary-800) !important;
    border-color: var(--primary-800) !important;
    color: var(--wego-dark) !important;
}
/* Bouton Primary désactivé) */
.btn-primary:disabled {
    background-color: var(--primary-300) !important;
    border-color: var(--primary-300) !important;
    color: var(--primary-600) !important;

}

/* BOUTON SECONDARY (TERRE BATTUE) */
.btn-secondary {
    background-color: var(--secondary-700) !important;   /* Utilise ta variable centrale */
    border-color: var(--secondary-700) !important;       /* Ajouté pour cohérence avec outline */
    color: var(--wego-light) !important; /* Couleur du texte du bouton */
}
/* Bouton Secondary Hover et Focus) */
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--wego-secondary) !important;
    border-color: var(--wego-secondary) !important;
}
/* Bouton Secondary actif) */
.btn-secondary:active,
.btn-secondary:focus-visible { /* cible aussi bien tab que click */
    background-color: var(--secondary-700) !important;
    border-color: var(--secondary-700) !important;
}
/* Bouton Secondary désactivé) */
.btn-secondary:disabled {
    background-color: var(--secondary-300) !important;
    border-color: var(--secondary-800) !important;
    color: var(--secondary-500) !important;
}

/* BOUTON SUCCESS (SAUGE TRIBALE) */
.btn-success {
    background-color: var(--success-800) !important;   /* Utilise ta variable centrale */
    border-color: var(--success-800) !important;       /* Ajouté pour cohérence avec outline */
    color: var(--wego-light) !important; /* Couleur du texte du bouton */
}
/* Bouton Success Hover et Focus) */
.btn-success:hover,
.btn-success:focus {
    background-color: var(--wego-success) !important;
    border-color: var(--wego-success) !important;
}
/* Bouton success actif) */
.btn-success:active,
.btn-success:focus-visible { /* cible aussi bien tab que click */
    background-color: var(--success-900) !important;
    border-color: var(--success-900) !important;
}
/* Bouton success désactivé) */
.btn-success:disabled {
    background-color: var(--success-200) !important;
    border-color: var(--success-200) !important;
    color: var(--success-900) !important;
}
/* BOUTON DANGER (SAUGE TRIBALE) */
.btn-danger {
    background-color: var(--danger-300) !important;   /* Utilise ta variable centrale */
    border-color: var(--danger-300) !important;       /* Ajouté pour cohérence avec outline */
    color: var(--wego-text-color) !important; /* Couleur du texte du bouton */
}
/* Bouton danger Hover et Focus) */
.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--danger-700) !important;
    border-color: var(--danger-700) !important;
    color: var(--wego-light) !important;
}
/* Bouton danger actif) */
.btn-danger:active,
.btn-danger:focus-visible { /* cible aussi bien tab que click */
    background-color: var(--danger-900) !important;
    border-color: var(--danger-900) !important;
}
/* Bouton danger désactivé) */
.btn-danger:disabled {
    background-color: var(--danger-200) !important;
    border-color: var(--danger-200) !important;
    color: var(--danger-900) !important;
}

/* BOUTON WARNING (POUSSIERE D'AMBRE) */
.btn-warning {
    background-color: var(--wego-warning) !important;   /* Utilise ta variable centrale */
    border-color: var(--wego-warning) !important;       /* Ajouté pour cohérence avec outline */
    color: var(--dark-500) !important; /* Couleur du texte du bouton */
}
/* Bouton warning Hover et Focus) */
.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--warning-700) !important;
    border-color: var(--warning-700) !important;
    color: var(--light-200) !important; /* Couleur du texte du bouton */
}
/* Bouton warning actif) */
.btn-warning:active,
.btn-warning:focus-visible { /* cible aussi bien tab que click */
    background-color: var(--warning-900) !important;
    border-color: var(--warning-900) !important;
}
/* Bouton warning désactivé) */
.btn-warning:disabled {
    background-color: var(--warning-200) !important;
    border-color: var(--warning-200) !important;
    color: var(--warning-900) !important;
}

/* BOUTON INFO (BLEU LAGON) */
.btn-info {
    background-color: var(--info-400) !important;   /* Utilise ta variable centrale */
    border-color: var(--wego-info) !important;       /* Ajouté pour cohérence avec outline */
    color: var(--wego-text-color) !important; /* Couleur du texte du bouton */
}
/* Bouton info Hover et Focus) */
.btn-info:hover,
.btn-info:focus {
    background-color: var(--info-700) !important;
    border-color: var(--info-700) !important;
    color: var(--wego-light) !important;
}
/* Bouton info actif) */
.btn-info:active,
.btn-info:focus-visible { /* cible aussi bien tab que click */
    background-color: var(--info-900) !important;
    border-color: var(--info-900) !important;
}
/* Bouton info désactivé) */
.btn-info:disabled {
    background-color: var(--info-200) !important;
    border-color: var(--info-200) !important;
    color: var(--info-900) !important;
}

/* BOUTON DARK (ENCRE ANTIQUE) */
.btn-dark {
    background-color: var(--wego-dark) !important;   /* Utilise ta variable centrale */
    border-color: var(--wego-text-color) !important;       /* Ajouté pour cohérence avec outline */
    color: #fff !important; /* Couleur du texte du bouton */
}
/* Bouton dark Hover et Focus) */
.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--dark-400) !important;
    border-color: var(--wego-text-color) !important;
}
/* Bouton dark actif) */
.btn-dark:active,
.btn-dark:focus-visible { /* cible aussi bien tab que click */
    background-color: var(--dark-700) !important;
    border-color: var(--wego-text-color) !important;
}
/* Bouton dark désactivé) */
.btn-dark:disabled {
    background-color: var(--dark-600) !important;
    border-color: var(--wego-text-color) !important;
    color: var(--dark-200) !important;
}

/* BOUTON LIGHT (CRAIE DE LUNE) */
.btn-light {
    background-color: var(--light-300) !important;   /* Utilise ta variable centrale */
    border-color: var(--wego-text-color) !important;       /* Ajouté pour cohérence avec outline */
    color: var(--wego-text-color) !important; /* Couleur du texte du bouton */
}
/* Bouton light Hover et Focus) */
.btn-light:hover,
.btn-light:focus {
    background-color: var(--light-600) !important;
    border-color: var(--wego-text-color) !important;
}
/* Bouton light actif) */
.btn-light:active,
.btn-light:focus-visible { /* cible aussi bien tab que click */
    background-color: var(--light-600) !important;
    border-color: var(--wego-text-color) !important;
}
/* Bouton light désactivé) */
.btn-light:disabled {
    background-color: var(--light-200) !important;
    border-color: var(--wego-text-color) !important;
    color: var(--light-900) !important;
}

/* BOUTON SABLE FROID */
.btn-sable-froid {
    background-color: var(--sable-froid);   /* Utilise ta variable centrale */
    border-color: var(--sable-froid);       /* Ajouté pour cohérence avec outline */
    color: var(--wego-dark); /* Couleur du texte du bouton */
}
/* Bouton sable-froid Hover et Focus) */
.btn-sable-froid:hover,
.btn-sable-froid:focus {
    background-color: var(--sable-froid-700);
    border-color: var(--sable-froid-700);
    color: var(--wego-light);
}
/* Bouton sable-froid actif) */
.btn-sable-froid:active,
.btn-sable-froid:focus-visible { /* cible aussi bien tab que click */
    background-color: var(--sable-froid-900) !important;
    border-color: var(--sable-froid-900) !important;
    color: var(--wego-light) !important;
}
/* Bouton sable-froid désactivé) */
.btn-sable-froid:disabled {
    background-color: var(--sable-froid-200) !important;
    border-color: var(--sable-froid-200) !important;
    color: var(--sable-froid-900) !important;
}

/* -------------------------------------------------------------------------- */
/* 4. Boutons Outlined                                                        */
/* -------------------------------------------------------------------------- */
/* ===============================================================
   4. Boutons R-WeGo– Gestion des états (hover, focus, disabled)
   Basé sur les déclinaisons -500 et -600 pour hover/focus
   ============================================================ */

/* BOUTON PRIMARY OUTLINED (FEU CENTRAL) */
.btn-outline-primary {
    color: var(--wego-primary);
    border-color: var(--wego-primary);
}
/* Bouton Primary outlined Hover et Focus) */
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--primary-100) !important;
    color: var(--primary-700) !important;
    border-color: var(--primary-700) !important;
}
/* Bouton Primary outlined actif) */
.btn-outline-primary:active,
.btn-outline-primary:focus-visible {
    background-color: var(--primary-800) !important;
    border-color: var(--primary-800) !important;
    color: var(--primary-200) !important;
}
/* Bouton Primary outlined désactivé) */
.btn-outline-primary:disabled {
    background-color: transparent;
    color: var(--primary-400) !important;
    border-color: var(--primary-300) !important;
}

/* BOUTON SECONDARY OUTLINED (TERRE BRULEE) */
.btn-outline-secondary {
    color: var(--wego-secondary);
    border-color: var(--wego-secondary);
}
/* Bouton Secondary outlined Hover et Focus) */
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--secondary-100) !important;
    color: var(--secondary-700) !important;
    border-color: var(--secondary-700) !important;
}
/* Bouton Secondary outlined actif) */
.btn-outline-secondary:active,
.btn-outline-secondary:focus-visible {
    background-color: var(--secondary-800) !important;
    border-color: var(--secondary-800) !important;
    color: var(--secondary-200) !important;
}
/* Bouton Secondary outlined désactivé) */
.btn-outline-secondary:disabled {
    background-color: transparent;
    color: var(--secondary-400) !important;
    border-color: var(--secondary-300) !important;

}
/* BOUTON SUCCESS OUTLINED (TERRE BRULEE) */
.btn-outline-success {
    color: var(--wego-success);
    border-color: var(--wego-success);
}
/* Bouton Success outlined Hover et Focus) */
.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: var(--success-100) !important;
    color: var(--success-700) !important;
    border-color: var(--success-700) !important;
}
/* Bouton Success outlined actif) */
.btn-outline-success:active,
.btn-outline-success:focus-visible {
    background-color: var(--success-800) !important;
    border-color: var(--success-800) !important;
    color: var(--success-100) !important;
}
/* Bouton Success outlined désactivé) */
.btn-outline-success:disabled {
    background-color: transparent;
    color: var(--success-400) !important;
    border-color: var(--success-300) !important;
}

/* BOUTON DANGER OUTLINED (COEUR BATTANT) */
.btn-outline-danger {
    color: var(--wego-danger);
    border-color: var(--wego-danger);
}
/* Bouton Danger outlined Hover et Focus) */
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: var(--danger-100) !important;
    color: var(--danger-700) !important;
    border-color: var(--danger-700) !important;
}
/* Bouton Danger outlined actif) */
.btn-outline-danger:active,
.btn-outline-danger:focus-visible {
    background-color: var(--danger-800) !important;
    border-color: var(--danger-800) !important;
    color: var(--danger-100) !important;
}
/* Bouton Danger outlined désactivé) */
.btn-outline-danger:disabled {
    background-color: transparent;
    color: var(--danger-400) !important;
    border-color: var(--danger-300) !important;
}

/* BOUTON WARNING OUTLINED (POUSSIERE D'AMBRE) */
.btn-outline-warning {
    color: var(--wego-warning);
    border-color: var(--wego-warning);
}
/* Bouton Warning outlined Hover et Focus) */
.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: var(--warning-100) !important;
    color: var(--warning-700) !important;
    border-color: var(--warning-700) !important;
}
/* Bouton Warning outlined actif) */
.btn-outline-warning:active,
.btn-outline-warning:focus-visible {
    background-color: var(--warning-800) !important;
    border-color: var(--warning-800) !important;
    color: var(--warning-100) !important;
}
/* Bouton Warning outlined désactivé) */
.btn-outline-warning:disabled {
    background-color: transparent;
    color: var(--warning-500) !important;
    border-color: var(--warning-400) !important;
}

/* BOUTON INFO OUTLINED (BLEU LAGON) */
.btn-outline-info {
    color: var(--wego-info);
    border-color: var(--wego-info);
}
/* Bouton Info outlined Hover et Focus) */
.btn-outline-info:hover,
.btn-outline-info:focus {
    background-color: var(--info-100) !important;
    color: var(--info-700) !important;
    border-color: var(--info-700) !important;
}
/* Bouton Info outlined actif) */
.btn-outline-info:active,
.btn-outline-info:focus-visible {
    background-color: var(--info-800) !important;
    border-color: var(--info-800) !important;
    color: var(--info-100) !important;
}
/* Bouton Info outlined désactivé) */
.btn-outline-info:disabled {
    background-color: transparent;
    color: var(--info-300) !important;
    border-color: var(--info-300) !important;
}

/* BOUTON DARK OUTLINED (POUSSIERE D'AMBRE) */
.btn-outline-dark {
    color: var(--dark-300) !important;
    border-color: var(--wego-text-color) !important;
}
/* Bouton Dark outlined Hover et Focus) */
.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background-color: var(--dark-100) !important;
    color: var(--dark-300) !important;
    border-color: var(--wego-text-color) !important;
}
/* Bouton Dark outlined actif) */
.btn-outline-dark:active,
.btn-outline-dark:focus-visible {
    background-color: var(--dark-800) !important;
    border-color: var(--wego-text-color) !important;
    color: var(--wego-text-color) !important;
}
/* Bouton Dark outlined désactivé) */
.btn-outline-dark:disabled {
    background-color: transparent;
    color: var(--dark-300) !important;
    border-color: var(--dark-300) !important;
}

/* BOUTON LIGHT OUTLINED (CRAIE DE LUNE) */
.btn-outline-light {
    color: var(--light-600) !important;
    border-color: var(--light-600) !important;
}
/* Bouton Light outlined Hover et Focus) */
.btn-outline-light:hover,
.btn-outline-light:focus {
    background-color: var(--light-100) !important;
    color: var(--light-900) !important;
    border-color: var(--light-900) !important;
}
/* Bouton Light outlined actif) */
.btn-outline-light:active,
.btn-outline-light:focus-visible {
    background-color: var(--light-800) !important;
    border-color: var(--light-800) !important;
    color: var(--light-100) !important;
}
/* Bouton Light outlined désactivé) */
.btn-outline-light:disabled {
    background-color: transparent;
    color: var(--light-600) !important;
    border-color: var(--light-500) !important;
}

/* BOUTON SABLE FROID OUTLINED */
.btn-outline-sable-froid {
    color: var(--sable-froid-700);
    border-color: var(--sable-froid-700);
}
/* Bouton Sable-froid outlined Hover et Focus) */
.btn-outline-sable-froid:hover,
.btn-outline-sable-froid:focus {
    background-color: var(--sable-froid-100) !important;
    color: var(--sable-froid-700) !important;
    border-color: var(--sable-froid-700) !important;
}
/* Bouton Sable-froid outlined actif) */
.btn-outline-sable-froid:active,
.btn-outline-sable-froid:focus-visible {
    background-color: var(--sable-froid-800) !important;
    border-color: var(--sable-froid-800) !important;
    color: var(--sable-froid-100) !important;
}
/* Bouton Sable-froid outlined désactivé) */
.btn-outline-sable-froid:disabled {
    background-color: transparent;
    color: var(--sable-froid-600) !important;
    border-color: var(--sable-froid-600) !important;
}

.btn-link {
    color: var(--mdb-primary) !important;
    text-decoration: none; /* à adapter selon tes préférences */
    border: none;
}

.btn-link-secondary {
    color: var(--mdb-secondary);
    text-decoration: none;
    background-color: transparent;
    border: none;
    outline: none;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--primary-700) !important; /* ou une déclinaison de ta palette */
    text-decoration: underline;
    border: none;
    background-color: transparent;
}

/* Supprimer les effets de hover/focus */
.btn-link-secondary:hover,
.btn-link-secondary:focus {
    color: var(--secondary-700); /* ou une variante plus foncée si tu préfères */
    text-decoration: underline;
    background-color: transparent;
    border: none;
    outline: none;
}