/**
 * CHARTE GRAPHIQUE UNIFIÉE - VERSION FINALE
 * Bleu Canard : #428e9b | Orange Citrouille : #e58338
 */
:root {
    --gm-blue: #428e9b;
    --gm-orange: #e58338;
    --gm-white: #ffffff;
    --gm-bg: #f4f7f9;
    --gm-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 1. TYPOGRAPHIE ET EN-TÊTE */
.gm-header-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 20px 0;
}

.gm-menu-title { 
    color: var(--gm-blue) !important; 
    background: none !important; 
    font-size: 28px; 
    font-weight: 800;
    text-align: center;
    margin: 0;
}

/* --- ALIGNEMENT ET POSITION DU BOUTON --- */
.gm-header-action {
    display: flex;
    justify-content: center; /* Garde le titre au centre */
    align-items: center;
    position: relative;     /* Permet de positionner le bouton par rapport à cette ligne */
    margin: 20px 0;
    width: 100%;
}

/* --- LE BOUTON RETOUR PLUS PETIT ET À DROITE --- */
.btn-retour-unifie {
    background-color: var(--gm-blue) !important;
    color: var(--gm-white) !important;
    
    /* Positionnement à droite */
    position: absolute;
    right: 20px; 
    
    /* Taille du bouton plus petite */
    padding: 6px 15px; 
    
    /* Taille du texte plus petite */
    font-size: 11px;
    
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
    border: none;
}

.btn-retour-unifie:hover {
    background-color: var(--gm-orange) !important;
}

/* 3. STRUCTURE DU CONTENEUR (Utilisé par tous les menus) */
.gm-star-container {
    position: relative;
    width: 100%;
    height: 700px; 
    background: var(--gm-bg);
    border-radius: 15px;
    margin-top: 20px;
    overflow: hidden;
}

/* 4. CARTES ET ÉLÉMENTS (Styles partagés - Icônes au-dessus du texte) */
.gm-item-star, .gm-card {
    position: absolute !important;
    background: white;
    border-radius: 12px;
    
    /* Alignement vertical parfait */
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    gap: 10px; /* Espace entre l'icône et le texte */
    
    width: 190px;
    height: 110px;
    text-decoration: none;
    box-shadow: var(--gm-shadow);
    color: #334e68 !important;
    transition: all 0.2s ease;
    z-index: 2;
    padding: 10px;
    box-sizing: border-box; /* Évite que le padding ne déforme le cadre */
}

.gm-item-star:hover, .gm-card:hover {
    transform: translateY(-2px); /* Très léger soulèvement au survol */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    z-index: 10;
}

/* Style des Icônes (FontAwesome et Dashicons) */
.gm-item-star i, 
.gm-item-star i {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "dashicons" !important;
    font-weight: 900;
    font-size: 40px !important;
    margin-bottom: 12px;
    display: block;
}
.gm-item-star .dashicons, 
.gm-card i,
.gm-card .dashicons {
    font-size: 32px !important;
    height: auto !important;
    width: auto !important;
    color: #334e68;
    margin: 0 !important;
    display: block;
}

/* Style du Texte */
.gm-item-star span, .gm-label {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.2;
    display: block;
}

/* 5. COULEURS DE BORDURE (Harmonisation) */
.bg-caisse, .bg-caisse-1, .bg-vente-1, .bg-stock-1 { border-bottom: 6px solid #428e9b !important; }
.bg-vente, .bg-caisse-2, .bg-vente-2, .bg-stock-2  { border-bottom: 6px solid #e58338 !important; }
.bg-stock, .bg-caisse-3, .bg-vente-3, .bg-stock-3  { border-bottom: 6px solid #2ecc71 !important; }
.bg-stands, .bg-caisse-4, .bg-vente-4, .bg-stock-4 { border-bottom: 6px solid #9b59b6 !important; }
.bg-compta, .bg-caisse-5, .bg-vente-5, .bg-stock-5 { border-bottom: 6px solid #34495e !important; }
.bg-visu, .bg-caisse-6, .bg-vente-6, .bg-stock-6   { border-bottom: 6px solid #f1c40f !important; }
.bg-perso, .bg-caisse-7, .bg-vente-7, .bg-stock-7  { border-bottom: 6px solid #e74c3c !important; }
.bg-admin, .bg-caisse-8, .bg-vente-8, .bg-stock-8  { border-bottom: 6px solid #2f3542 !important; }
.bg-infos, .bg-caisse-9, .bg-vente-9, .bg-stock-9  { border-bottom: 6px solid #1abc9c !important; }

/* 6. POSITIONS : MENU GÉNÉRAL (CORRIGÉ) */
.pos-1 { top: 3%;    left: calc(50% - 95px); }  /* Haut - Milieu (Informations) */
.pos-8 { top: 15%;    left: 10%; }               /* Haut - Gauche (Administration) */
.pos-2 { top: 15%;    right: 10%; }              /* Haut - Droite (Espace Vente) */

/* Ligne médiane alignée à 38% pour éviter les collisions avec le haut/bas */
.pos-9 { top: 42%;   left: calc(50% - 95px); }  /* Centre - Milieu (Caisse Magasin) */
.pos-7 { top: 40%;   left: 3%; }                /* Centre - Gauche (Personnel) */
.pos-3 { top: 40%;   right: 3%; }               /* Centre - Droite (Stocks) */

.pos-6 { bottom: 15%; left: 10%; }              /* Bas - Gauche (Visualisation) */
.pos-4 { bottom: 15%; right: 10%; }             /* Bas - Droite (Stands) */
.pos-5 { bottom: 3%;  left: calc(50% - 95px); } /* Bas - Milieu (Comptabilité) */

/* --- 7. POSITIONS : MENU CAISSE (5 CADRES - STRUCTURE 1-3-1) --- */
/* 15. POSITIONS DÉDIÉES : CAISSE (MENU 1) */
.pos-caisse-1 { top: 15%; left: 15%; position: absolute; }
.pos-caisse-2 { top: 15%; right: 15%; position: absolute; }
.pos-caisse-3 { top: 45%; left: 50%; margin-left: -95px; position: absolute; } /* Centre */
.pos-caisse-4 { bottom: 15%; left: 15%; position: absolute; }
.pos-caisse-5 { bottom: 15%; right: 15%; position: absolute; }



/* 8. POSITIONS : MENU PERSONNEL (6 BOUTONS) */

/* Ligne 1 : Registre / Visualisation / Gestion */
.pos-perso-1 { top: 20%; left: 15%; }
.pos-perso-2 { top: 30%; left: 50%; margin-left: -95px; }
.pos-perso-3 { top: 20%; right: 15%; }

/* Ligne 2 : Planning / Pointage / Droits */
.pos-perso-4 { bottom: 20%; left: 15%; }
.pos-perso-5 { bottom: 30%; left: 50%; margin-left: -95px; }
.pos-perso-6 { bottom: 20%; right: 15%; }

/* Harmonisation des icônes */
.gm-card-content .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    color: #334e68;
}

/* 9. POSITIONS : ESPACE VENTE (7 BOUTONS) */

/* Ligne 1 : Haut */
.pos-vente-1 { top: 20%; left: 10%; }
.pos-vente-2 { top: 12%; left: 50%; margin-left: -95px; }
.pos-vente-3 { top: 20%; right: 10%; }

/* Ligne 2 : Milieu (Le bouton "Clients Magasin" au centre) */
.pos-vente-4 { top: 40%; left: 50%; margin-left: -95px; }

/* Ligne 3 : Bas */
.pos-vente-5 { bottom: 20%; left: 10%; }
.pos-vente-6 { bottom: 12%; left: 50%; margin-left: -95px; }
.pos-vente-7 { bottom: 20%; right: 10%; }

/* Style des icônes pour le menu Vente */
.gm-card-content .dashicons {
    font-size: 30px;
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
    color: #334e68;
}

/* 10. POSITIONS : COMPTABILITÉ (9 BOUTONS) */

/* Ligne 1 */
.pos-compta-1 { top: 10%; left: 10%; }
.pos-compta-2 { top: 5%; left: 50%; margin-left: -95px; }
.pos-compta-3 { top: 10%; right: 10%; }

/* Ligne 2 */
.pos-compta-4 { top: 40%; left: 10%; }
.pos-compta-5 { top: 40%; left: 50%; margin-left: -95px; }
.pos-compta-6 { top: 40%; right: 10%; }

/* Ligne 3 */
.pos-compta-7 { bottom: 10%; left: 10%; }
.pos-compta-8 { bottom: 5%; left: 50%; margin-left: -95px; }
.pos-compta-9 { bottom: 10%; right: 10%; }

/* 11. POSITIONS : INFORMATIONS (6 BOUTONS) */

/* Ligne 1 */
.pos-info-1 { top: 20%; left: 15%; }
.pos-info-2 { top: 20%; left: 50%; margin-left: -95px; }
.pos-info-3 { top: 20%; right: 15%; }

/* Ligne 2 */
.pos-info-4 { bottom: 20%; left: 15%; }
.pos-info-5 { bottom: 20%; left: 50%; margin-left: -95px; }
.pos-info-6 { bottom: 20%; right: 15%; }

/* 12. POSITIONS : GESTION DES STOCKS (DÉDIÉ) */

/* Ligne du haut */
.pos-stock-1 { top: 10%; left: calc(50% - 95px); } /* Stock vendeur (Haut-Milieu) */
.pos-stock-2 { top: 15%; left: 10%; }              /* Stock magasin (Haut-Gauche) */
.pos-stock-3 { top: 15%; right: 10%; }             /* Objets expirés (Haut-Droite) */

/* Ligne du milieu */
.pos-stock-4 { top: 45%; left: 5%; }               /* Retours Vendeurs (Centre-Gauche) */
.pos-stock-5 { top: 45%; left: calc(50% - 95px); } /* Liste contrats (CENTRE) */
.pos-stock-6 { top: 45%; right: 5%; }              /* Contrats signés (Centre-Droite) */

/* Ligne du bas */
.pos-stock-7 { bottom: 10%; left: calc(50% - 95px); } /* Ajouter produit (Bas-Milieu) */

/* 13. POSITIONS DÉDIÉES : GESTION DES STANDS (MENU 4) */
.pos-std-1 { top: 15%; left: 50%; margin-left: -95px; }
.pos-std-2 { top: 45%; left: 50%; margin-left: -95px; }
.pos-std-3 { bottom: 15%; left: 50%; margin-left: -95px; }
.pos-std-4 { top: 45%; left: 10%; }

/* 14. POSITIONS DÉDIÉES : IMPRESSION & VISU (MENU 6) */
.pos-visu-1 { top: 15%; left: 15%; }
.pos-visu-2 { top: 15%; left: 50%; margin-left: -95px; }
.pos-visu-3 { top: 15%; right: 15%; }
.pos-visu-4 { bottom: 15%; left: 15%; }
.pos-visu-5 { bottom: 15%; left: 50%; margin-left: -95px; }
.pos-visu-6 { bottom: 15%; right: 15%; }

/* 12. POSITIONS : ADMINISTRATION SYSTÈME (8 BOUTONS) */
.pos-1 { top: 10%; left: 10%; }
.pos-2 { top: 10%; left: 40%; }
.pos-3 { top: 10%; left: 70%; }

.pos-4 { top: 45%; left: 10%; }
/* Le centre pos-9 est souvent réservé ou vide ici */
.pos-5 { top: 45%; left: 70%; }

.pos-6 { top: 80%; left: 10%; }
.pos-7 { top: 80%; left: 40%; }
.pos-8 { top: 80%; left: 70%; }

/* Couleur spécifique pour l'administration */
.bg-admin { 
    background: linear-gradient(135deg, #607d8b 0%, #455a64 100%) !important; 
}