/* Page Gestion des réseaux sociaux (/services/gestion-reseaux-sociaux-maroc) : loaded only on that page, after services.css */
/* Page réseaux sociaux : téléphone animé à la place des images du héros */
.yo-phone { position: absolute; left: 50%; top: 2%; width: 50%; margin-left: -25%; background: #fff; border: 10px solid var(--navy); border-radius: 38px; box-shadow: 0 30px 60px -25px rgba(18, 18, 78, .55); overflow: hidden; transform: rotate(-4deg); animation: yoFloatA 6s ease-in-out infinite; }
.yo-phone .scr { aspect-ratio: 600 / 1105; overflow: hidden; }
.yo-reel { animation: yoProfiles 16s ease-in-out infinite; }
.yo-svc .yo-stage .yo-reel img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 600 / 1105; border-radius: 0; box-shadow: none; transform: none; animation: none; }
@keyframes yoProfiles { 0%, 19% { transform: translateY(0); } 25%, 44% { transform: translateY(-20%); } 50%, 69% { transform: translateY(-40%); } 75%, 94% { transform: translateY(-60%); } 100% { transform: translateY(-80%); } }
.yo-heart { position: absolute; z-index: 3; right: 16%; top: 40%; width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 12px 30px -12px rgba(18, 18, 78, .5); display: grid; place-items: center; animation: yoHeart 3s ease-in-out infinite; }
.yo-heart svg { color: var(--or); }
@keyframes yoHeart { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.25); } 80% { transform: scale(.95); } }
.yo-svc .yo-stage .yo-chip.c1 { top: 10%; right: 0; } .yo-svc .yo-stage .yo-chip.c2 { left: 0; bottom: 12%; }
.yo-chip svg { margin-right: 6px; vertical-align: -2px; color: var(--or); }
.yo-vid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: center; }
.yo-vid-frame { position: relative; border: 10px solid var(--navy); border-radius: 30px; overflow: hidden; background: var(--navy); box-shadow: 0 30px 60px -25px rgba(18, 18, 78, .55); }
.yo-vid-frame video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: var(--navy); }
.yo-play { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0; border: 0; background: linear-gradient(180deg, rgba(18, 18, 78, 0) 30%, rgba(18, 18, 78, .55)); color: #fff; font: inherit; cursor: pointer; }
.yo-play i { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--or); box-shadow: 0 16px 40px -10px rgba(250, 96, 5, .8); transition: transform .25s; }
.yo-play i::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .7); animation: yoRing 1.8s ease-out infinite; }
.yo-play i::after { content: ""; margin-left: 8px; border-left: 30px solid #fff; border-top: 18px solid transparent; border-bottom: 18px solid transparent; }
.yo-play b { padding: 8px 16px; border-radius: 999px; background: rgba(18, 18, 78, .75); font-size: 14px; letter-spacing: .04em; }
.yo-play:hover i { transform: scale(1.08); }
.yo-vid-frame.playing .yo-play { display: none; }
@keyframes yoRing { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.yo-chapters { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: ch; }
.yo-chapters button { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 2px 14px; width: 100%; padding: 12px 14px; margin-bottom: 8px; text-align: left; background: #fff; border: 1px solid rgba(25, 25, 112, .12); border-radius: 12px; color: var(--navy); font: inherit; cursor: pointer; transition: border-color .25s, transform .25s, box-shadow .25s; }
.yo-chapters button:hover { border-color: var(--or); transform: translateX(4px); }
.yo-chapters button.on { border-color: var(--or); box-shadow: 0 14px 30px -18px rgba(250, 96, 5, .7); }
.yo-chapters span { grid-row: span 2; align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #f4f5fa; color: var(--or); font-family: Satoshi, sans-serif; font-size: 20px; font-weight: 700; transition: background .25s, color .25s; }
.yo-chapters button.on span, .yo-chapters button:hover span { background: var(--or); color: #fff; }
.yo-chapters b { font-size: 16px; } .yo-chapters small { color: rgba(25, 25, 112, .7); font-size: 14px; line-height: 1.4; }
.yo-nets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.yo-nets > div { padding: 26px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.yo-work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.yo-work > div { padding: 28px; background: #fff; border: 1px solid rgba(25, 25, 112, .12); border-radius: 14px; transition: transform .25s, border-color .25s; }
.yo-work > div:hover { transform: translateY(-6px); border-color: var(--or); }
.yo-work small { color: var(--or); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.yo-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.yo-logos div { display: flex; align-items: center; justify-content: center; height: 96px; padding: 14px; background: #fff; border: 1px solid rgba(25, 25, 112, .12); border-radius: 12px; transition: transform .25s, border-color .25s; }
.yo-logos div:hover { transform: translateY(-4px); border-color: #FF4400; }
.yo-logos img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
@media screen and (max-width: 991px) { .yo-vid { grid-template-columns: 1fr; gap: 32px; } .yo-vid-frame { width: min(100%, 340px); margin: 0 auto; } }
@media screen and (max-width: 991px) { .yo-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .yo-nets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .yo-work { grid-template-columns: 1fr; } }
@media screen and (max-width: 767px) { .yo-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .yo-vid-frame { width: min(100%, 270px); } .yo-nets { grid-template-columns: 1fr; } .yo-phone { width: 68%; margin-left: -34%; } .yo-svc .yo-stage { aspect-ratio: auto; height: 470px; } }
@media (prefers-reduced-motion: reduce) { .yo-phone, .yo-reel, .yo-heart { animation: none !important; } }