/* NosMarques – Mega Menu | Auteur : A.Alami | v3.3 */ /* ── Toutes les variables sur :root ────────────────────────── Le panel est déplacé dans le par JS. Les variables doivent être sur :root pour être héritées. ─────────────────────────────────────────────────────────── */ :root { --nm-accent: var(--theme-color-default, #1a1a2e); --nm-bg-mega: #ffffff; --nm-text-primary: #1a1a2e; --nm-text-light: #9ca3af; --nm-brand-hover-bg: #f3f4f6; --nm-brand-hover-color: var(--nm-accent); --nm-letter-inactive: #d1d5db; --nm-border-top-size: 3px; --nm-mega-shadow: 0 20px 60px rgba(0,0,0,0.15); --nm-transition: 0.22s ease; --nm-font-trigger: 13px; --nm-font-letters: 12px; --nm-font-brands: 12px; --nm-columns: 3; } .nm-wrapper { position: static; display: inline-flex; align-items: stretch; } /* ── Trigger ── */ .nm-trigger { display: inline-flex; align-items: center; gap: 5px; height: 100%; min-height: 48px; font-size: var(--nm-font-trigger); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nm-text-primary); background: transparent; border: none; cursor: pointer; user-select: none; transition: color var(--nm-transition); position: relative; outline: none; padding: 0 14px; white-space: nowrap; } .nm-trigger-arrow { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid currentColor; transition: transform var(--nm-transition); flex-shrink: 0; } /* ── Icône uploadée dans le bouton trigger ── */ .nm-trigger-icon { display: inline-block; height: 20px; width: auto; max-width: 28px; object-fit: contain; vertical-align: middle; flex-shrink: 0; } .nm-trigger-line { position: absolute; bottom: 0; left: 0; right: 0; height: var(--nm-border-top-size); background: var(--nm-accent); transform: scaleX(0); transition: transform 0.2s ease; transform-origin: left; } .nm-trigger.nm-trigger-open { color: var(--nm-accent); } .nm-trigger.nm-trigger-open .nm-trigger-arrow { transform: rotate(180deg); } .nm-trigger.nm-trigger-open .nm-trigger-line { transform: scaleX(1); } /* ── Mega Panel ────────────────────────────────────────────── Le panel est appendé au par JS. Sa position/width sont définies en inline style par JS. On définit ici uniquement l'apparence. ─────────────────────────────────────────────────────────── */ .nm-mega-panel { display: none; background: var(--nm-bg-mega, #ffffff); border-top: var(--nm-border-top-size) solid var(--nm-accent); box-shadow: var(--nm-mega-shadow); animation: nmSlideDown 0.22s ease forwards; } @keyframes nmSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .nm-mega-panel .container { padding-top: 16px; padding-bottom: 20px; } /* ── Barre alphabet – une seule ligne ── */ .nm-alpha-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; border-bottom: 1px solid #e5e7eb; padding-bottom: 10px; margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nm-alpha-bar::-webkit-scrollbar { display: none; } .nm-alpha-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; font-size: var(--nm-font-letters); font-weight: 700; border-radius: 4px; cursor: pointer; transition: all var(--nm-transition); color: var(--nm-text-primary); background: transparent; border: 1px solid transparent; line-height: 1; white-space: nowrap; } .nm-alpha-btn:hover { border-color: var(--nm-accent); color: var(--nm-accent); } .nm-alpha-btn.nm-active { background: var(--nm-accent); color: #fff; border-color: var(--nm-accent); } .nm-alpha-btn.nm-disabled { color: var(--nm-letter-inactive); pointer-events: none; cursor: default; } /* ── Blocs ── */ .nm-content-area { min-height: 120px; } .nm-letter-block { display: none; } .nm-letter-block.nm-visible { display: block; animation: nmFadeIn 0.16s ease; } @keyframes nmFadeIn { from { opacity: 0; } to { opacity: 1; } } .nm-block-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; } .nm-block-letter { font-size: 2.4rem; font-weight: 900; line-height: 1; color: var(--nm-accent); opacity: 0.1; letter-spacing: -0.05em; } .nm-block-count { font-size: 10px; color: var(--nm-text-light); letter-spacing: 0.1em; text-transform: uppercase; } /* ── Grille colonnes ── */ .nm-brands-grid { display: grid; grid-template-columns: repeat(var(--nm-columns, 3), 1fr); gap: 1px 16px; list-style: none; } .nm-brand-link { display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 3px; font-size: var(--nm-font-brands); color: var(--nm-text-primary); text-decoration: none; transition: background var(--nm-transition), color var(--nm-transition), padding-left var(--nm-transition), border-left-color var(--nm-transition); border-left: 2px solid transparent; line-height: 1.3; } .nm-brand-link::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--nm-accent); opacity: 0; transition: opacity var(--nm-transition); flex-shrink: 0; } .nm-brand-link:hover { background: var(--nm-brand-hover-bg); color: var(--nm-brand-hover-color); padding-left: 10px; border-left-color: var(--nm-accent); } .nm-brand-link:hover::before { opacity: 1; } /* ── Footer ── */ .nm-mega-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1px solid #f3f4f6; font-size: 11px; color: var(--nm-text-light); } .nm-footer-total strong { color: var(--nm-accent); } .nm-view-all { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--nm-accent); text-decoration: none; padding: 4px 10px; border: 1.5px solid var(--nm-accent); border-radius: 20px; transition: all var(--nm-transition); } .nm-view-all:hover { background: var(--nm-accent); color: #fff; } /* ── Responsive ── */ @media (max-width: 768px) { :root { --nm-columns: 2; } } @media (max-width: 480px) { :root { --nm-columns: 1; } }