/* Fond tech minimal — quelques pictos gris, pas de grille dense */
.tech-surface {
    position: relative;
    background-color: #f8fafc;
    min-height: 100vh;
}

.tech-surface::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.25'%3E%3Cpath d='M8 6h13M8 12h13M8 18h9M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.25'%3E%3Cpath d='M4 19V5M4 19h16M8 15l3-3 3 3 4-6'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.25'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.25'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.25'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m10 0h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.25'%3E%3Cpath d='M16 18l6-6-6-6M8 6l-6 6 6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 28px 28px;
    background-position:
        6% 14%,
        92% 18%,
        8% 78%,
        88% 72%,
        14% 48%,
        86% 44%;
}

.tech-surface > * {
    position: relative;
    z-index: 1;
}

/* URL visible sur captures d’écran */
.site-brand-url {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.site-brand-url a {
    color: #2563eb;
    text-decoration: none;
}

.site-brand-url a:hover {
    text-decoration: underline;
}

.site-brand-watermark {
    position: fixed;
    bottom: 0.65rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #64748b;
    text-decoration: none;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.site-brand-watermark:hover {
    color: #111827;
}

@media (max-width: 640px) {
    .tech-surface::before {
        background-position:
            4% 10%,
            94% 12%,
            6% 85%,
            90% 80%;
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.25'%3E%3Cpath d='M8 6h13M8 12h13M8 18h9M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.25'%3E%3Cpath d='M4 19V5M4 19h16M8 15l3-3 3 3 4-6'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.25'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.25'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    }
}