/* ═══════════════════════════════════════════════════════════════════════════
   MAD'O Navigation Premium — mado-navbar.css
   Version : 2.2.1
   Corrections v2.2.1 :
     - Fix @media imbriqué illégal dans #mn-bottom-bar (sorti en section 12)
     - Fix layout mobile .mn-inner → justify-content: space-between
     - Fix .mn-links caché sur mobile → flex:0 + margin:0 (ne consomme plus d'espace)
     - Fix dropdowns auth/devise débordement gauche mobile → max-width 100vw
     - Fix #mn-bottom-bar → width:100% + box-sizing:border-box garanti
   ─────────────────────────────────────────────────────────────────────────
   TABLE DES MATIÈRES
    1.  Anti-doublon Elementor / Hello Elementor
    2.  Variables CSS & Thèmes (dark / light)
    3.  Structure de base — navbar fixée
    4.  Logo (dual-image dark/light, fallback, animations)
    5.  Liens centraux desktop
    6.  Dropdowns desktop (centraux + zone droite)
    7.  Zone droite (boutons, devise, thème, panier, CTA, burger)
    8.  Auth dropdown — connexion / inscription
    9.  Barre mobile inférieure (#mn-bottom-bar)
   10.  Panneau drawer mobile
   11.  Utilitaires (focus, print, animations)
   12.  Media Queries responsive
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. ANTI-DOUBLON ELEMENTOR / HELLO ELEMENTOR
   ═══════════════════════════════════════════════════════════════════════════ */
body > header.site-header,
body > .site-header,
header.site-header:not(#mado-navbar),
.site-header:not(#mado-navbar),
.elementor-location-header > .elementor-section:first-child,
.elementor-location-header header,
nav.site-navigation,
.site-navigation,
.main-navigation,
.menu-primary-container,
#site-navigation,
.elementor-nav-menu__toggle,
.elementor-nav-menu--dropdown,
header[role="banner"]:not(#mado-navbar),
.header-inner,
.site-branding-wrap,
body.elementor-default header.site-header,
.hello-elementor header.site-header {
	display:     none !important;
	visibility:  hidden !important;
	height:      0 !important;
	max-height:  0 !important;
	overflow:    hidden !important;
	margin:      0 !important;
	padding:     0 !important;
}

.elementor-location-header:empty,
.elementor-location-header > div:empty { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   2. VARIABLES CSS & THÈMES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Thème DARK (défaut) ─────────────────────────────────────────────────── */
:root,
html[data-theme="dark"],
html[data-mado-theme="dark"] {
	--c-bg:           #0D1220;
	--c-bg-glass:     rgba(13,18,32,.88);
	--c-surface:      #141B2D;
	--c-surface2:     #1C2540;
	--c-surface3:     #242E4E;
	--c-border:       rgba(255,255,255,.07);
	--c-border-md:    rgba(255,255,255,.14);
	--c-border-hi:    rgba(255,255,255,.22);
	--c-text:         #EEF2FF;
	--c-text-sub:     #C4CEEA;
	--c-muted:        #8899BB;
	--c-muted-hi:     #AAB8D4;
	--c-accent:       #FF6B35;
	--c-accent-hi:    #FF8555;
	--c-accent2:      #F9D030;
	--c-accent3:      #3EDCDC;
	--c-live:         #2EE86B;
	--c-danger:       #EF4444;
	--grad:           linear-gradient(135deg,#FF6B35 0%,#FF9B3C 50%,#F9D030 100%);
	--grad-subtle:    linear-gradient(135deg,rgba(255,107,53,.12) 0%,rgba(249,208,48,.06) 100%);
	--shadow-drop:    0 24px 60px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.25);
	--shadow-btn:     0 8px 24px rgba(255,107,53,.35);
	--shadow-btn-hi:  0 14px 36px rgba(255,107,53,.5);
}

/* ── Thème LIGHT ─────────────────────────────────────────────────────────── */
html[data-theme="light"],
html[data-mado-theme="light"],
body.mado-light {
	--c-bg:           #F4F6FB;
	--c-bg-glass:     rgba(244,246,251,.94);
	--c-surface:      #FFFFFF;
	--c-surface2:     #EEF1F9;
	--c-surface3:     #E4E8F4;
	--c-border:       rgba(0,0,0,.06);
	--c-border-md:    rgba(0,0,0,.12);
	--c-border-hi:    rgba(0,0,0,.18);
	--c-text:         #0F1828;
	--c-text-sub:     #3A4860;
	--c-muted:        #5A6D88;
	--c-muted-hi:     #3A4F6E;
	--shadow-drop:    0 16px 48px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.07);
	--shadow-btn:     0 6px 20px rgba(255,107,53,.28);
	--shadow-btn-hi:  0 10px 30px rgba(255,107,53,.42);
}

/* ── Tokens partagés ─────────────────────────────────────────────────────── */
#mado-navbar,
#mn-bottom-bar {
	--radius-pill: 999px;
	--radius-md:   .9rem;
	--radius-lg:   1.2rem;
	--radius-xl:   1.6rem;
	--t:           .22s;
	--ease:        cubic-bezier(.16,1,.3,1);
	--ease-back:   cubic-bezier(.34,1.56,.64,1);
	--ff:          'DM Sans', system-ui, -apple-system, sans-serif;
	--ff-head:     'Syne', system-ui, sans-serif;
	--h:           68px;
	--h-sm:        58px;
	--bb-h:        64px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. STRUCTURE DE BASE — navbar fixée
   ═══════════════════════════════════════════════════════════════════════════ */
#mado-navbar {
	position:      fixed;
	top: 0; left: 0; right: 0;
	z-index:       99999990;
	padding:       0 clamp(1rem, 4vw, 3rem);
	background:    var(--c-bg);
	border-bottom: 1px solid var(--c-border);
	font-family:   var(--ff);
	transition:    background .35s var(--ease),
	               border-color .35s var(--ease),
	               box-shadow .35s var(--ease),
	               transform .35s var(--ease);
	will-change:   transform, background;
}

#mado-navbar.scrolled {
	background:               var(--c-bg-glass);
	backdrop-filter:          blur(28px) saturate(160%);
	-webkit-backdrop-filter:  blur(28px) saturate(160%);
	border-bottom-color:      var(--c-border-md);
	box-shadow:               0 8px 32px rgba(0,0,0,.28);
}

/* Hide-on-scroll-down / show-on-scroll-up */
#mado-navbar.mn-hidden {
	transform:  translateY(-100%);
	box-shadow: none;
}

/* Décalage du corps de page (desktop) */
html body {
	padding-top: var(--mado-nav-h, 68px) !important;
}

/* Anti-jitter : compensation scrollbar */
body.mn-scroll-locked {
	overflow:      hidden !important;
	touch-action:  none;
	padding-right: var(--scrollbar-width, 0px) !important;
}
#mado-navbar.mn-scroll-locked-nav {
	padding-right: calc(clamp(1rem, 4vw, 3rem) + var(--scrollbar-width, 0px));
}

/* ── Rangée interne ──────────────────────────────────────────────────────── */
.mn-inner {
	max-width:   1440px;
	margin:      0 auto;
	height:      var(--h);
	display:     flex;
	align-items: center;
	gap:         1.25rem;
	transition:  height .35s var(--ease);
}
#mado-navbar.scrolled .mn-inner { height: var(--h-sm); }


/* ═══════════════════════════════════════════════════════════════════════════
   4. LOGO
   ═══════════════════════════════════════════════════════════════════════════ */
#mado-navbar .mn-logo {
	display:         flex;
	align-items:     center;
	gap:             .65rem;
	text-decoration: none;
	flex-shrink:     0;
	color:           inherit;
}

#mado-navbar .mn-logo-img-wrap {
	width:       40px;
	height:      40px;
	flex-shrink: 0;
	position:    relative;
}

/* Deux logos superposés : visibilité pilotée par data-theme */
#mado-navbar .mn-logo-img {
	position:    absolute;
	top: 0; left: 0;
	width:       100%;
	height:      100%;
	object-fit:  contain;
	transition:  opacity .3s var(--ease), transform .3s var(--ease-back), filter .3s;
}

/* DARK → logo dark visible */
:root #mado-navbar .mn-logo-dark,
html[data-theme="dark"] #mado-navbar .mn-logo-dark,
html[data-mado-theme="dark"] #mado-navbar .mn-logo-dark {
	opacity: 1;
	filter:  drop-shadow(0 2px 10px rgba(255,107,53,.35));
}
:root #mado-navbar .mn-logo-light,
html[data-theme="dark"] #mado-navbar .mn-logo-light,
html[data-mado-theme="dark"] #mado-navbar .mn-logo-light {
	opacity:        0;
	pointer-events: none;
}

/* LIGHT → logo silver visible */
html[data-theme="light"] #mado-navbar .mn-logo-light,
html[data-mado-theme="light"] #mado-navbar .mn-logo-light,
body.mado-light #mado-navbar .mn-logo-light {
	opacity: 1;
	filter:  drop-shadow(0 2px 10px rgba(0,0,0,.15));
}
html[data-theme="light"] #mado-navbar .mn-logo-dark,
html[data-mado-theme="light"] #mado-navbar .mn-logo-dark,
body.mado-light #mado-navbar .mn-logo-dark {
	opacity:        0;
	pointer-events: none;
}

#mado-navbar .mn-logo:hover .mn-logo-img { transform: scale(1.06) rotate(-4deg); }

/* Fallback texte */
#mado-navbar .mn-logo-fallback {
	position:        absolute; inset: 0;
	border-radius:   10px;
	background:      var(--grad);
	color:           #fff;
	font-weight:     800;
	font-size:       1rem;
	font-family:     var(--ff-head);
	display:         none;
	align-items:     center;
	justify-content: center;
}

#mado-navbar .mn-logo-text {
	display:        flex;
	flex-direction: column;
	line-height:    1.1;
}
#mado-navbar .mn-logo-name {
	font-family:    var(--ff-head);
	font-weight:    800;
	font-size:      .98rem;
	color:          var(--c-text);
	letter-spacing: -.02em;
}
#mado-navbar .mn-logo-tag {
	display:        flex;
	align-items:    center;
	gap:            .3rem;
	font-size:      .62rem;
	font-weight:    600;
	color:          var(--c-muted);
	letter-spacing: .12em;
	text-transform: uppercase;
}

#mado-navbar .mn-live-dot {
	width:        6px;
	height:       6px;
	border-radius: 50%;
	background:   var(--c-live);
	box-shadow:   0 0 6px var(--c-live);
	animation:    mnBlink 1.8s ease-in-out infinite;
	flex-shrink:  0;
}
@keyframes mnBlink {
	0%,100% { box-shadow: 0 0 5px var(--c-live); opacity: 1; }
	50%     { box-shadow: 0 0 14px var(--c-live), 0 0 24px rgba(46,232,107,.4); opacity: .8; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. LIENS CENTRAUX DESKTOP
   ═══════════════════════════════════════════════════════════════════════════ */
#mado-navbar .mn-links {
	display:         flex;
	align-items:     center;
	gap:             .2rem;
	list-style:      none;
	margin:          0 auto;
	padding:         0;
	flex:            1;
	justify-content: center;
}

#mado-navbar .mn-link {
	display:         inline-flex;
	align-items:     center;
	gap:             .42rem;
	padding:         .52rem .88rem;
	border-radius:   var(--radius-pill);
	font-size:       .85rem;
	font-weight:     600;
	color:           var(--c-muted);
	text-decoration: none;
	background:      none;
	border:          none;
	cursor:          pointer;
	transition:      color var(--t), background var(--t), transform .15s;
	position:        relative;
	white-space:     nowrap;
	font-family:     var(--ff);
}
#mado-navbar .mn-link:hover,
#mado-navbar .mn-link.active { color: var(--c-text); background: rgba(255,255,255,.05); }

html[data-theme="light"] #mado-navbar .mn-link:hover,
html[data-theme="light"] #mado-navbar .mn-link.active { background: rgba(0,0,0,.04); }

#mado-navbar .mn-link.active::after {
	content:      '';
	position:     absolute;
	bottom:       -4px;
	left:         50%;
	transform:    translateX(-50%);
	width:        20px;
	height:       2px;
	border-radius: 1px;
	background:   var(--c-accent);
}

#mado-navbar .mn-link-wallet,
#mado-navbar .mn-link-wallet:hover { color: var(--c-accent3); }

#mado-navbar .mn-icon {
	width:       17px;
	height:      17px;
	flex-shrink: 0;
	opacity:     .8;
	display:     flex;
	align-items: center;
}
#mado-navbar .mn-link:hover .mn-icon,
#mado-navbar .mn-link.active .mn-icon { opacity: 1; color: var(--c-accent); }

#mado-navbar .mn-chevron {
	opacity:     .5;
	transition:  transform var(--t);
	flex-shrink: 0;
	margin-left: .1rem;
}
#mado-navbar .mn-has-drop.open > .mn-drop-trigger .mn-chevron,
#mado-navbar .mn-has-drop.open > .mn-drop-trigger .mn-chevron-sm { transform: rotate(180deg); }

#mado-navbar .mn-badge-live {
	font-size:   .55rem;
	color:       var(--c-live);
	text-shadow: 0 0 6px var(--c-live);
	animation:   mnBlink 1.8s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. DROPDOWNS DESKTOP
   ═══════════════════════════════════════════════════════════════════════════ */
#mado-navbar .mn-has-drop { position: relative; }

/* Pont invisible entre trigger et panel */
#mado-navbar .mn-has-drop::before {
	content:  '';
	position: absolute;
	top:      100%;
	left: 0; right: 0;
	height:   16px;
}

/* Base dropdown */
#mado-navbar .mn-dropdown {
	position:     absolute;
	top:          calc(100% + 14px);
	left:         50%;
	transform:    translateX(-50%) translateY(8px);
	min-width:    300px;
	background:   var(--c-surface);
	border:       1px solid var(--c-border-md);
	border-radius: var(--radius-lg);
	padding:      .5rem;
	box-shadow:   var(--shadow-drop);
	opacity:      0;
	visibility:   hidden;
	transition:   opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s;
	z-index:      100;
}
#mado-navbar .mn-has-drop.open .mn-dropdown {
	opacity:    1;
	visibility: visible;
	transform:  translateX(-50%) translateY(0);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s 0s;
}

/* ── Variante ancrée à DROITE (auth + devise) — FIX DÉBORDEMENT GAUCHE ──── */
#mado-navbar .mn-dropdown-right {
	right:            0;
	left:             auto;
	transform:        translateY(8px);
	transform-origin: top right;
	/* Jamais plus large que l'écran */
	max-width:        calc(100vw - 1.5rem);
}
#mado-navbar .mn-has-drop.open .mn-dropdown-right {
	transform: translateY(0);
}

/* Tailles spécifiques */
#mado-navbar .mn-dropdown-auth     { min-width: 330px; }
#mado-navbar .mn-dropdown-currency { min-width: 160px; }

/* En-tête de section */
#mado-navbar .mn-drop-header {
	font-family:    var(--ff-head);
	font-size:      .62rem;
	font-weight:    700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color:          var(--c-muted);
	padding:        .45rem .8rem .5rem;
}

#mado-navbar .mn-drop-divider {
	height:     1px;
	background: var(--c-border);
	margin:     .45rem .4rem;
}

#mado-navbar .mn-drop-item {
	display:         flex;
	align-items:     center;
	gap:             .8rem;
	padding:         .6rem .7rem;
	border-radius:   .65rem;
	text-decoration: none;
	color:           inherit;
	transition:      background var(--t), transform var(--t);
	cursor:          pointer;
}
#mado-navbar .mn-drop-item:hover {
	background: rgba(255,107,53,.07);
	transform:  translateX(3px);
}
html[data-theme="light"] #mado-navbar .mn-drop-item:hover { background: rgba(255,107,53,.05); }

#mado-navbar .mn-drop-icon {
	width:           38px;
	height:          38px;
	border-radius:   10px;
	background:      rgba(255,255,255,.05);
	border:          1px solid var(--c-border);
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       1.05rem;
	flex-shrink:     0;
	color:           var(--c-muted);
	transition:      all var(--t);
	box-shadow:      inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="light"] #mado-navbar .mn-drop-icon { background: var(--c-surface2); }
#mado-navbar .mn-drop-item:hover .mn-drop-icon {
	border-color: rgba(255,107,53,.3);
	color:        var(--c-accent);
	background:   rgba(255,107,53,.1);
	box-shadow:   0 4px 12px rgba(255,107,53,.2);
}

#mado-navbar .mn-icon-danger { color: var(--c-danger); }
#mado-navbar .mn-drop-item:hover .mn-icon-danger { color: var(--c-danger); }

#mado-navbar .mn-drop-title { font-size: .85rem; font-weight: 700; color: var(--c-text); }
#mado-navbar .mn-text-danger { color: var(--c-danger) !important; }
#mado-navbar .mn-drop-sub { font-size: .72rem; color: var(--c-muted); margin-top: .1rem; }

#mado-navbar .mn-drop-cta {
	display:         block;
	margin:          .4rem .35rem 0;
	padding:         .62rem .75rem;
	border-radius:   .65rem;
	background:      rgba(255,107,53,.1);
	border:          1px solid rgba(255,107,53,.2);
	color:           var(--c-accent);
	font-size:       .78rem;
	font-weight:     700;
	text-decoration: none;
	text-align:      center;
	transition:      background var(--t), transform var(--t);
}
#mado-navbar .mn-drop-cta:hover { background: rgba(255,107,53,.18); transform: translateY(-1px); }
#mado-navbar .mn-drop-cta-cyan { background: rgba(62,220,220,.1); border-color: rgba(62,220,220,.2); color: var(--c-accent3); }
#mado-navbar .mn-drop-cta-cyan:hover { background: rgba(62,220,220,.18); }


/* ═══════════════════════════════════════════════════════════════════════════
   7. ZONE DROITE
   ═══════════════════════════════════════════════════════════════════════════ */
#mado-navbar .mn-right {
	display:     flex;
	align-items: center;
	gap:         .45rem;
	flex-shrink: 0;
}

#mado-navbar .mn-icon-btn {
	width:           40px;
	height:          40px;
	border-radius:   50%;
	background:      var(--c-surface);
	border:          1px solid var(--c-border);
	color:           var(--c-muted);
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      all var(--t) var(--ease-back);
	position:        relative;
	padding:         0;
	text-decoration: none;
	flex-shrink:     0;
}
#mado-navbar .mn-icon-btn-inner { display: flex; align-items: center; gap: .3rem; }
#mado-navbar .mn-icon-btn:hover {
	border-color: var(--c-border-md);
	color:        var(--c-text);
	background:   var(--c-surface2);
	transform:    translateY(-2px);
}

#mado-navbar .mn-theme-toggle:hover { border-color: var(--c-accent2); color: var(--c-accent2); box-shadow: 0 0 12px rgba(249,208,48,.3); }
#mado-navbar .mn-cart-btn:hover     { border-color: var(--c-accent);  color: var(--c-accent);  box-shadow: 0 0 14px rgba(255,107,53,.3); }

/* Icônes thème — le JS contrôle display */
#mado-navbar .mn-icon-moon { display: none; }

/* Badge panier top */
#mado-navbar .mn-cart-count {
	position:     absolute;
	top:          -6px;
	right:        -6px;
	min-width:    18px;
	height:       18px;
	border-radius: 9px;
	background:   var(--c-accent);
	color:        #fff;
	font-size:    .62rem;
	font-weight:  800;
	display:      none;
	align-items:  center;
	justify-content: center;
	padding:      0 5px;
	box-shadow:   0 2px 8px rgba(255,107,53,.5);
	border:       2px solid var(--c-bg);
	font-family:  var(--ff);
}
#mado-navbar .mn-cart-count.visible { display: flex; animation: mnCartPop .4s var(--ease-back); }
@keyframes mnCartPop { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* Bouton devise */
#mado-navbar .mn-currency-btn {
	width:         auto;
	padding:       0 .85rem;
	border-radius: var(--radius-pill);
}
#mado-navbar .mn-currency-label { font-size: .72rem; font-weight: 700; color: var(--c-text); letter-spacing: .04em; }
#mado-navbar .mn-currency-code  { font-size: .72rem; color: var(--c-muted); font-weight: 500; }

/* Avatar */
#mado-navbar .mn-auth-btn {
	width:         auto;
	padding:       0 .75rem 0 .5rem;
	border-radius: var(--radius-pill);
	gap:           .4rem;
}
#mado-navbar .mn-avatar {
	width:           28px;
	height:          28px;
	border-radius:   50%;
	background:      var(--grad);
	color:           #fff;
	font-size:       .78rem;
	font-weight:     800;
	font-family:     var(--ff-head);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
}
#mado-navbar .mn-avatar-lg {
	width:           46px;
	height:          46px;
	border-radius:   50%;
	background:      var(--grad);
	color:           #fff;
	font-size:       1.1rem;
	font-weight:     800;
	font-family:     var(--ff-head);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	box-shadow:      0 4px 16px rgba(255,107,53,.35);
}

/* CTA principal */
#mado-navbar .mn-cta-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             .5rem;
	padding:         .6rem 1.3rem;
	border-radius:   var(--radius-pill);
	background:      var(--grad);
	color:           #fff !important;
	font-family:     var(--ff);
	font-size:       .83rem;
	font-weight:     700;
	text-decoration: none;
	white-space:     nowrap;
	box-shadow:      var(--shadow-btn), inset 0 1px 0 rgba(255,255,255,.2);
	transition:      transform var(--t) var(--ease-back), box-shadow var(--t);
	border:          none;
	cursor:          pointer;
	overflow:        hidden;
	position:        relative;
}
#mado-navbar .mn-cta-btn::after {
	content:    '';
	position:   absolute;
	top: 0; left: -100%;
	width:      60%;
	height:     100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
	transform:  skewX(-20deg);
	transition: left .65s var(--ease);
}
#mado-navbar .mn-cta-btn:hover::after { left: 160%; }
#mado-navbar .mn-cta-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-btn-hi); }

/* Burger */
#mado-navbar .mn-burger {
	display:         none;
	flex-direction:  column;
	gap:             5px;
	width:           40px;
	height:          40px;
	border:          1px solid var(--c-border);
	border-radius:   .55rem;
	background:      var(--c-surface);
	cursor:          pointer;
	align-items:     center;
	justify-content: center;
	transition:      all var(--t);
	padding:         0;
	flex-shrink:     0;
}
#mado-navbar .mn-burger:hover { border-color: var(--c-accent); }
#mado-navbar .mn-burger span {
	display:       block;
	width:         18px;
	height:        2px;
	background:    var(--c-text);
	border-radius: 1px;
	transition:    transform var(--t), opacity var(--t);
}
#mado-navbar .mn-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mado-navbar .mn-burger.open span:nth-child(2) { opacity: 0; }
#mado-navbar .mn-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ═══════════════════════════════════════════════════════════════════════════
   8. AUTH DROPDOWN
   ═══════════════════════════════════════════════════════════════════════════ */
#mado-navbar .mn-auth-header {
	display:       flex;
	align-items:   center;
	gap:           .85rem;
	padding:       .9rem .85rem .7rem;
	border-bottom: 1px solid var(--c-border);
	margin-bottom: .5rem;
}
#mado-navbar .mn-auth-brand-badge {
	width:           42px;
	height:          42px;
	border-radius:   12px;
	background:      var(--grad);
	color:           #fff;
	font-weight:     800;
	font-size:       1rem;
	font-family:     var(--ff-head);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	box-shadow:      0 4px 12px rgba(255,107,53,.3);
}
#mado-navbar .mn-auth-brand-name { font-family: var(--ff-head); font-size: .92rem; font-weight: 800; color: var(--c-text); }
#mado-navbar .mn-auth-brand-sub  { font-size: .7rem; color: var(--c-muted); margin-top: .1rem; }

#mado-navbar .mn-auth-user-info { display: flex; align-items: center; gap: .85rem; padding: .85rem; }
#mado-navbar .mn-auth-user-meta { min-width: 0; flex: 1; }
#mado-navbar .mn-auth-name  { font-family: var(--ff-head); font-size: .9rem; font-weight: 700; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mado-navbar .mn-auth-email { font-size: .72rem; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#mado-navbar .mn-auth-tabs {
	display:       flex;
	gap:           .25rem;
	padding:       .3rem;
	background:    var(--c-surface2);
	border-radius: .65rem;
	margin-bottom: .85rem;
}
#mado-navbar .mn-auth-tab {
	flex:          1;
	padding:       .5rem .75rem;
	border-radius: .45rem;
	font-family:   var(--ff);
	font-size:     .78rem;
	font-weight:   700;
	border:        none;
	background:    none;
	color:         var(--c-muted);
	cursor:        pointer;
	transition:    all var(--t);
}
#mado-navbar .mn-auth-tab.active { background: var(--c-surface); color: var(--c-text); box-shadow: 0 1px 4px rgba(0,0,0,.15); }

#mado-navbar .mn-auth-panel        { display: none; }
#mado-navbar .mn-auth-panel.active { display: block; animation: mnFadeIn .25s var(--ease); }
@keyframes mnFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

#mado-navbar .mn-form-group    { margin-bottom: .75rem; }
#mado-navbar .mn-form-label    { display: block; font-size: .72rem; font-weight: 600; color: var(--c-muted-hi); margin-bottom: .35rem; }
#mado-navbar .mn-form-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
#mado-navbar .mn-forgot-link   { font-size: .7rem; color: var(--c-accent3); text-decoration: none; font-weight: 600; transition: opacity var(--t); }
#mado-navbar .mn-forgot-link:hover { opacity: .75; }

#mado-navbar .mn-input-wrap { position: relative; }
#mado-navbar .mn-pass-toggle {
	position:        absolute;
	right:           .6rem; top: 50%;
	transform:       translateY(-50%);
	width:           28px; height: 28px;
	background:      none; border: none;
	cursor:          pointer;
	color:           var(--c-muted);
	display:         flex; align-items: center; justify-content: center;
	padding:         0;
	transition:      color var(--t);
}
#mado-navbar .mn-pass-toggle:hover { color: var(--c-text); }

#mado-navbar .mn-input {
	width:         100%;
	padding:       .68rem .82rem;
	background:    var(--c-surface2);
	border:        1px solid var(--c-border);
	border-radius: .65rem;
	color:         var(--c-text);
	font-family:   var(--ff);
	font-size:     .85rem;
	outline:       none;
	transition:    border-color var(--t), box-shadow var(--t);
	box-sizing:    border-box;
}
#mado-navbar .mn-input-wrap .mn-input { padding-right: 2.5rem; }
#mado-navbar .mn-input::placeholder { color: var(--c-muted); }
#mado-navbar .mn-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(255,107,53,.16); }

#mado-navbar .mn-form-msg         { min-height: 20px; font-size: .75rem; font-weight: 600; margin-bottom: .45rem; text-align: center; }
#mado-navbar .mn-form-msg.error   { color: var(--c-danger); }
#mado-navbar .mn-form-msg.success { color: var(--c-live); }

#mado-navbar .mn-auth-submit {
	width:         100%;
	padding:       .8rem;
	background:    var(--grad);
	color:         #fff;
	border:        none;
	border-radius: var(--radius-pill);
	font-family:   var(--ff);
	font-size:     .87rem;
	font-weight:   700;
	cursor:        pointer;
	transition:    opacity var(--t), transform var(--t), box-shadow var(--t);
	box-shadow:    var(--shadow-btn);
}
#mado-navbar .mn-auth-submit:hover    { transform: translateY(-1px); box-shadow: var(--shadow-btn-hi); }
#mado-navbar .mn-auth-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   9. BARRE MOBILE INFÉRIEURE — #mn-bottom-bar
   NOTE : display:none sur desktop est dans la section 12 (Media Queries)
          pour éviter le bug @media imbriqué qui était ignoré par les navigateurs.
   ═══════════════════════════════════════════════════════════════════════════ */
#mn-bottom-bar {
	/* Position & stacking */
	position:   fixed;
	bottom:     0;
	left:       0;
	right:      0;
	z-index:    99999989;

	/* Dimensions — FIX : width + box-sizing explicites */
	width:      100%;
	box-sizing: border-box;
	height:     var(--bb-h);

	/* Fond */
	background:               var(--c-bg-glass);
	backdrop-filter:          blur(28px) saturate(160%);
	-webkit-backdrop-filter:  blur(28px) saturate(160%);
	border-top:               1px solid var(--c-border-md);

	/* Mise en page */
	display:     flex;
	align-items: stretch;
	padding:     0 clamp(.25rem, 2vw, 1rem);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	font-family: var(--ff);

	/* Transition hide/show */
	transition:  transform .35s var(--ease), box-shadow .35s;
	will-change: transform;
}

#mn-bottom-bar.mn-hidden {
	transform:  translateY(100%);
	box-shadow: none;
}

/* Item standard */
#mn-bottom-bar .mn-bb-item {
	flex:            1;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             .28rem;
	text-decoration: none;
	color:           var(--c-muted);
	position:        relative;
	transition:      color var(--t);
	-webkit-tap-highlight-color: transparent;
	min-width:       0; /* évite le dépassement sur très petits écrans */
}
#mn-bottom-bar .mn-bb-item:hover,
#mn-bottom-bar .mn-bb-item.mn-bb-active { color: var(--c-text); }

/* Indicateur actif (barre en haut) */
#mn-bottom-bar .mn-bb-item.mn-bb-active::before {
	content:      '';
	position:     absolute;
	top:          0;
	left:         50%;
	transform:    translateX(-50%);
	width:        24px;
	height:       2px;
	border-radius: 0 0 2px 2px;
	background:   var(--c-accent);
}

#mn-bottom-bar .mn-bb-icon {
	position: relative;
	display:  flex;
	align-items: center;
	justify-content: center;
}
#mn-bottom-bar .mn-bb-label {
	font-size:      .58rem;
	font-weight:    700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space:    nowrap;
}

/* Bouton Wallet central */
#mn-bottom-bar .mn-bb-wallet { flex: 1.2; position: relative; }
#mn-bottom-bar .mn-bb-wallet-pill {
	width:           54px;
	height:          54px;
	border-radius:   50%;
	background:      var(--grad);
	display:         flex;
	align-items:     center;
	justify-content: center;
	box-shadow:      0 6px 22px rgba(255,107,53,.5), 0 2px 8px rgba(0,0,0,.25);
	margin-top:      -18px;
	border:          3px solid var(--c-bg);
	transition:      transform .2s var(--ease-back), box-shadow .2s;
	flex-shrink:     0;
}
#mn-bottom-bar .mn-bb-wallet:hover .mn-bb-wallet-pill,
#mn-bottom-bar .mn-bb-wallet.mn-bb-active .mn-bb-wallet-pill {
	transform:  scale(1.08);
	box-shadow: 0 10px 30px rgba(255,107,53,.65), 0 2px 8px rgba(0,0,0,.25);
}
#mn-bottom-bar .mn-bb-wallet-label { color: var(--c-accent); font-weight: 800; }

/* Badge panier barre bas */
#mn-bottom-bar .mn-bb-cart-count {
	position:        absolute;
	top:             -5px;
	right:           -8px;
	min-width:       16px;
	height:          16px;
	border-radius:   8px;
	background:      var(--c-accent);
	color:           #fff;
	font-size:       .58rem;
	font-weight:     800;
	display:         none;
	align-items:     center;
	justify-content: center;
	padding:         0 4px;
	border:          2px solid var(--c-bg);
}
#mn-bottom-bar .mn-bb-cart-count.visible { display: flex; }


/* ═══════════════════════════════════════════════════════════════════════════
   10. DRAWER MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */
#mado-navbar .mn-mobile-overlay {
	position:             fixed; inset: 0;
	background:           rgba(7,9,16,.78);
	backdrop-filter:      blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index:              99999988;
	opacity:              0;
	visibility:           hidden;
	transition:           opacity .32s, visibility 0s .32s;
}
#mado-navbar .mn-mobile-overlay.open {
	opacity:    1;
	visibility: visible;
	transition: opacity .32s, visibility 0s 0s;
}

#mado-navbar .mn-mobile-panel {
	position:         fixed;
	top: 0; right: 0; bottom: 0;
	width:            min(340px, 92vw);
	background:       var(--c-bg);
	border-left:      1px solid var(--c-border);
	z-index:          99999989;
	display:          flex;
	flex-direction:   column;
	overflow:         hidden;
	visibility:       hidden;
	transform:        translateX(100%);
	transition:       transform .35s var(--ease), visibility 0s .35s;
}
#mado-navbar .mn-mobile-panel.open {
	visibility: visible;
	transform:  translateX(0);
	transition: transform .35s var(--ease), visibility 0s 0s;
}

#mado-navbar .mn-mobile-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         1rem 1.25rem;
	border-bottom:   1px solid var(--c-border);
	flex-shrink:     0;
}
#mado-navbar .mn-mobile-close {
	width:           38px; height: 38px;
	border-radius:   50%;
	background:      var(--c-surface);
	border:          1px solid var(--c-border);
	color:           var(--c-muted);
	display:         flex; align-items: center; justify-content: center;
	cursor:          pointer;
	transition:      all var(--t);
	padding:         0;
}
#mado-navbar .mn-mobile-close:hover { border-color: var(--c-accent); color: var(--c-accent); transform: rotate(90deg); }

/* Carte user connecté */
#mado-navbar .mn-mobile-user-card {
	display:       flex;
	align-items:   center;
	gap:           .85rem;
	padding:       1rem 1.1rem;
	margin:        .5rem .5rem .25rem;
	border-radius: var(--radius-md);
	background:    var(--grad-subtle);
	border:        1px solid rgba(255,107,53,.12);
}
#mado-navbar .mn-mobile-user-name  { font-family: var(--ff-head); font-weight: 700; font-size: .9rem; color: var(--c-text); }
#mado-navbar .mn-mobile-user-email { font-size: .7rem; color: var(--c-muted); margin-top: .1rem; }

#mado-navbar .mn-mobile-body {
	flex:            1;
	overflow-y:      auto;
	padding:         .5rem .6rem;
	scrollbar-width: thin;
	scrollbar-color: var(--c-border-md) transparent;
}
#mado-navbar .mn-mobile-body::-webkit-scrollbar       { width: 4px; }
#mado-navbar .mn-mobile-body::-webkit-scrollbar-track { background: transparent; }
#mado-navbar .mn-mobile-body::-webkit-scrollbar-thumb { background: var(--c-border-md); border-radius: 2px; }

#mado-navbar .mn-mobile-links { list-style: none; padding: 0; margin: 0; }

#mado-navbar .mn-mobile-link {
	display:         flex;
	align-items:     center;
	gap:             .75rem;
	width:           100%;
	padding:         .78rem .85rem;
	border-radius:   .7rem;
	font-size:       .92rem;
	font-weight:     600;
	color:           var(--c-text);
	text-decoration: none;
	background:      none;
	border:          none;
	cursor:          pointer;
	transition:      background var(--t), transform var(--t);
	font-family:     var(--ff);
	box-sizing:      border-box;
}
#mado-navbar .mn-mobile-link:hover,
#mado-navbar .mn-mobile-link.active { background: rgba(255,255,255,.06); transform: translateX(3px); }
html[data-theme="light"] #mado-navbar .mn-mobile-link:hover,
html[data-theme="light"] #mado-navbar .mn-mobile-link.active { background: rgba(0,0,0,.04); }

#mado-navbar .mn-ml-icon { font-size: 1.1rem; width: 26px; text-align: center; flex-shrink: 0; }

#mado-navbar .mn-ml-live-badge {
	margin-left:   auto;
	font-size:     .6rem;
	font-weight:   700;
	color:         var(--c-live);
	background:    rgba(46,232,107,.1);
	border:        1px solid rgba(46,232,107,.2);
	padding:       .15rem .45rem;
	border-radius: var(--radius-pill);
	white-space:   nowrap;
}

#mado-navbar .mn-ml-chevron { margin-left: auto; color: var(--c-muted); transition: transform var(--t); flex-shrink: 0; }
#mado-navbar .mn-ml-accordion-trigger[aria-expanded="true"] .mn-ml-chevron { transform: rotate(180deg); }

#mado-navbar .mn-ml-accordion-body {
	display:        flex;
	flex-direction: column;
	gap:            .1rem;
	padding:        .2rem .4rem .4rem 2.8rem;
	overflow:       hidden;
	max-height:     0;
	transition:     max-height .3s var(--ease), opacity .3s;
	opacity:        0;
}
#mado-navbar .mn-ml-accordion.open .mn-ml-accordion-body { max-height: 400px; opacity: 1; }

#mado-navbar .mn-ml-sub {
	display:         block;
	padding:         .5rem .7rem;
	border-radius:   .5rem;
	font-size:       .83rem;
	font-weight:     600;
	color:           var(--c-text-sub);
	text-decoration: none;
	transition:      background var(--t), color var(--t);
}
#mado-navbar .mn-ml-sub:hover { background: rgba(255,255,255,.05); color: var(--c-text); }
html[data-theme="light"] #mado-navbar .mn-ml-sub:hover { background: rgba(0,0,0,.04); }
#mado-navbar .mn-ml-sub-cta          { color: var(--c-accent); font-weight: 700; }
#mado-navbar .mn-ml-sub-cta-cyan     { color: var(--c-accent3); }

#mado-navbar .mn-ml-cart-badge {
	margin-left:   auto;
	background:    var(--c-accent);
	color:         #fff;
	font-size:     .65rem;
	font-weight:   800;
	padding:       .15rem .45rem;
	border-radius: var(--radius-pill);
	min-width:     20px;
	text-align:    center;
}

#mado-navbar .mn-ml-logout       { color: var(--c-danger); }
#mado-navbar .mn-ml-logout:hover { background: rgba(239,68,68,.06); }
#mado-navbar .mn-ml-wallet       { color: var(--c-accent3); }
#mado-navbar .mn-ml-wallet:hover { color: var(--c-accent3); background: rgba(62,220,220,.06); }


/* ═══════════════════════════════════════════════════════════════════════════
   11. UTILITAIRES
   ═══════════════════════════════════════════════════════════════════════════ */
#mado-navbar a:focus-visible,
#mado-navbar button:focus-visible,
#mado-navbar input:focus-visible {
	outline:        2px solid var(--c-accent);
	outline-offset: 2px;
	border-radius:  4px;
}

@media print {
	#mado-navbar, #mn-bottom-bar { display: none !important; }
	html body { padding-top: 0 !important; padding-bottom: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. MEDIA QUERIES RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ≥ 1025px : DESKTOP — cacher la barre bas ────────────────────────────
   FIX : ce bloc était imbriqué dans #mn-bottom-bar → ignoré par les navigateurs.
   Il est maintenant à la racine, ce qui le rend effectif.                  */
@media (min-width: 1025px) {
	#mn-bottom-bar { display: none; }
}

/* ── ≤ 1024px : TABLETTE / MOBILE ───────────────────────────────────────── */
@media (max-width: 1024px) {

	/* Afficher la barre bas */
	#mn-bottom-bar { display: flex; }

	/* Compenser la hauteur de la barre bas pour le contenu */
	html body {
		padding-bottom: calc(var(--bb-h) + env(safe-area-inset-bottom, 0px)) !important;
	}

	/* Navbar : layout mobile
	   FIX : justify-content: space-between → logo à gauche, boutons à droite
	         sans espace vide causé par .mn-links (flex:1 sur desktop)        */
	#mado-navbar .mn-inner {
		justify-content: space-between;
		gap:             .5rem;
	}

	/* FIX : .mn-links caché mais flex:1 sur desktop consommait de l'espace.
	   On force flex:0 + margin:0 pour qu'il n'existe plus en layout.         */
	#mado-navbar .mn-links {
		display: none;
		flex:    0;
		margin:  0;
	}

	/* Afficher le burger */
	#mado-navbar .mn-burger { display: flex; }

	/* Cacher le gros CTA desktop */
	#mado-navbar .mn-cta-btn { display: none; }

	/* FIX dropdowns sur mobile : les dropdowns de la zone droite
	   ne doivent pas dépasser à gauche sur petit écran.
	   On réduit min-width et on s'assure qu'ils restent dans le viewport. */
	#mado-navbar .mn-dropdown-auth {
		min-width: min(330px, calc(100vw - 1.5rem));
	}
	#mado-navbar .mn-dropdown-currency {
		min-width: 140px;
	}
}

/* ── ≤ 768px : MOBILE standard ──────────────────────────────────────────── */
@media (max-width: 768px) {
	html body { padding-top: var(--mado-nav-h, 58px) !important; }

	/* Réduire le gap de la zone droite pour plus de place */
	#mado-navbar .mn-right { gap: .25rem; }

	/* Dropdowns encore plus contraints */
	#mado-navbar .mn-dropdown-auth {
		min-width: calc(100vw - 1.5rem);
		right:     .75rem;
	}
}

/* ── ≤ 480px : TRÈS PETIT MOBILE ────────────────────────────────────────── */
@media (max-width: 480px) {
	/* Cacher certains boutons secondaires pour libérer de l'espace */
	#mado-navbar .mn-currency-wrap { display: none; }

	#mado-navbar .mn-dropdown-auth {
		right:     .5rem;
		min-width: calc(100vw - 1rem);
	}
}

/* ── ≤ 640px : logo texte masqué ────────────────────────────────────────── */
@media (max-width: 640px) {
	#mado-navbar .mn-logo-text { display: none; }
	#mado-navbar              { padding: 0 .85rem; }
	#mado-navbar .mn-inner    { gap: .35rem; }
}