/* ============================================================
   NiouLink – Stylesheet Principal
   Mobile First · Communauté · Diaspora Sénégalaise
   ============================================================ */

/* ============================================================
   IMPORTS & FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

/* ============================================================
   CSS VARIABLES (Thème NiouLink)
   ============================================================ */
:root {
    /* Couleurs principales */
    --nl-primary:       #2A9D8F;
    --nl-primary-dark:  #21867A;
    --nl-primary-light: #E8F6F4;
    --nl-primary-rgb:   42, 157, 143;
    
    /* Couleurs catégories */
    --nl-amour:         #9B59B6;
    --nl-amour-dark:    #7D3C98;
    --nl-amour-light:   #F3E5F5;
    --nl-amour-rgb:     155, 89, 182;
    --nl-amitie:        #5DADE2;
    --nl-amitie-dark:   #2E86C1;
    --nl-amitie-light:  #EBF5FB;
    --nl-amitie-rgb:    93, 173, 226;
    --nl-sport:         #E67E22;
    --nl-sport-dark:    #CA6F1E;
    --nl-sport-light:   #FDF2E9;
    --nl-sport-rgb:     230, 126, 34;
    --nl-entraide:      #27AE60;
    --nl-entraide-dark:  #1E8449;
    --nl-entraide-light:#E8F8F0;
    --nl-entraide-rgb:  39, 174, 96;

    /* Couleur alerte (badges notification) */
    --nl-danger:        #E63946;
    
    /* Neutres */
    --nl-dark:          #1A1A2E;
    --nl-text:          #2D3436;
    --nl-text-light:    #636E72;
    --nl-text-muted:    #A0A8AB;
    --nl-border:        #E8EAED;
    --nl-bg:            #F7F8FA;
    --nl-bg-card:       #FFFFFF;
    --nl-white:         #FFFFFF;
    
    /* Ombres */
    --nl-shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.06);
    --nl-shadow:        0 2px 12px rgba(0, 0, 0, 0.08);
    --nl-shadow-lg:     0 8px 30px rgba(0, 0, 0, 0.12);
    --nl-shadow-glow:   0 4px 20px rgba(var(--nl-primary-rgb), 0.25);
    
    /* Rayons */
    --nl-radius-sm:     8px;
    --nl-radius:        12px;
    --nl-radius-lg:     20px;
    --nl-radius-xl:     28px;
    --nl-radius-full:   50%;
    
    /* Typographie */
    --nl-font-body:     'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --nl-font-display:  'Playfair Display', Georgia, serif;
    
    /* Espacements */
    --nl-space-xs:      4px;
    --nl-space-sm:      8px;
    --nl-space-md:      16px;
    --nl-space-lg:      24px;
    --nl-space-xl:      32px;
    --nl-space-2xl:     48px;
    
    /* Navigation mobile */
    --nl-navbar-height:  56px;
    --nl-bottombar-height: 64px;
    
    /* Transitions */
    --nl-transition:     all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --nl-transition-fast: all 0.15s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--nl-font-body);
    font-weight: 400;
    color: var(--nl-text);
    background-color: var(--nl-bg);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    /* Espace pour navbar top + bottom bar */
    padding-top: var(--nl-navbar-height);
    padding-bottom: calc(var(--nl-bottombar-height) + 16px);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
h1, h2, h3 {
    font-family: var(--nl-font-display);
    font-weight: 700;
    color: var(--nl-dark);
    line-height: 1.25;
}

h1 { font-size: 1.75rem; margin-bottom: var(--nl-space-md); }
h2 { font-size: 1.4rem; margin-bottom: var(--nl-space-md); }
h3 { font-size: 1.15rem; margin-bottom: var(--nl-space-sm); }

h4, h5, h6 {
    font-family: var(--nl-font-body);
    font-weight: 600;
    color: var(--nl-dark);
}

p {
    margin-bottom: var(--nl-space-md);
    color: var(--nl-text);
}

a {
    color: var(--nl-primary);
    text-decoration: none;
    transition: var(--nl-transition-fast);
}

a:hover {
    color: var(--nl-primary-dark);
}

/* ============================================================
   NAVBAR SUPÉRIEURE (Mobile First)
   ============================================================ */
.nl-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nl-navbar-height);
    background: var(--nl-white);
    border-bottom: 1px solid var(--nl-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--nl-space-md);
    z-index: 1000;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

.nl-navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--nl-space-sm);
    text-decoration: none;
}

.nl-navbar-brand-logo {
    width: 32px;
    height: 32px;
    border-radius: var(--nl-radius-sm);
}

.nl-navbar-brand-text {
    font-family: var(--nl-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--nl-primary);
    letter-spacing: -0.5px;
}

.nl-navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--nl-space-sm);
}

.nl-navbar-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: var(--nl-radius-full);
    color: var(--nl-text);
    cursor: pointer;
    transition: var(--nl-transition-fast);
}

.nl-navbar-btn:hover,
.nl-navbar-btn:active {
    background: var(--nl-bg);
}

.nl-navbar-btn svg {
    width: 22px;
    height: 22px;
}

/* Badge notification */
.nl-badge-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--nl-danger);
    color: var(--nl-white);
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--nl-white);
}

/* ============================================================
   ICÔNES CATÉGORIES (dans la navbar)
   ============================================================ */
.nl-navbar-cats {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nl-navbar-cat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--nl-radius-full);
    text-decoration: none;
    font-size: 1.1rem;
    transition: var(--nl-transition-fast);
    position: relative;
}

.nl-navbar-cat:hover {
    background: var(--nl-bg);
    transform: scale(1.1);
}

.nl-navbar-cat.active {
    transform: scale(1.15);
}

.nl-navbar-cat.active::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2.5px;
    border-radius: 2px;
}

.nl-navbar-cat.nl-cat-amour::after { background: var(--nl-amour); }
.nl-navbar-cat.nl-cat-amitie::after { background: var(--nl-amitie); }
.nl-navbar-cat.nl-cat-sport::after { background: var(--nl-sport); }
.nl-navbar-cat.nl-cat-entraide::after { background: var(--nl-entraide); }

/* ============================================================
   BARRE DE NAVIGATION INFÉRIEURE (Mobile)
   ============================================================ */
.nl-bottombar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nl-bottombar-height);
    background: var(--nl-white);
    border-top: 1px solid var(--nl-border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
}

.nl-bottombar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 0;
    min-width: 56px;
    text-decoration: none;
    color: var(--nl-text-muted);
    font-size: 0.65rem;
    font-weight: 500;
    transition: var(--nl-transition-fast);
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.nl-bottombar-item svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.8;
    transition: var(--nl-transition-fast);
}

.nl-bottombar-item.active {
    color: var(--nl-primary);
}

.nl-bottombar-item.active svg {
    stroke-width: 2.2;
}

.nl-bottombar-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: var(--nl-primary);
    border-radius: 0 0 3px 3px;
}

/* Bouton central "Créer" */
.nl-bottombar-create {
    position: relative;
    bottom: 8px;
}

.nl-bottombar-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--nl-radius-full);
    background: linear-gradient(135deg, var(--nl-primary), var(--nl-primary-dark));
    color: var(--nl-white);
    border: none;
    cursor: pointer;
    box-shadow: var(--nl-shadow-glow);
    transition: var(--nl-transition);
}

.nl-bottombar-create-btn:hover,
.nl-bottombar-create-btn:active {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(var(--nl-primary-rgb), 0.4);
}

.nl-bottombar-create-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
}

.nl-bottombar-create span {
    font-size: 0.6rem;
    color: var(--nl-text-muted);
    margin-top: 4px;
}

/* ============================================================
   CONTENEUR PRINCIPAL
   ============================================================ */
.nl-container {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--nl-space-md);
}

.nl-container-wide {
    max-width: 960px;
}

/* ============================================================
   CARTES
   ============================================================ */
.nl-card {
    background: var(--nl-bg-card);
    border-radius: var(--nl-radius);
    padding: var(--nl-space-lg);
    box-shadow: var(--nl-shadow-sm);
    border: 1px solid var(--nl-border);
    margin-bottom: var(--nl-space-md);
    transition: var(--nl-transition);
}

.nl-card:hover {
    box-shadow: var(--nl-shadow);
}

.nl-card-header {
    display: flex;
    align-items: center;
    gap: var(--nl-space-sm);
    margin-bottom: var(--nl-space-md);
}

.nl-card-flat {
    box-shadow: none;
    border: 1px solid var(--nl-border);
}

/* ============================================================
   BOUTONS
   ============================================================ */
.nl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nl-space-sm);
    padding: 12px 24px;
    border: none;
    border-radius: var(--nl-radius);
    font-family: var(--nl-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--nl-transition);
    text-decoration: none;
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
}

.nl-btn:active {
    transform: scale(0.97);
}

/* Variantes */
.nl-btn-primary {
    background: linear-gradient(135deg, var(--nl-primary), var(--nl-primary-dark));
    color: var(--nl-white);
    box-shadow: var(--nl-shadow-glow);
}

.nl-btn-primary:hover {
    box-shadow: 0 6px 24px rgba(var(--nl-primary-rgb), 0.4);
    color: var(--nl-white);
}

.nl-btn-outline {
    background: transparent;
    color: var(--nl-primary);
    border: 2px solid var(--nl-primary);
}

.nl-btn-outline:hover {
    background: var(--nl-primary-light);
    color: var(--nl-primary-dark);
}

.nl-btn-ghost {
    background: transparent;
    color: var(--nl-text-light);
}

.nl-btn-ghost:hover {
    background: var(--nl-bg);
    color: var(--nl-text);
}

/* Couleurs catégories */
.nl-btn-amour   { background: var(--nl-amour);   color: var(--nl-white); }
.nl-btn-amitie  { background: var(--nl-amitie);  color: var(--nl-white); }
.nl-btn-sport   { background: var(--nl-sport);   color: var(--nl-white); }
.nl-btn-entraide { background: var(--nl-entraide); color: var(--nl-white); }

/* Tailles */
.nl-btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.nl-btn-lg { padding: 16px 32px; font-size: 1.05rem; }
.nl-btn-full { width: 100%; }

/* ============================================================
   FORMULAIRES
   ============================================================ */
.nl-form-group {
    margin-bottom: var(--nl-space-lg);
}

.nl-form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--nl-text);
    margin-bottom: var(--nl-space-xs);
}

.nl-form-input,
.nl-form-select,
.nl-form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--nl-border);
    border-radius: var(--nl-radius);
    font-family: var(--nl-font-body);
    font-size: 1rem;
    color: var(--nl-text);
    background: var(--nl-white);
    transition: var(--nl-transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.nl-form-input:focus,
.nl-form-select:focus,
.nl-form-textarea:focus {
    outline: none;
    border-color: var(--nl-primary);
    box-shadow: 0 0 0 4px rgba(var(--nl-primary-rgb), 0.1);
}

.nl-form-input.is-invalid,
.nl-form-select.is-invalid {
    border-color: var(--nl-danger);
}

.nl-form-textarea {
    min-height: 100px;
    resize: vertical;
}

.nl-form-hint {
    display: block;
    font-size: 0.78rem;
    color: var(--nl-text-muted);
    margin-top: var(--nl-space-xs);
}

/* ============================================================
   BADGES CATÉGORIES
   ============================================================ */
.nl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.nl-badge-amour   { background: var(--nl-amour-light);   color: var(--nl-amour); }
.nl-badge-amitie  { background: var(--nl-amitie-light);  color: var(--nl-amitie); }
.nl-badge-sport   { background: var(--nl-sport-light);   color: var(--nl-sport); }
.nl-badge-entraide { background: var(--nl-entraide-light); color: var(--nl-entraide); }

/* ============================================================
   AVATAR
   ============================================================ */
.nl-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--nl-radius-full);
    object-fit: cover;
    border: 2px solid var(--nl-border);
}

.nl-avatar-sm  { width: 32px; height: 32px; border-radius: var(--nl-radius-full); object-fit: cover; }
.nl-avatar-lg  { width: 64px; height: 64px; border-radius: var(--nl-radius-full); object-fit: cover; }
.nl-avatar-xl  { width: 96px; height: 96px; border-radius: var(--nl-radius-full); object-fit: cover; }

/* ============================================================
   SECTION TITRES
   ============================================================ */
.nl-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--nl-space-md);
}

.nl-section-title h2 {
    margin-bottom: 0;
    font-size: 1.2rem;
}

.nl-section-title a {
    font-size: 0.85rem;
    font-weight: 600;
}

/* ============================================================
   FLASH MESSAGES
   ============================================================ */
.flash-container {
    padding: 0 var(--nl-space-md);
}

.flash-container .alert {
    border: none;
    border-radius: var(--nl-radius);
    font-size: 0.9rem;
    font-weight: 500;
    animation: flashSlideIn 0.3s ease;
}

@keyframes flashSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   LISTE DE DEMANDES
   ============================================================ */
.nl-demande-item {
    display: flex;
    gap: var(--nl-space-md);
    padding: var(--nl-space-md);
    background: var(--nl-bg-card);
    border-radius: var(--nl-radius);
    border: 1px solid var(--nl-border);
    margin-bottom: var(--nl-space-sm);
    transition: var(--nl-transition);
    text-decoration: none;
    color: inherit;
}

.nl-demande-item:hover {
    box-shadow: var(--nl-shadow);
    border-color: transparent;
    color: inherit;
}

.nl-demande-content {
    flex: 1;
    min-width: 0; /* Empêche le débordement */
}

.nl-demande-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--nl-dark);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nl-demande-meta {
    display: flex;
    align-items: center;
    gap: var(--nl-space-sm);
    font-size: 0.78rem;
    color: var(--nl-text-muted);
    flex-wrap: wrap;
}

.nl-demande-meta svg {
    width: 14px;
    height: 14px;
}

/* ============================================================
   URGENCE (Entraide) – couleurs sémantiques fixes
   ============================================================ */
.nl-urgence-faible  { border-left: 4px solid #27AE60; }
.nl-urgence-moyenne { border-left: 4px solid #E9A319; }
.nl-urgence-elevee  { border-left: 4px solid var(--nl-danger); }

/* ============================================================
   PAGES AUTH
   ============================================================ */
.nl-auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--nl-primary-light) 0%, #F7F8FA 40%, #FDE8EA 100%);
}

.nl-auth-header {
    text-align: center;
    padding: var(--nl-space-2xl) var(--nl-space-md) var(--nl-space-lg);
}

.nl-auth-header h1 {
    font-family: var(--nl-font-display);
    font-size: 2rem;
    color: var(--nl-primary);
    margin-bottom: var(--nl-space-xs);
}

.nl-auth-header p {
    color: var(--nl-text-light);
    font-size: 0.9rem;
}

.nl-auth-card {
    background: var(--nl-white);
    border-radius: var(--nl-radius-xl) var(--nl-radius-xl) 0 0;
    padding: var(--nl-space-xl) var(--nl-space-lg);
    flex: 1;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   ÉTAT VIDE
   ============================================================ */
.nl-empty-state {
    text-align: center;
    padding: var(--nl-space-2xl) var(--nl-space-md);
}

.nl-empty-state-icon {
    font-size: 3rem;
    margin-bottom: var(--nl-space-md);
    opacity: 0.6;
}

.nl-empty-state h3 {
    font-family: var(--nl-font-body);
    font-weight: 600;
    margin-bottom: var(--nl-space-sm);
}

.nl-empty-state p {
    color: var(--nl-text-muted);
    font-size: 0.9rem;
}

/* ============================================================
   UTILITAIRES
   ============================================================ */
.nl-text-center { text-align: center; }
.nl-text-muted  { color: var(--nl-text-muted); }
.nl-text-small  { font-size: 0.85rem; }
.nl-mt-md       { margin-top: var(--nl-space-md); }
.nl-mt-lg       { margin-top: var(--nl-space-lg); }
.nl-mb-md       { margin-bottom: var(--nl-space-md); }
.nl-mb-lg       { margin-bottom: var(--nl-space-lg); }
.nl-gap-sm      { gap: var(--nl-space-sm); }
.nl-gap-md      { gap: var(--nl-space-md); }
.nl-flex-center { display: flex; align-items: center; justify-content: center; }
.nl-truncate    { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-divider     { border: none; border-top: 1px solid var(--nl-border); margin: var(--nl-space-lg) 0; }

/* ============================================================
   RESPONSIVE – TABLETTE & DESKTOP
   ============================================================ */
@media (min-width: 768px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.6rem; }
    
    .nl-container {
        padding: var(--nl-space-lg);
    }
    
    .nl-auth-card {
        border-radius: var(--nl-radius-xl);
        max-width: 480px;
        margin: 0 auto var(--nl-space-2xl);
        flex: none;
    }
}

@media (min-width: 1024px) {
    :root {
        --nl-bottombar-height: 64px;
        --nl-navbar-height: 68px;
    }

    body {
        padding-bottom: calc(var(--nl-bottombar-height) + 16px);
    }

    /* Bottom bar desktop : centrée et plus élégante */
    .nl-bottombar {
        left: 50%;
        transform: translateX(-50%);
        width: 480px;
        max-width: 90vw;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--nl-border);
        border-bottom: none;
    }

    .nl-bottombar-item {
        font-size: 0.72rem;
        gap: 3px;
    }

    .nl-bottombar-item svg {
        width: 26px;
        height: 26px;
    }

    .nl-bottombar-create-btn {
        width: 52px;
        height: 52px;
    }

    .nl-bottombar-create-btn svg {
        width: 26px;
        height: 26px;
    }

    /* Navbar desktop : plus grande et plus aérée */
    .nl-navbar {
        padding: 0 var(--nl-space-2xl);
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
        border-bottom: none;
    }

    .nl-navbar-brand-logo {
        width: 40px;
        height: 40px;
        border-radius: var(--nl-radius-md);
    }

    .nl-navbar-brand-text {
        font-size: 1.55rem;
        letter-spacing: -0.5px;
    }

    .nl-navbar-brand {
        gap: var(--nl-space-md);
    }

    /* Icones catégories desktop : plus grandes et espacées */
    .nl-navbar-cats {
        gap: 8px;
    }
    .nl-navbar-cat {
        width: 44px;
        height: 44px;
        font-size: 1.35rem;
        border-radius: var(--nl-radius-lg);
    }
    .nl-navbar-cat:hover {
        background: var(--nl-bg);
        transform: scale(1.12);
    }

    /* Actions droite plus grandes */
    .nl-navbar-actions {
        gap: var(--nl-space-md);
    }

    .nl-navbar-btn {
        width: 44px;
        height: 44px;
    }

    .nl-navbar-btn svg {
        width: 24px;
        height: 24px;
    }

    .nl-avatar-sm {
        width: 36px;
        height: 36px;
    }

    /* Afficher la nav desktop dans la navbar */
    .nl-navbar-desktop-nav {
        display: flex;
    }

    .nl-container {
        max-width: 720px;
    }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nl-animate-in {
    animation: fadeInUp 0.4s ease forwards;
}

.nl-animate-delay-1 { animation-delay: 0.1s; opacity: 0; }
.nl-animate-delay-2 { animation-delay: 0.2s; opacity: 0; }
.nl-animate-delay-3 { animation-delay: 0.3s; opacity: 0; }
.nl-animate-delay-4 { animation-delay: 0.4s; opacity: 0; }

/* ============================================================
   SCROLL ENHANCEMENTS
   ============================================================ */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--nl-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--nl-text-muted);
}

/* ============================================================
   CATEGORY MODES – Ambiance visuelle par catégorie
   ============================================================ */

/* --- Transition globale pour changement de catégorie --- */
body {
    transition: background-color 0.4s ease;
}

.nl-navbar,
.nl-bottombar {
    transition: background 0.4s ease, border-color 0.3s ease;
}

.nl-main {
    animation: nl-categoryFadeIn 0.35s ease;
}

@keyframes nl-categoryFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------
   MODE AMOUR – Intime, chaleureux, doux (Premium)
   --------------------------------------------------- */
body[data-category="amour"] {
    --nl-primary:       var(--nl-amour);
    --nl-primary-dark:  var(--nl-amour-dark);
    --nl-primary-light: var(--nl-amour-light);
    --nl-primary-rgb:   var(--nl-amour-rgb);
    background: var(--nl-primary-light);
    min-height: 100vh;
}

body[data-category="amour"] .nl-navbar {
    background: var(--nl-primary-light);
    border-bottom-color: rgba(var(--nl-primary-rgb), 0.1);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

body[data-category="amour"] .nl-navbar-brand-text {
    color: var(--nl-primary);
    font-weight: 700;
}

body[data-category="amour"] .nl-bottombar {
    background: var(--nl-primary-light);
    border-top-color: rgba(var(--nl-primary-rgb), 0.08);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

body[data-category="amour"] .nl-bottombar-item.active {
    color: var(--nl-primary);
}

body[data-category="amour"] .nl-bottombar-item.active::before {
    background: linear-gradient(135deg, var(--nl-primary), var(--nl-primary-dark));
}

body[data-category="amour"] .nl-bottombar-create-btn {
    background: linear-gradient(135deg, var(--nl-primary), var(--nl-primary-dark));
    box-shadow: 0 4px 20px rgba(var(--nl-primary-rgb), 0.3);
}

/* Amour : éléments plus arrondis et raffinés */
body[data-category="amour"] .nl-btn {
    border-radius: var(--nl-radius-lg);
}

body[data-category="amour"] .nl-card {
    border-radius: var(--nl-radius-lg);
}

body[data-category="amour"] .nl-form-input,
body[data-category="amour"] .nl-form-select,
body[data-category="amour"] .nl-form-textarea {
    border-radius: var(--nl-radius-lg);
}

/* Cartes amour : bordure gauche douce avec gradient */
body[data-category="amour"] .nl-card {
    border-left: 3px solid rgba(var(--nl-primary-rgb), 0.18);
    box-shadow: 0 1px 8px rgba(var(--nl-primary-rgb), 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body[data-category="amour"] .nl-card:hover {
    box-shadow: 0 4px 20px rgba(var(--nl-primary-rgb), 0.1);
    border-left-color: rgba(var(--nl-primary-rgb), 0.35);
}

body[data-category="amour"] .nl-demande-item {
    border-left: 3px solid rgba(var(--nl-primary-rgb), 0.18);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body[data-category="amour"] .nl-demande-item:hover {
    border-left-color: rgba(var(--nl-primary-rgb), 0.4);
    background: rgba(var(--nl-primary-rgb), 0.02);
}

/* Amour : titres avec couleur primaire */
body[data-category="amour"] h1,
body[data-category="amour"] h2 {
    color: var(--nl-dark);
}

/* Amour : container premium */
body[data-category="amour"] .nl-container {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Amour : scrollbar personnalisée */
body[data-category="amour"]::-webkit-scrollbar-thumb {
    background: rgba(var(--nl-primary-rgb), 0.2);
    border-radius: 3px;
}

body[data-category="amour"]::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--nl-primary-rgb), 0.35);
}

/* ---------------------------------------------------
   MODE AMITIE – Convivial, social, ouvert
   --------------------------------------------------- */
body[data-category="amitie"] {
    --nl-primary:       var(--nl-amitie);
    --nl-primary-dark:  var(--nl-amitie-dark);
    --nl-primary-light: var(--nl-amitie-light);
    --nl-primary-rgb:   var(--nl-amitie-rgb);
    background-color: var(--nl-primary-light);
}

body[data-category="amitie"] .nl-navbar {
    background: var(--nl-primary-light);
    border-bottom-color: rgba(var(--nl-primary-rgb), 0.12);
    backdrop-filter: blur(12px);
}

body[data-category="amitie"] .nl-navbar-brand-text {
    color: var(--nl-primary);
}

body[data-category="amitie"] .nl-bottombar {
    background: var(--nl-primary-light);
    border-top-color: rgba(var(--nl-primary-rgb), 0.12);
}

body[data-category="amitie"] .nl-bottombar-item.active {
    color: var(--nl-primary);
}

body[data-category="amitie"] .nl-bottombar-item.active::before {
    background: var(--nl-primary);
}

body[data-category="amitie"] .nl-bottombar-create-btn {
    background: linear-gradient(135deg, var(--nl-primary), var(--nl-primary-dark));
    box-shadow: 0 4px 20px rgba(var(--nl-primary-rgb), 0.25);
}

/* Cartes amitié : bordure gauche */
body[data-category="amitie"] .nl-card {
    border-left: 3px solid rgba(var(--nl-primary-rgb), 0.2);
}

body[data-category="amitie"] .nl-demande-item {
    border-left: 3px solid rgba(var(--nl-primary-rgb), 0.2);
}

/* ---------------------------------------------------
   MODE SPORT – Dynamique, motivant, actif
   --------------------------------------------------- */
body[data-category="sport"] {
    --nl-primary:       var(--nl-sport);
    --nl-primary-dark:  var(--nl-sport-dark);
    --nl-primary-light: var(--nl-sport-light);
    --nl-primary-rgb:   var(--nl-sport-rgb);
    background-color: var(--nl-primary-light);
}

body[data-category="sport"] .nl-navbar {
    background: var(--nl-primary-light);
    border-bottom-color: rgba(var(--nl-primary-rgb), 0.12);
    backdrop-filter: blur(12px);
}

body[data-category="sport"] .nl-navbar-brand-text {
    color: var(--nl-primary);
}

body[data-category="sport"] .nl-bottombar {
    background: var(--nl-primary-light);
    border-top-color: rgba(var(--nl-primary-rgb), 0.12);
}

body[data-category="sport"] .nl-bottombar-item.active {
    color: var(--nl-primary);
}

body[data-category="sport"] .nl-bottombar-item.active::before {
    background: var(--nl-primary);
}

body[data-category="sport"] .nl-bottombar-create-btn {
    background: linear-gradient(135deg, var(--nl-primary), var(--nl-primary-dark));
    box-shadow: 0 4px 20px rgba(var(--nl-primary-rgb), 0.25);
}

/* Cartes sport : bordure gauche */
body[data-category="sport"] .nl-card {
    border-left: 3px solid rgba(var(--nl-primary-rgb), 0.2);
}

body[data-category="sport"] .nl-demande-item {
    border-left: 3px solid rgba(var(--nl-primary-rgb), 0.2);
}

/* Sport : boutons plus dynamiques */
body[data-category="sport"] .nl-btn-primary:hover {
    transform: translateY(-1px);
}

/* ---------------------------------------------------
   MODE ENTRAIDE – Sérieux, rassurant, structuré
   --------------------------------------------------- */
body[data-category="entraide"] {
    --nl-primary:       var(--nl-entraide);
    --nl-primary-dark:  var(--nl-entraide-dark);
    --nl-primary-light: var(--nl-entraide-light);
    --nl-primary-rgb:   var(--nl-entraide-rgb);
    background-color: var(--nl-primary-light);
}

body[data-category="entraide"] .nl-navbar {
    background: var(--nl-primary-light);
    border-bottom-color: rgba(var(--nl-primary-rgb), 0.12);
    backdrop-filter: blur(12px);
}

body[data-category="entraide"] .nl-navbar-brand-text {
    color: var(--nl-primary);
}

body[data-category="entraide"] .nl-bottombar {
    background: var(--nl-primary-light);
    border-top-color: rgba(var(--nl-primary-rgb), 0.12);
}

body[data-category="entraide"] .nl-bottombar-item.active {
    color: var(--nl-primary);
}

body[data-category="entraide"] .nl-bottombar-item.active::before {
    background: var(--nl-primary);
}

body[data-category="entraide"] .nl-bottombar-create-btn {
    background: linear-gradient(135deg, var(--nl-primary), var(--nl-primary-dark));
    box-shadow: 0 4px 20px rgba(var(--nl-primary-rgb), 0.25);
}

/* Cartes entraide : bordure gauche */
body[data-category="entraide"] .nl-card {
    border-left: 3px solid rgba(var(--nl-primary-rgb), 0.2);
}

body[data-category="entraide"] .nl-demande-item {
    border-left: 3px solid rgba(var(--nl-primary-rgb), 0.2);
}

/* ---------------------------------------------------
   Category page header (titre contextuel)
   --------------------------------------------------- */
.nl-category-hero {
    text-align: center;
    padding: var(--nl-space-lg) var(--nl-space-md) var(--nl-space-md);
}

.nl-category-hero-icon {
    font-size: 2rem;
    margin-bottom: var(--nl-space-sm);
}

.nl-category-hero h1 {
    font-size: 1.4rem;
    color: var(--nl-primary);
    margin-bottom: var(--nl-space-xs);
}

.nl-category-hero p {
    font-size: 0.88rem;
    color: var(--nl-text-light);
    margin-bottom: 0;
}

/* ---------------------------------------------------
   Links adaptatifs dans les catégories
   Exclut les liens avec fond coloré (boutons, CTA, actions)
   --------------------------------------------------- */
body[data-category] a:not([class*="btn"]):not([class*="action-main"]):not([class*="cta-btn"]):not([class*="nl-ai-card"]) { color: var(--nl-primary); }
body[data-category] a:not([class*="btn"]):not([class*="action-main"]):not([class*="cta-btn"]):not([class*="nl-ai-card"]):hover { color: var(--nl-primary-dark); }

/* Garder les badges de notification toujours visibles */
body[data-category] .nl-badge-count {
    background: var(--nl-danger);
}

/* Garder les liens nav non colorés par le mode */
body[data-category] .nl-navbar-brand { color: inherit; }
body[data-category] .nl-navbar-cat { color: inherit; }
body[data-category] .nl-bottombar-item { text-decoration: none; }
body[data-category] .nl-bottombar-item:not(.active) { color: var(--nl-text-muted); }

/* ============================================================
   SAFE AREAS (iPhone notch, etc.)
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
    .nl-bottombar {
        height: calc(var(--nl-bottombar-height) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
    }

    body {
        padding-bottom: calc(var(--nl-bottombar-height) + env(safe-area-inset-bottom) + 16px);
    }
}

/* ============================================================
   AUTOCOMPLÉTION VILLE
   ============================================================ */
.nl-ac-wrapper {
    position: relative;
}

.nl-ac-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--nl-white, #fff);
    border: 1.5px solid var(--nl-border, #E5E7EB);
    border-top: none;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.nl-ac-dropdown.nl-ac-open {
    display: block;
    animation: nlAcSlide 0.15s ease;
}

@keyframes nlAcSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nl-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.1s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.nl-ac-item:last-child {
    border-bottom: none;
    border-radius: 0 0 12px 12px;
}

.nl-ac-item:hover,
.nl-ac-item.nl-ac-active {
    background: var(--nl-primary-light, #E8F6F4);
}

.nl-ac-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.nl-ac-text {
    flex: 1;
    font-size: 0.88rem;
    color: var(--nl-text, #1D3557);
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nl-ac-text mark {
    background: rgba(var(--nl-primary-rgb), 0.15);
    color: var(--nl-primary-dark, #21867A);
    font-weight: 700;
    border-radius: 2px;
    padding: 0 1px;
}

.nl-ac-source {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.nl-ac-empty {
    padding: 16px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--nl-text-muted, #A0A4B0);
}

/* Bouton géolocalisation */
.nl-ac-geoloc {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--nl-primary-light, #E8F6F4);
    color: var(--nl-primary, #2A9D8F);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    z-index: 2;
}

.nl-ac-geoloc:hover {
    background: var(--nl-primary, #2A9D8F);
    color: #fff;
}

/* Ajustement pour les inputs dans .nl-filter-ville */
.nl-filter-ville .nl-ac-wrapper {
    flex: 1;
}

.nl-filter-ville .nl-ac-dropdown {
    border-radius: 0 0 12px 12px;
}