/* =========================================
   SHORTCODE BOUTON MON COMPTE
========================================= */
/* Conteneur principal du lien */
.magical-sc-my-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;  /* Ajustez la taille selon vos besoins */
    height: 40px; /* Ajustez la taille selon vos besoins */
    background-color: #f0f0f0; /* Couleur de fond optionnelle */
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden; /* Important pour que l'avatar ne dépasse pas du cercle */
    
}

/* Style si c'est un cercle */
.magical-sc-circle {
    border-radius: 50%;
      
}

/* Style si c'est un carré */
.magical-sc-square {
    border-radius: 4px;
   
}

/* Gestion de l'image de l'Avatar */
.magical-sc-my-account img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Force l'image à remplir le cercle sans se déformer */
    display: block;
   
}

/* Gestion de l'icône (quand pas d'avatar) */
.magical-sc-my-account i {
    font-size: 20px; /* Ajustez la taille de l'icône */
}

/* Effet au survol */
.magical-sc-my-account:hover {
    opacity: 0.8;
}

/* Le conteneur du shortcode */
.magical-sc-my-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;  /* Taille du bouton */
    height: 40px; /* Taille du bouton */
    background-color: #f5f5f5;
    overflow: hidden; /* Coupe l'image qui dépasse du cercle */
    position: relative;
    text-decoration: none;
}

/* Forme ronde */
.magical-sc-circle {
    border-radius: 50%;
   
}

/* Forme carrée */
.magical-sc-square {
    border-radius: 8px;
}

/* RENDRE L'IMAGE DE L'AVATAR PARFAITE */
.magical-sc-my-account img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Important : l'image remplit le cercle sans se déformer */
    display: block;
}

/* Style de l'icône si pas d'image */
.magical-sc-my-account i {
    font-size: 24px;
    color: #333;
}

/* =========================================
   SOCIALS - PRO MAX (OCEAN++ STYLE)
========================================= */

.magical-socials {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ITEM */
.magical-socials .social-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;

    /* GLASS EFFECT */
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(6px);

    border: 1px solid rgba(255,255,255,0.08);

    transition: all 0.35s cubic-bezier(.4,0,.2,1);
}

/* ICON */
.magical-socials .social-item i {
    position: relative;
    z-index: 3;
    transition: all 0.3s ease;
}

/* =========================================
   BACKGROUND ANIMATION (SMOOTH SCALE)
========================================= */

.magical-socials .social-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    transform: scale(0.2);
    opacity: 0;

    transition: all 0.4s cubic-bezier(.4,0,.2,1);
    z-index: 1;
}

/* HOVER BACKGROUND */
.magical-socials .social-item:hover::before {
    transform: scale(1);
    opacity: 1;
}

/* =========================================
   GLOW EFFECT (PREMIUM)
========================================= */

.magical-socials .social-item::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;

    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.3s ease;

    z-index: 0;
}

.magical-socials .social-item:hover::after {
    opacity: 0.6;
}

/* =========================================
   HOVER GLOBAL
========================================= */

.magical-socials .social-item:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* ICON ANIMATION */
.magical-socials .social-item:hover i {
    transform: scale(1.15);
}

/* CLICK */
.magical-socials .social-item:active {
    transform: scale(0.92);
}

/* =========================================
   COLORS + GLOW PAR RÉSEAU
========================================= */

.social-facebook::before,
.social-facebook::after {
    background: #1877f2;
}

.social-instagram::before,
.social-instagram::after {
    background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

.social-twitter::before,
.social-twitter::after {
    background: #000000;
}

.social-youtube::before,
.social-youtube::after {
    background: #ff0000;
}

.social-tiktok::before,
.social-tiktok::after {
    background: #111111;
}

/* =========================================
   VARIANTS
========================================= */

/* MINIMAL */
.magical-social-minimal .social-item {
    background: transparent;
    border: none;
    backdrop-filter: none;
}

/* BORDERED */
.magical-social-bordered .social-item {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
}

/* SQUARE */
.magical-social-square .social-item {
    border-radius: 8px;
}

/* =========================================
   SIZE SYSTEM
========================================= */

.magical-social-small .social-item {
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.magical-social-medium .social-item {
    width: 44px;
    height: 44px;
}

.magical-social-large .social-item {
    width: 56px;
    height: 56px;
    font-size: 20px;
}

/* =========================================
   FOOTER OPTIMISATION
========================================= */

.site-footer .magical-socials .social-item {
    background: rgba(255,255,255,0.05);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 480px) {
    .magical-socials {
        justify-content: center;
    }
}