/* ==========================================================================
   MG CONSULTING FORMATION — Brand Design System
   Palette extraite du logo : Or olive / Bleu marine / Blanc chaud
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — Variables CSS centralisées
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs primaires (or olive du logo) */
  --mg-primary:         #9a8b52;
  --mg-primary-dark:    #6b6038;
  --mg-primary-darker:  #4a4226;
  --mg-primary-light:   #c4b46e;
  --mg-primary-xlight:  #f3edd5;

  /* Couleurs secondaires (bleu marine / accent) */
  --mg-secondary:       #1c2560;
  --mg-secondary-dark:  #101840;
  --mg-secondary-light: #3a4598;

  /* Accent chaud */
  --mg-accent:          #d4a843;
  --mg-accent-light:    #e8c96e;

  /* Neutres */
  --mg-dark:            #1a180e;
  --mg-gray-dark:       #3d3c32;
  --mg-gray:            #7a7a6a;
  --mg-gray-light:      #cdc9b0;
  --mg-gray-xlight:     #eeecdf;
  --mg-bg-warm:         #faf9f3;
  --mg-bg-gray:         #f4f3ec;
  --mg-white:           #ffffff;

  /* Texte */
  --mg-text:            #2d2b20;
  --mg-text-light:      #6b6955;

  /* Dégradés */
  --mg-grad-primary:    linear-gradient(135deg, #b09e60 0%, #6b6038 100%);
  --mg-grad-primary-h:  linear-gradient(135deg, #d4a843 0%, #9a8b52 100%);
  --mg-grad-nav:        linear-gradient(90deg, #574f2d 0%, #9a8b52 50%, #574f2d 100%);
  --mg-grad-topbar:     linear-gradient(90deg, #1a180e 0%, #2a2618 100%);
  --mg-grad-hero:       linear-gradient(135deg, rgba(26,24,14,0.88) 0%, rgba(107,96,56,0.72) 100%);

  /* Ombres */
  --mg-shadow-xs:       0 1px 4px rgba(107,96,56,0.12);
  --mg-shadow-sm:       0 2px 10px rgba(107,96,56,0.18);
  --mg-shadow-md:       0 5px 22px rgba(107,96,56,0.26);
  --mg-shadow-lg:       0 10px 42px rgba(107,96,56,0.34);
  --mg-shadow-inset:    inset 0 1px 2px rgba(0,0,0,0.08);

  /* Transitions */
  --mg-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --mg-trans:           all 0.28s var(--mg-ease);
  --mg-trans-fast:      all 0.15s ease;

  /* Rayons */
  --mg-r-xs:            4px;
  --mg-r-sm:            8px;
  --mg-r-md:            14px;
  --mg-r-lg:            22px;
  --mg-r-pill:          999px;
}

/* --------------------------------------------------------------------------
   2. BASE TYPOGRAPHIE
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

body {
  font-family: 'Poppins', 'Roboto', sans-serif !important;
  color: var(--mg-text);
  background: var(--mg-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', 'Roboto', sans-serif !important;
}

a { transition: var(--mg-trans); }
a:focus { outline: none; }

/* FA4 icon fix — FA5 CDN overrides .fa to use "Font Awesome 5 Free" which
   lacks brand glyphs (Facebook, Instagram, LinkedIn…). Restore FontAwesome
   (FA4 local) for elements using the legacy .fa prefix only. Elements using
   the FA5 .fab/.fas/.far prefixes (e.g. fab fa-whatsapp) are NOT affected. */
i.fa {
  font-family: 'FontAwesome' !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   3. BARRE SUPÉRIEURE
   -------------------------------------------------------------------------- */

/* Animations d'entrée */
@keyframes mg-slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes mg-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mg-slideInLeft {
  from { transform: translateX(-30px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes mg-slideInRight {
  from { transform: translateX(30px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes mg-navItemIn {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes mg-underlineGrow {
  from { width: 0; }
  to   { width: 65%; }
}

.top {
  background: var(--mg-grad-topbar) !important;
  border-bottom: 1px solid rgba(154,139,82,0.28) !important;
  height: auto !important;        /* override hauteur fixe 40px */
  padding: 11px 0 !important;     /* plus d'espace vertical */
  animation: mg-slideDown 0.45s var(--mg-ease) both;
}

/* Séparateur décoratif entre les contacts */
.top .left ul {
  padding-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-wrap: wrap;
}
.top .left ul li {
  color: var(--mg-gray-light) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2px !important;
  margin-right: 0 !important;
  padding: 0 16px 0 0 !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative;
  animation: mg-slideInLeft 0.55s var(--mg-ease) both;
}
/* Séparateur | entre items */
.top .left ul li + li::before {
  content: '|' !important;
  font-family: inherit !important;
  color: rgba(154,139,82,0.45) !important;
  margin-right: 16px !important;
  font-size: 11px !important;
  font-weight: 300 !important;
}
.top .left ul li i {
  color: var(--mg-primary-light) !important;
  font-size: 13px !important;
  flex-shrink: 0;
}

.top .right {
  animation: mg-slideInRight 0.55s var(--mg-ease) both;
}
.top .right ul {
  padding-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  justify-content: flex-end !important;
}
.top .right ul li {
  margin-left: 0 !important;
  list-style: none !important;
}
.top .right ul li a {
  color: var(--mg-gray-light) !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--mg-trans) !important;
  background: rgba(255,255,255,0.06) !important;
}
.top .right ul li a:hover {
  background: var(--mg-primary) !important;
  color: var(--mg-white) !important;
  transform: translateY(-3px) rotate(8deg) !important;
  box-shadow: 0 4px 12px rgba(154,139,82,0.40) !important;
}

/* --------------------------------------------------------------------------
   4. HEADER / EN-TÊTE
   -------------------------------------------------------------------------- */
.header {
  background: var(--mg-white) !important;
  box-shadow: 0 3px 20px rgba(107,96,56,0.13) !important;
  padding: 14px 0 !important;      /* plus d'espace vertical */
  animation: mg-fadeIn 0.5s 0.1s var(--mg-ease) both;
}
.header .inner {
  align-items: center !important;
}

/* Logo — entrée avec rebond léger */
.header .logo {
  padding: 4px 0 !important;
  animation: mg-slideInLeft 0.55s 0.15s var(--mg-ease) both;
}
.header .logo a {
  display: inline-block;
}
.header .logo img {
  height: 96px !important;
  max-height: 96px !important;
  width: auto !important;
  object-fit: contain !important;
  transition: transform 0.35s var(--mg-ease), filter 0.35s ease !important;
  filter: drop-shadow(0 2px 8px rgba(107,96,56,0.22));
}
.header .logo img:hover {
  transform: scale(1.05) translateY(-2px) !important;
  filter: drop-shadow(0 6px 16px rgba(107,96,56,0.40));
}

/* Liens utilisateur (panier, connexion…) */
.header .right {
  animation: mg-slideInRight 0.55s 0.2s var(--mg-ease) both;
}
.header .right ul {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.header .right ul li {
  color: var(--mg-primary) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding: 4px 10px !important;
  border-radius: var(--mg-r-pill) !important;
  transition: var(--mg-trans) !important;
  white-space: nowrap;
}
.header .right ul li a {
  color: var(--mg-primary-dark) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  transition: var(--mg-trans) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  border-radius: var(--mg-r-pill) !important;
  border: 1px solid transparent !important;
}
.header .right ul li a:hover {
  color: var(--mg-white) !important;
  background: var(--mg-grad-primary) !important;
  border-color: var(--mg-primary-light) !important;
  box-shadow: var(--mg-shadow-sm) !important;
  transform: translateY(-2px) !important;
}
.header .right ul li a .fa {
  font-size: 14px !important;
}

/* Barre de recherche */
.header .search-area {
  animation: mg-slideInRight 0.55s 0.25s var(--mg-ease) both;
}
.header .search-area form {
  display: flex !important;
  align-items: stretch !important;
}
.header .navbar-form .form-control,
.header .search-top,
input.search-top {
  border: 2px solid var(--mg-gray-xlight) !important;
  border-right: none !important;
  border-radius: var(--mg-r-lg) 0 0 var(--mg-r-lg) !important;
  background: var(--mg-bg-warm) !important;
  transition: var(--mg-trans) !important;
  box-shadow: none !important;
  padding: 9px 16px !important;
  font-size: 13.5px !important;
  height: 42px !important;
}
.header .navbar-form .form-control:focus,
input.search-top:focus {
  border-color: var(--mg-primary-light) !important;
  background: var(--mg-white) !important;
  box-shadow: 0 0 0 3px rgba(154,139,82,0.15) !important;
  outline: none !important;
}
.header .search-area button,
.header .search-area .btn-danger {
  background: var(--mg-grad-primary) !important;
  border: none !important;
  border-radius: 0 var(--mg-r-lg) var(--mg-r-lg) 0 !important;
  color: var(--mg-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: var(--mg-trans) !important;
  box-shadow: none !important;
  height: 42px !important;
  padding: 0 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}
.header .search-area button:hover,
.header .search-area .btn-danger:hover {
  background: var(--mg-grad-primary-h) !important;
  box-shadow: var(--mg-shadow-sm) !important;
  transform: translateX(2px) !important;
}

/* --------------------------------------------------------------------------
   5. BARRE DE NAVIGATION
   -------------------------------------------------------------------------- */
/* IMPORTANT: pas de transform sur .nav lui-même — transform crée un stacking
   context qui piège les dropdowns absolus à l'intérieur, peu importe leur
   z-index. L'animation est déplacée sur .menu-container (enfant).
   z-index: 10000 pour dépasser tous les éléments de page (bx-controls: 9999,
   testimonial: 9999, prod-slider-link: réduit à 1 ci-dessous),
   tout en restant sous les modales lightbox (magnific-popup: 18000-22000). */
.nav {
  background: linear-gradient(90deg, #16214f 0%, #24367e 52%, #16214f 100%) !important;
  box-shadow: 0 5px 22px rgba(16, 24, 64, 0.36) !important;
  position: relative !important;
  z-index: 10000 !important;
}
.menu-container {
  background: transparent !important;
  position: static !important;
  animation: mg-fadeIn 0.45s 0.05s var(--mg-ease) both;
  
}

/* Dropdown en superposition totale — z-index dans le contexte de .nav */
.menu > ul > li > ul {
  position: absolute !important;
  z-index: 99999 !important;
}

/* Réduction du z-index abusif du slider produit (main.css: 99999999).
   Ce lien superposé n'a besoin d'être qu'au-dessus du fond de l'image. */
ul.prod-slider li a {
  z-index: 1 !important;
}

/* Items de navigation — apparition séquentielle
   IMPORTANT: animation appliquée sur <a> et non sur <li> pour éviter
   que transform crée un nouveau containing block et casse le dropdown */
.menu > ul > li:nth-child(1) > a { animation: mg-navItemIn 0.4s 0.10s var(--mg-ease) both; }
.menu > ul > li:nth-child(2) > a { animation: mg-navItemIn 0.4s 0.17s var(--mg-ease) both; }
.menu > ul > li:nth-child(3) > a { animation: mg-navItemIn 0.4s 0.24s var(--mg-ease) both; }
.menu > ul > li:nth-child(4) > a { animation: mg-navItemIn 0.4s 0.31s var(--mg-ease) both; }
.menu > ul > li:nth-child(5) > a { animation: mg-navItemIn 0.4s 0.38s var(--mg-ease) both; }
.menu > ul > li:nth-child(6) > a { animation: mg-navItemIn 0.4s 0.45s var(--mg-ease) both; }
.menu > ul > li:nth-child(7) > a { animation: mg-navItemIn 0.4s 0.52s var(--mg-ease) both; }
.menu > ul > li:nth-child(n+8) > a { animation: mg-navItemIn 0.4s 0.58s var(--mg-ease) both; }

/* Liens de premier niveau */
.menu > ul > li > a {
  color: rgba(255,255,255,0.93) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.4px !important;
  padding: 1.55em 22px !important;   /* plus d'espace horizontal & vertical */
  transition: var(--mg-trans) !important;
  position: relative;
  white-space: nowrap;
}
/* Soulignement animé au hover */
.menu > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #8fb6ff;
  border-radius: var(--mg-r-pill);
  transition: width 0.32s var(--mg-ease);
}
.menu > ul > li:hover > a::after {
  width: 55%;
}
/* Fond au hover avec transition douce */
.menu > ul > li {
  transition: background 0.22s ease !important;
}
.menu > ul > li:hover {
  background: rgba(0,0,0,0.25) !important;
}
/* Lien actif (page courante) */
.menu > ul > li.current > a,
.menu > ul > li.active > a {
  color: #bcd3ff !important;
}
.menu > ul > li.current > a::after,
.menu > ul > li.active > a::after {
  width: 55% !important;
}

/* Mobile-only controls: hidden on desktop by default */
.menu-overlay,
.menu > ul > li.menu-mobile-header,
.menu-sub-toggle,
.menu-sub-toggle .menu-sub-chevron {
  display: none !important;
}

/* Force navbar content on a single desktop line */
@media only screen and (min-width: 960px) {
  .menu {
    overflow: visible !important;
  }

  .menu > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 6px;
    overflow: visible;
  }

  .menu > ul > li {
    float: none !important;
    flex: 0 0 auto;
  }

  .menu > ul > li > a {
    white-space: nowrap;
    font-size: 13px !important;
    padding: 1.2em 11px !important;
  }
}


/* Sous-menus — apparition vers le bas avec fondu */
.menu > ul > li > ul {
  background: var(--mg-white) !important;
  border-top: 3px solid var(--mg-primary) !important;
  box-shadow: var(--mg-shadow-lg) !important;
  border-radius: 0 0 var(--mg-r-md) var(--mg-r-md) !important;
  animation: mg-fadeIn 0.22s ease both;
}
.menu > ul > li > ul > li a {
  color: var(--mg-text) !important;
  border-bottom: 1px solid var(--mg-gray-xlight) !important;
  padding: 0.3em 0 !important;
  transition: var(--mg-trans) !important;
}
.menu > ul > li > ul > li a:hover {
  color: var(--mg-primary) !important;
  padding-left: 6px !important;
}
.menu > ul > li > ul > li > ul > li a {
  color: var(--mg-text-light) !important;
  border-bottom: none !important;
}
.menu > ul > li > ul > li > ul > li a:hover {
  color: var(--mg-primary-dark) !important;
}

/* Mega menu hierarchique: mid-category puis end-category */
.menu > ul > li > ul.normal-sub.mega-sub {
  display: flex !important;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: flex-start;
  align-content: flex-start;
  left: 0 !important;
  transform: translateY(10px) !important;
  width: max-content !important;
  max-width: min(1240px, calc(100vw - 24px)) !important;
  padding: 16px 0 20px 0 !important;
  background:
    radial-gradient(circle at 15% 14%, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 120px, transparent 122px),
    radial-gradient(circle at 72% 58%, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 170px, transparent 172px),
    linear-gradient(135deg, #0f1b4e 0%, #1f2f78 52%, #0e1740 100%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-top: 0 !important;
}
.menu > ul > li > ul.normal-sub.mega-sub > li.mega-sub-group {
  width: clamp(240px, 22vw, 320px) !important;
  flex: 0 0 clamp(240px, 22vw, 320px);
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.menu > ul > li > ul.normal-sub.mega-sub .mega-mid-title {
  display: block !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.25px;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.35 !important;
  margin: 0 0 9px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.26) !important;
  transition: var(--mg-trans) !important;
}
.menu > ul > li > ul.normal-sub.mega-sub .mega-mid-title:hover {
  color: #bcd3ff !important;
  border-bottom-color: rgba(255,255,255,0.45) !important;
  padding-left: 0 !important;
}
.menu > ul > li > ul.normal-sub.mega-sub .mega-end-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu > ul > li > ul.normal-sub.mega-sub .mega-end-list > li {
  margin: 0;
  padding: 0;
}
.menu > ul > li > ul.normal-sub.mega-sub .mega-end-list > li > a {
  color: rgba(255,255,255,0.96) !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.16) !important;
  font-size: 13.5px !important;
  line-height: 1.38;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.menu > ul > li > ul.normal-sub.mega-sub .mega-end-list > li > a:hover {
  color: #bcd3ff !important;
  transform: translateX(4px);
}
.menu > ul > li > ul.normal-sub.mega-sub .mega-end-empty,
.menu > ul > li > ul.normal-sub.mega-sub .mega-sub-empty {
  color: rgba(255,255,255,0.82) !important;
  font-size: 12.5px;
  line-height: 1.45;
  font-style: italic;
}
.menu > ul > li > ul.normal-sub.mega-sub .mega-end-empty {
  padding: 3px 0 0;
}
.menu > ul > li > ul.normal-sub.mega-sub > li.mega-sub-empty {
  width: 100% !important;
  flex: 1 1 100%;
  padding: 4px 0;
}

@media only screen and (min-width: 944px) {
  .menu > ul > li > ul.normal-sub.mega-sub {
    width: fit-content !important;
    max-width: min(1240px, calc(100vw - 24px)) !important;
  }

  .menu > ul > li:hover > ul.normal-sub.mega-sub,
  .menu > ul > li:focus-within > ul.normal-sub.mega-sub {
    transform: translateY(0) !important;
  }
}

/* Menu mobile */
@media only screen and (max-width: 959px) {
  body.menu-open {
    overflow: hidden;
  }

  .menu-overlay {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(8, 14, 37, 0.34);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 11990;
    pointer-events: none;
  }

  body.menu-open .menu-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
  }

  .menu {
    position: relative;
    z-index: 12000;
  }

  .menu-mobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 12px 16px !important;
    color: #e9efff !important;
    font: inherit;
    font-weight: 600;
    text-decoration: none !important;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.16);
    cursor: pointer;
  }

  .menu-mobile:after {
    display: none !important;
  }

  .menu-mobile-label {
    font-size: 14px;
    letter-spacing: 0.2px;
  }

  .menu-mobile-bars {
    width: 22px;
    height: 2px;
    background: #d5e3ff;
    position: relative;
    border-radius: 2px;
    transition: background 0.24s ease, transform 0.3s ease;
  }

  .menu-mobile-bars::before,
  .menu-mobile-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #d5e3ff;
    transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease;
  }

  .menu-mobile-bars::before {
    top: -7px;
  }

  .menu-mobile-bars::after {
    top: 7px;
  }

  .menu.menu-open .menu-mobile-bars {
    background: transparent;
  }

  .menu.menu-open .menu-mobile-bars::before {
    top: 0;
    transform: rotate(45deg);
  }

  .menu.menu-open .menu-mobile-bars::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .menu > ul {
    position: fixed !important;
    top: 0;
    left: 0;
    width: clamp(288px, 82vw, 392px);
    height: 100vh;
    margin: 0 !important;
    padding: 64px 0 16px !important;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(-104%);
    opacity: 0;
    filter: saturate(0.92) brightness(0.96);
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease, filter 0.25s ease;
    background: linear-gradient(165deg, #0f1b4e 0%, #132864 48%, #102052 100%) !important;
    box-shadow: 6px 0 18px rgba(8, 14, 37, 0.28);
    z-index: 12010;
    display: block !important;
    pointer-events: none;
  }

  .menu.menu-open > ul,
  .menu.menu-open > ul.show-on-mobile {
    transform: translateX(0);
    opacity: 1;
    filter: saturate(1) brightness(1);
    pointer-events: auto;
  }

  .menu.menu-open > ul > li {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .menu.menu-open > ul > li > a {
    display: block !important;
  }

  .menu > ul > li.menu-mobile-header {
    display: block !important;
    position: absolute;
    top: 8px;
    right: 8px;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  .menu-mobile-close {
    border: 0;
    background: transparent;
    color: #f2f6ff;
    font-size: 40px;
    line-height: 1;
    width: 42px;
    height: 42px;
    cursor: pointer;
  }

  .menu > ul > li {
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
  }

  .menu > ul > li.has-submenu > a {
    padding-right: 48px !important;
  }

  .menu > ul > li.menu-dropdown-icon::before,
  .menu > ul > li.menu-dropdown-icon:before {
    display: none !important;
    content: none !important;
  }

  .menu-sub-toggle {
    display: inline-flex !important;
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border: 0;
    background: transparent !important;
    color: #dce7ff;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    min-height: 0 !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    -webkit-appearance: none;
    appearance: none;
    border-left: 0;
    border-radius: 0;
    pointer-events: auto;
    touch-action: manipulation;
  }

  .menu-sub-toggle .menu-sub-chevron {
    display: inline-block !important;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.2s ease;
  }

  .menu > ul > li.submenu-open > .menu-sub-toggle {
    background: transparent !important;
  }

  .menu > ul > li.submenu-open > .menu-sub-toggle .menu-sub-chevron {
    transform: rotate(90deg);
    color: #ffffff;
  }

  .menu > ul > li > ul {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: auto !important;
    transform: none !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--mg-gray-xlight) !important;
    box-shadow: none !important;
  }

  .menu > ul > li.has-submenu > ul.normal-sub.mega-sub {
    display: none !important;
  }

  .menu > ul > li.submenu-open > ul.normal-sub.mega-sub {
    display: block !important;
  }

  .menu > ul > li > ul.normal-sub.mega-sub {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 8px !important;
    gap: 0;
    position: static !important;
    transform: none !important;
    background: rgba(7, 15, 44, 0.42) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .menu > ul > li > ul.normal-sub.mega-sub > li.mega-sub-group {
    width: 100% !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 16px 8px !important;
    border-bottom: 1px solid rgba(255,255,255,0.16);
  }
  .menu > ul > li > ul.normal-sub.mega-sub > li.mega-sub-group:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0;
  }
  .menu > ul > li > ul.normal-sub.mega-sub .mega-mid-title {
    margin: 0 !important;
    padding: 8px 0 8px !important;
    border-bottom: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .menu > ul > li > ul.normal-sub.mega-sub .mega-end-list > li > a {
    padding: 8px 0 !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
    font-weight: 500 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .menu > ul > li > a {
    color: #eff4ff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15px !important;
    padding: 12px 16px !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }
}

@media only screen and (max-width: 420px) {
  .menu > ul {
    width: min(92vw, 328px);
  }
}

@media only screen and (min-width: 600px) and (max-width: 959px) {
  .menu > ul {
    width: min(72vw, 416px);
  }
}

/* --------------------------------------------------------------------------
   6. TITRES DE SECTIONS
   -------------------------------------------------------------------------- */
.headline h2 {
  color: var(--mg-primary-dark) !important;
  position: relative;
  display: inline-block;
}
.headline h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: var(--mg-grad-primary-h);
  margin: 10px auto 0;
  border-radius: var(--mg-r-pill);
}
.headline h3 {
  color: var(--mg-gray) !important;
}

/* --------------------------------------------------------------------------
   7. BOUTONS
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-success,
input[type="submit"].btn-primary,
button.btn-primary {
  background: var(--mg-grad-primary) !important;
  border: none !important;
  border-radius: var(--mg-r-pill) !important;
  color: var(--mg-white) !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  box-shadow: var(--mg-shadow-sm) !important;
  transition: var(--mg-trans) !important;
  padding: 10px 26px !important;
}
.btn-primary:hover,
.btn-success:hover {
  background: var(--mg-grad-primary-h) !important;
  box-shadow: var(--mg-shadow-md) !important;
  transform: translateY(-2px) !important;
  color: var(--mg-white) !important;
}
.btn-primary:active,
.btn-success:active {
  transform: translateY(0) !important;
  box-shadow: var(--mg-shadow-xs) !important;
}

/* Bouton de recherche global */
.btn-danger {
  background: var(--mg-grad-primary) !important;
  border: none !important;
  color: var(--mg-white) !important;
  transition: var(--mg-trans) !important;
}
.btn-danger:hover {
  background: var(--mg-grad-primary-h) !important;
}

/* Bouton secondaire / outline */
.btn-default {
  border: 2px solid var(--mg-primary) !important;
  color: var(--mg-primary-dark) !important;
  border-radius: var(--mg-r-pill) !important;
  background: transparent !important;
  font-weight: 500 !important;
  transition: var(--mg-trans) !important;
}
.btn-default:hover {
  background: var(--mg-primary) !important;
  color: var(--mg-white) !important;
  box-shadow: var(--mg-shadow-sm) !important;
  transform: translateY(-1px) !important;
}

/* Boutons de panier / checkout */
.cart-buttons li input[type="submit"],
.cart-buttons li a,
.cart-buttons li button,
.cart-buttons .btn {
  background: var(--mg-grad-primary) !important;
  border: none !important;
  border-radius: var(--mg-r-pill) !important;
  box-shadow: var(--mg-shadow-sm) !important;
  transition: var(--mg-trans) !important;
}
.cart-buttons li input[type="submit"]:hover,
.cart-buttons li a:hover,
.cart-buttons li button:hover,
.cart-buttons .btn:hover {
  background: var(--mg-grad-primary-h) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--mg-shadow-md) !important;
}

/* --------------------------------------------------------------------------
   8. PRODUITS — CARTES
   -------------------------------------------------------------------------- */
.product .item {
  border-radius: var(--mg-r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--mg-shadow-xs) !important;
  transition: var(--mg-trans) !important;
  background: var(--mg-white) !important;
}
.product .item:hover {
  box-shadow: var(--mg-shadow-lg) !important;
  transform: translateY(-6px) !important;
}
.product .item .text h3 a:hover {
  color: var(--mg-primary) !important;
}
.product .item .text h4,
.product .p-price {
  color: var(--mg-primary-dark) !important;
}
.product .item .text p a {
  background: var(--mg-grad-primary) !important;
  border-radius: var(--mg-r-pill) !important;
  transition: var(--mg-trans) !important;
  box-shadow: none !important;
}
.product .item .text p a:hover {
  background: var(--mg-grad-primary-h) !important;
  box-shadow: var(--mg-shadow-sm) !important;
}

/* Contrôles carousel */
.product .owl-controls .owl-prev,
.product .owl-controls .owl-next {
  background: var(--mg-primary) !important;
  border-radius: var(--mg-r-xs) !important;
  transition: var(--mg-trans) !important;
}
.product .owl-controls .owl-prev:hover,
.product .owl-controls .owl-next:hover {
  background: var(--mg-primary-dark) !important;
  box-shadow: var(--mg-shadow-sm) !important;
}

/* Titre & prix sur la page produit */
.product .p-title h2 {
  color: var(--mg-primary-dark) !important;
}
.product .btn-cart a,
.product .btn-cart1 input[type="submit"] {
  background: var(--mg-grad-primary) !important;
  border-radius: var(--mg-r-sm) !important;
  box-shadow: var(--mg-shadow-sm) !important;
  transition: var(--mg-trans) !important;
  color: var(--mg-white) !important;
  border: none !important;
}
.product .btn-cart a:hover,
.product .btn-cart1 input[type="submit"]:hover {
  background: var(--mg-grad-primary-h) !important;
  box-shadow: var(--mg-shadow-md) !important;
  transform: translateY(-2px) !important;
  color: var(--mg-white) !important;
}

/* Étoiles d'avis */
.rating .fa-star,
.rating .fa-star-half-o,
.fa-star, .fa-star-half-o {
  color: var(--mg-accent) !important;
}

/* Badge rupture de stock */
.out-of-stock .inner {
  border-radius: var(--mg-r-xs) !important;
  background: #c0392b !important;
}

/* Formulaire d'avis */
.review-form .btn-default {
  background: var(--mg-grad-primary) !important;
  color: var(--mg-white) !important;
  border-radius: var(--mg-r-pill) !important;
  border: none !important;
}
.review-form .btn-default:hover {
  background: var(--mg-grad-primary-h) !important;
}

/* --------------------------------------------------------------------------
   9. ICÔNES DE SERVICE
   -------------------------------------------------------------------------- */
.service .icon i {
  background: var(--mg-grad-primary) !important;
  box-shadow: var(--mg-shadow-sm) !important;
  transition: var(--mg-trans) !important;
}
.service .item:hover .icon i {
  background: var(--mg-grad-primary-h) !important;
  transform: rotate(6deg) scale(1.1);
  box-shadow: var(--mg-shadow-md) !important;
}

/* --------------------------------------------------------------------------
   10. SECTION WELCOME / CTA
   -------------------------------------------------------------------------- */
.welcome .overlay {
  background: var(--mg-grad-hero) !important;
  opacity: 1 !important;
}
.welcome p.button a {
  background: var(--mg-grad-primary) !important;
  border-radius: var(--mg-r-pill) !important;
  box-shadow: var(--mg-shadow-md) !important;
  transition: var(--mg-trans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  padding: 13px 30px !important;
}
.welcome p.button a:hover {
  background: var(--mg-grad-primary-h) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--mg-shadow-lg) !important;
  color: var(--mg-white) !important;
}

/* --------------------------------------------------------------------------
   11. SECTION TÉMOIGNAGES
   -------------------------------------------------------------------------- */
.testimonial-v1 .overlay {
  background: var(--mg-grad-hero) !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   12. HOME & BLOG
   -------------------------------------------------------------------------- */
.home-blog .image-holder .day {
  background: var(--mg-primary) !important;
}
.home-blog .image-holder .day::before {
  color: var(--mg-primary) !important;
}
.home-blog .text p.button a {
  background: var(--mg-grad-primary) !important;
  border-radius: var(--mg-r-sm) !important;
  transition: var(--mg-trans) !important;
}
.home-blog .text p.button a:hover {
  background: var(--mg-grad-primary-h) !important;
  box-shadow: var(--mg-shadow-sm) !important;
}

/* --------------------------------------------------------------------------
   13. SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar .widget {
  border-radius: var(--mg-r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--mg-shadow-xs) !important;
  margin-bottom: 22px !important;
}
.sidebar .widget .widget-title {
  background: var(--mg-grad-primary) !important;
  color: var(--mg-white) !important;
  border-radius: var(--mg-r-md) var(--mg-r-md) 0 0 !important;
  padding: 12px 18px !important;
}
.sidebar .widget ul li a:hover {
  color: var(--mg-primary) !important;
}
.tree_menu > li > a {
  color: var(--mg-text) !important;
  transition: var(--mg-trans) !important;
}
.tree_menu > li > a:hover,
.tree_menu > li.active > a {
  color: var(--mg-primary) !important;
}
.tree_menu > li.active > a {
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   14. PAGINATION
   -------------------------------------------------------------------------- */
.pagination > li > a,
.pagination > li > span {
  color: var(--mg-primary) !important;
  border-color: var(--mg-gray-xlight) !important;
  border-radius: var(--mg-r-xs) !important;
  transition: var(--mg-trans) !important;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--mg-primary) !important;
  border-color: var(--mg-primary) !important;
  color: var(--mg-white) !important;
}
.pagination > li > a:hover {
  background: var(--mg-bg-warm) !important;
  color: var(--mg-primary-dark) !important;
  border-color: var(--mg-primary-light) !important;
}

/* --------------------------------------------------------------------------
   15. FORMULAIRES
   -------------------------------------------------------------------------- */
.form-control:focus {
  border-color: var(--mg-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(154,139,82,0.14) !important;
}

/* --------------------------------------------------------------------------
   16. DÉCORATIONS DE TITRES
   -------------------------------------------------------------------------- */
.page h3.special::after,
.footer-main h3::after {
  background: var(--mg-grad-primary-h) !important;
}

/* --------------------------------------------------------------------------
   17. PANIER
   -------------------------------------------------------------------------- */
.cart table tr td .trash {
  color: var(--mg-primary) !important;
  transition: var(--mg-trans) !important;
}
.cart table tr td .trash:hover {
  color: #c0392b !important;
}
.cform address span,
.cform address a span {
  color: var(--mg-primary) !important;
}
.cform input[type="submit"] {
  background: var(--mg-grad-primary) !important;
  border-radius: var(--mg-r-pill) !important;
  border: none !important;
  transition: var(--mg-trans) !important;
}
.cform input[type="submit"]:hover {
  background: var(--mg-grad-primary-h) !important;
}

/* --------------------------------------------------------------------------
   18. BANNIÈRES DE PAGE
   -------------------------------------------------------------------------- */
.page-banner .overlay {
  background: var(--mg-grad-hero) !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   19. FOOTER NAVIGATION (bande olive)
   -------------------------------------------------------------------------- */
.footer {
  background: var(--mg-primary-darker) !important;
}
.footer .row a {
  color: var(--mg-gray-light) !important;
  transition: var(--mg-trans) !important;
}
.footer .row a:hover {
  color: var(--mg-accent-light) !important;
}
/* Conteneur icônes sociales du footer */
.top-1 {
  width: 100% !important;
  text-align: center !important;
  padding: 16px 0 !important;
}
.top-1 ul {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.top-1 ul li {
  display: inline-flex !important;
  margin: 0 !important;
}
.top-1 ul li a {
  background: rgba(154,139,82,0.22) !important;
  color: var(--mg-white) !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  transition: var(--mg-trans) !important;
  border: 1px solid rgba(154,139,82,0.30) !important;
}
.top-1 ul li a:hover {
  background: var(--mg-primary) !important;
  border-color: var(--mg-primary-light) !important;
  box-shadow: var(--mg-shadow-sm) !important;
  transform: translateY(-3px) !important;
  color: var(--mg-white) !important;
}

/* FOOTER MAIN (bande sombre — si présente) */
.footer-main {
  background: var(--mg-dark) !important;
}
.footer-main h3::after {
  background: var(--mg-primary) !important;
}

/* FOOTER BOTTOM — copyright */
.footer-bottom {
  background: var(--mg-dark) !important;
  border-top: 1px solid rgba(154,139,82,0.22) !important;
}
.footer-bottom .copyright {
  color: var(--mg-gray) !important;
  font-size: 13px !important;
}

/* --------------------------------------------------------------------------
   20. BOUTON SCROLL TO TOP
   -------------------------------------------------------------------------- */
.scrollup {
  background: var(--mg-grad-primary) !important;
  border-radius: 50% !important;
  box-shadow: var(--mg-shadow-md) !important;
  transition: var(--mg-trans) !important;
  text-decoration: none !important;
}
.scrollup:hover {
  background: var(--mg-grad-primary-h) !important;
  box-shadow: var(--mg-shadow-lg) !important;
  transform: translateY(-4px) !important;
}
.scrollup i {
  background: transparent !important;
  border: none !important;
  color: var(--mg-white) !important;
  opacity: 1 !important;
  filter: none !important;
  font-size: 22px !important;
}


.scrollup.whatsapp-float {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  right: 18px;
  bottom: 78px;
  background: transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
}

.scrollup.scroll-top-float {
  position: fixed !important;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--mg-secondary, #1c2560), var(--mg-secondary-dark, #141940)) !important;
  border: 2px solid rgba(255,255,255,0.25) !important;
  box-shadow: var(--mg-shadow-md);
  z-index: 9999;
  text-decoration: none !important;
}

.scrollup.scroll-top-float i {
  font-size: 20px !important;
  color: #ffffff !important;
}

.scrollup.scroll-top-float:hover {
  transform: translateY(-3px) !important;
  background: linear-gradient(135deg, var(--mg-secondary, #1c2560), var(--mg-primary-dark, #6b6038)) !important;
}

.scrollup.whatsapp-float .whatsapp-float-text {
  display: inline-block;
  padding: 0;
  border-radius: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  color: #ffffff;
  background: var(--mg-grad-primary) !important;
  box-shadow: var(--mg-shadow-md);
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-right: 0;
  transform: translateX(8px);
  transition: max-width 0.25s ease, opacity 0.2s ease, padding 0.25s ease, margin-right 0.25s ease, transform 0.25s ease;
}

.scrollup.whatsapp-float i {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  line-height: 48px !important;
  border-radius: 50% !important;
  font-size: 24px !important;
  text-align: center;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--mg-secondary, #1c2560), var(--mg-secondary-dark, #141940)) !important;
  border: 2px solid rgba(255,255,255,0.25) !important;
  box-shadow: var(--mg-shadow-md);
}

.scrollup.whatsapp-float:hover {
  transform: translateY(-2px) !important;
}

.scrollup.whatsapp-float:hover .whatsapp-float-text {
  background: var(--mg-grad-primary-h) !important;
  max-width: 320px;
  opacity: 1;
  padding: 10px 16px;
  margin-right: 2px;
  transform: translateX(0);
}

.scrollup.whatsapp-float:hover i {
  background: linear-gradient(135deg, var(--mg-secondary, #1c2560), var(--mg-primary-dark, #6b6038)) !important;
}

@media (max-width: 640px) {
  .scrollup.whatsapp-float {
    right: 12px;
    bottom: 72px;
  }

  .scrollup.whatsapp-float .whatsapp-float-text {
    display: none;
  }

  .scrollup.scroll-top-float {
    right: 12px;
    bottom: 14px;
    width: 44px;
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
   21. DASHBOARD CLIENT
   -------------------------------------------------------------------------- */
.user-sidebar ul li a {
  background: var(--mg-gray-dark) !important;
  transition: var(--mg-trans) !important;
  border-radius: var(--mg-r-xs) !important;
}
.user-sidebar ul li a:hover,
.user-sidebar ul li a.active {
  background: var(--mg-primary) !important;
  color: var(--mg-white) !important;
}

/* --------------------------------------------------------------------------
   22. ONGLETS (page produit)
   -------------------------------------------------------------------------- */
.product .nav-tabs > li.active > a,
.product .nav-tabs > li.active > a:hover,
.product .nav-tabs > li.active > a:focus {
  color: var(--mg-primary-dark) !important;
  border-bottom-color: transparent !important;
}
.product .nav-tabs > li > a:hover {
  color: var(--mg-primary) !important;
  background: var(--mg-primary-xlight) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus {
  border-top: 2px solid var(--mg-primary) !important;
  color: var(--mg-primary-dark) !important;
}

/* --------------------------------------------------------------------------
   23. ARRIÈRE-PLAN GRIS (sections alternées)
   -------------------------------------------------------------------------- */
.bg-gray {
  background: var(--mg-bg-gray) !important;
}

/* --------------------------------------------------------------------------
   24. ANIMATIONS LÉGÈRES
   -------------------------------------------------------------------------- */
@keyframes mg-fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mg-pulse-gold {
  0%   { box-shadow: 0 0 0 0 rgba(154,139,82,0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(154,139,82,0); }
  100% { box-shadow: 0 0 0 0 rgba(154,139,82,0); }
}

/* Apparition douce des sections au chargement */
.service,
.product.pt_70,
.home-blog {
  animation: mg-fadeInUp 0.55s var(--mg-ease) both;
}
.product.bg-gray {
  animation: mg-fadeInUp 0.55s 0.1s var(--mg-ease) both;
}

/* Interaction bouton ajouter au panier */
.product .item .text p a:focus,
.btn-primary:focus,
.btn-cart a:focus {
  animation: mg-pulse-gold 0.7s ease-out;
}

/* Transition douce des cartes produit */
.product .item .thumb .photo {
  transition: transform 0.55s var(--mg-ease) !important;
}
.product .item:hover .thumb .photo {
  transform: scale(1.05) !important;
}

/* --------------------------------------------------------------------------
   25. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .header {
    padding: 10px 0 !important;
  }
  .header .logo img {
    height: 76px !important;
    max-height: 76px !important;
  }
  .header .right ul {
    gap: 2px !important;
  }
  .header .right ul li a {
    padding: 5px 8px !important;
    font-size: 12.5px !important;
  }
  /* Sous-menus mobiles */
  .menu > ul > li > ul {
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .menu > ul > li > a::after {
    display: none !important;
  }
  .menu > ul > li > a {
    padding: 1.3em 18px !important;
  }
  /* Désactiver les animations séquentielles sur mobile */
  .menu > ul > li > a { animation: none !important; }
}

@media (max-width: 767px) {
  .top {
    padding: 8px 0 !important;
  }
  .top .left ul {
    flex-wrap: wrap !important;
    gap: 4px 0 !important;
  }
  .top .left ul li {
    font-size: 11.5px !important;
    padding: 0 10px 0 0 !important;
  }
  .top .left ul li + li::before {
    margin-right: 10px !important;
  }
  .header {
    padding: 8px 0 !important;
  }
  .header .logo img {
    height: 62px !important;
    max-height: 62px !important;
  }
  .nav {
    background: var(--mg-primary-darker) !important;
  }
}

@media (max-width: 480px) {
  .top { padding: 7px 0 !important; }
  .top .left ul li { font-size: 11px !important; }
  .header .logo img {
    height: 50px !important;
    max-height: 50px !important;
  }
  .header .right ul li a {
    padding: 4px 7px !important;
    font-size: 12px !important;
  }
}