/**
 * Header AL Metallerie Soudure - Version unifiée
 * 
 * BREAKPOINTS STANDARDISÉS :
 * - Mobile       : max-width: 768px
 * - Tablette     : min-width: 769px et max-width: 1024px  
 * - Desktop      : min-width: 1025px
 * - Grand écran  : min-width: 1440px
 * 
 * APPROCHE : 100% CSS Grid (pas de mélange avec Flexbox)
 * 
 * @package ALMetallerie
 * @since 2.1.0
 */

/* ============================================
   BASE - Styles communs à tous les écrans
   ============================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: transparent;
    padding: 0;
    transition: all 0.3s ease;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
    min-height: 70px;
}

/* Masquer les éléments mobiles par défaut */
.site-branding-mobile {
    display: none;
}

/* ============================================
   DESKTOP + TABLETTE (769px et plus)
   
   STRUCTURE 100% CSS GRID :
   
   .header-mega__nav (Grid 3 colonnes)
   ├── .header-mega__list--left   [1fr]  → Grid interne
   ├── .header-mega__logo-center  [auto] → Taille fixe
   └── .header-mega__list--right  [1fr]  → Grid interne
   
   ============================================ */

@media (min-width: 769px) {
    .site-header {
        padding: 0;
    }

    .header-container {
        padding: 0 24px;
        min-height: 100px;
        display: block; /* Pas de flex ici */
    }

    /* Container principal du header - BARRE NOIRE */
    .header-mega {
        width: auto; /* S'adapte au contenu */
        min-width: 50vw; /* Largeur minimum pour couvrir les boutons */
        height: 70px; /* Hauteur fixe de la barre */
        overflow: visible; /* Permet au logo de dépasser */
        position: relative; /* Pour le positionnement absolu du logo */
    }

    /* ========== GRID PRINCIPAL : 3 colonnes ========== */
    .header-mega__nav {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        width: 100%;
        height: 70px; /* Même hauteur que .header-mega */
        gap: 24px;
    }

    /* ========== MENU GAUCHE (colonne 1) ========== */
    .header-mega__list--left {
        grid-column: 1;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        justify-content: end; /* Aligne les items vers le logo */
        align-items: center;
        align-self: center; /* Centre verticalement dans la barre */
        height: 100%;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* ========== LOGO CENTRE (colonne 2) ========== */
    /* Le logo est positionné en absolu pour dépasser en haut ET en bas */
    .header-mega__logo-center {
        grid-column: 2;
        position: relative;
        width: 120px; /* Largeur approximative du logo */
    }

    .header-mega__logo-center .site-logo {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .header-mega__logo-center .site-logo-img,
    .header-mega__logo-center .custom-logo,
    .header-mega__logo-center .custom-logo img,
    .header-mega__logo-center picture img,
    .header-mega__logo-center .site-logo img {
        height: 140px !important; /* Taille fixe - logo plus grand */
        max-height: 140px !important; /* Écraser toute règle max-height */
        width: auto !important;
        max-width: none !important;
        display: block;
        transition: height 0.25s ease;
    }

    /* ========== MENU DROITE (colonne 3) ========== */
    .header-mega__list--right {
        grid-column: 3;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        justify-content: start; /* Aligne les items vers le logo */
        align-items: center;
        align-self: center; /* Centre verticalement dans la barre */
        height: 100%;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* ========== ITEMS DU MENU ========== */
    .header-mega__item {
        position: relative;
    }
    
    .header-mega__item > a {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        padding: 10px 16px;
        white-space: nowrap;
        text-decoration: none;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }
    
    /* Icône en arrière-plan - invisible par défaut */
    .header-mega__item > a::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200%;
        height: 200%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.6);
        opacity: 0;
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        z-index: 0;
        pointer-events: none;
    }
    
    /* Animation au hover : apparition + rotation + scale */
    .header-mega__item > a:hover::before {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(15deg) scale(1);
    }
    
    /* État scrolled : icône plus petite */
    .site-header.scrolled .header-mega__item > a:hover::before {
        transform: translate(-50%, -50%) rotate(15deg) scale(0.85);
    }
    
    /* Icône Accueil (maison) */
    .header-mega__list--left .header-mega__item:first-child > a::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="rgba(240,139,24,0.15)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>');
    }
    
    /* Icône Réalisations (masque de soudure) */
    .header-mega__list--left .header-mega__item:nth-child(2) > a::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="rgba(240,139,24,0.15)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"/><rect x="6" y="10" width="12" height="4" rx="1"/><path d="M2 8l2-2h16l2 2"/><path d="M8 18v2"/><path d="M16 18v2"/></svg>');
    }
    
    /* Icône Formations (graduation cap) */
    .header-mega__list--right .header-mega__item:first-child > a::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="rgba(240,139,24,0.15)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c0 2 2 3 6 3s6-1 6-3v-5"/></svg>');
    }
    
    /* Icône Contact (enveloppe) */
    .header-mega__list--right .header-mega__item:nth-child(2) > a::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="rgba(240,139,24,0.15)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 6l-10 7L2 6"/></svg>');
    }
    
    /* S'assurer que le contenu du lien reste au-dessus */
    .header-mega__item > a > * {
        position: relative;
        z-index: 1;
    }

    /* Icônes du menu */
    .header-mega__item > a .header-menu-icon {
        display: inline-block !important;
        width: 21px;
        height: 21px;
        min-width: 21px;
        min-height: 21px;
        flex-shrink: 0;
        vertical-align: middle;
        position: relative;
        top: -1px; /* Ajustement fin pour centrer avec le texte */
        transition: transform 0.3s ease;
    }

    .header-mega__item > a .header-menu-icon,
    .header-mega__item > a .header-menu-icon path,
    .header-mega__item > a .header-menu-icon polyline,
    .header-mega__item > a .header-menu-icon rect,
    .header-mega__item > a .header-menu-icon circle {
        stroke: #F08B18 !important;
        color: #F08B18 !important;
    }

    .header-mega__item > a:hover .header-menu-icon {
        transform: scale(1.1);
    }

    /* Flèche dropdown */
    .header-mega__item > a .dropdown-arrow {
        margin-left: 4px;
        transition: transform 0.3s ease;
        margin-bottom: 2px;
    }

    .header-mega__item.has-megamenu:hover > a .dropdown-arrow {
        transform: rotate(180deg);
    }

    /* ========== PLACEHOLDER (supprimé) ========== */
    .header-mega__placeholder {
        display: none;
    }

    /* ========== ÉTAT SCROLLED ========== */
    .site-header.scrolled .header-mega {
        height: 55px;
    }

    .site-header.scrolled .header-mega__nav {
        height: 55px;
    }

    .site-header.scrolled .header-mega__logo-center .site-logo-img,
    .site-header.scrolled .header-mega__logo-center .custom-logo,
    .site-header.scrolled .header-mega__logo-center .custom-logo img,
    .site-header.scrolled .header-mega__logo-center picture img,
    .site-header.scrolled .header-mega__logo-center .site-logo img {
        height: 100px !important; /* Logo réduit au scroll mais reste visible */
        max-height: 100px !important;
    }

    /* ========== MASQUER ÉLÉMENTS MOBILES ========== */
    .mobile-menu-toggle,
    .mobile-navigation,
    .site-branding-mobile {
        display: none !important;
    }
}

/* ============================================
   VERSION MOBILE
   ============================================ */

@media (max-width: 768px) {
    .site-header {
        padding: 1rem 0;
        background: transparent !important; /* Complètement transparent */
        backdrop-filter: none !important; /* Pas de blur */
        box-shadow: none !important; /* Pas d'ombre */
    }
    
    .site-header.scrolled {
        background: transparent !important; /* Transparent même au scroll */
        backdrop-filter: none !important;
        box-shadow: none !important;
    }

    .header-container {
        display: flex;
        justify-content: center; /* Centrer le logo */
        align-items: center;
        position: relative;
    }

    /* Masquer les menus desktop */
    .nav-left,
    .nav-right,
    .site-branding-center {
        display: none !important;
    }

    /* Logo mobile centré */
    .site-branding-mobile {
        display: block !important;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .site-branding-mobile .site-logo-img {
        height: 100px;
        width: auto;
        transition: height 0.3s ease;
    }
    
    /* Logo mobile au scroll */
    .site-header.scrolled .site-branding-mobile .site-logo-img {
        height: 70px;
    }

    /* Bouton burger sticky aux 3/4 de la page à droite */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        background: transparent;
        border: 2px solid white;
        border-radius: 8px;
        cursor: pointer;
        padding: 10px;
        gap: 6px;
        transition: all 0.3s ease;
        z-index: 100000 !important;
        position: fixed; /* Sticky */
        top: 75vh; /* Aux 3/4 de la hauteur de la page */
        right: 1rem; /* À droite */
    }

    .mobile-menu-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .burger-line {
        width: 100%;
        height: 3px;
        background: white;
        border-radius: 2px;
        transition: all 0.3s ease;
        display: block;
    }

    /* Animation burger ouvert */
    .mobile-menu-toggle[aria-expanded="true"] .burger-line-1 {
        transform: translateY(9px) rotate(45deg);
    }

    .mobile-menu-toggle[aria-expanded="true"] .burger-line-2 {
        opacity: 0;
    }

    .mobile-menu-toggle[aria-expanded="true"] .burger-line-3 {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* Menu mobile overlay - DÉSACTIVÉ (géré par mobile-emergency.css) */
    /* #mobile-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: linear-gradient(135deg, #F08B18 0%, #e67e0f 100%) !important;
        z-index: 99999 !important;
        display: none !important;
        overflow-y: auto !important;
    }

    #mobile-menu.is-open {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 20px !important;
    } */

    /* Menu mobile */
    .mobile-nav-menu {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 400px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .mobile-menu-item {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-menu-link {
        display: block !important;
        padding: 1rem 2rem !important;
        color: white !important;
        text-decoration: none !important;
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        border: 2px dashed white !important;
        border-radius: 12px !important;
        transition: all 0.3s ease !important;
        background: transparent !important;
    }

    .mobile-menu-link:hover,
    .mobile-menu-link:active {
        background: white !important;
        color: #F08B18 !important;
    }

    /* Bloquer le scroll quand le menu est ouvert */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }

    /* ============================================
       BOUTON RETOUR (PAGES RÉALISATIONS)
       ============================================ */

    .mobile-back-button {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.5rem 1rem !important;
        background: transparent !important;
        border: 2px solid white !important;
        border-radius: 8px !important;
        color: white !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
        transition: all 0.3s ease !important;
    }

    .mobile-back-button:active {
        background: rgba(255, 255, 255, 0.1) !important;
        transform: translateX(-3px) !important;
    }

    .mobile-back-button svg {
        width: 24px !important;
        height: 24px !important;
    }

    .site-branding-center-mobile {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .mobile-spacer {
        width: 50px !important;
    }
}

/* ============================================
   OFFSET POUR LE CONTENU (HEADER FIXE)
   ============================================ */

/* .site-main {
    margin-top: 90px;
} */

.front-page .site-main,
.home .site-main {
    margin-top: 0;
}

/* ============================================
   HEADER TRANSPARENT (PAGE D'ACCUEIL)
   ============================================ */

.front-page .site-header,
.home .site-header {
    background: transparent;
    backdrop-filter: blur(5px);
}

.front-page .site-header.scrolled,
.home .site-header.scrolled {
    background: var(--color-primary);
}

/* ============================================
   TRÈS PETITS ÉCRANS MOBILE (374px et moins)
   ============================================ */

@media (max-width: 374px) {
    .mobile-menu-link {
        font-size: 1.1rem;
        padding: 0.8rem 1.5rem;
        letter-spacing: 1px;
    }

    .mobile-menu-item {
        margin: 0.8rem 0;
    }
}

/* ============================================
   DESKTOP (1025px et plus)
   Barre plus haute, espacements plus généreux
   ============================================ */

@media (min-width: 1025px) {
    .header-container {
        padding: 0 48px;
        min-height: 120px;
    }

    .header-mega {
        height: 80px; /* Barre plus haute sur desktop */
    }

    .header-mega__nav {
        height: 80px;
        gap: 32px;
    }

    .header-mega__list--left,
    .header-mega__list--right {
        gap: 16px;
    }

    .header-mega__item > a {
        font-size: 15px;
        padding: 10px 20px;
    }

    /* Logo 140px - dépasse de la barre */
    .header-mega__logo-center .site-logo-img,
    .header-mega__logo-center .custom-logo,
    .header-mega__logo-center .custom-logo img,
    .header-mega__logo-center .site-logo img {
        height: 140px !important;
        max-height: 140px !important;
    }

    /* État scrolled */
    .site-header.scrolled .header-mega {
        height: 60px;
    }

    .site-header.scrolled .header-mega__nav {
        height: 60px;
    }

    .site-header.scrolled .header-mega__logo-center .site-logo-img,
    .site-header.scrolled .header-mega__logo-center .custom-logo,
    .site-header.scrolled .header-mega__logo-center .custom-logo img,
    .site-header.scrolled .header-mega__logo-center .site-logo img {
        height: 100px !important;
        max-height: 100px !important;
    }
}

/* ============================================
   GRANDS ÉCRANS (1440px et plus)
   Espacements maximum, valeurs FIXES (pas de clamp)
   ============================================ */

@media (min-width: 1440px) {
    .header-container {
        padding: 0 64px;
    }

    .header-mega__nav {
        gap: 48px;
    }

    .header-mega__list--left,
    .header-mega__list--right {
        gap: 24px;
    }

    .header-mega__item > a {
        font-size: 16px;
        padding: 17px 24px;
    }
}