/* Regles communes a toutes les pages de service animees (menu, FAQ, autres services, appel final). Extraites de service-motion.css, qui ne garde que le hero et les scenes. */
/* ====================== PAGES DE SERVICE ANIMEES ======================
   Impression, modelisation, reproduction, prototypage. Meme systeme que l'accueil, A propos et le guide des
   matieres : hero encre plein ecran (structure .intro commune), sections claires a filets fins, libelles en
   monospace, conteneurs a 6 px, memes courbes de mouvement, rejouees a l'aller ET au retour.
   Les scenes sont dessinees uniquement a partir de --p0..--p3 (avancement des phases, ecrit par
   service-motion.js) : sans JavaScript, ces variables valent 1 et l'etat final s'affiche. */
body.home-page.service-page.svm-page main {
    overflow: visible;
    overflow-x: clip;
}
body.svm-page main .container {
    width: min(100% - 64px, 1216px);
    max-width: 1280px;
    padding: 0;
}
/* ---------- FAQ et appel final sur ces pages ---------- */
body.svm-page .faq { padding-top: 112px; }
@media (max-width: 560px) {
body.svm-page main .container { width: calc(100% - 48px); }
}
/* ---------- tablette ---------- */
/* ---------- mouvement reduit : tout est pose, rien ne s'epingle ---------- */
/* ====================== fin de page des pages de services animees : « Un autre besoin ? » et appel final sombres ======================
   (meme fond que le pied de page ; les cartes seules s'animent, aucun fondu depuis le fond clair du site) */
/* ---------- fin de page : "Un autre besoin ?" et appel final prolongent la sequence (meme fond, memes filets) ---------- */
html body.svm-page .svc-related {
    background: #0b1220 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html body.svm-page .svc-related .section-kicker { color: rgba(255, 255, 255, 0.6) !important; }
html body.svm-page .svc-related .section-kicker::before { background: #3ab8ff !important; }
html body.svm-page .svc-related .svc-section-head h2 { color: #ffffff !important; }
html body.svm-page .svc-related .svc-related-list a {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    color: #ffffff !important;
}
html body.svm-page .svc-related .svc-related-list a:hover,
html body.svm-page .svc-related .svc-related-list a:focus-visible {
    background: rgba(36, 92, 255, 0.14) !important;
    border-color: rgba(127, 211, 255, 0.5) !important;
    box-shadow: 0 18px 40px -22px rgba(36, 92, 255, 0.7) !important;
}
html body.svm-page .svc-related .svc-related-list strong { color: #ffffff !important; }
html body.svm-page .svc-related .svc-related-list .svc-rel-hint { color: rgba(255, 255, 255, 0.62) !important; }
html body.svm-page .svc-related .svc-rel-ico { background: rgba(36, 92, 255, 0.18) !important; border-color: rgba(127, 211, 255, 0.35) !important; color: #7fd3ff !important; }
html body.svm-page .svc-related .svc-related-list a:hover .svc-rel-ico { background: #245cff !important; color: #ffffff !important; }
html body.svm-page .svc-related .svc-rel-go { color: #7fd3ff !important; }
/* appel final : bande sombre, bloc en verre bleute, couches imprimees en bas */
html body.svm-page .cta-final {
    position: relative;
    overflow: hidden;
    background: #0b1220 !important;
    padding-bottom: 96px !important;
}
html body.svm-page .cta-final .container.cta-inner {
    border: 1px solid rgba(127, 211, 255, 0.28) !important;
    background:
        radial-gradient(ellipse 60% 90% at 88% 0%, rgba(36, 92, 255, 0.35), transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 44px 44px,
        #0e1a33 !important;
    box-shadow: 0 30px 80px -40px rgba(36, 92, 255, 0.7) !important;
}
html body.svm-page .cta-final::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: repeating-linear-gradient(180deg, rgba(58, 184, 255, 0.22) 0 1px, transparent 1px 7px);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000);
    mask-image: linear-gradient(180deg, transparent, #000);
    pointer-events: none;
}
/* ---------- "Un autre besoin ?" : cartouches numerotees, grille pleine (3 + 2), projecteur au pointeur ---------- */
html body.svm-page .svc-related .svc-related-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    counter-reset: svc;
}
html body.svm-page .svc-related .svc-related-list li { grid-column: span 2; counter-increment: svc; }
html body.svm-page .svc-related .svc-related-list li:nth-child(n + 4) { grid-column: span 3; }
html body.svm-page .svc-related .svc-related-list a {
    grid-template-columns: 56px minmax(0, 1fr) 40px;
    gap: 18px;
    min-height: 124px;
    padding: 24px 24px 24px 22px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}
/* projecteur qui suit le pointeur */
html body.svm-page .svc-related .svc-related-list a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(260px circle at var(--px, 50%) var(--py, 50%), rgba(58, 184, 255, 0.18), transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
html body.svm-page .svc-related .svc-related-list a:hover::after { opacity: 1; }
html body.svm-page .svc-related .svc-related-list a:hover,
html body.svm-page .svc-related .svc-related-list a:focus-visible { transform: translate3d(0, -4px, 0); }
/* numero du service, au-dessus du titre */
html body.svm-page .svc-related .svc-rel-body::before {
    content: counter(svc, decimal-leading-zero);
    color: #3ab8ff;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}
html body.svm-page .svc-related .svc-related-list strong { font-size: 1.12rem; }
/* fleche dans un rond qui se remplit au survol */
html body.svm-page .svc-related .svc-rel-go {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(127, 211, 255, 0.35);
    border-radius: 50%;
    font-size: 1rem;
    opacity: 1;
    transform: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
html body.svm-page .svc-related .svc-related-list a:hover .svc-rel-go,
html body.svm-page .svc-related .svc-related-list a:focus-visible .svc-rel-go {
    background: #245cff;
    border-color: #245cff;
    color: #ffffff !important;
    transform: translate3d(4px, 0, 0);
}
/* filet sous le titre : il se trace quand la section arrive */
html body.svm-page .svc-related .svc-section-head h2::after {
    content: "";
    display: block;
    width: 96px;
    height: 2px;
    margin-top: 18px;
    background: linear-gradient(90deg, #3ab8ff, transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
html body.svm-page .svc-related.is-visible .svc-section-head h2::after { transform: scaleX(1); }
@media (max-width: 1080px) {
html body.svm-page .svc-related .svc-related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body.svm-page .svc-related .svc-related-list li,
    html body.svm-page .svc-related .svc-related-list li:nth-child(n + 4) { grid-column: auto; }
html body.svm-page .svc-related .svc-related-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
html body.svm-page .svc-related .svc-related-list { grid-template-columns: minmax(0, 1fr); }
html body.svm-page .svc-related .svc-related-list li:last-child:nth-child(odd) { grid-column: auto; }
html body.svm-page .svc-related .svc-related-list a { min-height: 0; padding: 18px; grid-template-columns: 48px minmax(0, 1fr) 36px; gap: 14px; }
html body.svm-page .svc-related .svc-rel-go { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
html body.svm-page .svc-related .svc-related-list a,
    html body.svm-page .svc-related .svc-rel-go,
    html body.svm-page .svc-related .svc-section-head h2::after { transition: none !important; }
html body.svm-page .svc-related .svc-section-head h2::after { transform: none; }
}
/* anti-flash : ces blocs ne s'estompent pas depuis le fond clair du site (leur fond sombre est deja la) */
html body.svm-page .svc-related.reveal-on-scroll,
html body.svm-page .cta-final.reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
}