/* ============================================
   Socle commun — même rendu que index.html
   ============================================ */

html {
    --nav-height: 96px;
    --nav-logo-height: 76px;
}

:root {
    color-scheme: dark;
    --nav-height: 96px;
    --nav-logo-height: 76px;
}

body {
    position: relative;
    overflow-x: hidden;
    min-width: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

section,
footer,
#footer-container,
main,
header,
.page-content {
    position: relative;
    z-index: 1;
}

body.light-mode {
    background: transparent !important;
}

body.light-mode::before,
body.light-mode::after {
    display: none !important;
}

/* ── Mobile : confort tactile & lisibilité globale ── */
@media (max-width: 767px) {
    .page-content {
        overflow-x: hidden;
    }

    .hero,
    .hero-section,
    section.pt-20 {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }

    .hero:not(.hero-section) {
        padding-top: calc(var(--nav-height) + 1rem) !important;
    }

    main,
    .main-wrap,
    .services-wrap,
    .projects-grid,
    .hosts-grid {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    a,
    button,
    [role="button"] {
        -webkit-tap-highlight-color: rgba(59, 130, 246, 0.12);
    }
}

body.nav-menu-open {
    overflow: hidden;
    touch-action: none;
}