/* ============================================================
   HEADER-TOP — Noir profond huilé + grain de sable fin (DESKTOP)
   Appliqué sur : index.php, pages/produits.php, pages/devis.php,
                  suivi_commande.php
   ============================================================ */
@media (min-width: 769px) {

    .header-top {
        position: relative;
        overflow: hidden;
        background:
            /* reflet huilé en haut à gauche */
            radial-gradient(ellipse 140% 140% at 15% -40%, rgba(255,255,255,0.07), transparent 55%),
            /* bande de sheen diagonale, façon surface huilée */
            linear-gradient(115deg,
                rgba(255,255,255,0.05) 0%,
                rgba(255,255,255,0) 20%,
                rgba(255,255,255,0) 55%,
                rgba(255,255,255,0.035) 72%,
                rgba(255,255,255,0) 88%
            ),
            /* noir profond en dégradé subtil */
            linear-gradient(180deg, #161513 0%, #0c0b0a 55%, #050504 100%) !important;
        box-shadow: inset 0 -1px 0 rgba(255,255,255,0.04);
    }

    /* Grain de sable fin, élégant — texture de bruit subtile en overlay */
    .header-top::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.32;
        mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 160px 160px;
    }

    .header-top .container {
        position: relative;
        z-index: 1;
    }

    /* NAVBAR — même couleur que le footer (var(--dark), uni) */
    header nav {
        background: var(--dark) !important;
    }

    /* ── Garder le même rendu quand le header "décolle" au scroll
         (header-float-effect.css redéfinit .header-top et nav avec
         plus de spécificité : on les réaffirme ici, chargé après lui) ── */
    body header.floating .header-top {
        background:
            radial-gradient(ellipse 140% 140% at 15% -40%, rgba(255,255,255,0.07), transparent 55%),
            linear-gradient(115deg,
                rgba(255,255,255,0.05) 0%,
                rgba(255,255,255,0) 20%,
                rgba(255,255,255,0) 55%,
                rgba(255,255,255,0.035) 72%,
                rgba(255,255,255,0) 88%
            ),
            linear-gradient(180deg, #161513 0%, #0c0b0a 55%, #050504 100%) !important;
    }

    body header.floating nav {
        background: var(--dark) !important;
    }
}