.instagram-grid .gallery-img {
    /* Force un ratio carré 1/1 */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* Assure que l'image prenne toute la place du parent */
    width: 100%;
}

#dropdown-fan-icon {
    max-height: 300px;
    overflow-y: auto;
}

button.groupeFilter.active {
    border: 1px solid yellowgreen !important;
}
a.card-body:hover {
    background-color: #313437; /* Fond plus visible */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre légère */
    transition: all 0.3s ease-in-out;
}
.copy-text {
    padding: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 20px;
}
.shake-btn {
    transition: 0.3s ease-in-out;
    animation: shake 0.5s ease-in-out infinite;
}

.shake-btn:hover {
    animation: none;
}

.creator-toggle.disabled img {
    filter: grayscale(100%);
    opacity: 0.4;
    transition: opacity 0.2s, filter 0.2s;
    cursor: not-allowed;
}
.fan-delete {
    /* rendre l’avatar et le bloc fan plus discrets */
    filter: grayscale(100%);        /* tout en niveaux de gris */
    opacity: 0.5;                  /* demi-transparent */
    position: relative;            /* pour positionner le badge */
    text-decoration: line-through; /* barrer le nom */
}

/* petit badge « Supprimé » en haut à droite */
.fan-delete::after {
    content: "Supprimé";
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(255, 0, 0, 0.1);
    color: #c00;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
}

.ul-no-bullets {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.media-thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    z-index:2;
}


.group-badge {
    border-width: 1.5px;
    border-radius: 2em;
    font-weight: 500;
    background: transparent;
    transition: background 0.2s, border-color 0.2s;
    color: inherit;
}

.group-badge .badge {
    font-size: 0.9em;
    opacity: 0.6;
    transition: opacity 0.15s;
    background: transparent !important;
    border: none;
    color: inherit;
}

/* MODE LIGHT */
[data-bs-theme="light"] .group-badge.active,
[data-bs-theme="light"] .group-badge:active,
[data-bs-theme="light"] .group-badge:focus {
    background: rgba(0, 123, 255, 0.08); /* un peu de bleu pale */
    border-width: 2px;
    box-shadow: 0 0 0 0.1rem rgba(0,123,255,0.15);
}

[data-bs-theme="light"] .group-badge:hover:not(.active) {
    background: #f8f9fa;
    border-color: #b6b6b6;
}

/* MODE DARK */
[data-bs-theme="dark"] .group-badge.active,
[data-bs-theme="dark"] .group-badge:active,
[data-bs-theme="dark"] .group-badge:focus {
    background: rgba(0, 123, 255, 0.16);
    border-width: 2px;
    box-shadow: 0 0 0 0.1rem rgba(0,123,255,0.30);
    color: #fff;
}

[data-bs-theme="dark"] .group-badge:hover:not(.active) {
    background: rgba(255,255,255,0.05);
    border-color: #444;
}

/* Adaptation des icônes/couleurs custom pour fond sombre */
[data-bs-theme="dark"] .group-badge i {
    filter: brightness(1.4) drop-shadow(0 1px 0 rgba(0,0,0,0.3));
}

/* Badge de check */
.group-badge.active .badge {
    opacity: 1;
    font-weight: 600;
    color: inherit;
}

.group-badge .badge {
    color: inherit;
    background: transparent;
    border: none;
}

.group-badge i {
    font-size: 1.15em;
    margin-right: 0.6em;
    vertical-align: middle;
}

/* Responsive gap */
#group-badges {
    gap: 0.6em;
}

.group-badge:focus,
.group-badge:active {
    outline: none !important;
    box-shadow: none !important;
    border-width: 1.5px;
    /* éventuellement, remet le background normal ici */
}

.fans-count-badge {
    font-size: 1.05em;
    color: #1967d2;
    background: #e6f0fa;
    border-radius: .5em;
    padding: 3px 12px;
    display: inline-block;
}
#select-all-banner {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1055;
    min-width: 340px;
    max-width: 90vw;
    background: linear-gradient(87deg, #2979ff 0, #00c6ff 100%);
    color: #fff;
    font-size: 1.15em;
    border-radius: 1.5em;
    box-shadow: 0 6px 24px 0 rgba(24,50,255,.15), 0 1.5px 6px 0 rgba(12,38,78,.07);
    padding: 18px 28px;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    letter-spacing: .02em;
    animation: selectBannerFadeIn .4s cubic-bezier(.21,1.08,.73,.94);
    gap: 1em;
}

#select-all-banner a {
    color: #ffe140 !important;
    text-decoration: underline dotted;
    font-weight: bold;
    margin-left: 1em;
}

#select-all-banner .icon {
    font-size: 1.6em;
    margin-right: .6em;
    vertical-align: middle;
}

#select-all-banner .btn-cancel {
    color: #fff;
    background: transparent;
    border: 0;
    font-size: 1.4em;
    line-height: 1;
    float: right;
    position: absolute;
    top: 12px;
    right: 18px;
    opacity: .9;
    cursor: pointer;
    transition: opacity .15s;
}
#select-all-banner .btn-cancel:hover {
    opacity: 1;
}

@keyframes selectBannerFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-30px);}
    to   { opacity: 1; transform: translateX(-50%) translateY(0);}
}

#creator-switch-bar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 1em 0.4em;
    background: rgba(255,255,255,0.0); /* Invisible mais change si tu veux un fond */
    pointer-events: none; /* Laisse passer les clics par défaut, sauf sur les avatars */
}

#creator-switch-bar .creator-avatar {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 auto;
    opacity: 0.4;
    transition: opacity 0.2s, box-shadow 0.2s;
    pointer-events: auto; /* Autorise clic */
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

#creator-switch-bar .creator-avatar:hover,
#creator-switch-bar .creator-avatar:focus {
    opacity: 1;
    box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    background: #fff;
}

#creator-switch-bar img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    object-fit: cover;
    transition: border-color 0.2s;
}

#creator-switch-bar .creator-avatar:hover img {
    border-color: #0099ff;
}
.creator-notif-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 22px;
    height: 22px;
    background: #ff2a3d;
    color: #fff;
    border-radius: 11px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    pointer-events: none;
    z-index: 2;
    border: 2px solid #fff;
}

.creator-avatar.active .creator-notif-badge {
    border-color: #36c; /* optionnel pour faire ressortir l’actif */
}
/* Avatars du switch créateur */
.menu-creator-item {
    width: 69px;                /* ton <li> fait 69px de large */
    padding: 0;                 /* s'assure qu'il n'y a pas de décalage */
}

.menu-creator-link {
    display: flex;              /* centre parfaitement l'image */
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;           /* zone cliquable confortable */
    padding: 0;
    line-height: 0;
    text-decoration: none;
}

.menu-creator-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Feedback : survol/focus + état actif */
.menu-creator-link:hover .menu-creator-avatar,
.menu-creator-link:focus .menu-creator-avatar,
.menu-creator-item.is-active .menu-creator-avatar {
    outline: 2px solid rgba(255,255,255,.25);
    outline-offset: 2px;
}
/* Masque le badge quand il n'y a rien à afficher */
.creator-notif-badge.is-hidden {
    display: none;
}

/* micro animation "pulse" à chaque update */
@keyframes notifPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.creator-notif-badge.pulse {
    animation: notifPulse 180ms ease-out;
}



body.sfw-mode img[src*="media.mypuls.app"],body.sfw-mode img[src*="media.prod-v2.mym.fans"]  {
    filter: blur(15px) grayscale(75%);
    opacity: 0.6;
    transition: all 0.3s ease;
    cursor: pointer;
}
body.sfw-mode img[src*="media.mypuls.app"]:hover, body.sfw-mode img[src*="media.prod-v2.mym.fans"]:hover {
    filter: blur(0) grayscale(0%);
    opacity: 1;
}