/* INOVATECH — Réseaux sociaux : YouTube, Facebook, Instagram, TikTok (+ WhatsApp)
   Couleurs officielles de chaque réseau au survol ; le reste suit l'identité bleue du site. */

:root {
    --sn-youtube: #ff0000;
    --sn-facebook: #1877f2;
    --sn-instagram: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%);
    --sn-tiktok: #000000;
    --sn-whatsapp: #25d366;
}

/* ---------- Icônes rondes du pied de page ---------- */
.social-links a { position: relative; overflow: hidden; isolation: isolate; }
.social-links a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .25s; }
.social-links a:hover::before, .social-links a:focus-visible::before { opacity: 1; }
.social-links a:hover, .social-links a:focus-visible { background: transparent; color: #fff; }
.social-links a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.social-links .sn-youtube::before { background: var(--sn-youtube); }
.social-links .sn-facebook::before { background: var(--sn-facebook); }
.social-links .sn-instagram::before { background: var(--sn-instagram); }
.social-links .sn-tiktok::before { background: var(--sn-tiktok); box-shadow: inset -2px -2px 0 #ff0050, inset 2px 2px 0 #00f2ea; }
.social-links .sn-whatsapp::before { background: var(--sn-whatsapp); }

/* ---------- Bloc « Suivez-nous » (Galerie, Contact) ---------- */
.social-follow { position: relative; overflow: hidden; margin-top: 3rem; padding: 2rem 1.5rem; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(500px 220px at 100% 0%, rgba(47, 140, 255, .1), transparent 70%), var(--card); box-shadow: var(--shadow-sm); text-align: center; }
.sf-head { max-width: 640px; margin: 0 auto 1.6rem; }
.sf-icons { display: inline-flex; gap: .5rem; margin-bottom: .8rem; font-size: 1.15rem; }
.sf-icons i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.sf-icons .sn-youtube { background: var(--sn-youtube); }
.sf-icons .sn-facebook { background: var(--sn-facebook); }
.sf-icons .sn-instagram { background: var(--sn-instagram); }
.sf-icons .sn-tiktok { background: var(--sn-tiktok); }
.sf-title { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 800; margin: 0 0 .4rem; }
.sf-text { color: var(--muted); margin: 0; }
.sf-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; max-width: 980px; margin: 0 auto; }
.sf-btn { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.sf-btn:hover, .sf-btn:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; color: var(--ink); }
.sf-btn:focus-visible { outline: 3px solid rgba(47, 140, 255, .45); outline-offset: 2px; }
.sf-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #fff; font-size: 1.3rem; transition: transform .3s var(--ease); }
.sf-btn:hover .sf-ico { transform: scale(1.08) rotate(-4deg); }
.sf-label { min-width: 0; }
.sf-label strong { display: block; font-family: var(--font-head); font-size: 1rem; line-height: 1.2; }
.sf-label small { display: block; color: var(--muted); font-size: .82rem; }
.sf-go { margin-left: auto; font-size: .8rem; color: var(--muted); opacity: .5; transition: opacity .25s, transform .25s; }
.sf-btn:hover .sf-go { opacity: 1; transform: translate(2px, -2px); }
.sf-btn.sn-youtube .sf-ico { background: var(--sn-youtube); box-shadow: 0 8px 18px rgba(255, 0, 0, .25); }
.sf-btn.sn-facebook .sf-ico { background: var(--sn-facebook); box-shadow: 0 8px 18px rgba(24, 119, 242, .28); }
.sf-btn.sn-instagram .sf-ico { background: var(--sn-instagram); box-shadow: 0 8px 18px rgba(238, 42, 123, .28); }
.sf-btn.sn-tiktok .sf-ico { background: var(--sn-tiktok); box-shadow: 2px 2px 0 #ff0050, -2px -2px 0 #00f2ea; }
.sf-btn.sn-youtube:hover { box-shadow: 0 12px 28px rgba(255, 0, 0, .14); }
.sf-btn.sn-facebook:hover { box-shadow: 0 12px 28px rgba(24, 119, 242, .16); }
.sf-btn.sn-instagram:hover { box-shadow: 0 12px 28px rgba(238, 42, 123, .16); }
.sf-btn.sn-tiktok:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .14); }

@media (max-width: 575.98px) {
    .social-follow { padding: 1.5rem 1rem; border-radius: 20px; }
    .sf-list { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .sf-btn { flex-direction: column; text-align: center; gap: .5rem; padding: .9rem .6rem; }
    .sf-go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-btn, .sf-ico, .sf-go { transition: none; }
}