/* Page Référencement SEO (/services/referencement-seo-maroc) : loaded only on that page, after services.css */
/* Page SEO : résultats Google animés à la place des images du héros */
.yo-serp { position: absolute; left: 4%; right: 8%; top: 7%; padding: 18px 18px 22px; background: #fff; border: 1px solid rgba(25, 25, 112, .12); border-radius: 16px; box-shadow: 0 30px 60px -25px rgba(18, 18, 78, .45); transform: rotate(-2deg); animation: yoFloatA 6s ease-in-out infinite; }
.yo-serp .q { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; margin-bottom: 16px; border: 1px solid rgba(25, 25, 112, .15); border-radius: 999px; color: var(--navy); font-size: 15px; font-weight: 500; }
.yo-serp .q svg { flex: none; color: var(--or); }
.yo-serp .q span { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--or); width: 16ch; animation: yoType 9s steps(16) infinite; }
.yo-serp ol { position: relative; height: calc(4 * 64px); margin: 0; padding: 0; list-style: none; }
.yo-serp li { position: absolute; left: 0; right: 0; height: 56px; padding: 8px 12px; border-radius: 10px; background: #f4f5fa; }
.yo-serp li b, .yo-serp li i { display: block; height: 9px; margin-top: 6px; border-radius: 9px; background: rgba(25, 25, 112, .14); }
.yo-serp li b { width: 55%; height: 11px; margin-top: 4px; background: rgba(25, 25, 112, .28); } .yo-serp li i { width: 85%; }
.yo-serp li.me { z-index: 2; background: #fff; border: 2px solid var(--or); box-shadow: 0 14px 30px -16px rgba(250, 96, 5, .6); }
.yo-serp li.me small { display: block; color: var(--or); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.yo-serp li.me strong { display: block; color: var(--navy); font-size: 14px; line-height: 1.3; }
.yo-serp .r1 { animation: yoR1 9s ease-in-out infinite; } .yo-serp .r2 { animation: yoR2 9s ease-in-out infinite; }
.yo-serp .r3 { animation: yoR3 9s ease-in-out infinite; } .yo-serp .me { animation: yoMe 9s ease-in-out infinite; }
@keyframes yoType { 0% { width: 0; } 18%, 100% { width: 16ch; } }
@keyframes yoMe { 0%, 24% { transform: translateY(192px); } 34%, 46% { transform: translateY(128px); } 56%, 66% { transform: translateY(64px); } 76%, 96% { transform: translateY(0); } 100% { transform: translateY(192px); } }
@keyframes yoR3 { 0%, 24% { transform: translateY(128px); } 34%, 96% { transform: translateY(192px); } 100% { transform: translateY(128px); } }
@keyframes yoR2 { 0%, 46% { transform: translateY(64px); } 56%, 96% { transform: translateY(128px); } 100% { transform: translateY(64px); } }
@keyframes yoR1 { 0%, 66% { transform: translateY(0); } 76%, 96% { transform: translateY(64px); } 100% { transform: translateY(0); } }
.yo-svc .yo-stage .yo-chip.c1 { top: 0; } .yo-svc .yo-stage .yo-chip.c2 { left: auto; right: 4%; bottom: 0; }
.yo-pin { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50% 50% 50% 0; background: var(--or); transform: rotate(-45deg); }
.yo-case { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.yo-case > div { padding: 28px; background: #fff; border: 1px solid rgba(25, 25, 112, .12); border-radius: 14px; }
.yo-case b { display: block; margin-bottom: 8px; color: var(--or); font-family: Satoshi, sans-serif; font-size: 40px; line-height: 1; }
.yo-case b s { color: rgba(25, 25, 112, .35); font-size: .6em; text-decoration-thickness: 2px; }
.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-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .yo-case { grid-template-columns: 1fr; } }
@media screen and (max-width: 767px) { .yo-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .yo-serp { left: 0; right: 0; top: 14%; padding: 14px; } .yo-serp .q { font-size: 14px; } .yo-svc .yo-stage .yo-chip.c2 { display: none; } .yo-svc .yo-stage { aspect-ratio: auto; height: 420px; } }
@media (prefers-reduced-motion: reduce) { .yo-serp, .yo-serp * { animation: none !important; } .yo-serp .q span { border: 0; } .yo-serp .r1 { transform: translateY(64px); } .yo-serp .r2 { transform: translateY(128px); } .yo-serp .r3 { transform: translateY(192px); } }