/**
 * STAGGERED MENU - Premium CSS
 * Vanilla CSS for React-style StaggeredMenu
 * AUTLHY - Ultra Premium Navigation
 */

/* ============================================
   WRAPPER - Fixed overlay, pointer events control
   ============================================ */
.staggered-menu-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
}

.staggered-menu-wrapper.fixed-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    overflow: hidden;
}

/* ============================================
   HEADER - Toggle Button FIXED TOP RIGHT
   ============================================ */
.staggered-menu-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 🔥 Push toggle to RIGHT */
    /* Hauteur alignée sur .autlhy-nav (15px de padding + ~38px de contenu ≈ 68px) :
       le burger est centré dans la même bande que "Vérifier une pièce", au lieu
       d'être décalé par un padding-top divergent (20px ici vs 15px sur la nav). */
    height: 68px;
    padding: 0 40px;
    background: transparent;
    pointer-events: none;
    z-index: 20;
}

.staggered-menu-header>* {
    pointer-events: auto;
}

/* Logo */
.sm-logo {
    display: flex;
    align-items: center;
    user-select: none;
}

.sm-logo-text {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.sm-logo-text:hover {
    color: var(--sm-accent, #A569BD);
}

/* Dark mode variant */
body:not(.dark-mode) .sm-logo-text {
    color: #1a1a1a;
}

/* ============================================
   TOGGLE BUTTON - Menu/Close + Icon
   ============================================ */
.sm-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    overflow: visible;
    padding: 10px 15px;
    border-radius: 8px;
    transition: background 0.3s;
}

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

.sm-toggle:focus-visible {
    outline: 2px solid var(--sm-accent, #A569BD);
    outline-offset: 4px;
    border-radius: 4px;
}

body:not(.dark-mode) .sm-toggle {
    color: #1a1a1a;
}

body:not(.dark-mode) .sm-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Text wrapper with overflow hidden for cycling */
.sm-toggle-textWrap {
    position: relative;
    display: inline-block;
    height: 1em;
    overflow: hidden;
    white-space: nowrap;
    min-width: 50px;
}

.sm-toggle-textInner {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.sm-toggle-line {
    display: block;
    height: 1em;
    line-height: 1;
}

/* ============================================
   ICON - Plus sign that rotates to X
   ============================================ */
.sm-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

.sm-icon-line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    will-change: transform;
}

.sm-icon-line-v {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* ============================================
   PRE-LAYERS - Colored layers behind panel
   ============================================ */
.sm-prelayers {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: clamp(300px, 45vw, 500px);
    pointer-events: none;
    z-index: 5;
}

[data-position='left'] .sm-prelayers {
    right: auto;
    left: 0;
}

.sm-prelayer {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    transform: translateX(0);
}

/* ============================================
   PANEL - Main menu content area
   ============================================ */
.staggered-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(300px, 45vw, 500px);
    height: 100%;
    background: #ffffff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    padding: 100px 40px 40px 40px;
    overflow-y: auto;
    z-index: 10;
    pointer-events: auto;
}

/* Dark mode panel */
body.dark-mode .staggered-menu-panel,
[data-theme="dark"] .staggered-menu-panel {
    background: #0a0a0a;
}

[data-position='left'] .staggered-menu-panel {
    right: auto;
    left: 0;
}

/* ============================================
   PANEL INNER - Content layout
   ============================================ */
.sm-panel-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ============================================
   MENU ITEMS - Large typography, stagger anim
   ============================================ */
.sm-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sm-panel-itemWrap {
    position: relative;
    overflow: hidden;
    line-height: 1;
}

/* === DEFAULT MENU ITEM: Refined Luxury Typography === */
.sm-panel-item {
    position: relative;
    color: rgba(0, 0, 0, 0.85);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    /* Light - Magazine minimal */
    font-size: 24px;
    cursor: pointer;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: none;
    /* Removed uppercase for sophistication */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    padding: 12px 0;
    margin-bottom: 10px;
}

/* Dark mode item text */
body.dark-mode .sm-panel-item,
[data-theme="dark"] .sm-panel-item {
    color: #fff;
}

.sm-panel-itemLabel {
    display: inline-block;
    will-change: transform;
    transform-origin: 50% 100%;
}

/* Hover effect with arrow */
.sm-panel-item:hover {
    color: var(--sm-accent, #A569BD);
    transform: translateX(4px);
}

.sm-panel-item:hover .sm-panel-itemLabel::after {
    content: ' →';
    margin-left: 8px;
    font-size: 0.9em;
    opacity: 0.8;
}

/* Item numbering - DISABLED for cleaner design */
.sm-panel-list[data-numbering] {
    counter-reset: smItem;
}

.sm-panel-list[data-numbering] .sm-panel-item::after {
    /* Numbering completely disabled */
    display: none !important;
}

/* === MESSAGERIE HIGHLIGHT: Premium Attention === */
.sm-panel-item.sm-item-highlight {
    font-size: 32px !important;
    font-weight: 500 !important;
    color: #A569BD !important;
    background: linear-gradient(90deg, #A569BD 0%, #8E44AD 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 20px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}


body.dark-mode .sm-panel-item.sm-item-highlight,
[data-theme="dark"] .sm-panel-item.sm-item-highlight {
    background: linear-gradient(90deg, #ffffff 0%, #A569BD 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.sm-panel-item.sm-item-highlight:hover {
    transform: translateX(8px);
    filter: brightness(1.1);
}

/* Ensure hover arrow is visible on highlight items despite background-clip: text */
.sm-panel-item.sm-item-highlight:hover .sm-panel-itemLabel::after {
    -webkit-text-fill-color: #A569BD !important;
}

/* === FOOTER ITEMS (small): Discreet & Minimalist === */
.sm-panel-item.sm-item-small {
    font-size: 14px;
    font-weight: 400;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    /* Reduced spacing */
    padding: 6px 0;
    margin-top: 30px;
    /* Push away from main items */
}

.sm-panel-itemWrap.sm-item-small:first-of-type .sm-panel-item {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 20px;
}

body.dark-mode .sm-panel-item.sm-item-small,
[data-theme="dark"] .sm-panel-item.sm-item-small {
    color: #888;
}

body.dark-mode .sm-panel-itemWrap.sm-item-small:first-of-type .sm-panel-item,
[data-theme="dark"] .sm-panel-itemWrap.sm-item-small:first-of-type .sm-panel-item {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.sm-panel-item.sm-item-small:hover {
    color: var(--sm-accent, #A569BD);
    transform: translateX(2px);
    /* Subtle movement */
}

/* ============================================
   TOGGLE SWITCH - Dark mode toggle in menu
   ============================================ */
.sm-toggle-switch {
    position: relative;
    width: 50px;
    height: 28px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    transition: background 0.3s;
    flex-shrink: 0;
}

body.dark-mode .sm-toggle-switch,
[data-theme="dark"] .sm-toggle-switch {
    background: rgba(255, 255, 255, 0.15);
}

.sm-toggle-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sm-toggle-switch.active {
    background: var(--sm-accent, #A569BD);
}

.sm-toggle-switch.active .sm-toggle-switch-knob {
    transform: translateX(22px);
}

/* ============================================
   USER SECTION - Bottom of panel
   ============================================ */
.sm-user-section {
    margin-top: auto;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;
}

body.dark-mode .sm-user-section,
[data-theme="dark"] .sm-user-section {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.sm-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A569BD 0%, #8E44AD 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.sm-user-info {
    flex: 1;
    min-width: 0;
}

.sm-user-email {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark-mode .sm-user-email,
[data-theme="dark"] .sm-user-email {
    color: #aaa;
}

/* ============================================
   RESPONSIVE - Mobile full width
   ============================================ */
@media (max-width: 768px) {

    .staggered-menu-panel,
    .sm-prelayers {
        width: 100%;
        left: 0;
        right: 0;
    }

    .staggered-menu-header {
        padding: 15px 20px;
    }

    .sm-panel-item {
        font-size: 28px;
        padding-right: 50px;
    }

    .staggered-menu-panel {
        padding: 80px 25px 30px 25px;
    }

    /* Invert logo when menu is open on mobile (light panel) */
    .staggered-menu-wrapper[data-open] .sm-logo-text {
        color: #1a1a1a;
    }

    body.dark-mode .staggered-menu-wrapper[data-open] .sm-logo-text,
    [data-theme="dark"] .staggered-menu-wrapper[data-open] .sm-logo-text {
        color: #fff;
    }
}

/* ============================================
   DARK MODE GLOBAL OVERRIDES
   ============================================ */
body.dark-mode {
    --bg-color: #0a0a0a;
    --text-color: #ffffff;
    --card-bg: rgba(28, 28, 28, 0.8);
    --card-border: rgba(165, 105, 189, 0.15);
    --navbar-bg: rgba(10, 10, 10, 0.95);
    --modal-bg: #121212;
    --modal-overlay: rgba(0, 0, 0, 0.9);
    --dropdown-bg: #1a1a1a;
    --input-bg: rgba(0, 0, 0, 0.6);
    --input-border: rgba(165, 105, 189, 0.2);
    --border-color: rgba(165, 105, 189, 0.1);
    background: #0a0a0a;
    color: #fff;
}

/* Light mode explicit */
body:not(.dark-mode) {
    --bg-color: #f8f8f8;
    --text-color: #1a1a1a;
}

/* ============================================
   NAV VISIBILITY - Menu button should be visible
   ============================================ */
/* Removed display: none rule to allow StaggeredMenu toggle to be visible */

/* ============================================
   BURGER ICON - 3 horizontal lines
   ============================================ */
.sm-toggle.sm-burger{
  width:44px;height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  transition:background .25s,border-color .25s;
}
.sm-toggle.sm-burger:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.28);
  transform:none;
}
body:not(.dark-mode) .sm-toggle.sm-burger{
  background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.14);
}
body:not(.dark-mode) .sm-toggle.sm-burger:hover{
  background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.28);
}

.sm-burger-lines {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 12px;
}

.sm-burger-line {
    display: block;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease,
        width 0.35s ease;
    transform-origin: center;
}

/* Middle line slightly shorter for aesthetics */
.sm-burger-line:nth-child(2) {
    width: 70%;
    margin-left: auto;
}

/* Burger to X animation when menu is open */
.staggered-menu-wrapper[data-open] .sm-burger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.staggered-menu-wrapper[data-open] .sm-burger-line:nth-child(2) {
    opacity: 0;
    width: 0;
}

.staggered-menu-wrapper[data-open] .sm-burger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Light mode colors */
body:not(.dark-mode) .staggered-menu-wrapper[data-open] .sm-toggle.sm-burger {
    color: #1a1a1a;
}
/* ============================================
   ESPACE MEMBRE — éditorial (2a)
   ============================================ */
.staggered-menu-panel:has(.sm-v2){ background:#0c0c10 !important; padding:84px 28px 24px !important; border-left:1px solid rgba(255,255,255,.06); }
.sm-panel-inner.sm-v2{ display:flex;flex-direction:column;gap:0; font-family:'Manrope',sans-serif; color:#fff; height:100%; }
.sm-v2 *{ box-sizing:border-box; }
.sm-v2-head{ display:flex;align-items:center;justify-content:space-between;margin-bottom:22px; }
.sm-v2-kicker{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.4);text-transform:uppercase; }
/* Hero user — typo Archivo, plus de carte mauve */
.sm-v2-card{
  padding:0 0 22px;border-radius:0;background:none;border:none;
  border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:22px;
}
.sm-v2-cardtop{ display:flex;align-items:center;gap:13px;margin-bottom:14px; }
.sm-v2-avatar{ width:38px;height:38px;border-radius:50%;background:#1a1520;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;color:#C9A0E0;flex-shrink:0; }
.sm-v2-id{ flex:1;min-width:0; }
.sm-v2-name{
  font-family:'Archivo',sans-serif;font-weight:900;font-size:24px;letter-spacing:-.01em;
  text-transform:uppercase;line-height:1;
  background:linear-gradient(100deg,#fff 20%,#C9A0E0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sm-v2-email{ font-family:'Manrope',sans-serif;font-size:12px;color:rgba(255,255,255,.5);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.sm-v2-plan{ display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:100px;background:rgba(46,212,119,.06);border:1px solid rgba(46,212,119,.28);font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;color:#2ED477;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0;margin-left:auto; }
.sm-v2-dot{ width:5px;height:5px;border-radius:50%;background:#2ED477; }
/* Stats — 3 colonnes fines avec séparateurs */
.sm-v2-stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:14px 0;background:none;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06); }
.sm-v2-stat{ padding:0;background:none;text-align:center;position:relative; }
.sm-v2-stat + .sm-v2-stat::before{ content:"";position:absolute;left:0;top:15%;bottom:15%;width:1px;background:rgba(255,255,255,.06); }
.sm-v2-statnum{ font-family:'Archivo',sans-serif;font-weight:900;font-size:22px;color:#fff;line-height:1;letter-spacing:-.02em; }
.sm-v2-statlbl{ font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.4);text-transform:uppercase;margin-top:5px; }
/* Promo de lancement : 1 analyse gratuite / jour — visible/actualisé à chaque ouverture du menu */
.sm-v2-promo{
  display:flex;align-items:center;gap:8px;margin-top:14px;padding:9px 12px;border-radius:10px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.03em;line-height:1.4;
  background:rgba(46,212,119,.08);border:1px solid rgba(46,212,119,.28);color:#2ED477;
}
.sm-v2-promo.used{ background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.4); }
.sm-v2-promo-ico{ flex-shrink:0;font-size:13px; }
/* Liens espace client — icône contenue + titre Archivo caps */
.sm-v2-links{ display:flex;flex-direction:column;gap:0;margin-bottom:6px; }
.sm-v2-link{
  display:flex;align-items:center;gap:14px;padding:16px 0;border-radius:0;
  color:#fff;text-decoration:none;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05);position:relative;
  transition:padding-left .25s;
}
.sm-v2-link::after{ content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:#C9A0E0;transition:width .3s; }
.sm-v2-link:hover{ background:none;padding-left:4px; }
.sm-v2-link:hover::after{ width:100%; }
.sm-v2-link:first-child{ background:none;border:none;border-bottom:1px solid rgba(255,255,255,.05); }
.sm-v2-ico{
  width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);flex-shrink:0;
}
.sm-v2-txt{ flex:1;display:flex;flex-direction:column; }
.sm-v2-link .sm-panel-itemLabel{ font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;color:#fff;text-transform:uppercase;letter-spacing:.02em; }
.sm-v2-sub{ font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.1em;text-transform:uppercase;margin-top:3px; }
.sm-v2-meta{ font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.12em; }
.sm-v2-badge{ display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:100px;background:#A569BD;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:#fff; }
.sm-v2-chev{ color:rgba(255,255,255,.4);display:flex;align-items:center;transition:transform .25s,color .25s; }
.sm-v2-link:hover .sm-v2-chev{ color:#C9A0E0;transform:translateX(4px); }
/* Navigation secondaire */
.sm-v2-div{ display:none; }
.sm-v2-navlabel{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.35);text-transform:uppercase;margin:22px 0 6px; }
.sm-v2-nav{ display:flex;flex-direction:column; }
.sm-v2-nav a{ display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;color:rgba(255,255,255,.78);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.05);transition:color .2s,padding-left .25s; }
.sm-v2-nav a:hover{ color:#fff;padding-left:4px; }
.sm-v2-arr{ color:rgba(255,255,255,.3);font-size:16px;transition:transform .25s,color .25s; }
.sm-v2-nav a:hover .sm-v2-arr{ color:#C9A0E0;transform:translateX(4px); }
.sm-v2-spacer{ flex:1;min-height:18px; }
.sm-v2-foot{ display:flex;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid rgba(255,255,255,.06); }
.sm-v2-logout{ display:inline-flex;align-items:center;gap:9px;font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;color:rgba(255,255,255,.55);text-decoration:none;cursor:pointer;transition:color .2s; }
.sm-v2-logout:hover{ color:#fff; }
.sm-v2-ver{ font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;color:rgba(255,255,255,.3);text-transform:uppercase; }