/* --- UTILITAIRES & BOUTONS DE PARTAGE --- */
.hidden { display: none; opacity: 0; transition: opacity 0.3s ease; }
.plus-icon { font-size: 20px; margin-right: 8px; }
.btn-partage { display: flex; gap: 1em; }
.btnp .icones { width: 1em; height: 1em; fill: var(--color1); }
.btnp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    transition: all 0.3s ease;
    padding: 0.5em;
}

/* --- CONTENEUR PRINCIPAL & VARIANTES --- */
.btn-liens-rs { display: flex; justify-content: flex-end; position: relative; gap: 0.4vw; width: 100%; padding: 0; }
.btn-liens-rs.btn-rs-center { flex-wrap: wrap; justify-content: center; align-items: center; padding: 1vh 0; }
.banner .btn-liens-rs { position: absolute; right: 2% ;flex-direction: column; justify-content: center; width: unset; height: 100%; z-index: 10; }
/* --- ÉLÉMENTS SOCIAUX (BTNRS) --- */
.btn-liens-rs .btnrs {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    background: no-repeat center;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color1);
	box-sizing: border-box;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    z-index: 1;
}
.btn-liens-rs .btnrs:hover { box-shadow: 0 0 0 2px rgb(from var(--color0) r g b / 0.3); }

.banner .btn-liens-rs .btnrs { box-shadow: 0 0 0 1px rgb(from var(--color2) r g b / 0.3); }

/* --- COULEUR DU BACKGROUND DU BOUTON --- */
/* On utilise le pseudo-élément pour créer la pastille de couleur derrière le picto */
.btn-liens-rs .btnrs::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--color4);
    transition: background 0.4s ease;
    z-index: -1;
}
.btn-liens-rs .btnrs:hover::before { background: var(--color2); }

.banner .btn-liens-rs .btnrs::before { background: var(--color2); }
.banner .btn-liens-rs .btnrs:hover::before { background: var(--color4); }

/* --- COULEUR DU LOGO (CONTOUR DU PICTO) --- */
.btn-liens-rs .btnrs svg { fill: var(--color1); width: 3rem; height: 3rem; transition: fill .4s ease; }
.btn-liens-rs .btnrs:hover svg { fill: var(--color4); }

.banner .btn-liens-rs .btnrs svg { fill: var(--color4); }
.banner .btn-liens-rs .btnrs:hover svg { fill: var(--color2); }


/* --- LOGIQUE "VIEW MORE" & EXTRA SOCIALS --- */
.btn-view-more { display: flex; align-items: center; margin-top: 0; cursor: pointer; font-size: 16px; }

.view-more-text {
    font-size: 16px;
    font-weight: bold;
    color: var(--color2);
    background: var(--color0);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.4s ease, background-color 0.4s ease;
}

.view-more-text:hover { transform: rotate(360deg); background-color: var(--color1); }

.extra-socials-container { position: absolute; display: none; transition: all 0.4s ease; }
.btn-liens-rs .btnrs.extra-social:not(.show) { display: none; }

/* Groupement des états actifs */
:is(.extra-socials-container, .btnrs.extra-social).show {
    display: flex !important;
    flex-direction: column;
    width: 3.3rem;
    top: 72px;
    right: 0;
    gap: 0.4vw;
    animation: fadeIn 0.3s ease;
    opacity: 1;
}