/* ===== PAGE RÉSEAUX SOCIAUX ===== */

/* LOGOS ET LIENS */

.social-section {
    text-align: center;
    padding: 0;
}


/* GRILLE */

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 30px 0 30px;
}


/* LABEL */

.social-label {
    display: block;
    font-size: 14px;
    margin-top: 5px;
    opacity: 0.8;
	color: #ffffff;
}


.social-icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}



/* ICONES DES PLATEFORMES */

/* YOUTUBE */

.social-youtube {
    color: #FF0000;
}

.social-youtube .social-icon::before {
    mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/youtube.svg");
    -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/youtube.svg");
}


/* YOUTUBE MUSIC */

.social-youtube-music {
    color: #FF0000;
}

.social-youtube-music .social-icon::before {
    mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/youtubemusic.svg");
    -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/youtubemusic.svg");
}


/* SPOTIFY */

.social-spotify {
    color: #1DB954;
}

.social-spotify .social-icon::before {
    mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/spotify.svg");
    -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/spotify.svg");
}


/* DEEZER */

.social-deezer {
    color: #EF5466;
}

.social-deezer .social-icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='60' y='300' width='60' height='140'/%3E%3Crect x='140' y='260' width='60' height='180'/%3E%3Crect x='220' y='220' width='60' height='220'/%3E%3Crect x='300' y='260' width='60' height='180'/%3E%3Crect x='380' y='300' width='60' height='140'/%3E%3C/svg%3E");

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='60' y='300' width='60' height='140'/%3E%3Crect x='140' y='260' width='60' height='180'/%3E%3Crect x='220' y='220' width='60' height='220'/%3E%3Crect x='300' y='260' width='60' height='180'/%3E%3Crect x='380' y='300' width='60' height='140'/%3E%3C/svg%3E");
}


/* TIKTOK */

.social-tiktok {
    color: #00FFFF;
}

.social-tiktok .social-icon::before {
    mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/tiktok.svg");
    -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/tiktok.svg");
}


/* FACEBOOK */

.social-facebook {
    color: #1877F2;
}

.social-facebook .social-icon::before {
    mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/facebook.svg");
    -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/facebook.svg");
}


/* AUDIOMACK */

.social-audiomack {
    color: #FFA200;
}

.social-audiomack .social-icon::before {
    mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/audiomack.svg");
    -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/audiomack.svg");
}


/* AMAZON MUSIC */

.social-amazon-music {
    color: #00A8E1;
}

.social-amazon-music .social-icon::before {
    mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/amazonmusic.svg");
    -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/amazonmusic.svg");
}


/* APPLE MUSIC */

.social-apple-music {
    color: #FA243C;
}

.social-apple-music .social-icon::before {
    mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/applemusic.svg");
    -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/applemusic.svg");
}


/* TIDAL */

.social-tidal {
    color: #FFFFFF;
}

.social-tidal .social-icon::before {
    mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/tidal.svg");
    -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/tidal.svg");
}



/* ===== LIENS DÉCOUVERTE ===== */

.social-decouvrir{
    color:#cdb7ff;
}

.social-decouvrir .social-icon::before{

    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 2c1.85 0 3.55.63 4.9 1.69h-2.27c-.3-.66-.68-1.25-1.13-1.69H12zm-2.5 0c-.45.44-.83 1.03-1.13 1.69H6.1A7.96 7.96 0 019.5 4zM4.69 7.69h3.03A15.8 15.8 0 007.5 12c0 1.48.21 2.89.59 4.31H4.69A7.93 7.93 0 014 12c0-1.56.45-3.01 1.22-4.31h-.53zm5.43 0h3.76c.4 1.25.62 2.69.62 4.31s-.22 3.06-.62 4.31h-3.76A13.8 13.8 0 019.5 12c0-1.62.22-3.06.62-4.31zm6.79 0h3.03A7.93 7.93 0 0120 12c0 1.56-.45 3.01-1.22 4.31h-3.4c.38-1.42.59-2.83.59-4.31 0-1.48-.21-2.89-.59-4.31zm-7.41 10.62c.45.44 1.03.82 1.69 1.13V18h1.62v1.44c.66-.31 1.24-.69 1.69-1.13h-4.99z'/%3E%3C/svg%3E");

    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 2c1.85 0 3.55.63 4.9 1.69h-2.27c-.3-.66-.68-1.25-1.13-1.69H12zm-2.5 0c-.45.44-.83 1.03-1.13 1.69H6.1A7.96 7.96 0 019.5 4zM4.69 7.69h3.03A15.8 15.8 0 007.5 12c0 1.48.21 2.89.59 4.31H4.69A7.93 7.93 0 014 12c0-1.56.45-3.01 1.22-4.31h-.53zm5.43 0h3.76c.4 1.25.62 2.69.62 4.31s-.22 3.06-.62 4.31h-3.76A13.8 13.8 0 019.5 12c0-1.62.22-3.06.62-4.31zm6.79 0h3.03A7.93 7.93 0 0120 12c0 1.56-.45 3.01-1.22 4.31h-3.4c.38-1.42.59-2.83.59-4.31 0-1.48-.21-2.89-.59-4.31zm-7.41 10.62c.45.44 1.03.82 1.69 1.13V18h1.62v1.44c.66-.31 1.24-.69 1.69-1.13h-4.99z'/%3E%3C/svg%3E");
}


/* HOVER COULEUR PLATEFORME */

.social-youtube:hover {
    border-color: #FF0000;
}

.social-spotify:hover {
    border-color: #1DB954;
}

.social-apple-music:hover {
    border-color: #FA243C;
}

.social-deezer:hover {
    border-color: #EF5466;
}

.social-amazon-music:hover {
    border-color: #00A8E1;
}

.social-tidal:hover {
    border-color: #FFFFFF;
}

.social-facebook:hover {
    border-color: #1877F2;
}

.social-tiktok:hover {
    border-color: #00FFFF;
}

.social-audiomack:hover {
    border-color: #FFA200;
}

.social-youtube-music:hover {
    border-color: #FF0000;
}


/* ============================= */
/* GROUPES RÉSEAUX SOCIAUX */
/* ============================= */

.social-group{
    margin:40px 0;
}

.social-group-title{
    display:flex;
    align-items:center;
    gap:10px;

    margin:0 0 18px;

    font-size:26px;

    text-align:left;
}


/* ===== GRILLES ===== */

.social-grid-platformes{
    grid-template-columns:
    repeat(4,minmax(0,1fr));
}

.social-grid-reseaux{
    grid-template-columns:
    repeat(3,minmax(0,1fr));
}

.social-grid-decouvrir{
    grid-template-columns:
    repeat(2,minmax(0,1fr));
}


/* ===== CARTES ===== */

.social-card{

    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    min-height:145px;

    padding:20px;

    text-decoration:none;

    border-radius:22px;

    background:
    linear-gradient(
        145deg,
        rgba(40,40,55,0.96),
        rgba(20,20,32,0.98)
    );

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

    box-shadow:
    0 8px 24px rgba(0,0,0,0.34);

    overflow:hidden;

    transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.social-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 16px 34px rgba(0,0,0,0.42);
}

.social-icon{
    display:block;

    width:54px;
    height:54px;

    margin:0 auto 16px;
}

.social-name{
    display:block;

    font-size:18px;
    font-weight:700;

    line-height:1.4;

    text-align:center;
}

.social-label{
    margin-top:8px;

    line-height:1.5;
}


/* ======================= */
/* PARTAGE */
/* ======================= */

.share-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    height:42px;

    padding:0 14px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    background:
    linear-gradient(
        145deg,
        rgba(201,182,255,0.12),
        rgba(120,90,200,0.10)
    );

    border:1px solid rgba(201,182,255,0.14);

    color:#c9b6ff;

    font-size:13px;
    font-weight:700;

    white-space:nowrap;

    box-shadow:
    0 4px 14px rgba(0,0,0,0.18);

    transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease;
}

.share-btn svg{

    width:16px;
    height:16px;

    fill:currentColor;

    flex-shrink:0;
}

.share-btn:hover{

    transform:translateY(-2px);

    background:
    linear-gradient(
        145deg,
        rgba(145,95,255,0.55),
        rgba(30,12,50,0.92)
    );

    box-shadow:
    0 8px 24px rgba(0,0,0,0.45),
    0 0 18px rgba(170,120,255,0.35);
}


/* ======================= */
/* MOBILE */
/* ======================= */

@media (max-width:768px){

    .share-btn{

        width:42px;

        min-width:42px;

        padding:0;
    }

    .share-btn span{
        display:none;
    }
}


/* ===== MOBILE ===== */

@media (max-width:768px){

    .social-group{
        margin:32px 0;
    }

    .social-group-title{
        font-size:22px;
        margin-bottom:14px;

        text-align:left;
        justify-content:flex-start;
    }

    .social-grid-platformes,
    .social-grid-reseaux,
    .social-grid-decouvrir{
        grid-template-columns:
        repeat(2,minmax(0,1fr));
    }

    .social-card{
        min-height:120px;

        padding:14px;
    }

    .social-icon{
        width:42px;
        height:42px;
    }
	
	.share-btn{

        width:42px;

        min-width:42px;

        padding:0;
    }

    .share-btn span{
        display:none;
    }

}