.btn-theme {
    background-color: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    transition: all 0.3s ease;
}

/* Hover state */
.btn-theme:hover, 
.btn-theme:active,
.btn-theme:focus {
    background-color: var(--complementary1);
    color: #fff;
    border-color: var(--complementary1);
}

/* Disabled state */
.btn-theme.disabled,
.btn-theme:disabled {
    background-color: var(--accent2);
    border-color: var(--accent2);
    color: #fff;
    cursor: not-allowed;
}


.btn-theme-secondary {
    background-color: var(--secondary); /* Noir */
    color: #fff; /* Texte blanc */
    border: 1px solid var(--secondary); /* Bordure noire */
    transition: all 0.3s ease;
}

/* Hover state */
.btn-theme-secondary:hover, 
.btn-theme-secondary:active,
.btn-theme-secondary:focus {
    background-color: var(--background-dark); /* Couleur complémentaire au survol */
    color: #fff; /* Texte blanc */
    border-color: var(--complementary1); /* Bordure de la couleur complémentaire */
}

/* Disabled state */
.btn-theme-secondary.disabled,
.btn-theme-secondary:disabled {
    background-color: var(--accent2); /* Couleur d'accent pour l'état désactivé */
    border-color: var(--accent2); /* Bordure de la couleur d'accent */
    color: #fff; /* Texte blanc */
    cursor: not-allowed; /* Curseur "non autorisé" */
}

.btn-theme-white {
    background-color: var(--tertiary); /* Blanc */
    color: var(--secondary); /* Texte noir */
    border: 1px solid #ccc; /* Bordure noire */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
    transition: all 0.3s ease;
}

/* Hover state */
.btn-theme-white:hover, 
.btn-theme-white:active,
.btn-theme-white:focus {
    background-color: var(--tertiary); /* Fond reste blanc */
    color: var(--primary); /* Texte rouge vif au survol */
    border-color: var(--primary) !important; /* Bordure rouge vif */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important; /* Ombre plus prononcée */
}

/* Disabled state */
.btn-theme-white.disabled,
.btn-theme-white:disabled {
    background-color: var(--tertiary); /* Fond blanc */
    border-color: var(--accent2); /* Bordure de la couleur d'accent */
    color: var(--accent2); /* Texte de la couleur d'accent */
    cursor: not-allowed; /* Curseur "non autorisé" */
    box-shadow: none; /* Pas d'ombre */
}

/* Bouton outline */
.btn-outline-theme {
    background-color: transparent; /* Fond transparent */
    color: var(--primary); /* Texte en couleur primaire */
    border: 1px solid var(--primary); /* Bordure en couleur primaire */
    transition: all 0.3s ease; /* Transition fluide */
}

/* Hover, active et focus states */
.btn-outline-theme:hover,
.btn-outline-theme:active,
.btn-outline-theme:focus {
    background-color: var(--primary); /* Fond en couleur primaire */
    color: var(--tertiary); /* Texte en blanc */
    border-color: var(--primary); /* Bordure en couleur primaire */
}

/* Disabled state */
.btn-outline-theme.disabled,
.btn-outline-theme:disabled {
    background-color: transparent; /* Fond transparent */
    border-color: var(--accent2); /* Bordure en couleur d'accent 2 */
    color: var(--accent2); /* Texte en couleur d'accent 2 */
    cursor: not-allowed; /* Curseur "non autorisé" */
}

#back-to-top {
    position: fixed;
    bottom: 20px;
    right: -60px; /* Commence en dehors de l'écran */
    z-index: 1000;
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px 5px 5px 20px; /* Radius partiel */
    width: 30px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, right 0.3s ease, opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Initialement invisible */
}

#back-to-top.show {
    right: 20px; /* Position finale */
    opacity: 1; /* Visible */
    transform: scale(1.1); /* Légère animation de zoom */
}

#back-to-top:hover {
    background-color: var(--complementary1);
    transform: scale(1.2); /* Augmente légèrement au survol */
}

/* LinkedIn */
.btn-linkedin {
    background-color: #0A66C2; /* Couleur LinkedIn */
    color: #fff; /* Texte blanc */
    border: none;
}

/* Telegram */
.btn-telegram {
    background-color: #0088CC; /* Couleur Telegram */
    color: #fff; /* Texte blanc */
    border: none;
}

/* Pinterest */
.btn-pinterest {
    background-color: #E60023; /* Couleur Pinterest */
    color: #fff; /* Texte blanc */
    border: none;
}

/* Reddit */
.btn-reddit {
    background-color: #FF4500; /* Couleur Reddit */
    color: #fff; /* Texte blanc */
    border: none;
}

/* Action */
.btn-action {
    background: #f0151f;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
}

.btn-action:hover {
    background: #f0151f;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
    color: white;
}

.btn-previous {
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid #f0151f;
    background-color: transparent;
    color: #f0151f;
    cursor: pointer;
}

.btn-previous:hover {
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
    color: #f0151f;
}