/* --- BOUTON PRIMAIRE (Style harmonisé et corrigé) --- */
.styled-button-primary {
    position: relative;
    padding: 1rem 2rem; /* État initial identique au secondaire */
    font-size: 1.1rem;
    font-weight: bold;
    color: #E8EBE0; /* Texte clair */
    background: linear-gradient(to bottom, #52796F, #354F52); /* Ton dégradé vert d'origine */
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(47, 62, 70, 0.4), 0 10px 20px rgba(47, 62, 70, 0.2);
    border: 1px solid #2F3E46;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Transition fluide corrigée */
}

.styled-button-primary:hover {
    /* Correction de l'animation : agrandissement du rectangle */
    padding-right: 3.5rem;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(47, 62, 70, 0.5), 0 12px 24px rgba(47, 62, 70, 0.3);
}

.styled-button-primary .inner-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #52796F, #354F52);
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border-radius: 50%;
    border: 1px solid #2F3E46;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Animation synchronisée */
}

.styled-button-primary:hover .inner-button {
    /* Déplacement de l'icône dans le rectangle agrandi */
    transform: translateX(10px);
}

.styled-button-primary .inner-button .icon {
    fill: #E8EBE0;
    transition: transform 0.4s ease;
}

.styled-button-primary:hover .inner-button .icon {
    transform: scale(1.1);
}

.styled-button-primary:active {
    transform: translateY(2px);
}

.styled-button-primary:focus-visible {
    outline: 3px solid #84A98C;
    outline-offset: 3px;
}

/* --- BOUTON SECONDAIRE (Fond clair) --- */
.styled-button-secondary {
    position: relative;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: bold;
    color: #354F52; /* Texte foncé */
    background: linear-gradient(to bottom, #E8EBE0, #CAD2C5); /* Dégradé fond clair */
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(47, 62, 70, 0.1), 0 10px 20px rgba(47, 62, 70, 0.1);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(53, 79, 82, 0.2); /* Bordure subtile */
    overflow: hidden;
}

.styled-button-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.styled-button-secondary:hover::before {
    transform: translateX(100%);
}

.styled-button-secondary:active {
    transform: translateY(2px);
}

.styled-button-secondary:focus-visible {
    outline: 3px solid #354F52;
    outline-offset: 3px;
}

.styled-button-secondary .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Cercle icone en vert */
    background: linear-gradient(to bottom, #52796F, #354F52);
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.styled-button-secondary .icon {
    width: 20px;
    height: 20px;
    fill: #E8EBE0; /* Icone claire */
    transition: transform 0.3s ease;
}

/* Animation de survol (pour les deux boutons) */
.styled-button-primary:hover .icon,
.styled-button-secondary:hover .icon {
    transform: translateX(5px);
}

/* --- BOUTON PRIMAIRE --- */
.styled-button-primary {
    /* ... tes propriétés actuelles ... */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transition plus fluide */
}

.styled-button-primary:hover {
    padding-right: 3rem; /* Augmente l'espace à droite pour "pousser" le bouton */
    background: linear-gradient(to bottom, #354F52, #2F3E46); /* Légère variation au hover */
}

/* --- BOUTON SECONDAIRE (Correctif) --- */
.styled-button-secondary {
    position: relative;
    padding: 1rem 2rem; /* État initial */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Transition plus naturelle */
    /* ... tes autres styles ... */
}

.styled-button-secondary:hover {
    /* On augmente le padding à droite pour laisser de la place à l'icône qui bouge */
    padding-right: 3.5rem;
    transform: translateY(-2px); /* Optionnel : petit effet de levée */
}

.styled-button-secondary .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.styled-button-secondary:hover .icon-container {
    /* On déplace l'icône vers la droite */
    transform: translateX(10px);
}

.styled-button-secondary .icon {
    transition: transform 0.4s ease;
}

.styled-button-secondary:hover .icon {
    /* Petit mouvement supplémentaire de la flèche/enveloppe à l'intérieur */
    transform: scale(1.1);
}

/* --- FIX COULEUR TEXTE AU SURVOL --- */

/* 1. Bouton PRIMAIRE (Fond sombre) -> Texte Blanc */
.styled-button-primary:hover {
    color: #E8EBE0 !important;
}
.styled-button-primary:hover .icon {
    stroke: #E8EBE0 !important;
}

/* 2. Bouton SECONDAIRE (Fond clair) -> Texte Sombre */
.styled-button-secondary:hover {
    color: #354F52 !important; /* Vert sombre pour rester lisible sur fond blanc */
}
.styled-button-secondary:hover .icon {
    stroke: #354F52 !important;
}