/* Social Pictos Block Styles */

/* --- BASE STYLES --- */
.picto {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    position: relative;
}

.picto .copy {
    display: none;
    box-shadow: 0 3px 6px #00000029;
    padding: 5px 10px;
    border-radius: 10px;
    position: absolute;
    top: -35px;
    background: #aaaaaa;
    color: #fff;
    font-size: 12px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.picto a {
    width: 32px;
    height: 32px;
    background: #17191d 0% 0% no-repeat padding-box;
    border-radius: 6px;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.picto a svg {
    width: 16px;
    height: 16px;
    transition: all 0.3s ease;
}

/* --- LIGHT MODE --- */
body.light-mode .picto a {
    background: #efeff2;
    color: #000000;
}

body.light-mode .picto a svg path {
    fill: #000;
}

body.light-mode .picto a svg #Icon_awesome-twitter {
    fill: #ffffff;
}

body.light-mode .picto a svg:hover #Icon_awesome-twitter {
    fill: #fd8e02;
}

/* --- DARK MODE HOVER STATES --- */
body.dark-mode .picto a:hover {
    background: var(--accent-color);
}

body.dark-mode .picto a:hover path,
body.dark-mode .picto a svg:hover path {
    fill: var(--accent-color);
}

body.dark-mode .picto a:hover .ivx-twitter path,
body.dark-mode .picto a svg.ivx-twitter:hover path,
body.dark-mode .picto a svg.ivx-telegram:hover path,
body.dark-mode .picto a:hover .ivx-telegram path,
body.dark-mode .picto a:hover .ivx-telegram svg:hover path {
    fill: #000;
    stroke: #000;
}

body.dark-mode .ivx-share,
body.dark-mode .ivx-twitter,
body.dark-mode .ivx-telegram {
    fill: #000;
    transition: none;
}

body.dark-mode .ivx-share {
    stroke-width: 20px;
    stroke: #fff;
}

body.dark-mode .picto a:hover .ivx-share,
body.dark-mode .picto a:hover .ivx-twitter {
    fill: var(--accent-color);
    stroke: #000;
}

/* --- LIGHT MODE HOVER STATES --- */
body.light-mode .picto a:hover {
    background: var(--accent-color);
}

body.light-mode .picto a:hover path,
body.light-mode .picto a svg:hover path {
    fill: var(--accent-color);
}

body.light-mode .picto a:hover .ivx-twitter path,
body.light-mode .picto a svg.ivx-twitter:hover path,
body.light-mode .picto a svg.ivx-telegram:hover path,
body.light-mode .picto a:hover .ivx-telegram path,
body.light-mode .picto a:hover .ivx-telegram svg:hover path {
    fill: #000;
    stroke: #000;
}

body.light-mode .ivx-share,
body.light-mode .ivx-twitter,
body.light-mode .ivx-telegram {
    fill: #efeff2;
    transition: none;
}

body.light-mode .ivx-share {
    stroke-width: 20px;
    stroke: #000;
}

body.light-mode .picto a:hover .ivx-share,
body.light-mode .picto a:hover .ivx-twitter {
    fill: #efeff2;
    stroke: #000;
}

/* --- RESPONSIVE POSITIONING --- */
/* Le positionnement sera géré par les templates dynamiques via des classes CSS */

/* Mobile : position relative par défaut */
@media (max-width: 767px) {
    .picto {
        gap: 12px;
        margin: 20px 0;
    }

    /* Masquer les versions desktop sur mobile */
    .picto.fixed-left,
    .picto.fixed-right {
        display: none;
    }
}

/* Desktop : position fixe à gauche du contenu */
@media (min-width: 1224px) {
    .picto {
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex-direction: column;
        position: fixed;
        left: calc(50% - 600px);
        z-index: 9;
        top: 170px;
    }
}