/* ==========================================================================
   MENU RUCHE HEXAGONAL (.hex-menu)
   ==========================================================================
   Mode fermé : une seule alvéole visible (.hex-main, le bouton Codex).
   Mode ouvert (classe .open sur .hex-menu) : les alvéoles secondaires
   (.hex-menu-expanded .hex-btn) se déploient tout droit vers le bas, en
   grille de type nid d'abeille (rangées décalées), avec rotation 3D
   (rotateY) + apparition progressive rangée par rangée.

   Ce fichier doit être chargé APRÈS styles/header_styles.css : certaines
   règles ci-dessous ont la même spécificité que des règles existantes sur
   .hex-btn / .navbar-nav et doivent gagner par ordre de source.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Conteneur global : active la perspective 3D pour les enfants
   -------------------------------------------------------------------------- */
.hex-menu {
    position: relative;
    perspective: 900px; /* profondeur de la scène 3D pour l'effet rotateY */
    width: auto;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto; /* conserve l'alignement à droite (ex ul.navbar-nav.ml-auto) */
}

/* Fond discret derrière la ruche déployée, pour la détacher visuellement du
   contenu de la page en dessous. Ancré en haut sur le bouton et étiré vers
   le bas puisque la grille descend tout droit sous l'alvéole principale. */
@media (min-width: 768px) {
    .hex-menu::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 280px;
        height: 320px;
        transform-origin: top center;
        transform: translate(-50%, -26px) scaleY(0);
        border-radius: 32px;
        background: radial-gradient(ellipse at 50% 0%, rgba(10, 34, 58, 0.92) 0%, rgba(10, 34, 58, 0.55) 55%, transparent 80%);
        opacity: 0;
        pointer-events: none;
        z-index: 5;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }
    .hex-menu.open::before {
        transform: translate(-50%, -26px) scaleY(1);
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   2) Alvéole principale : toujours visible, déclenche l'ouverture/fermeture
   -------------------------------------------------------------------------- */
.hex-main {
    position: relative;
    z-index: 20; /* reste au-dessus des alvéoles secondaires déployées */
    cursor: pointer;
    transition: transform 0.25s ease;
}

.hex-main:hover {
    transform: scale(1.06);
}

.hex-main .nav-link {
    display: block;
}

/* .hex-main est sorti de .navbar-nav : il faut donc lui redonner explicitement
   la même taille d'icône que les autres boutons du header (sinon l'image
   s'affiche à sa taille native, bien trop grande). */
.hex-main img {
    height: 130px !important;
    width: auto !important;
    object-fit: contain;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* Petit clin d'œil de rotation sur l'alvéole principale quand la ruche est ouverte */
.hex-menu.open .hex-main {
    transform: rotate(8deg);
}

/* --------------------------------------------------------------------------
   3) et 4) La ruche circulaire (positionnement + animation 3D) est réservée
   au desktop/tablette (>= 768px). En dessous, responsive.css bascule déjà
   .hex-menu sur un menu plein écran empilé verticalement : on ne touche pas
   à cette mise en page mobile existante (voir §5 plus bas).
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

    /* 3) Conteneur des alvéoles secondaires : positionné pile au centre de
       .hex-menu ; chaque alvéole (li.hex-btn) se place ensuite en absolu
       par rapport à ce même point (voir §4 : grille en nid d'abeille). */
    .hex-menu .hex-menu-expanded {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        list-style: none;
        margin: 0;
        padding: 0;
        z-index: 10; /* au-dessus du fond circulaire (::before, z-index:5) */
        pointer-events: none; /* aucune interaction tant que la ruche est fermée */
    }

    .hex-menu.open .hex-menu-expanded {
        pointer-events: auto;
    }

    /* Les alvéoles secondaires sont plus petites que l'alvéole centrale :
       c'est ce qui permet à la grille de rester compacte et "collée",
       façon vraie ruche. Spécificité (3 classes) volontairement plus élevée
       que .navbar-nav .nav-link img et .hex-btn img pour gagner face à
       ces règles existantes. */
    .hex-menu-expanded .hex-btn img {
        height: 80px !important;
        width: auto !important;
    }

    /* 4) Chaque alvéole secondaire : position en grille (nid d'abeille) qui
       descend tout droit sous l'alvéole principale, + animation d'ouverture.
       --hex-row : rangée (1 = juste sous le bouton, 2, 3, ... vers le bas)
       --hex-col : colonne (0 = centré ; les rangées paires sont décalées
                   d'un demi-pas pour imbriquer les hexagones comme une ruche)
       Ces deux valeurs sont fixées par alvéole dans le HTML (header.php). */
    .hex-menu-expanded .hex-btn {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0 !important; /* neutralise la marge horizontale du menu en ligne */

        --hex-col-unit: 88px; /* distance horizontale entre deux alvéoles d'une même rangée */
        --hex-row-unit: 74px; /* distance verticale entre deux rangées (tassée comme une ruche) */

        /* Position "au repos" (ouverte) de cette alvéole dans la grille */
        --hex-x: calc(var(--hex-col, 0) * var(--hex-col-unit));
        --hex-y: calc(var(--hex-row, 1) * var(--hex-row-unit));

        /* État FERMÉ : repliée au centre (sur le bouton), invisible,
           vue "de profil" (rotateY 90deg) */
        transform:
            translate(-50%, -50%)
            scale(0)
            rotateY(90deg);
        opacity: 0;

        transition:
            transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
            opacity 0.4s ease;
        transition-delay: 0s;
    }

    /* État OUVERT : chaque alvéole rejoint sa case dans la grille, avec
       une rotation 3D complète au passage */
    .hex-menu.open .hex-menu-expanded .hex-btn {
        transform:
            translate(calc(-50% + var(--hex-x)), calc(-50% + var(--hex-y)))
            scale(1)
            rotateY(360deg);
        opacity: 1;
        /* Apparition progressive, rangée par rangée */
        transition-delay: calc(var(--hex-row, 1) * 0.08s);
    }

    /* La fermeture est immédiate et groupée (pas de décalage progressif) */
    .hex-menu:not(.open) .hex-menu-expanded .hex-btn {
        transition-delay: 0s;
    }
}

/* Grille et icônes un peu plus resserrées sur tablette */
@media (min-width: 768px) and (max-width: 991px) {
    .hex-menu-expanded .hex-btn {
        --hex-col-unit: 68px;
        --hex-row-unit: 57px;
    }
    .hex-menu-expanded .hex-btn img {
        height: 60px !important;
    }
    .hex-main img {
        height: 100px !important;
    }
    .hex-menu::before {
        width: 260px;
        height: 260px;
    }
}

/* --------------------------------------------------------------------------
   5) Mobile (< 768px) : on désactive complètement la mécanique circulaire.
   .hex-menu-expanded redevient une liste normale, toujours visible, qui
   s'intègre dans le menu plein écran déjà géré par responsive.css.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .hex-menu {
        height: auto;
        display: block;
    }

    .hex-main img {
        height: 100px !important;
    }

    .hex-menu-expanded,
    .hex-menu-expanded .hex-btn {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: none !important;
    }
}