/* === LAYOUT === */
.container-bloc-instagram {text-align: center;}
.container-bloc-instagram .instagram-titre {font-size: 2rem; margin: 0 0 2.5rem; word-wrap: break-word; position: relative; font-weight:800;}

/* === RÉSEAUX SOCIAUX === */
.container-bloc-instagram .instagram-reseaux {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem; margin-bottom: 3rem;}
.container-bloc-instagram .instagram-reseau-btn {display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border: .3rem solid var(--couleur-texte); border-radius: 50%; font-size: 2rem; text-decoration: none;}

/* === FLUX INSTAGRAM === */

.container-bloc-instagram .instagram-titre::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2.5rem;
    width: 100%;
    height: 2rem;
    background: url(/wp-content/themes/iwego-child/images/underline-1.svg) no-repeat center;
    background-size: 100% 100%;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
}

.container-bloc-instagram .instagram-titre.titre-drawn::after {
    animation: underline-draw 1.3s cubic-bezier(.25, .46, .45, .94) forwards;
}

/* === HOVER === */
@media (hover: hover) {
    .container-bloc-instagram .instagram-reseau-btn:hover {transform: scale(1.12);}
    .container-bloc-instagram .instagram-reseau-btn[href*="facebook"]:hover {color: #1877F2; border-color: #1877F2;}
    .container-bloc-instagram .instagram-reseau-btn[href*="instagram"]:hover {color: #E1306C; border-color: #E1306C;}
    .container-bloc-instagram .instagram-reseau-btn[href*="youtube"]:hover {color: #FF0000; border-color: #FF0000;}
    .container-bloc-instagram .instagram-reseau-btn[href*="pinterest"]:hover {color: #E60023; border-color: #E60023;}
    .container-bloc-instagram .instagram-reseau-btn[href*="linkedin"]:hover {color: #0A66C2; border-color: #0A66C2;}
    .container-bloc-instagram .instagram-reseau-btn[href*="tiktok"]:hover {color: #010101; border-color: #010101;}
}

/* === TABLETTE === */
@media (min-width: 768px) {
    .container-bloc-instagram .instagram-titre {font-size: 3.6rem;}
}

/* === DESKTOP === */
@media (min-width: 1025px) {
    .container-bloc-instagram .instagram-titre {font-size: 4rem;}
    .container-bloc-instagram .instagram-reseau-btn {width: 5rem; height: 5rem; font-size: 2.2rem;}

    .container-bloc-instagram .instagram-reseaux {margin-top: 5rem;}
}