/* ════════════════════════════════════════════════════════════
   BACKGROUND IMAGES FOR PAGES
   ════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   HOME PAGE HERO
   ───────────────────────────────────────────────────────────── */
.home-hero-bg {
    background:
        linear-gradient(135deg, rgba(5, 24, 56, 0.66) 0%, rgba(10, 45, 86, 0.62) 50%, rgba(4, 20, 44, 0.70) 100%),
        url('../img/imagesca01.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.home-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   ABOUT PAGE
   ───────────────────────────────────────────────────────────── */
.about-page-hero {
    background:
        linear-gradient(135deg, rgba(8, 20, 48, 0.85) 0%, rgba(15, 35, 65, 0.82) 50%, rgba(5, 18, 40, 0.9) 100%),
        url('../img/imagesca02.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.about-section-alt {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(249, 250, 251, 0.98)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><defs><pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="2" fill="rgba(59,130,246,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
    background-attachment: fixed;
}

/* ─────────────────────────────────────────────────────────────
   SERVICES PAGE
   ───────────────────────────────────────────────────────────── */
.services-page-hero {
    background:
        linear-gradient(135deg, rgba(8, 20, 48, 0.85) 0%, rgba(15, 35, 65, 0.82) 50%, rgba(5, 18, 40, 0.9) 100%),
        url('../img/imagesca02.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.services-grid-bg {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.95)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><defs><pattern id="grid" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"><path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(59,130,246,0.05)" stroke-width="0.5"/></pattern></defs><rect width="60" height="60" fill="url(%23grid)"/></svg>');
}

/* ─────────────────────────────────────────────────────────────
   BLOG PAGE
   ───────────────────────────────────────────────────────────── */
.blog-page-hero {
    background:
        linear-gradient(135deg, rgba(8, 20, 48, 0.88) 0%, rgba(15, 35, 65, 0.8) 50%, rgba(5, 18, 40, 0.92) 100%),
        url('../img/imagesca02.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.blog-list-bg {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.95)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><defs><pattern id="dots-alt" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(59,130,246,0.04)"/><circle cx="30" cy="30" r="1" fill="rgba(59,130,246,0.04)"/></pattern></defs><rect width="40" height="40" fill="url(%23dots-alt)"/></svg>');
}

/* ─────────────────────────────────────────────────────────────
   BOUTIQUE / SHOP PAGE
   ───────────────────────────────────────────────────────────── */
.boutique-page-hero {
    background:
        linear-gradient(135deg, rgba(5, 20, 45, 0.88) 0%, rgba(10, 34, 61, 0.82) 40%, rgba(6, 22, 42, 0.9) 100%),
        url('../img/imagesca01.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.boutique-products-bg {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.95)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><defs><pattern id="cross" x="0" y="0" width="80" height="80" patternUnits="userSpaceOnUse"><line x1="40" y1="0" x2="40" y2="80" stroke="rgba(59,130,246,0.03)" stroke-width="1"/><line x1="0" y1="40" x2="80" y2="40" stroke="rgba(59,130,246,0.03)" stroke-width="1"/></pattern></defs><rect width="80" height="80" fill="url(%23cross)"/></svg>');
}

/* ─────────────────────────────────────────────────────────────
   REALIZATIONS / PORTFOLIO PAGE
   ───────────────────────────────────────────────────────────── */
.realizations-page-hero {
    background:
        linear-gradient(135deg, rgba(8, 20, 48, 0.9) 0%, rgba(15, 35, 65, 0.85) 50%, rgba(5, 18, 40, 0.93) 100%),
        url('../img/imagesca01.webp') center/cover no-repeat;
    background-attachment: fixed;
}

/* ─────────────────────────────────────────────────────────────
   CONTACT PAGE
   ───────────────────────────────────────────────────────────── */
.contact-page-hero {
    background:
        linear-gradient(135deg, rgba(10, 28, 56, 0.85) 0%, rgba(18, 40, 71, 0.8) 50%, rgba(8, 26, 50, 0.88) 100%),
        url('../img/imagesca02.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.contact-form-bg {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.98)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><defs><pattern id="wave" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M0,50 Q25,40 50,50 T100,50" fill="none" stroke="rgba(59,130,246,0.04)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23wave)"/></svg>');
}

/* ─────────────────────────────────────────────────────────────
   TEAM PAGE
   ───────────────────────────────────────────────────────────── */
.team-page-hero {
    background:
        linear-gradient(135deg, rgba(10, 30, 61, 0.88) 0%, rgba(18, 42, 72, 0.84) 50%, rgba(8, 28, 54, 0.92) 100%),
        url('../img/imagesca02.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.team-members-bg {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.95)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><defs><pattern id="hexagon" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="15" fill="none" stroke="rgba(59,130,246,0.04)" stroke-width="1"/></pattern></defs><rect width="50" height="50" fill="url(%23hexagon)"/></svg>');
}

/* ─────────────────────────────────────────────────────────────
   FAQ PAGE
   ───────────────────────────────────────────────────────────── */
.faq-page-hero {
    background:
        linear-gradient(135deg, rgba(11, 29, 58, 0.92) 0%, rgba(19, 45, 79, 0.88) 40%, rgba(15, 40, 66, 0.94) 100%),
        url('../img/imagesca02.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.faq-content-bg {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.96)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><defs><pattern id="dots-grid" x="0" y="0" width="120" height="120" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(59,130,246,0.03)"/><circle cx="70" cy="70" r="1" fill="rgba(59,130,246,0.03)"/></pattern></defs><rect width="120" height="120" fill="url(%23dots-grid)"/></svg>');
}

/* ─────────────────────────────────────────────────────────────
   GENERIC PAGE BACKGROUNDS
   ───────────────────────────────────────────────────────────── */
.page-section-dark {
    background:
        linear-gradient(135deg, rgba(8, 20, 48, 0.85) 0%, rgba(15, 35, 65, 0.82) 50%, rgba(5, 18, 40, 0.9) 100%),
        url('../img/imagesca02.webp') center/cover no-repeat;
    background-attachment: fixed;
    color: #fff;
}

.page-section-light {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.95)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><defs><pattern id="subtle" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="15" height="15" fill="rgba(59,130,246,0.02)"/></pattern></defs><rect width="30" height="30" fill="url(%23subtle)"/></svg>');
    background-attachment: fixed;
}

.page-section-accent {
    background:
        linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(96, 165, 250, 0.05) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><defs><pattern id="accent-dots" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="1" fill="rgba(59,130,246,0.08)"/><circle cx="45" cy="45" r="1" fill="rgba(59,130,246,0.08)"/></pattern></defs><rect width="60" height="60" fill="url(%23accent-dots)"/></svg>');
    background-attachment: fixed;
}

/* ─────────────────────────────────────────────────────────────
   OVERLAY & UTILITY CLASSES
   ───────────────────────────────────────────────────────────── */
.bg-overlay-dark {
    background-color: rgba(0, 0, 0, 0.4);
}

.bg-overlay-medium {
    background-color: rgba(0, 0, 0, 0.2);
}

.bg-overlay-light {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ─────────────────────────────────────────────────────────────
   PARALLAX EFFECT
   ───────────────────────────────────────────────────────────── */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .parallax-bg {
        background-attachment: scroll;
    }

    /* Évite le défilement latéral causé par les ornements et grilles desktop. */
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    main {
        min-width: 0;
        overflow-x: hidden;
    }

    main img, main video, main svg {
        max-width: 100%;
    }

    main table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .home-hero-bg h1 {
        font-size: clamp(2.35rem, 9vw, 3.1rem) !important;
        line-height: 1.08 !important;
    }

    .home-hero-bg a {
        width: 100%;
        min-height: 3.25rem;
    }

    .site-footer-content > div {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Drawer mobile : surface opaque et contraste élevé. */
    #mobile-drawer,
    .mobile-drawer {
        position: fixed !important;
        inset: 0 0 0 auto !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        background: #102a43 !important;
        background-image: none !important;
        color: #ffffff !important;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: -16px 0 42px rgba(10, 30, 61, 0.22) !important;
    }

    #mobile-drawer > div {
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    #mobile-drawer > div > a,
    #mobile-drawer > div > button {
        color: #ffffff !important;
    }

    #mobile-drawer > div img {
        filter: brightness(0) invert(1) !important;
    }

    #mobile-drawer nav a,
    #mobile-drawer nav button {
        color: #ffffff !important;
    }

    #mobile-drawer nav a:hover,
    #mobile-drawer nav button:hover {
        background-color: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
    }

    #mobile-drawer nav a.bg-blue-600 {
        background-color: #2e86de !important;
        color: #ffffff !important;
        box-shadow: 0 6px 16px rgba(46, 134, 222, 0.25);
    }

    #mobile-drawer nav a.mt-5 {
        background: #1e3a5f !important;
        color: #ffffff !important;
    }

    #mobile-drawer [class*="border-white"] {
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    #mobile-drawer #mobile-drawer-close {
        color: #d9e8f7 !important;
    }
}