/* Hero animation for service and city pages: a mock website assembles itself, block
   by block, on a laptop then on a phone. Pure CSS, loops every 9 s. */
.hero-devices { position: relative; width: 100%; max-width: 520px; justify-self: end; aspect-ratio: 1.18; }
.hero-devices::before {
    content: ""; position: absolute; inset: 8% 4% 4% 8%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(34, 224, 90, 0.32), rgba(34, 224, 90, 0) 75%); filter: blur(10px);
}
.dev-laptop { position: absolute; left: 0; top: 8%; width: 86%; animation: dev-float 7s ease-in-out infinite; }
.dev-lid {
    position: relative; padding: 2.6% 2.6% 3.2%; border-radius: 14px 14px 4px 4px;
    background: linear-gradient(160deg, #2b302d, #121614);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px rgba(0, 0, 0, .55);
}
.dev-base {
    position: relative; height: 0; padding-bottom: 4.2%; margin: 0 -7%; border-radius: 0 0 16px 16px;
    background: linear-gradient(180deg, #3a403c, #1a1e1b); box-shadow: 0 18px 30px rgba(0, 0, 0, .5);
}
.dev-base::after { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: 30%; border-radius: 0 0 8px 8px; background: #101311; }
.dev-phone {
    position: absolute; right: 0; bottom: 4%; width: 27%; padding: 2.4% 1.6%; border-radius: 22px;
    background: linear-gradient(160deg, #2b302d, #121614);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 50px rgba(0, 0, 0, .6);
    animation: dev-float 7s ease-in-out -3.5s infinite;
}
.dev-phone::before { content: ""; position: absolute; top: 3.2%; left: 50%; width: 26%; height: 2.2%; transform: translateX(-50%); border-radius: 9px; background: #0c0f0d; z-index: 2; }
.dev-screen { position: relative; overflow: hidden; background: #f3f6f4; border-radius: 4px; display: flex; flex-direction: column; gap: 5%; padding: 5% 6%; }
.dev-laptop .dev-screen { aspect-ratio: 16 / 10; }
.dev-phone .dev-screen { aspect-ratio: 9 / 19; border-radius: 15px; gap: 4%; padding: 16% 9% 9%; }
.dev-screen > * { --d: calc(var(--i) * .22s); opacity: 0; animation: dev-build 9s var(--d) cubic-bezier(.2, .8, .2, 1) infinite both; }
.dev-phone .dev-screen > * { --d: calc(1.2s + var(--i) * .22s); }
@keyframes dev-build {
    0% { opacity: 0; transform: translateY(10px) scale(.96); }
    7% { opacity: 1; transform: none; }
    80% { opacity: 1; transform: none; }
    88%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes dev-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* mock website blocks */
.mk-nav { display: flex; align-items: center; gap: 6%; }
.mk-logo { width: 9%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #0f7a3c, #8dc63f); flex: none; }
.mk-links { flex: 1; display: flex; gap: 6%; }
.mk-links i { height: 5px; flex: 1; max-width: 14%; border-radius: 3px; background: #c9d3cd; }
.mk-btn { height: 12px; width: 16%; margin-left: auto; border-radius: 99px; background: #22e05a; flex: none; }
.mk-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 6%; align-items: center; }
.mk-text { display: grid; gap: 7px; }
.mk-line { height: 9px; border-radius: 4px; background: #1d2a22; }
.mk-line.w60 { width: 60%; }
.mk-line.w80 { width: 80%; }
.mk-line.thin { height: 5px; background: #b3bfb8; }
.mk-cta { width: 42%; height: 12px; margin-top: 4px; border-radius: 99px; background: #22e05a; box-shadow: 0 4px 12px rgba(34, 224, 90, .35); }
.mk-img { aspect-ratio: 4 / 3; border-radius: 6px; background: radial-gradient(circle at 70% 30%, #d9f99d 0 12%, transparent 13%), linear-gradient(150deg, #0f7a3c, #22e05a 60%, #b7ef8f); }
.mk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; }
.mk-cards b { position: relative; aspect-ratio: 1.25; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(15, 40, 25, .12); }
.mk-cards b::after { content: ""; position: absolute; left: 14%; top: 18%; width: 22%; aspect-ratio: 1; border-radius: 4px; background: rgba(34, 224, 90, .35); }
.mk-cards b::before { content: ""; position: absolute; left: 14%; right: 18%; bottom: 20%; height: 4px; border-radius: 2px; background: #c9d3cd; }
.dev-phone .mk-logo { width: 16%; }
.dev-phone .mk-btn { width: 26%; height: 8px; }
.dev-phone .mk-line { height: 6px; }
.dev-phone .mk-line.thin { height: 4px; }
.dev-phone .mk-text { gap: 5px; }
.dev-phone .mk-cta { width: 55%; height: 9px; }
.dev-phone .mk-cards { grid-template-columns: 1fr; gap: 6px; }
.dev-phone .mk-cards b { aspect-ratio: 3.4; }

/* pointer that "clicks" while the page builds */
.dev-cursor {
    position: absolute; z-index: 3; width: 12px; height: 12px; border-radius: 50%;
    background: rgba(34, 224, 90, .9); box-shadow: 0 0 0 5px rgba(34, 224, 90, .25);
    left: 20%; top: 30%; animation: dev-cursor 9s ease-in-out infinite;
}
@keyframes dev-cursor {
    0% { left: 20%; top: 30%; opacity: 0; }
    8% { opacity: 1; }
    30% { left: 34%; top: 62%; transform: scale(1); }
    34% { transform: scale(.7); }
    38% { transform: scale(1); }
    60% { left: 70%; top: 18%; }
    80% { opacity: 1; }
    88%, 100% { left: 70%; top: 18%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dev-screen > *, .dev-laptop, .dev-phone { animation: none; opacity: 1; }
    .dev-cursor { display: none; }
}
@media (max-width: 900px) {
    .hero-devices { width: 86%; max-width: 330px; justify-self: center; order: -1; margin-bottom: 4px; }
    .mk-text { gap: 4px; }
    .mk-line { height: 6px; }
    .mk-line.thin { height: 4px; }
    .mk-btn, .mk-cta { height: 8px; }
    .dev-phone .mk-line { height: 4px; }
    .dev-phone .mk-line.thin { height: 3px; }
    .dev-phone .mk-text { gap: 3px; }
    .dev-phone .mk-btn, .dev-phone .mk-cta { height: 6px; }
}

/* real 3D version (js/devices3d.js) replaces the CSS mock-up once WebGL is ready */
.dev3d-canvas { position: absolute; left: -6%; top: -8%; width: 112%; height: 116%; display: block; }
.hero-devices.is-3d .dev-laptop, .hero-devices.is-3d .dev-phone { display: none; }

/* Réalisations: text on top, wide 3D showcase below */
.hero.stack .wrap { grid-template-columns: 1fr; gap: 10px; }
.hero.stack .hero-devices { justify-self: center; order: 0; width: 100%; max-width: 1000px; aspect-ratio: 1.9; margin: 0; }
@media (max-width: 900px) { .hero.stack .hero-devices { aspect-ratio: 1.45; max-width: 520px; } }