:root {
    --primary: #38bdf8;
    --secondary: #d6a542;
    --accent: #be5332;
    --text-shadow-primary: black;
    --linkedin: #0A66C2;
    --trans-white: rgba(255,255,255,.6);

}
/* Styles personnalisés conservés */
body { font-family: 'Inter', sans-serif; }
h1, h2, h3 { font-family: 'Oswald', sans-serif; text-transform: uppercase; }
/* Configuration de la grille masonry */
.polygon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    grid-auto-flow: dense; /* Important pour l'effet masonry */
}

/* TOP */
.main-logo {
    width:1em;
    height:1em;
    margin-right:1em;
    margin-left:1em;
}

/* SOCIAL */
.social-links {
    margin-top: 1em;
    display: flex;
    justify-content: center;
    gap: 15px;
    list-style: none;
    padding: .3em;
}

.social-links li {
    display: inline-block;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4em;
    height: 2.4em;
    border-radius: 25%;
    text-decoration: none;
    font-size: 1em;
    transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out;
    animation: glow 1.5s infinite alternate;
    image-rendering: pixelated;
    color: white;
    background-color: transparent;
}

/* Icônes spécifiques à chaque réseau */
.social-links .linkedin:hover   { background-color: #0A66C2; }
.social-links .patreon:hover    { background-color: #FF424D; }
.social-links .discord:hover    { background-color: #5865F2; }
.social-links .youtube:hover    { background-color: #FF0000; }
.social-links .twitch:hover     { background-color: #9146FF; }
.social-links .instagram:hover  { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.social-links .itch:hover       { background-color: #FA5C5C; }
.social-links .github:hover     { background-color: #171515; }

/* Effet de hover */
.social-links a:hover {
    transform: scale(1.1);
    box-shadow: 0px 0px 12px rgba(255, 255, 255, 1);
}

/* Icônes */
.social-links a i {
    font-size: 28px;
}



/* HERO */
.paD3v-hero {
    background: url(../img/pictures/pad3v_hero.jpg);
    background-size: 100% auto;
    background-repeat:no-repeat;
    background-color:  rgba(7, 21, 61, .4);
    margin-top:2em;
    padding-left: 2em;
    text-shadow: 1px 1px 2px var(--text-shadow-primary);


}
.logo-blog{
    float: left;
    width:1.2em;
    height:1.2em;
    margin-right:1em;
    margin-left:1em;
}
.article-box {
    background-color: transparent;
}
.article-box::before {
    content: "";
    position: relative;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('img/pictures/ia_dumb.jpg') no-repeat center center;
    background-size: cover;
    filter: blur(8px) grayscale(50%);
    z-index: 0;
}
/* Permet à certaines cartes de prendre 2 colonnes si l'espace le permet */
@media (max-width: 1024px) {
    .show-large { display: none; }
    .main-logo {
        width:2em;
        height:2em;
    }
    .sticker-blog {
        position:relative;
        top:0;
        left:0;
    }
    
}
@media (min-width: 1024px) {
    .col-span-2-md { grid-column: span 2; }
    .main-logo {
        width:1.2em;
        height:1.2em;
        margin-right:1em;
        margin-left:1em;
        float: left;
    }
}
@media (min-width: 945px) {
    .paD3v-hero {
        padding-left: 24em;
        background-size: auto 100%;
    }
}
.hide{
    display: none;
}