/* ==========================================================================
   LYANN - Design System (Vert Pastel, Jaune Sable & Bleu Lagon)
   ========================================================================== */
:root {
    /* Brand Palette - Direct from Logo */
    --primary: #4A7C59;            /* Vert Sage Pastel Logo */
    --primary-light: #709C7D;
    --primary-dark: #35583F;

    --sand-yellow: #E5B345;        /* Jaune Sable Logo */
    --sand-yellow-light: #F4D375;
    --sand-yellow-dark: #C69222;

    --sky-blue: #7BC5E3;           /* Bleu Pastel Lagon */
    --sky-blue-light: #E8F6FA;
    --sky-blue-dark: #3F9EB0;

    --gradient-logo: linear-gradient(135deg, #4A7C59 0%, #80A86E 50%, #E5B345 100%);
    --gradient-bg-soft: linear-gradient(135deg, rgba(74, 124, 89, 0.05) 0%, rgba(229, 179, 69, 0.05) 50%, rgba(123, 197, 227, 0.06) 100%);
    --gradient-card: linear-gradient(145deg, #FFFFFF 0%, #FDFCF9 100%);
    --gradient-hero: linear-gradient(135deg, #FDFCF9 0%, #F6FBF7 45%, #FFFCF6 75%, #F6FBFC 100%);

    /* Pop Accents */
    --pop-coral: #E76F51;
    --pop-coral-light: #FCEBE6;
    --pop-emerald: #4A7C59;
    --pop-emerald-light: #EBF3EE;
    --pop-yellow: #E5B345;
    --pop-yellow-light: #FDF7E7;
    --pop-sky: #48CAE4;
    --pop-sky-light: #EBF9FC;
    --pop-purple: #9D4EDD;
    --pop-purple-light: #F6EDFC;

    /* Neutrals — Warm Sandy Tone */
    --bg: #FDFCF9;
    --bg-white: #FFFFFF;
    --bg-warm: #F7F4EE;
    --bg-dark: #1E2822;
    --text: #243329;
    --text-muted: #5C6E62;
    --text-light: #FDFCF9;

    /* UI Tokens */
    --border: #E5DFD5;
    --shadow-sm: 0 2px 8px rgba(36, 51, 41, 0.05);
    --shadow-md: 0 8px 24px rgba(36, 51, 41, 0.07);
    --shadow-lg: 0 16px 40px rgba(36, 51, 41, 0.1);
    --shadow-3d: 0 20px 40px rgba(74, 124, 89, 0.12), 0 4px 12px rgba(229, 179, 69, 0.08);
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;
    --transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);

    /* ==========================================================================
       LYANN CENTRALIZED LAYOUT & SAFE AREA TOKENS
       ========================================================================== */
    --lyann-safe-top: env(safe-area-inset-top, 0px);
    --lyann-safe-bottom: env(safe-area-inset-bottom, 0px);
    --lyann-safe-left: env(safe-area-inset-left, 0px);
    --lyann-safe-right: env(safe-area-inset-right, 0px);

    --lyann-chat-header-offset: 48px;
    --lyann-header-height: 64px;
    --lyann-header-total-height: calc(var(--lyann-header-height) + var(--lyann-safe-top));

    --lyann-bottom-nav-height: 68px;
    --lyann-bottom-nav-total-height: calc(var(--lyann-bottom-nav-height) + var(--lyann-safe-bottom));

    --lyann-page-padding-x: 20px;
    --lyann-page-padding-top: 16px;
    --lyann-page-padding-bottom: 24px;

    --lyann-touch-target-ios: 44px;
    --lyann-touch-target-android: 48px;
    --lyann-touch-target: 44px;

    /* Spacing System Grid Tokens */
    --lyann-space-1: 4px;
    --lyann-space-2: 8px;
    --lyann-space-3: 12px;
    --lyann-space-4: 16px;
    --lyann-space-5: 20px;
    --lyann-space-6: 24px;
    --lyann-space-8: 32px;
    --lyann-space-12: 48px;
}

/* ==========================================================================
   UNIVERSAL PAGE CONTAINER SYSTEM (.lyann-page-container)
   ========================================================================== */
.lyann-page-container {
    width: 100%;
    min-height: 100dvh;
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: var(--lyann-header-total-height);
    padding-bottom: calc(var(--lyann-page-padding-bottom) + var(--lyann-safe-bottom));
}

body.has-bottom-nav .lyann-page-container,
body.is-native-app .lyann-page-container {
    padding-bottom: calc(var(--lyann-bottom-nav-total-height) + var(--lyann-page-padding-bottom));
}

.lyann-page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--lyann-header-total-height);
    padding-top: var(--lyann-safe-top);
    background: #FFFFFF;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: var(--lyann-page-padding-x);
    padding-right: var(--lyann-page-padding-x);
    z-index: 1000;
    box-sizing: border-box;
}

.lyann-page-content {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--lyann-page-padding-x);
    padding-right: var(--lyann-page-padding-x);
    padding-top: var(--lyann-page-padding-top);
    box-sizing: border-box;
}

/* ==========================================================================
   KEYBOARD AVOIDANCE & VIEWPORT HELPERS
   ========================================================================== */
body.keyboard-open .mobile-bottom-nav,
body.keyboard-open.is-native-app.has-member-nav .mobile-bottom-nav,
body.keyboard-open .speed-dial-wrapper,
body.keyboard-open #backToTopBtn {
    display: none !important;
}

body.keyboard-open {
    padding-bottom: 0 !important;
}

/* Touch Targets Standard (44px iOS / 48px Android) */
.btn-icon,
.nav-tab,
.modal-close-btn,
.drawer-close-btn,
.icon-btn,
.header-action-btn,
.back-btn {
    min-width: var(--lyann-touch-target-ios, 44px);
    min-height: var(--lyann-touch-target-ios, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

body.is-android-app .btn-icon,
body.is-android-app .nav-tab,
body.is-android-app .modal-close-btn,
body.is-android-app .drawer-close-btn,
body.is-android-app .icon-btn,
body.is-android-app .header-action-btn,
body.is-android-app .back-btn {
    min-width: var(--lyann-touch-target-android, 48px);
    min-height: var(--lyann-touch-target-android, 48px);
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    max-width: 100vw;
}

body {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    overflow-x: clip;
    max-width: 100vw;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

img, video, picture, canvas {
    max-width: 100%;
    height: auto;
}

/* Fond artisan global (web + app) — moitié de la présence homepage */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url('hero-image.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 40%;
    opacity: 0.08;
}

/* Overlay de bruit SVG pour éliminer les dégradés plats */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9998;
    opacity: 0.6;
}

/* Anneaux de focus d'accessibilité & interactions fluides */
:focus-visible {
    outline: 2.5px solid var(--primary);
    outline-offset: 3px;
}

/* Boutons tactiles mobile-first */
.btn, .nav-link, .category-card, .lyan-card, .flash-card {
    min-height: 44px;
    touch-action: manipulation;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.text-center { text-align: center; }

.text-gradient {
    background: var(--gradient-logo);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section {
    padding: 64px 0;
    position: relative;
}

.section-header {
    margin-bottom: 36px;
}

.section-header h2 {
    font-size: 2.6rem;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
    font-weight: 800;
}

.section-subtitle {
    font-size: 1.18rem;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Pill Badges */
.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
}

.pill-green {
    background: var(--pop-emerald-light);
    color: var(--primary);
    border: 1px solid rgba(74, 124, 89, 0.25);
}

.pill-yellow {
    background: var(--pop-yellow-light);
    color: var(--sand-yellow-dark);
    border: 1px solid rgba(229, 179, 69, 0.3);
}

.pill-blue {
    background: var(--sky-blue-light);
    color: var(--sky-blue-dark);
    border: 1px solid rgba(123, 197, 227, 0.35);
}

/* Buttons — Full Edge Gradient & Outer Contour Rings */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: var(--radius-full);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    outline: none;
    white-space: normal;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-clip: border-box;
    background-origin: border-box;
}

.btn-primary {
    background: var(--gradient-logo);
    color: white;
    box-shadow: 0 0 0 2px rgba(74, 124, 89, 0.25), 0 6px 20px rgba(74, 124, 89, 0.28);
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.4), 0 12px 30px rgba(74, 124, 89, 0.42);
}

.btn-outline {
    background: #FFFFFF;
    color: var(--primary-dark);
    border: 2px solid rgba(74, 124, 89, 0.4);
    box-shadow: 0 4px 14px rgba(36, 51, 41, 0.05);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(74, 124, 89, 0.18), 0 0 0 3px rgba(74, 124, 89, 0.15);
}

.btn-accent {
    background: linear-gradient(135deg, #F4D375 0%, #E5B345 100%);
    color: #1E2822;
    font-weight: 800;
    box-shadow: 0 0 0 2px rgba(229, 179, 69, 0.35), 0 6px 20px rgba(229, 179, 69, 0.3);
}

.btn-accent:hover {
    background: linear-gradient(135deg, #F7DC8C 0%, #E5B345 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 0 3px rgba(229, 179, 69, 0.5), 0 12px 30px rgba(229, 179, 69, 0.48);
}

.btn-lg {
    padding: 16px 38px;
    font-size: 1.12rem;
}

/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    animation: fadeInRight 0.8s ease 0.3s forwards;
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
    to { opacity: 1; transform: translateX(0); }
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal.delay-1 { transition-delay: 0.15s; }

/* Decorative Vector 3D Enhancements */
.deco {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 12px 24px rgba(74, 124, 89, 0.1));
    transition: transform 0.5s ease;
}

@keyframes floatVector {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
}

.deco-floating {
    animation: floatVector 6s ease-in-out infinite;
}

/* ==========================================================================
   LOGO STYLING
   ========================================================================== */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-icon-svg {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.logo:hover .logo-icon-svg {
    transform: scale(1.06) rotate(-2deg);
}

.logo-text-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}

.logo-title {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--primary);
    font-family: 'Outfit', sans-serif;
}

.logo-subtitle {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--primary-light);
    text-transform: uppercase;
    margin-top: 3px;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
/* ==========================================================================
   NAVBAR & HEADER THICKNESS (Thicker, Prominent & Premium)
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    min-height: calc(64px + env(safe-area-inset-top, 0px));
    padding-top: max(10px, env(safe-area-inset-top, 10px));
    padding-bottom: 10px;
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
    box-sizing: border-box;
}

.navbar.scrolled {
    background: rgba(250, 247, 242, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 6px 24px rgba(36, 51, 41, 0.1) !important;
    border-bottom: 1px solid rgba(74, 124, 89, 0.18) !important;
}

.nav-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

.logo {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    gap: 12px;
}

/* Desktop Main Navigation Links (Web Desktop Header) */
.desktop-nav-menu {
    display: none;
    align-items: center;
    gap: 18px;
    margin-left: 28px;
    margin-right: auto;
}

@media (min-width: 860px) {
    .desktop-nav-menu {
        display: flex !important;
    }
}

.is-native-app .desktop-nav-menu {
    display: none !important;
}

.desktop-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1F3827;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 12px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.desktop-nav-link:hover {
    color: #4A7C59;
    background: rgba(74, 124, 89, 0.08);
}

.desktop-nav-link.active {
    color: #4A7C59;
    background: rgba(74, 124, 89, 0.12);
    font-weight: 800;
}

.desktop-nav-link.nav-link-bokantaj {
    color: #1F3827;
}

.desktop-nav-link.nav-link-bokantaj:hover,
.desktop-nav-link.nav-link-bokantaj.active {
    color: #E76F51;
    background: rgba(231, 111, 81, 0.1);
}

.mobile-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Hamburger Menu Button - Clean 3-Bars Icon Only (Web + Mobile) */
.hamburger-menu-btn,
.mobile-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    background: rgba(74, 124, 89, 0.12) !important;
    border: 1.5px solid rgba(74, 124, 89, 0.3) !important;
    color: var(--primary-dark) !important;
    cursor: pointer !important;
    font-size: 1.35rem !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(74, 124, 89, 0.15) !important;
    flex-shrink: 0 !important;
}

.hamburger-btn-label {
    display: none !important;
}

.hamburger-menu-btn:hover,
.hamburger-menu-btn:active,
.mobile-menu-btn:hover,
.mobile-menu-btn:active {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border-color: var(--primary) !important;
    transform: scale(1.05) !important;
}

.nav-links {
    display: none !important;
}

.nav-links a {
    font-weight: 500;
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    white-space: nowrap;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--primary);
}

.btn-signup-nav {
    background: var(--gradient-logo);
    color: white !important;
    padding: 10px 26px;
    border-radius: var(--radius-full);
    font-weight: 700;
    border: none;
    box-shadow: 0 0 0 2px rgba(74, 124, 89, 0.25), 0 4px 16px rgba(74, 124, 89, 0.3);
    transition: var(--transition);
}

.btn-signup-nav:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.4), 0 8px 24px rgba(74, 124, 89, 0.45);
}

.mobile-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(74, 124, 89, 0.12) !important;
    border: 1.5px solid rgba(74, 124, 89, 0.25) !important;
    font-size: 1.4rem !important;
    color: var(--primary-dark) !important;
    cursor: pointer !important;
}

/* Mobile Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 40, 34, 0.6);
    backdrop-filter: blur(12px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 88%;
    max-width: 380px;
    height: 100%;
    background: #FFFFFF;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: -10px 0 30px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.mobile-menu-close {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--text);
    cursor: pointer;
}

.mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
    overflow-y: auto;
}

.mobile-nav-list a {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    padding: 8px 0;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-nav-list a:hover,
.mobile-nav-list a.active {
    color: var(--primary);
}

.mobile-menu-docked-footer {
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ==========================================================================
   SECTION 1 : HERO
   ========================================================================== */
.hero {
    padding-top: 150px;
    padding-bottom: 100px;
    background: transparent;
    position: relative;
    overflow: hidden;
}

/* The hero illustration stays behind the whole homepage, slowly drifting. */
@keyframes lyannHomeBgDrift {
    from { background-position: 100% 40%; }
    to { background-position: 70% 60%; }
}
body:has(.hero) {
    background: transparent;
}
body:has(.hero)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 1;
    background-color: #F7F5F0;
    background-image: linear-gradient(180deg, rgba(247, 245, 240, 0.5) 0%, rgba(247, 245, 240, 0.68) 100%), url('hero-image.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 40%;
    animation: lyannHomeBgDrift 36s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
    body:has(.hero)::before {
        animation: none;
        background-position: right center;
    }
}
body:has(.hero) .trust-section,
body:has(.hero) .categories-section,
body:has(.hero) .talents-section,
body:has(.hero) .cta-section,
body:has(.hero) .feed-preview-section {
    background: transparent !important;
}

.hero-visual {
    display: none !important;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
    text-align: center;
}

.hero-content {
    width: 100%;
    max-width: 100%;
}

.hero-content #heroGreetingBadge {
    margin-left: auto;
    margin-right: auto;
}

.hero-content h1 {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.02em;
    text-align: center;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin: 0 auto 28px;
    max-width: 660px;
}

.hero-story {
    margin: 0 auto;
    max-width: 860px;
    width: 100%;
}

.hero-story--square {
    max-width: min(100%, 28rem);
}

.hero-story-video,
.hero-story-still {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border: 0;
    border-radius: 28px;
    background: #F7F4EE;
    box-shadow: 0 18px 48px rgba(36, 53, 43, 0.14);
}

.hero-story--square .hero-story-video,
.hero-story--square .hero-story-still {
    aspect-ratio: 1 / 1;
}

.hero-story-still {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero-story-video {
        display: none;
    }
    .hero-story-still {
        display: block;
    }
}

.hero-search {
    background: #FFFFFF;
    padding: 12px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-3d);
    border: 1px solid var(--border);
    margin-bottom: 24px;
    width: 100%;
}

.hero-search-fields {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    transition: var(--transition);
    min-width: 0;
}

.search-input-wrapper:nth-child(1) {
    flex: 2 1 180px;
}

.search-input-wrapper:nth-child(2) {
    flex: 1.4 1 170px;
}

.search-input-wrapper:nth-child(3) {
    flex: 1.6 1 180px;
}

.search-input-wrapper:focus-within {
    background: #FFFFFF;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.15);
}

.search-input-wrapper i {
    font-size: 1.3rem;
    color: var(--primary);
    flex-shrink: 0;
}

.search-input-wrapper:nth-child(4) {
    flex: 1 1 130px;
}

.distance-range-wrapper {
    padding: 2px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.distance-range-wrapper:hover,
.distance-range-wrapper:focus-within {
    border-color: var(--primary-light);
    background: rgba(255, 255, 255, 0.6);
}

.distance-range-wrapper i {
    font-size: 0.95rem !important;
    color: var(--text-muted) !important;
    opacity: 0.7;
}

.range-control-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.range-track-container {
    position: relative;
    width: 100%;
    padding-top: 13px;
}

.range-floating-badge {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    color: #2E4C37;
    background: #EAF2EC;
    border: 1px solid rgba(74, 124, 89, 0.3);
    padding: 0px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    pointer-events: none;
    transition: left 0.05s ease-out, background 0.2s ease, border-color 0.2s ease;
}

.range-floating-badge::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 3px 3px 0 3px;
    border-style: solid;
    border-color: rgba(74, 124, 89, 0.3) transparent transparent transparent;
}

.distance-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3.5px;
    border-radius: 999px;
    background: #94A3B8;
    outline: none;
    cursor: pointer;
    margin: 4px 0 0;
    transition: var(--transition);
}

.distance-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid var(--primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.distance-slider::-webkit-slider-thumb:hover {
    transform: scale(1.3);
    border-color: var(--sand-yellow-dark);
}

.distance-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.range-labels-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 500;
    opacity: 0.7;
    margin-top: 1px;
}

.search-input-wrapper input,
.search-input-wrapper select {
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.98rem;
    color: var(--text);
    outline: none;
}

.suggestion-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    margin: 14px auto 26px auto;
    max-width: 860px;
    padding: 0 10px;
}

.hashtag-tag,
.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(74, 124, 89, 0.18);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2F523A;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 4px rgba(36, 51, 41, 0.03);
    white-space: nowrap;
}

.hashtag-tag:hover,
.tag:hover,
.tag.active {
    background: rgba(74, 124, 89, 0.12);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(74, 124, 89, 0.15);
}

.tag.help-wizard-trigger {
    background: rgba(229, 179, 69, 0.12);
    color: #B38215;
    border: 1px solid rgba(229, 179, 69, 0.35);
    font-weight: 700;
}

.tag.help-wizard-trigger:hover {
    background: rgba(229, 179, 69, 0.22);
    border-color: #E5B345;
}

.hero-cta-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 36px;
    width: 100%;
}

.hero-cta-group .lyann-cta-home {
    width: auto !important;
    min-width: 175px;
    font-size: 0.98rem !important;
    min-height: 48px !important;
    padding: 0 24px !important;
}

.hero-visual {
    position: relative;
    max-width: 250px;
    width: 100%;
    justify-self: center;
}

.hero-svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(74, 124, 89, 0.12));
}

/* ==========================================================================
   SECTION 2 : CONFIANCE
   ========================================================================== */
.trust-section {
    background: #FFFFFF;
    position: relative;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.trust-card {
    background: var(--bg);
    padding: 40px 30px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: var(--transition);
    text-align: center;
}

.trust-card:hover {
    transform: none;
    border-color: rgba(74, 124, 89, 0.25);
}

.trust-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}

.trust-card h3 {
    font-size: 1.35rem;
    margin-bottom: 10px;
}

.trust-card p {
    color: var(--text-muted);
}

/* ==========================================================================
   SECTION 3 : COMMENT ÇA MARCHE
   ========================================================================== */
.how-section {
    background: var(--gradient-bg-soft);
}

.deco-wrench { top: 10%; left: 5%; width: 100px; }
.deco-sun-small { top: 20%; right: 8%; width: 120px; }

.steps-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.step {
    flex: 1;
    background: #FFFFFF;
    padding: 36px 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition);
}

.step:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.step-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.step-icon-blue { background: var(--sky-blue-light); }
.step-icon-emerald { background: var(--pop-emerald-light); }
.step-icon-coral { background: var(--pop-yellow-light); }

.step-svg { width: 44px; height: 44px; }

.step-arrow {
    font-size: 1.5rem;
    color: var(--primary-light);
}

/* ==========================================================================
   SECTION 4 : CATÉGORIES
   ========================================================================== */
.categories-section {
    background: #FFFFFF;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 20px;
}

.category-card {
    background: var(--bg);
    padding: 24px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transition: var(--transition);
}

.category-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
    background: #FFFFFF;
}

.category-icon-container {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 124, 89, 0.08);
}

.cat-svg { width: 34px; height: 34px; }

.category-name {
    font-weight: 700;
    font-size: 1rem;
}

/* ==========================================================================
   SECTION 5 : TALENTS
   ========================================================================== */
.talents-section {
    background: var(--gradient-bg-soft);
}

.talents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.talent-card {
    background: #FFFFFF;
    padding: 36px 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.talent-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.talent-photo {
    width: 100px;
    height: 100px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--sand-yellow);
}

.talent-photo img, 
.talent-avatar-sm img, 
.flash-avatar, 
.profile-avatar-large, 
.quick-profile-avatar, 
.chat-contact-avatar, 
.chat-header-avatar, 
.drawer-avatar {
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

.talent-card h3 { font-size: 1.4rem; }
.talent-role { color: var(--primary); font-weight: 700; font-size: 0.95rem; }
.talent-stars { color: var(--sand-yellow); margin: 8px 0 14px; }
.talent-card blockquote { font-style: italic; color: var(--text-muted); font-size: 0.95rem; }

/* ==========================================================================
   SECTION 6 : TÉMOIGNAGES
   ========================================================================== */
.testimonials-section {
    background: var(--bg-dark);
    color: var(--text-light);
}

.testimonials-section h2 { color: var(--text-light); }
.testimonials-section .section-subtitle { color: rgba(255,255,255,0.7); }

.testimonials-slider {
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.testimonial-track {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease;
}

.testimonial-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 40px;
    background: #24332C;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.1);
    text-align: center;
}

.testimonial-slide blockquote {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.12rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.8;
    letter-spacing: 0.015em;
    color: #F4EFE4;
    max-width: 38rem;
    margin: 0 auto 24px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: var(--transition);
}

.dot.active {
    background: var(--sand-yellow);
    width: 24px;
    border-radius: 10px;
}

/* ==========================================================================
   SECTION 7 : CTA FINAL
   ========================================================================== */
.cta-section {
    background: var(--bg);
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.cta-card {
    background: #FFFFFF;
    padding: 50px 36px;
    border-radius: var(--radius-xl);
    border: 2px solid var(--border);
    text-align: center;
    transition: var(--transition);
}

.cta-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.cta-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.cta-card h3 { font-size: 1.6rem; margin-bottom: 10px; }
.cta-card p { color: var(--text-muted); margin-bottom: 24px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    background: var(--bg-dark);
    color: var(--text-light);
    padding: 60px 0 30px;
}

.footer-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    align-items: start;
}

.footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-brand-col .footer-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 420px;
}

.footer-territoires-pills {
    font-size: 0.82rem;
    color: #E5B345;
    font-weight: 600;
    margin-top: 4px;
    letter-spacing: 0.3px;
}

.footer-links-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.footer-links-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-links-group a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease, transform 0.2s ease;
}

.footer-links-group a:hover {
    color: #E5B345;
    transform: translateX(4px);
}

.footer-bottom { 
    text-align: center; 
    color: rgba(255,255,255,0.5); 
    font-size: 0.9rem; 
}

@media (max-width: 768px) {
    .footer-grid-2col {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .footer-links-col {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

/* ==========================================================================
   PARCOURS D'INSCRIPTION INTERACTIF (MODAL MULTI-ÉTAPES)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(24, 34, 28, 0.75);
    backdrop-filter: blur(12px);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

    .modal-card {
    background: #FFFFFF;
    width: 100%;
    max-width: 960px;
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.6);
    overflow: hidden;
    position: relative;
    transform: scale(0.98) translateY(8px);
    transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1);
}

.modal-overlay.active .modal-card {
    transform: scale(1) translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
}

.modal-close-btn:hover {
    background: var(--primary);
    color: white;
    transform: rotate(90deg);
}

/* Modal Header & Stepper */
.modal-header {
    padding: 32px 36px 20px;
    background: var(--gradient-bg-soft);
    border-bottom: 1px solid var(--border);
}

.modal-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.step-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.step-count {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
}

.progress-bar-track {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    width: 25%;
    background: var(--gradient-logo);
    border-radius: 10px;
    transition: width 0.4s ease;
}

/* Modal Body / Steps */
.modal-body {
    padding: 32px 36px;
    max-height: 75vh;
    overflow-y: auto;
}

.modal-step {
    display: none;
    animation: fadeInStep 0.4s ease forwards;
}

.modal-step.active {
    display: block;
}

@keyframes fadeInStep {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-title {
    font-size: 1.7rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text);
}

.step-desc {
    color: var(--text-muted);
    font-size: 1.02rem;
    margin-bottom: 28px;
}

/* Step 1 : Choice Cards */
.choice-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.choice-card {
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.choice-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    background: #FFFFFF;
    box-shadow: var(--shadow-md);
}

.choice-card.selected {
    border-color: var(--primary);
    background: var(--pop-emerald-light);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.2);
}

.choice-card-icon {
    font-size: 2.8rem;
    margin-bottom: 14px;
}

.choice-card h4 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.choice-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Step 2 : Category Chips Grid */
.category-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.cat-select-card {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cat-select-card:hover {
    border-color: var(--primary);
    background: #FFFFFF;
}

.cat-select-card.selected {
    background: var(--pop-emerald-light);
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(74, 124, 89, 0.15);
}

.cat-select-card i {
    font-size: 1.6rem;
    color: var(--primary);
}

.cat-select-card span {
    font-size: 0.88rem;
    font-weight: 600;
}

/* Step 3 & 4 : Form Controls */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon i {
    position: absolute;
    left: 16px;
    font-size: 1.2rem;
    color: var(--primary);
    pointer-events: none;
}

.modal-input {
    width: 100%;
    padding: 14px 16px 14px 52px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    background: var(--bg);
    font-family: inherit;
    font-size: 1rem;
    color: var(--text);
    outline: none;
    transition: var(--transition);
}

.modal-input:focus {
    border-color: var(--primary);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.15);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Step 5 : Success Screen */
.success-screen {
    text-align: center;
    padding: 20px 0;
}

.success-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--pop-emerald-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin: 0 auto 20px;
    box-shadow: 0 10px 25px rgba(74, 124, 89, 0.2);
}

.recap-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 24px;
    margin: 20px 0 28px;
    text-align: left;
}

.recap-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.95rem;
}

.recap-item span:first-child { color: var(--text-muted); }
.recap-item span:last-child { font-weight: 700; color: var(--text); }

/* Modal Footer / Navigation */
.modal-footer {
    padding: 20px 36px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    background: #FFFFFF;
}

/* ==========================================================================
   MODAL RÉSULTATS DE RECHERCHE MEMBRES
   ========================================================================== */
.modal-card-large {
    max-width: 900px;
    max-height: 85vh;
}

.search-summary-badge {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-dark);
    box-shadow: var(--shadow-sm);
}

.search-modal-body {
    padding: 24px 32px 36px;
    background: var(--bg);
}

/* Fenêtre Résultats de recherche Élargie & Annuaire */
.modal-card-xl {
    max-width: 1120px !important;
    width: 95% !important;
    border-radius: var(--radius-xl) !important;
}

.search-results-window {
    padding: 28px 32px !important;
}

.search-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1.5px solid var(--border);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.search-window-title-block {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-window-main-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 4px;
}

.search-filters-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.toolbar-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
}

.search-toolbar-select {
    padding: 8px 14px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    background: #FFFFFF;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    outline: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.search-toolbar-select:focus,
.search-toolbar-select:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.15);
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.member-result-card {
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.member-result-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.member-header {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.member-avatar-wrapper {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.member-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--sand-yellow);
}

.online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #10B981;
    border: 2px solid #FFFFFF;
}

.member-info h4 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.verified-badge {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--pop-emerald-light);
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
}

.member-role {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.92rem;
    margin-bottom: 4px;
}

.member-location {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.member-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.rating-stars {
    color: var(--sand-yellow);
    font-weight: 800;
}

.reviews-count {
    color: var(--text-muted);
}

.hourly-badge {
    margin-left: auto;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--sand-yellow-dark);
    background: var(--pop-yellow-light);
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

.member-bio {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}

.member-skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.skill-tag {
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
}

.contact-member-btn {
    width: 100%;
    padding: 10px 20px;
    font-size: 0.95rem;
}

/* Empty Search State */
.empty-search-state {
    text-align: center;
    padding: 40px 20px;
    grid-column: 1 / -1;
}

.empty-search-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
}

.empty-search-state h4 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.empty-search-state p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* ==========================================================================
   MODAL DE CONNEXION & GOOGLE AUTH
   ========================================================================== */
.btn-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #FFFFFF;
    color: #1E293B;
    border: 1.5px solid #CBD5E1;
    border-radius: var(--radius-lg);
    padding: 12px 20px;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.btn-google:hover {
    background: #F8FAFC;
    border-color: #94A3B8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.btn-apple-auth {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    background: #000000;
    color: #FFFFFF;
    border: 0;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.auth-divider,
.modal-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after,
.modal-divider::before,
.modal-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border);
}

.auth-divider span,
.modal-divider span {
    padding: 0 12px;
    font-weight: 500;
}

.login-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88rem;
    margin-top: 10px;
}

.forgot-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.forgot-link:hover {
    text-decoration: underline;
}

.auth-footer-text {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.auth-footer-text a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

/* ==========================================================================
   ESPACE PROFIL BICOLORE & DASHBOARD
   ========================================================================== */
.modal-card-dashboard {
    max-width: 860px;
    width: 92%;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    display: flex;
    flex-direction: column;
}

.profile-header-banner {
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: background 0.4s ease;
}

/* THEME PROVIDER (TALENT) : Vert Sage & Jaune Sable */
.theme-provider .profile-header-banner {
    background: linear-gradient(135deg, #FDFCF9 0%, #E6EFE9 100%);
}

.theme-provider .profile-role-badge {
    background: rgba(74, 124, 89, 0.12);
    color: #4A7C59;
    border: 1px solid rgba(74, 124, 89, 0.3);
}

/* THEME SEEKER (HABITANT) : Rose Saumon Pastel Chaleureux & Rassurant */
.theme-seeker .profile-header-banner {
    background: linear-gradient(135deg, #FFF6F4 0%, #FCE4DF 100%);
}

.theme-seeker .profile-role-badge {
    background: rgba(217, 107, 88, 0.15);
    color: #B84A37;
    border: 1px solid rgba(217, 107, 88, 0.35);
}

.profile-user-summary {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-photo-container {
    position: relative;
}

.profile-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.edit-photo-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
}

.profile-user-name {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.profile-role-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.profile-location-text {
    font-size: 0.88rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.role-switch-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.role-switch-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-toggle-group {
    display: flex;
    background: rgba(255, 255, 255, 0.7);
    padding: 4px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
}

.role-toggle-btn {
    padding: 8px 16px;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.role-toggle-btn.active {
    background: #FFFFFF;
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Tabs */
.profile-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    padding: 0 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.profile-tabs::-webkit-scrollbar {
    display: none;
}

.profile-tab-btn {
    padding: 16px 20px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: var(--transition);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-tab-btn:hover {
    color: var(--text);
}

.profile-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: #FFFFFF;
}

.theme-seeker .profile-tab-btn.active {
    color: #D96B58;
    border-bottom-color: #D96B58;
}

/* ==========================================================================
   PUBLIC MEMBER PROFILE MODAL - WOW DESIGN & FLUID RESPONSIVE LAYOUT
   ========================================================================== */
#publicMemberProfileModal .modal-card-dashboard {
    max-width: 820px !important;
    width: 94% !important;
    height: 650px !important;
    max-height: 88vh !important;
    min-height: 520px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3) !important;
    background: #FFFFFF !important;
    border: none !important;
    position: relative !important;
}

@media (max-width: 640px) {
    #publicMemberProfileModal .modal-card-dashboard {
        height: 90vh !important;
    }
}

#publicMemberProfileModal .profile-header-banner {
    padding: 22px 28px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background: linear-gradient(135deg, #FDFCF9 0%, #E6EFE9 100%) !important;
    border-bottom: 1px solid #E1ECE5 !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

@media (max-width: 640px) {
    #publicMemberProfileModal .profile-header-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 20px 16px 20px !important;
    }
}

#publicMemberProfileModal .profile-user-summary {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

#publicMemberProfileModal .profile-avatar-large {
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    flex-shrink: 0 !important;
}

#publicMemberProfileModal .profile-user-name {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #1E3A2B !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
}

#publicMemberProfileModal .profile-role-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 14px !important;
    border-radius: 50px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    background: #E1EFE6 !important;
    color: #2D6A4F !important;
    border: 1px solid rgba(45, 106, 79, 0.25) !important;
    margin-bottom: 4px !important;
}

#publicMemberProfileModal .profile-location-text {
    font-size: 0.88rem !important;
    color: #5B7A6A !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 600 !important;
}

/* Social Action Bar */
#publicMemberProfileModal .social-action-bar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

#publicMemberProfileModal .btn-social {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    border-radius: 50px !important;
    font-family: inherit !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

#publicMemberProfileModal .btn-recommend {
    background: #FFFFFF !important;
    color: #2D6A4F !important;
    border: 1.5px solid #2D6A4F !important;
}

#publicMemberProfileModal .btn-recommend:hover,
#publicMemberProfileModal .btn-recommend.liked {
    background: #2D6A4F !important;
    color: #FFFFFF !important;
}

#publicMemberProfileModal .btn-contact-direct {
    background: #2D6A4F !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(45, 106, 79, 0.25) !important;
}

#publicMemberProfileModal .btn-contact-direct:hover {
    background: #1B4332 !important;
    transform: translateY(-1px) !important;
}

#publicMemberProfileModal .btn-share-profile {
    background: #FFFFFF !important;
    color: #4A6B5D !important;
    border: 1px solid #D0E1D4 !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

/* Public Tabs Bar */
#publicMemberProfileModal .profile-tabs {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    border-bottom: 2px solid #E6EFE9 !important;
    background: #FFFFFF !important;
    padding: 0 28px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

#publicMemberProfileModal .profile-tabs::-webkit-scrollbar {
    display: none !important;
}

#publicMemberProfileModal .public-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 13px 18px !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #6B8577 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    margin-bottom: -2px !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    outline: none !important;
}

#publicMemberProfileModal .public-tab-btn:hover {
    color: #1E3A2B !important;
}

#publicMemberProfileModal .public-tab-btn.active {
    color: #2D6A4F !important;
    border-bottom-color: #2D6A4F !important;
    font-weight: 800 !important;
    background: transparent !important;
}

/* Public Modal Body & Single-Column Tab Toggle */
#publicMemberProfileModal .profile-modal-body {
    display: block !important;
    flex-direction: column !important;
    padding: 24px 28px !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #FAFCFA !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#publicMemberProfileModal .public-tab-content {
    display: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    float: none !important;
}

#publicMemberProfileModal .public-tab-content.active {
    display: block !important;
    width: 100% !important;
    animation: fadeInTab 0.2s ease-in-out !important;
}

/* Réduction de la taille des images de travaux réalisés dans la modale profil */
#publicMemberProfileModal .realizations-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 14px !important;
    margin-top: 14px !important;
}

#publicMemberProfileModal .realization-card {
    border-radius: 16px !important;
}

#publicMemberProfileModal .realization-img-wrapper {
    height: 120px !important;
}

#publicMemberProfileModal .realization-info {
    padding: 12px !important;
}

#publicMemberProfileModal .realization-title {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
}

#publicMemberProfileModal .realization-desc {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
}

.profile-modal-body {
    padding: 24px 28px !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
    background: #FAFCFA;
    box-sizing: border-box !important;
}

.profile-modal-body::-webkit-scrollbar {
    width: 6px;
}

.profile-modal-body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}

.profile-tab-content {
    display: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    animation: fadeInTab 0.2s ease-in-out;
}

.profile-tab-content.active {
    display: block !important;
}

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

.tab-section-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--text);
}

.profile-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.profile-stat-card {
    background: var(--bg);
    border-radius: var(--radius-xl);
    padding: 18px;
    text-align: center;
    border: 1px solid var(--border);
}

.stat-num {
    display: block;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--primary);
}

.theme-seeker .stat-num {
    color: #D96B58;
}

.stat-lbl {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 600;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.activity-item {
    display: flex;
    gap: 14px;
    background: var(--bg);
    padding: 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.activity-details strong {
    display: block;
    font-size: 0.98rem;
    margin-bottom: 2px;
}

.activity-details span {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.review-quote {
    margin-top: 8px;
    font-size: 0.88rem;
    font-style: italic;
    color: var(--text);
}

/* ==========================================================================
   PROFIL PUBLIC RÉSEAU SOCIAL & RÉALISATIONS
   ========================================================================== */
.social-action-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-family: inherit;
}

.btn-recommend {
    background: rgba(74, 124, 89, 0.12);
    color: var(--primary);
    border: 1.5px solid rgba(74, 124, 89, 0.3);
}

.btn-recommend:hover {
    background: var(--primary);
    color: #FFFFFF;
    transform: scale(1.04);
}

.btn-recommend.liked {
    background: var(--primary);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
}

.btn-contact-direct {
    background: var(--sand-yellow);
    color: #FFFFFF;
}

.btn-contact-direct:hover {
    background: var(--sand-yellow-dark);
    transform: translateY(-2px);
}

.btn-share-profile {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
    background: #FFFFFF;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-share-profile:hover {
    background: var(--bg);
    color: var(--primary);
}

.online-dot-lg {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #10B981;
    border: 3px solid #FFFFFF;
}

.realizations-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.realizations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.realization-card {
    background: #FFFFFF;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
}

.realization-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.09);
    border-color: rgba(74, 124, 89, 0.3);
}

.realization-img-wrapper {
    position: relative;
    height: 175px;
    overflow: hidden;
}

.realization-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.realization-card:hover .realization-img {
    transform: scale(1.06);
}

.realization-tag-city {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

.realization-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.realization-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
}

.realization-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.about-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 20px 0;
}

.info-block {
    background: var(--bg);
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.info-label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.info-val {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary);
    margin-top: 2px;
}

.profile-bio-text {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--text);
}

/* ==========================================================================
   STYLES PAGE COMMENT ÇA MARCHE, FAQ & INTERACTIONS
   ========================================================================== */
.active-nav-link {
    color: var(--primary) !important;
    font-weight: 800 !important;
    position: relative;
}

.active-nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gradient-logo);
    border-radius: var(--radius-full);
}

.how-hero {
    padding-top: 160px;
    padding-bottom: 60px;
}

.how-hero-title {
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 16px;
}

.role-selector-pill {
    display: inline-flex;
    background: #FFFFFF;
    padding: 6px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    gap: 6px;
}

.role-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.role-pill-btn.active {
    background: var(--primary);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(74, 124, 89, 0.25);
}

.steps-detail-section {
    background: #FFFFFF;
    padding: 80px 0;
}

.detailed-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.detail-step-card {
    background: var(--bg);
    padding: 36px 28px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    position: relative;
    transition: var(--transition);
}

.detail-step-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.step-number-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--primary);
}

.step-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 20px;
}

.detail-step-card h3 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.detail-step-card p {
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.6;
}

/* Charte de Confiance */
.trust-charter-section {
    background: var(--gradient-bg-soft);
}

.charter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.charter-card {
    background: #FFFFFF;
    padding: 32px 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.charter-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.charter-icon {
    font-size: 2.4rem;
    color: var(--primary);
    margin-bottom: 16px;
}

.charter-card h4 {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.charter-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* FAQ Accordéon */
.faq-section {
    background: #FFFFFF;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}

.faq-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
}

.faq-item.active {
    border-color: var(--primary);
    background: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.faq-question {
    width: 100%;
    padding: 20px 24px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.faq-question i {
    font-size: 1.3rem;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 0 24px;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding: 0 24px 20px;
}

.faq-answer p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ==========================================================================
   PAGE INFORMATIONS LÉGALES
   ========================================================================== */
body.legal-page {
    background: var(--bg);
}

.legal-hero {
    background: var(--gradient-hero);
    padding: 140px 0 56px;
    position: relative;
}

.legal-hero .container {
    max-width: 860px;
}

.legal-updated {
    margin: 8px 0 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.legal-hub {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 860px;
}

.legal-hub-card {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 22px 22px 20px;
    box-shadow: 0 8px 24px rgba(36, 53, 43, 0.04);
}

.legal-hub-card h2 {
    font-size: 1.2rem;
    margin: 0 0 6px;
}

.legal-hub-kicker {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #C0942F;
    margin-bottom: 10px;
}

.legal-hub-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0 0 10px;
}

.legal-hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.legal-policy {
    max-width: 760px;
}

.legal-policy-toc {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 18px 22px 22px;
    margin: 0 0 8px;
    overflow: visible;
}

.legal-policy-toc strong {
    display: block;
    margin-bottom: 10px;
    color: var(--primary-dark);
}

.legal-policy-toc ol {
    margin: 0;
    padding-left: 1.25em;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px 28px;
}

@media (min-width: 720px) {
    .legal-policy-toc ol {
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: column;
        grid-template-rows: repeat(15, auto);
    }
}

.legal-policy-toc li {
    break-inside: avoid;
    margin: 0 0 6px;
    font-size: 0.9rem;
}

.legal-policy-toc a {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
}

.legal-policy-toc a:hover {
    color: var(--primary-dark);
}

.legal-policy h2 {
    font-size: 1.22rem;
    margin: 32px 0 12px;
    scroll-margin-top: 104px;
}

.legal-policy section {
    scroll-margin-top: 104px;
}

.legal-policy h3 {
    font-size: 1.02rem;
    margin: 18px 0 8px;
}

.legal-policy p,
.legal-policy li {
    color: var(--text-muted);
    font-size: 0.96rem;
    line-height: 1.7;
}

.legal-policy p {
    margin: 0 0 12px;
}

.legal-policy ul {
    margin: 0 0 14px;
    padding-left: 1.2em;
}

.legal-policy li {
    margin: 0 0 6px;
}

.legal-policy .legal-address {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
    margin: 0 0 14px;
}

.legal-policy .legal-address p {
    margin: 0 0 10px;
    color: var(--text);
}

.legal-policy .legal-address p:last-child {
    margin-bottom: 0;
}

.legal-policy-note {
    background: #F8FAF8;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
}

.legal-policy-page .legal-hero .legal-back {
    position: static;
    padding: 0 0 12px;
    margin-bottom: 4px;
}

.legal-docs {
    max-width: 860px;
}

.legal-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: var(--primary-dark);
    font-weight: 800;
    text-decoration: none;
    position: sticky;
    top: 88px;
    z-index: 2;
    background: var(--bg);
    padding: 8px 0;
}

.legal-signoff {
    text-align: center;
    padding: 12px 8px 8px;
    color: var(--primary-dark);
    font-weight: 800;
}

.legal-signoff small {
    display: block;
    margin-top: 6px;
    font-weight: 600;
    color: var(--text-muted);
}

.footer-legal-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 4px;
    margin-bottom: 12px;
    font-size: 0.88rem;
}

.footer-legal-strip a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-weight: 600;
}

.footer-legal-strip a:not(:last-child)::after {
    content: '·';
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.footer-legal-strip a:hover {
    color: #E5B345;
}

.lyann-cgu-accept {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #F8FAF8;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text);
}

.lyann-cgu-accept input {
    margin-top: 3px;
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.cookie-prefs-modal .cookie-pref-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

body.legal-page.is-legal-doc .legal-hub,
body.legal-page.is-legal-doc .legal-hero-intro {
    display: none;
}

.legal-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.legal-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--border);
    color: var(--primary-dark);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 999px;
}

.legal-section {
    padding: 12px 0 80px;
}

.legal-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
}

.legal-toc a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.legal-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 860px;
}

.legal-drawer {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(36, 53, 43, 0.04);
    scroll-margin-top: 96px;
}

.legal-drawer[open] {
    border-color: rgba(74, 124, 89, 0.45);
    box-shadow: var(--shadow-sm);
}

.legal-drawer-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

.legal-drawer-summary::-webkit-details-marker,
.legal-article > summary::-webkit-details-marker {
    display: none;
}

.legal-drawer-summary:focus-visible,
.legal-article > summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.legal-drawer-index {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 124, 89, 0.12);
    color: var(--primary-dark);
    font-weight: 800;
    font-size: 0.85rem;
}

.legal-drawer-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.legal-drawer-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #C0942F;
}

.legal-drawer-title {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
}

.legal-drawer-caret {
    color: var(--primary);
    font-size: 1.15rem;
    transition: transform 0.2s ease;
}

.legal-drawer[open] .legal-drawer-caret {
    transform: rotate(180deg);
}

.legal-drawer-body {
    padding: 0 18px 22px 68px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

.legal-drawer-body h3,
.legal-drawer-body h4 {
    color: var(--text);
    font-weight: 800;
    margin: 18px 0 8px;
}

.legal-drawer-body h3 { font-size: 1.02rem; }
.legal-drawer-body h4 { font-size: 0.92rem; }

.legal-drawer-body p,
.legal-drawer-body ul,
.legal-drawer-body ol {
    margin: 0 0 12px;
}

.legal-drawer-body ul,
.legal-drawer-body ol {
    padding-left: 1.15rem;
}

.legal-drawer-body li + li {
    margin-top: 4px;
}

.legal-drawer-body a {
    color: var(--primary-dark);
    font-weight: 700;
}

.legal-pending {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(229, 179, 69, 0.16);
    border: 1px solid rgba(229, 179, 69, 0.4);
    color: #6B5420;
    font-size: 0.88rem;
    font-weight: 600;
}

.legal-article {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin: 10px 0;
}

.legal-article > summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.legal-article > summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.legal-article[open] > summary::after {
    transform: rotate(225deg);
    margin-top: 4px;
}

.legal-article-body {
    padding: 0 14px 14px;
}

.legal-charter {
    display: grid;
    gap: 10px;
}

.legal-charter-item {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
}

.legal-charter-item strong {
    display: block;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.legal-contact {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 22px 24px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

.legal-contact h2 {
    font-size: 1.15rem;
    color: var(--text);
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .legal-hero {
        padding: 118px 0 36px;
    }
    .legal-drawer-body {
        padding: 0 16px 18px;
    }
    .legal-drawer-summary {
        padding: 14px 14px;
    }
    .legal-drawer-title {
        font-size: 0.95rem;
    }
}

/* Toast Notifications */
.toast-notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--bg-dark);
    color: #FFFFFF;
    padding: 14px 24px;
    border-radius: var(--radius-full);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 0.92rem;
    z-index: 9999;
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

.toast-notification.show {
    transform: translateY(0);
    opacity: 1;
}

/* ==========================================================================
   RESPONSIVE DESIGN (SYSTEMIC 4-BREAKPOINT LAYOUT)
   ========================================================================== */

/* Utility for desktop-only breaks */
@media (max-width: 768px) {
    .desktop-only-br {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   1. TABLETS & SMALL DESKTOPS (<= 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hero-visual {
        max-width: 260px;
    }
    
    .hero-content h1 {
        font-size: 3rem;
    }

    .trust-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 20px;
    }

    .talents-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 20px;
    }

    .categories-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
    }

    .modal-card-dashboard,
    .modal-card-large {
        width: 94%;
        max-width: 860px;
    }
}

/* --------------------------------------------------------------------------
   2. SMALL TABLETS & LARGE PHONES (<= 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .hero {
        padding-top: 130px;
        padding-bottom: 70px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-story {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-content h1 {
        font-size: 2.7rem;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .suggestion-tags {
        justify-content: center;
    }

    .hero-cta-group {
        justify-content: center;
    }

    .hero-visual {
        max-width: 200px;
        margin: 20px auto 0;
        opacity: 0.85;
    }

    .steps-row {
        flex-direction: column;
        gap: 16px;
    }

    .step-arrow {
        transform: rotate(90deg);
        margin: 4px 0;
    }

    .cta-grid {
        grid-template-columns: 1fr;
    }

    .search-results-grid {
        grid-template-columns: 1fr;
    }

    .footer-top {
        flex-direction: column;
        gap: 24px;
        align-items: center;
        text-align: center;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Bascule du menu compact à <= 1380px pour garantir une ligne d'entête parfaite sur tous les ordinateurs portables et tablettes */
@media (max-width: 1380px) {
    .nav-links {
        display: none !important;
    }

    .mobile-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-left: auto !important;
    }

    .mobile-menu-btn,
    .hamburger-menu-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.user-is-logged-in .mobile-header-actions .nav-profile-btn {
        display: inline-flex !important;
    }
}

/* --------------------------------------------------------------------------
   3. STANDARD SMARTPHONES (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .navbar {
        top: 12px;
    }

    .navbar .mobile-header-actions > .open-login-trigger {
        display: none !important;
    }

    .navbar .nav-search-icon-link {
        display: none !important;
    }

    .floating-chat-badge,
    .speed-dial-wrapper {
        display: none !important;
    }

    /* Optimisation des Marges & Espacements Mobile & App */
    .section {
        padding: 28px 0 !important;
    }
    .section-header {
        margin-bottom: 20px !important;
    }
    .section-header h2 {
        font-size: 1.8rem !important;
        margin-bottom: 6px !important;
    }
    .section-subtitle {
        font-size: 0.95rem !important;
    }
    .steps-detail-section {
        padding: 28px 0 !important;
    }
    .feed-main-section,
    .results-main-section,
    .how-section,
    .trust-section,
    .features-section,
    .testimonials-section,
    .faq-section {
        padding: 24px 0 !important;
    }
    .hero {
        padding-top: 100px !important;
        padding-bottom: 28px !important;
    }
    .trust-split-grid,
    .detailed-steps-grid,
    .categories-grid,
    .features-grid {
        gap: 14px !important;
    }
    .flash-composer-card {
        margin-bottom: 14px !important;
        padding: 14px !important;
    }
    .feed-filters-bar-single-row {
        margin-bottom: 14px !important;
    }
    .feed-lyann-card {
        margin-bottom: 12px !important;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: var(--radius-sm);
        background: var(--bg);
        border: 1px solid var(--border);
    }

    .hero-visual {
        max-width: 160px;
        margin: 16px auto 0;
        opacity: 0.8;
    }

    .hero-search {
        padding: 12px;
        width: 100%;
    }

    .hero-search-fields {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .search-input-wrapper {
        width: 100%;
        flex: 1 1 100% !important;
        min-height: 48px;
    }

    .search-input-wrapper:nth-child(1),
    .search-input-wrapper:nth-child(2),
    .search-input-wrapper:nth-child(3) {
        flex: 1 1 100% !important;
        width: 100%;
    }

    .btn-autolocate {
        width: 100%;
        justify-content: center;
        min-height: 46px;
    }

    .search-btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .hero-cta-group {
        flex-direction: column;
        width: 100%;
    }

    .hero-cta-group .btn {
        width: 100%;
        justify-content: center;
    }

    .categories-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }

    .choice-cards-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    /* Modal Mobile Formatting */
    .modal-overlay {
        padding: 12px;
        align-items: center;
        justify-content: center;
    }

    .modal-card {
        width: 100%;
        max-height: 88vh;
        border-radius: var(--radius-xl);
    }

    .modal-header {
        padding: 20px 20px 16px;
    }

    .modal-body {
        padding: 20px 16px;
    }

    .modal-footer {
        padding: 16px 20px;
    }

    /* Profile Modal Dashboard & Social Responsiveness */
    .profile-header-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 20px 18px;
    }

    .role-switch-container {
        align-items: center;
        width: 100%;
    }

    .role-toggle-group {
        width: 100%;
        justify-content: center;
    }

    .social-action-bar {
        flex-wrap: wrap;
        width: 100%;
    }

    .social-action-bar .btn-social {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 130px;
    }

    .profile-tabs {
        padding: 0 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .profile-tab-btn,
    .public-tab-btn {
        padding: 12px 14px;
        font-size: 0.86rem;
        scroll-snap-align: start;
    }

    .profile-stats-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .about-info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* --------------------------------------------------------------------------
   4. ULTRA-SMALL SMARTPHONES & SMALL SCREENS (<= 480px / 360px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .hero-visual {
        max-width: 130px;
        margin: 12px auto 0;
        opacity: 0.75;
    }

    .logo-subtitle {
        display: none;
    }

    .logo-title {
        font-size: 1.15rem;
    }

    .hero-content h1 {
        font-size: 2.1rem;
    }

    .hero-subtitle {
        font-size: 1.05rem;
    }

    .suggestion-tags .tag {
        padding: 7px 14px;
        font-size: 0.82rem;
    }

    .trust-card {
        padding: 28px 18px;
    }

    .step {
        padding: 24px 18px;
    }

    .category-card {
        padding: 16px 10px;
        gap: 8px;
    }

    .category-name {
        font-size: 0.85rem;
    }

    .talent-card {
        padding: 20px 16px;
    }

    .step-title {
        font-size: 1.35rem;
    }

    .category-selection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   PAGE NOTRE HISTOIRE - INTERVIEW DU FONDATEUR YOANN
   ========================================================================== */
.about-hero {
    background: var(--gradient-hero);
    padding: 140px 0 80px;
    position: relative;
    overflow: hidden;
}

.founder-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    padding: 8px 20px 8px 10px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.founder-avatar-small {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--sand-yellow) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(74, 124, 89, 0.25);
}

.founder-badge-info {
    text-align: left;
    line-height: 1.2;
}

.founder-name-title {
    font-weight: 700;
    color: var(--text);
    font-size: 0.95rem;
}

.founder-tagline {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.interview-hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 20px;
    color: var(--text);
}

.interview-intro-lead {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 820px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

/* Timeline/Stats quick summary bar */
.interview-quick-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.stat-pill-item {
    background: #ffffff;
    border: 1px solid var(--border);
    padding: 14px 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-pill-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--pop-emerald-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.stat-pill-text {
    text-align: left;
}

.stat-pill-value {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text);
    line-height: 1.1;
}

.stat-pill-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* SECTION INTERVIEW Q&A */
.interview-section {
    background: var(--bg);
    padding: 90px 0;
}

.interview-container {
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.interview-card {
    background: #FFFFFF;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 44px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.interview-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(74, 124, 89, 0.3);
}

.interview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--gradient-logo);
}

.question-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.question-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pop-emerald-light);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.question-topic-pill {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    background: var(--bg-warm);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
}

.question-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.35;
    margin-bottom: 24px;
}

.answer-body {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.85;
}

.answer-body p {
    margin-bottom: 18px;
}

.answer-body p:last-child {
    margin-bottom: 0;
}

.answer-body strong {
    color: var(--text);
    font-weight: 700;
}

/* QUOTE CALLOUT INSIDE INTERVIEW */
.quote-callout {
    background: var(--gradient-bg-soft);
    border-left: 4px solid var(--sand-yellow);
    padding: 24px 30px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: 28px 0;
    position: relative;
}

.quote-callout p {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--primary-dark) !important;
    font-style: italic;
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
}

.quote-author {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.quote-author::before {
    content: '—';
    color: var(--sand-yellow);
}

/* MANIFESTO / VISION SECTION */
.manifesto-section {
    background: linear-gradient(135deg, #1E2822 0%, #29382F 100%);
    color: #FDFCF9;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.manifesto-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(229, 179, 69, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.manifesto-card {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.manifesto-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(229, 179, 69, 0.15);
    border: 1px solid rgba(229, 179, 69, 0.4);
    color: var(--sand-yellow);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 28px;
}

.manifesto-quote {
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 32px;
    color: #FFFFFF;
}

.manifesto-quote span {
    color: var(--sand-yellow-light);
}

.manifesto-desc {
    font-size: 1.2rem;
    color: rgba(250, 247, 242, 0.85);
    line-height: 1.8;
    max-width: 780px;
    margin: 0 auto 40px;
}

/* SIDE BY SIDE "DU MÊME CÔTÉ" */
.same-side-section {
    padding: 100px 0;
    background: var(--bg-warm);
}

.same-side-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 50px;
}

.same-side-card {
    background: #FFFFFF;
    border-radius: var(--radius-xl);
    padding: 40px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: var(--transition);
}

.same-side-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.same-side-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 24px;
}

.same-side-icon.green {
    background: var(--pop-emerald-light);
    color: var(--primary);
}

.same-side-icon.gold {
    background: var(--pop-yellow-light);
    color: var(--sand-yellow-dark);
}

.same-side-card h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.same-side-list {
    list-style: none;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.same-side-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.02rem;
    color: var(--text-muted);
}

.same-side-list li i {
    color: var(--primary);
    font-size: 1.2rem;
    margin-top: 3px;
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .interview-hero-title {
        font-size: 2.3rem;
    }
    .interview-card {
        padding: 30px 24px;
    }
    .question-title {
        font-size: 1.4rem;
    }
    .manifesto-quote {
        font-size: 1.8rem;
    }
    .same-side-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .about-hero {
        padding: 120px 0 60px;
    }
    .interview-hero-title {
        font-size: 1.85rem;
    }
    .interview-intro-lead {
        font-size: 1.05rem;
    }
    .stat-pill-item {
        width: 100%;
    }
    .interview-card {
        padding: 24px 18px;
    }
    .question-title {
        font-size: 1.25rem;
    }
    .answer-body {
        font-size: 1rem;
    }
    .quote-callout {
        padding: 16px 20px;
        margin: 20px 0;
    }
    .quote-callout p {
        font-size: 1.05rem !important;
    }
    .manifesto-quote {
        font-size: 1.45rem;
    }
    .manifesto-desc {
        font-size: 1rem;
    }
}

/* ==========================================================================
   MENU DÉROULANT MOBILE & CASE AUTRES / PROPOSITION D'ACTIVITÉ
   ========================================================================== */
.mobile-category-wrapper {
    display: none;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .mobile-category-wrapper {
        display: block;
    }
}

.mobile-category-select-container {
    position: relative;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 2px solid var(--primary-light);
    border-radius: var(--radius-xl);
    padding: 12px 18px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.mobile-category-select-container:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(74, 124, 89, 0.18);
}

.mobile-category-select-container i {
    font-size: 1.4rem;
    color: var(--primary);
    margin-right: 12px;
    flex-shrink: 0;
}

.mobile-category-select {
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.mobile-category-select-container::after {
    content: '▼';
    font-size: 0.75rem;
    color: var(--primary);
    position: absolute;
    right: 18px;
    pointer-events: none;
}

/* Carte 6ème : Autres & Proposer une activité */
.category-card-other {
    background: linear-gradient(145deg, #FFFFFF 0%, #FEFAF0 100%) !important;
    border: 2px dashed var(--sand-yellow) !important;
    position: relative;
    cursor: pointer;
}

.category-card-other:hover {
    border-style: solid !important;
    border-color: var(--sand-yellow-dark) !important;
    background: linear-gradient(145deg, #FFFFFF 0%, #FDF4D9 100%) !important;
    transform: translateY(-4px);
}

.category-badge-pill {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sand-yellow-dark);
    background: var(--pop-yellow-light);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    margin-top: 4px;
    display: inline-block;
}

/* Modal toutes les catégories & Formulaire de proposition */
.modal-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.propose-activity-box {
    background: var(--gradient-bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-top: 24px;
    position: relative;
}

.propose-box-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.propose-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--pop-yellow-light);
    color: var(--sand-yellow-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.propose-box-header h4 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 2px;
}

.propose-box-header p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.propose-form-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.propose-form-row .flex-2 { flex: 2; }
.propose-form-row .flex-1 { flex: 1; }

@media (max-width: 600px) {
    .propose-form-row {
        grid-template-columns: 1fr;
    }
}

.propose-success-message {
    background: var(--pop-emerald-light);
    color: var(--primary-dark);
    border: 1px solid var(--primary-light);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.98rem;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    animation: fadeInUp 0.4s ease forwards;
}

/* ==========================================================================
   PAGE RÉSULTATS DE RECHERCHE DÉDIÉE (results.html)
   ========================================================================== */
.results-page {
    background: var(--gradient-bg-soft);
}

.results-hero-section {
    padding: 130px 0 32px;
    background: #FFFFFF;
    border-bottom: 1.5px solid var(--border);
}

.results-page-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text);
    margin: 14px 0 10px;
}

.results-page-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 30px;
}

.results-search-bar {
    max-width: 1040px;
    margin: 0 auto;
}

.results-main-section {
    padding: 32px 0 80px;
}

.results-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1.5px solid var(--border);
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .results-page-title {
        font-size: 1.85rem;
    }
    .results-hero-section {
        padding: 110px 0 24px;
    }
}

/* ==========================================================================
   SECTION TARIFS ET ABONNEMENTS (4 FORMULES LYANN)
   ========================================================================== */
.pricing-section {
    background: #FFFFFF;
    padding: 90px 0;
}

.pricing-billing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 48px;
}

.billing-label {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: var(--transition);
}

.billing-label.active {
    color: var(--text);
}

.discount-badge {
    background: var(--pop-emerald-light);
    color: var(--primary-dark);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 800;
    margin-left: 4px;
}

/* Switch toggle styling */
.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider.round {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #E2E8E4;
    transition: .3s;
    border-radius: 34px;
}

.slider.round:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider {
    background-color: var(--primary);
}

input:checked + .slider:before {
    transform: translateX(24px);
}

/* Pricing Grid Layout */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
}

@media (max-width: 1200px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

.pricing-page:not(.show-paid-plans) .pricing-grid {
    grid-template-columns: minmax(280px, 420px);
    justify-content: center;
}
.pricing-page:not(.show-paid-plans) .pricing-card[data-plan="PLUS"],
.pricing-page:not(.show-paid-plans) .pricing-card[data-plan="ULTIME"],
.pricing-page:not(.show-paid-plans) .pricing-card[data-plan="PRO"] {
    display: none;
}
.pricing-page:not(.show-paid-plans) .pricing-billing-toggle,
.pricing-page:not(.show-paid-plans) .already-member-upgrade-banner {
    display: none;
}
.pricing-paid-disclosure {
    display: flex;
    justify-content: center;
    margin: 8px 0 28px;
}
.pricing-page.show-paid-plans .pricing-paid-disclosure {
    display: none;
}

.pricing-card {
    background: #FFFFFF;
    border-radius: var(--radius-xl);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: all 0.22s ease-in-out;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(74, 124, 89, 0.15);
    touch-action: manipulation;
    z-index: 1;
    pointer-events: auto;
}

.pricing-card:hover,
.pricing-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    outline: 2px solid var(--primary, #4A7C59);
    outline-offset: 2px;
}

.pricing-card:active {
    transform: scale(0.98);
    opacity: 0.95;
}

.pricing-card .plan-action button {
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
    min-height: 46px;
}

/* Card Colors & Borders */
.plan-lyanneur {
    border: 2px solid rgba(168, 201, 176, 0.4);
}
.plan-plus {
    border: 2px solid rgba(98, 185, 199, 0.4);
}
.plan-ultime {
    border: 2.5px solid #E8B83F;
    box-shadow: 0 12px 36px rgba(232, 184, 63, 0.18);
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF7 100%);
}
.plan-pro {
    border: 2.5px solid #173F36;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F8F7 100%);
}

/* Popular Ribbon for Ultime */
.popular-ribbon {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #E8B83F 0%, #D4A32A 100%);
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 4px 16px;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(232, 184, 63, 0.35);
    white-space: nowrap;
}

/* Badges */
.plan-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.badge-lyanneur {
    background: #A8C9B0;
    color: #1E2822;
}

.badge-plus {
    background: #62B9C7;
    color: #FFFFFF;
}

.badge-ultime {
    background: #E8B83F;
    color: #FFFFFF;
}

/* Official PRO Badge Preview */
.pro-official-badge-preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #173F36;
    color: #FFFFFF;
    padding: 6px 14px;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(23, 63, 54, 0.25);
}

.pro-official-badge-preview .pro-text {
    color: #FFFFFF;
    font-weight: 900;
}

.pro-official-badge-preview .verified-text {
    color: var(--sand-yellow);
    font-size: 0.72rem;
}

.plan-name {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}

.plan-tagline {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.4;
    min-height: 38px;
    margin-bottom: 20px;
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 24px;
}

.price-currency {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text);
}

.price-val {
    font-size: 2.3rem;
    font-weight: 900;
    color: var(--text);
    line-height: 1;
}

.plan-ultime .price-val {
    color: #C9961A;
}

.plan-pro .price-val {
    color: #173F36;
}

.price-period {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Feature Bullet Points */
.plan-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plan-features-list li {
    font-size: 0.9rem;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.35;
}

.plan-features-list li i {
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Action Buttons per Plan */
.plan-action {
    margin-top: auto;
}

.btn-plan-lyanneur {
    width: 100%;
    background: transparent;
    border: 2px solid #A8C9B0;
    color: #2E4C37;
    font-weight: 800;
    padding: 12px;
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.btn-plan-lyanneur:hover {
    background: #A8C9B0;
    color: #FFFFFF;
}

.btn-plan-plus {
    width: 100%;
    background: #62B9C7;
    border: none;
    color: #FFFFFF;
    font-weight: 800;
    padding: 12px;
    border-radius: var(--radius-md);
    transition: var(--transition);
    box-shadow: 0 4px 14px rgba(98, 185, 199, 0.3);
}

.btn-plan-plus:hover {
    background: #4DA5B3;
    transform: translateY(-2px);
}

.btn-plan-ultime {
    width: 100%;
    background: linear-gradient(135deg, #E8B83F 0%, #D4A32A 100%);
    border: none;
    color: #FFFFFF;
    font-weight: 800;
    padding: 14px;
    border-radius: var(--radius-md);
    transition: var(--transition);
    box-shadow: 0 6px 18px rgba(232, 184, 63, 0.35);
}

.btn-plan-ultime:hover {
    background: linear-gradient(135deg, #D4A32A 0%, #B88B1E 100%);
    transform: translateY(-2px);
}

.btn-plan-pro {
    width: 100%;
    background: #173F36;
    border: none;
    color: #FFFFFF;
    font-weight: 800;
    padding: 14px;
    border-radius: var(--radius-md);
    transition: var(--transition);
    box-shadow: 0 6px 18px rgba(23, 63, 54, 0.3);
}

.btn-plan-pro:hover {
    background: #0E2923;
    transform: translateY(-2px);
}

.plan-target-note {
    font-size: 0.78rem;
    color: #C9961A;
    font-weight: 700;
    text-align: center;
    margin-top: 10px;
}

.pro-verification-note {
    background: rgba(23, 63, 54, 0.05);
    border: 1px solid rgba(23, 63, 54, 0.15);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    color: #173F36;
    line-height: 1.35;
    margin-top: 14px;
}

/* Bannière "Déjà membre LYANN ?" sur la page pricing.html */
.already-member-upgrade-banner {
    margin-top: 54px;
    background: linear-gradient(135deg, #1E2822 0%, #2A3B31 100%);
    color: #FFFFFF;
    padding: 28px 36px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.upgrade-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.upgrade-banner-content h4 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 4px;
    color: #FFFFFF;
}

.upgrade-banner-content p {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* Grille de sélection d'abonnement dans le modal d'inscription */
.modal-plan-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 16px;
}

@media (max-width: 600px) {
    .modal-plan-choice-grid {
        grid-template-columns: 1fr;
    }
}

.modal-plan-card {
    background: #FFFFFF;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.modal-plan-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.modal-plan-card.selected {
    border-color: var(--primary);
    background: var(--pop-emerald-light);
    box-shadow: 0 4px 12px rgba(74, 124, 89, 0.15);
}

.modal-plan-card.plan-ultime-card.selected {
    border-color: #E8B83F;
    background: #FFFDF5;
    box-shadow: 0 4px 14px rgba(232, 184, 63, 0.25);
}

.modal-plan-card.plan-pro-card.selected {
    border-color: #173F36;
    background: #F4F7F6;
    box-shadow: 0 4px 14px rgba(23, 63, 54, 0.25);
}

.modal-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.modal-plan-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
}

.modal-plan-price {
    font-size: 0.95rem;
    font-weight: 900;
}

.modal-plan-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* ==========================================================================
   POLISSAGE UI/UX & RESPONSIVITÉ GLOBALE SUBLIMÉE (MOBILE & TABLETTE)
   ========================================================================== */

/* Ajustements Modales sur écrans mobiles et petits écrans */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 12px;
        align-items: center;
        justify-content: center;
    }

    .modal-card,
    .modal-card-large,
    .modal-card-xl {
        max-height: 88dvh;
        border-radius: var(--radius-xl);
        margin: auto;
    }

    .modal-header {
        padding: 20px 20px 14px;
    }

    .modal-body {
        padding: 20px;
        max-height: calc(92dvh - 120px);
    }

    .modal-footer {
        padding: 14px 20px;
    }

    .modal-close-btn {
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }

    /* Hero Search Fields sur Mobile */
    .hero-search-fields {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .search-input-wrapper {
        width: 100%;
        flex: none !important;
    }

    .search-btn {
        width: 100%;
        padding: 14px;
        font-size: 1.05rem;
    }

    /* Grille d'annuaire et toolbar de résultats */
    .results-page-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .search-filters-toolbar {
        flex-direction: column;
        width: 100%;
    }

    .toolbar-filter-item {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .search-toolbar-select {
        width: 100%;
    }

    /* Pricing & Banner sur Mobile */
    .upgrade-banner-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Polissage pour très petits mobiles (< 400px) */
@media (max-width: 400px) {
    .logo-subtitle {
        display: none;
    }

    .step-title {
        font-size: 1.35rem;
    }

    .pricing-page-title {
        font-size: 1.65rem;
    }
}

.pricing-hero-section {
    padding: calc(var(--lyann-header-total-height) + 40px) 0 28px;
}

@media (max-width: 768px) {
    .pricing-hero-section {
        padding-top: 100px;
        padding-bottom: 20px;
    }
}

/* ==========================================================================
   LE LAKOU - ÉCHOS & LYANNS DU QUARTIER (feed.html)
   ========================================================================== */
.feed-page {
    background: #FFF9F4;
}

.nav-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    margin-left: 4px;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.feed-hero-section {
    padding: 110px 0 18px;
    background: transparent;
    border-bottom: none;
}

@media (max-width: 768px) {
    .feed-hero-section {
        padding: 100px 0 12px;
    }
}

.feed-page-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 12px;
}

@media (max-width: 768px) {
    .feed-page-title {
        font-size: 2.15rem;
    }
}

.feed-page-subtitle {
    font-size: 1.18rem;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto;
}

.feed-main-section {
    padding: 32px 0 80px;
}

.feed-layout-grid {
    display: grid;
    grid-template-columns: 2.3fr 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 992px) {
    .feed-layout-grid {
        grid-template-columns: 1fr;
    }
}

/* Compositeur de Lyann */
.flash-composer-card,
.lyann-composer-card {
    background: #FFFFFF;
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.flash-composer-card:focus-within,
.lyann-composer-card:focus-within {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.composer-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.user-avatar-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--sand-yellow) 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(74, 124, 89, 0.25);
}

.composer-title-block h4 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 2px;
}

.composer-title-block p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
}

.composer-textarea-wrapper {
    position: relative;
    margin-bottom: 16px;
}

.composer-textarea-wrapper textarea {
    width: 100%;
    min-height: 90px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    font-family: inherit;
    font-size: 0.98rem;
    color: var(--text);
    resize: vertical;
    outline: none;
    transition: var(--transition);
    background: var(--bg);
}

.composer-textarea-wrapper textarea:focus {
    background: #FFFFFF;
    border-color: var(--primary);
}

.composer-char-counter {
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

.composer-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.composer-type-selector,
.composer-location-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
}

.composer-select {
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: #FFFFFF;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    outline: none;
    cursor: pointer;
}

.btn-publish-flash {
    padding: 10px 22px;
    font-size: 0.95rem;
}

/* Filtres du Fil */
.feed-filters-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.feed-pills-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.feed-pill {
    padding: 8px 16px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border);
    background: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.feed-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.feed-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(74, 124, 89, 0.25);
}

/* Posts / Cartes Lyann */
.flash-feed-list,
.lyann-feed-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.flash-card {
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: var(--transition);
    animation: fadeInUp 0.4s ease forwards;
}

.flash-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-color: rgba(74, 124, 89, 0.3);
}

.flash-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.flash-author-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.flash-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-light);
}

.flash-author-info strong {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.flash-author-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.flash-meta-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Types de Lyann Badges */
.flash-badge-dispo {
    background: #FFF3D6;
    color: #8A6200;
    border: 1px solid #E5B345;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: 0.75rem;
}

.flash-badge-besoin {
    background: #EBF7EE;
    color: #2E4C37;
    border: 1px solid #709C7D;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: 0.75rem;
}

.flash-badge-reco {
    background: #F3E8FF;
    color: #6B21A8;
    border: 1px solid #D8B4FE;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: 0.75rem;
}

.flash-badge-info {
    background: #E0F2FE;
    color: #0369A1;
    border: 1px solid #7DD3FC;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: 0.75rem;
}

.flash-card-body {
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 16px;
}

.flash-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.flash-time-tag {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}

.flash-actions-bar {
    display: flex;
    align-items: center;
    gap: 16px;
}
.flash-actions-bar .flash-action-btn {
    min-height: 44px !important;
    font-size: 1rem !important;
    gap: 8px !important;
    padding: 6px 2px !important;
}
.flash-actions-bar .flash-action-btn i {
    font-size: 1.65rem !important;
}
.lyann-own-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}
.lyann-own-toolbar button {
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
}
.lyann-own-toolbar button i { font-size: 1.2rem; }
.lyann-own-toolbar .is-edit {
    background: #fff;
    border: 1.5px solid #4A7C59;
    color: #1F3827;
}
.lyann-own-toolbar .is-delete {
    background: #fff;
    border: 1.5px solid #E7C4C0;
    color: #9B3A32;
}
.comment-owner-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.comment-owner-actions button {
    min-height: 36px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #D7E3DA;
    color: #1F3827;
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
}
.comment-owner-actions .btn-delete-own-comment {
    border-color: #E7C4C0;
    color: #9B3A32;
}

.flash-action-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.flash-action-btn:hover {
    color: var(--primary);
}

.flash-action-btn.liked {
    color: var(--primary);
}

/* Sidebar & Widgets */
.sidebar-widget {
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 1.1rem;
}

.widget-header h4 {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
}

.top-talents-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.top-talent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: var(--radius-lg);
    background: var(--bg);
    cursor: pointer;
    transition: var(--transition);
}

.top-talent-item:hover {
    background: #EAF2EC;
    transform: translateX(4px);
}

.talent-avatar-sm img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.talent-mini-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.talent-mini-info strong {
    font-size: 0.88rem;
    font-weight: 800;
}

.talent-mini-info span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.mini-score {
    font-size: 0.82rem;
    font-weight: 800;
    color: #C9961A;
}

.badge-pro-mini {
    background: #173F36;
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 4px;
}

.widget-trends-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget-trends-list li a {
    display: flex;
    flex-direction: column;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--primary-dark);
    transition: var(--transition);
}

.widget-trends-list li a:hover {
    color: var(--sand-yellow-dark);
}

.trend-count {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Refonte Bloc "Proposez votre talent" (Lisibilité optimale mobile & Moins rond) */
.widget-promo-cta {
    background: linear-gradient(135deg, #F5F9F6 0%, #E8F2EC 100%) !important;
    border: 1px solid rgba(74, 124, 89, 0.25) !important;
    border-radius: 16px !important; /* Moins rond, moderne et sobre */
    padding: 20px 18px !important;
    box-shadow: 0 4px 16px rgba(74, 124, 89, 0.08) !important;
    transition: all 0.25s ease;
}

.widget-promo-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.widget-promo-icon-badge {
    width: 44px;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid rgba(74, 124, 89, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.widget-promo-text h4 {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #1F3827 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
}

.widget-promo-text p {
    font-size: 0.9rem !important;
    color: #4A5D50 !important;
    margin: 0 !important;
    line-height: 1.45 !important;
}

.btn-promo-action {
    width: 100%;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(224, 159, 62, 0.25);
}

@media (max-width: 768px) {
    .widget-promo-cta {
        border-radius: 14px !important;
        padding: 16px 14px !important;
        margin-top: 16px;
    }
    
    .widget-promo-inner {
        flex-direction: row;
        text-align: left;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }
    
    .widget-promo-icon-badge {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    .widget-promo-text {
        flex: 1;
        min-width: 180px;
    }

    .widget-promo-text h4 {
        font-size: 1.05rem !important;
    }

    .widget-promo-text p {
        font-size: 0.85rem !important;
    }
    
    .btn-promo-action {
        width: 100%;
        margin-top: 8px;
    }
}

/* ==========================================================================
   REFONTE VISUELLE CHALEUREUSE & PHOTOS DES ANTILLES
   ========================================================================== */

/* Illustration Officielle how-it-works */
.how-illustration-container,
.how-illustration-showcase {
    max-width: 960px;
    margin: 0 auto 36px;
    padding: 0 10px;
}

.how-illustration-img,
.how-main-illustration {
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    border: 2px solid rgba(74, 124, 89, 0.15);
    box-shadow: 0 16px 40px rgba(74, 124, 89, 0.12);
    transition: var(--transition);
}

.how-illustration-img:hover,
.how-main-illustration:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(74, 124, 89, 0.18);
}

/* Légende en 3 pilules */
.how-steps-legend-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 960px;
    margin: 0 auto;
}

.legend-step-pill {
    flex: 1;
    min-width: 260px;
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    text-align: left;
    transition: var(--transition);
}

.legend-step-pill:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.legend-step-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.legend-step-pill strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 2px;
}

.legend-step-pill p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.3;
}

/* Section Confiance - Split Layout avec Photo */
.trust-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

@media (max-width: 992px) {
    .trust-split-grid {
        grid-template-columns: 1fr;
    }
}

.trust-image-block {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.trust-photo {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-xl);
    transition: var(--transition);
}

.trust-image-block:hover .trust-photo {
    transform: none;
}

.trust-floating-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.trust-floating-badge strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text);
}

.trust-floating-badge span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.trust-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.trust-benefit-card {
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 22px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.trust-benefit-card:hover {
    border-color: rgba(74, 124, 89, 0.25);
    transform: none;
    box-shadow: var(--shadow-sm);
}

.trust-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.trust-benefit-text h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 4px;
    color: var(--text);
}

.trust-benefit-text p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
}

/* Section Catégories Photos Immorsives HD */
.categories-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 992px) {
    .categories-photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .categories-photo-grid {
        grid-template-columns: 1fr;
    }
}

.photo-category-card {
    position: relative;
    height: 240px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    display: block;
}

.photo-category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.photo-category-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.photo-category-card:hover .photo-category-img {
    transform: scale(1.1);
}

.photo-category-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.85) 100%);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #FFFFFF;
}

.photo-category-badge {
    align-self: flex-start;
    background: #FFF3D6;
    color: #8A6200;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.photo-category-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 4px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* ==========================================================================
   ESPACEMENTS VERTI CAUX & RESPIRATION AVANT LE FOOTER
   ========================================================================== */
.cta-section {
    padding: 100px 0 130px;
    margin-bottom: 40px;
}

.footer {
    margin-top: 40px;
    border-top: 1px solid rgba(229, 223, 213, 0.8);
}

.main-content-wrapper,
.results-main-section,
.feed-main-section,
.pricing-main-section,
.about-history-section {
    padding-bottom: 90px;
}

/* Modale Dashboard Espace Membre */
.dashboard-modal-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #FFFFFF;
    padding: 24px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.dashboard-user-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dashboard-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dashboard-tabs-nav {
    display: flex;
    gap: 8px;
    border-bottom: 1.5px solid var(--border);
    padding: 0 24px;
    background: #FFFFFF;
}

.dash-tab-btn {
    padding: 14px 18px;
    background: none;
    border: none;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: var(--transition);
}

.dash-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.dash-booking-item {
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.booking-status-badge {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-weight: 800;
    font-size: 0.78rem;
}

.status-pending { background: #FFF3D6; color: #8A6200; }
.status-confirmed { background: #EBF7EE; color: #2E4C37; }
.status-completed { background: #E0F2FE; color: #0369A1; }

/* ==========================================================================
   SYSTÈME DE CHAT DIRECT (#chatModal)
   ========================================================================== */
.modal-card-chat {
    max-width: 920px;
    width: 95%;
    height: 640px;
    max-height: 90dvh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-modal-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.chat-contacts-sidebar {
    width: 300px;
    background: #FAFAFA;
    border-right: 1.5px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.chat-sidebar-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
}

.chat-close-modal-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: 4px;
}

.chat-close-modal-btn:hover {
    background: rgba(201, 81, 64, 0.12);
    color: #C95140;
    border-color: rgba(201, 81, 64, 0.25);
    transform: scale(1.05);
}

.chat-close-modal-btn:active {
    transform: scale(0.95);
}

.chat-contacts-list {
    flex: 1;
    overflow-y: auto;
}

.chat-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: var(--transition);
}

.chat-contact-item:hover,
.chat-contact-item.active {
    background: #EBF3EE;
}

.chat-contact-avatar-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.chat-contact-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #2E7D32;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
}

.chat-contact-info {
    flex: 1;
    min-width: 0;
}

.chat-contact-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-contact-preview {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-contact-name-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.chat-contact-name-row .chat-contact-name {
    flex: 1;
    min-width: 0;
}

.chat-contact-time {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: #64748b;
}

.chat-contact-item.is-unread .chat-contact-name,
.chat-contact-item.is-unread .chat-contact-preview {
    font-weight: 800;
    color: #1D2A44;
}

.chat-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4A7C59;
    flex-shrink: 0;
}

.chat-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    position: relative; /* added */
}

/* Custom styles for in-chat payment & tracking */
.chat-overlay-pane {
    position: absolute;
    top: var(--lyann-chat-header-offset, 54px);
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    z-index: 15;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 1px solid var(--border);
    animation: fadeInNotif 0.2s ease-out;
}
#chatTrackingOverlay.chat-overlay-pane {
    justify-content: flex-start;
    top: var(--lyann-chat-header-offset, 54px);
    color: #1B4332;
    background: #FFFFFF;
    z-index: 600;
}
#trackingMilestonesList {
    color: #1B4332;
}
#trackingMilestonesList,
#trackingMilestonesList * {
    color: #1B4332;
}
.role-pill {
    padding: 3px 12px;
    font-size: 0.72rem;
    border-radius: var(--radius-full);
    border: 1px solid #D1D5DB;
    background: #F3F4F6;
    color: #374151;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}
.role-pill.active {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border-color: var(--primary) !important;
}
.devis-card-bubble {
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin: 8px 0;
    width: 80%;
    box-shadow: var(--shadow-sm);
}
.devis-card-bubble.received {
    border-color: #E2E8F0;
    align-self: flex-start;
}
.devis-card-bubble.sent {
    border-color: var(--primary-light);
    align-self: flex-end;
}
.devis-header {
    border-bottom: 1.5px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.devis-title {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--primary-dark);
}
.devis-amount {
    font-weight: 800;
    color: var(--primary);
    font-size: 1.1rem;
}
.devis-milestones-list {
    margin: 8px 0;
    padding-left: 0;
    list-style: none;
}
.devis-milestone-item {
    font-size: 0.8rem;
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed rgba(0,0,0,0.05);
}
.devis-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.devis-actions button {
    flex: 1;
    padding: 8px;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
}
.tracking-milestone-card {
    background: #F9FAFB;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tracking-milestone-card.approved {
    border-left: 5px solid #10B981;
}
.tracking-milestone-card.submitted {
    border-left: 5px solid #F59E0B;
}
.tracking-milestone-card.pending {
    border-left: 5px solid #9CA3AF;
}

@keyframes fadeInNotif {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   LYANN MOBILE CHAT DESIGN SYSTEM (PREMIUM MOBILE APP UX)
   ========================================================================== */

:root {
    --m-chat-bg: #FDFCF9;
    --m-padding-x: 20px;
    --m-section-gap: 24px;
    --m-card-radius: 18px;
    --m-input-height: 52px;
    --m-input-radius: 16px;
    --m-button-height: 52px;
    --m-button-radius: 15px;
    --m-header-height: 64px;
}

/* FULLSCREEN MOBILE CONVERSATION */
@media (max-width: 991px) {
    .modal-card-chat {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }
}

.chat-modal-layout {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    background: #FFFFFF;
}

/* SIDEBAR: CONVERSATION LIST SCREEN */
.chat-contacts-sidebar {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-right: 1px solid var(--border);
}

.chat-sidebar-header {
    padding: 14px 18px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chat-sidebar-header span {
    font-size: 1.5rem; /* 24px */
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}

.chat-search-wrapper {
    padding: 0 20px 16px;
    position: relative;
}
.chat-search-input {
    width: 100%;
    height: 50px;
    border-radius: 25px;
    border: 1.5px solid var(--border);
    padding: 0 16px 0 46px;
    font-size: 1rem; /* 16px */
    outline: none;
    background: #F8F6F0;
    color: var(--text);
    transition: var(--transition);
}
.chat-search-input:focus {
    background: #FFFFFF;
    border-color: var(--primary);
}
.chat-search-icon {
    position: absolute;
    left: 36px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.15rem;
    pointer-events: none;
}

.chat-contacts-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
}

.chat-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    min-height: 80px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    cursor: pointer;
    transition: background 0.15s ease;
}
.chat-contact-item:active, .chat-contact-item.active {
    background: #F5F7F4;
}

.chat-contact-avatar-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}
.chat-contact-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}

.chat-contact-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.chat-contact-name {
    font-size: 1.05rem; /* 17px */
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-contact-preview {
    font-size: 0.92rem; /* 15px */
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CHAT MAIN AREA (FULLSCREEN CHAT VIEW) */
.chat-main-pane, .chat-main-area {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--m-chat-bg);
    position: relative;
    overflow: hidden;
}

/* HEADER CHAT (54px compact) */
.chat-header-bar {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #FFFFFF;
    position: relative !important;
    z-index: 500 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box;
    flex-wrap: nowrap;
}

.chat-header-user {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.chat-back-to-contacts-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 100 !important;
    flex-shrink: 0;
}
.chat-back-to-contacts-btn:active {
    background: #F4F6F4;
}

.chat-header-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--border);
    flex-shrink: 0;
}

.chat-header-info {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.chat-header-name-row {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.chat-header-info strong {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.chat-header-subtitle {
    font-size: 0.85rem; /* 13-14px */
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-top: 2px;
}

@media (max-width: 767px) {
    #chatModal .chat-fav-header-btn,
    #chatModal .chat-close-modal-btn {
        display: none !important;
    }
    #chatModal .chat-more-btn,
    #chatModal .chat-back-to-contacts-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }
}
.chat-more-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.35rem;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 100 !important;
    border-radius: 50%;
}

.chat-more-btn *,
.chat-back-to-contacts-btn * {
    pointer-events: none !important;
}

.chat-header-dropdown {
    display: none !important;
}
.chat-header-dropdown.active {
    display: block !important;
    position: fixed !important;
    right: 12px !important;
    top: 64px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22) !important;
    width: 210px !important;
    z-index: 2147483640 !important;
    padding: 8px 0 !important;
    animation: fadeInNotif 0.15s ease-out;
    max-height: min(70vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.chat-dropdown-item {
    width: 100%;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem; /* 15px */
    font-weight: 600;
    color: var(--text);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}
.chat-dropdown-item:active {
    background: #F4F6F4;
}
.chat-dropdown-item.danger {
    color: #C95140;
}
.chat-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

/* BANDEAU MISSION COMPACT (Sous header) */
.chat-mission-banner {
    height: auto;
    min-height: 56px;
    padding: 10px 16px;
    background: var(--bg-warm);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    z-index: 25;
    flex: 0 0 auto;
    box-sizing: border-box;
}
.chat-mission-banner-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    min-width: 0;
    flex: 1 1 auto;
}
.chat-mission-banner-title {
    font-size: 0.95rem; /* 15-16px */
    font-weight: 700;
    color: var(--primary-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-mission-banner-meta {
    font-size: 0.82rem; /* 13-14px */
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-mission-banner-arrow {
    color: var(--primary);
    font-size: 1.1rem;
}

.chat-dossier-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 72px;
    width: 100%;
    padding-bottom: 6px;
    margin-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 100%;
}
.chat-dossier-chip {
    flex: 0 0 auto;
    max-width: 220px;
    min-height: 44px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 14px;
    padding: 6px 10px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
}
.chat-dossier-chip.is-active {
    border-color: var(--primary);
    background: var(--bg-warm);
}
.chat-dossier-chip-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.chat-dossier-chip-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-dossier-event-open {
    margin-top: 8px;
    min-height: 44px;
}
.chat-dossier-role {
    margin: 0 0 12px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-dark);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.chat-missions-together {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 0;
    min-height: 32px;
    padding: 4px 8px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-dark);
    cursor: pointer;
    max-width: 9.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#chatHeaderActions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 0;
}
.chat-missions-together i {
    color: var(--primary);
    flex-shrink: 0;
}
.chat-mission-picker,
#chatMissionPickerOverlay.chat-overlay-pane {
    position: absolute;
    top: var(--lyann-chat-header-offset, 54px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    background: #fff;
    color: var(--primary-dark);
    flex-direction: column;
    justify-content: flex-start;
}
.chat-mission-picker-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.chat-mission-picker-back {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--primary-dark);
    cursor: pointer;
}
.chat-mission-picker-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}
.chat-mission-picker-sub {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.chat-mission-picker-tools {
    padding: 12px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chat-mission-picker-search {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 16px;
    box-sizing: border-box;
}
.chat-mission-picker-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.chat-mission-filter {
    flex: 0 0 auto;
    min-height: 36px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
}
.chat-mission-filter.is-active {
    background: var(--bg-warm);
    color: var(--primary-dark);
    border-color: var(--primary);
}
.chat-mission-picker-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 16px 20px;
    min-height: 0;
}
.chat-mission-pick {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 8px;
    min-height: 64px;
    cursor: pointer;
}
.chat-mission-pick-title {
    font-weight: 800;
    color: var(--primary-dark);
}
.chat-mission-pick-meta,
.chat-mission-pick-next {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.chat-mission-pick-status {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-dark);
}
.chat-mission-empty {
    padding: 28px 12px;
    text-align: center;
    color: var(--text-muted);
}
.chat-mission-empty strong {
    display: block;
    color: var(--primary-dark);
    margin-bottom: 6px;
}
.chat-dossier-sheet {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 1px 0 rgba(27, 67, 50, 0.04);
}
.chat-dossier-card-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-dossier-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.chat-dossier-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 2px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #F1F8F3;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-dark);
}
.chat-dossier-next {
    padding: 12px 14px;
    border: 1px solid rgba(74, 124, 89, 0.22);
    border-radius: 14px;
    background: #F1F8F3;
}
.chat-dossier-next h4 {
    margin: 0 0 4px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--primary-dark);
}
.chat-dossier-next p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--text);
}
.chat-dossier-sheet-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary-dark);
}
.chat-dossier-sheet-amount {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary-dark);
}
.chat-dossier-sheet-quote {
    margin: 0;
    color: var(--text-muted);
}
.chat-dossier-sheet-status {
    margin: 0;
    font-weight: 700;
    color: var(--primary-dark);
}
.chat-dossier-sheet-desc {
    margin: 0;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chat-dossier-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.chat-dossier-cta .btn {
    min-height: 44px;
    width: 100%;
}
.chat-dossier-cta .btn-primary {
    min-height: 52px;
    font-size: 1.02rem;
}
.chat-dossier-wait {
    margin: 0;
    color: var(--text-muted);
}
.chat-dossier-payout-alert {
    margin: 8px 0 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(232, 184, 63, 0.16);
    border: 1px solid rgba(232, 184, 63, 0.4);
}
.chat-dossier-payout-alert strong {
    display: block;
    font-size: 0.92rem;
    margin-bottom: 4px;
}
.chat-dossier-payout-alert p {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.chat-payout-context {
    border-left: 3px solid var(--primary);
}
.chat-dossier-event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.chat-dossier-event-actions .btn {
    min-height: 40px;
}
.chat-timeline-mission {
    font-weight: 700;
    font-size: 0.9rem;
}
.chat-pending-actions-banner {
    flex: 0 0 auto;
    padding: 8px 12px 0;
    max-height: 42vh;
}
.chat-todo-panel {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #F8FBF8;
    padding: 4px 10px 8px;
}
.chat-todo-summary {
    list-style: none;
    cursor: default;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--primary-dark);
    min-height: 36px;
    display: flex;
    align-items: center;
    margin: 0;
}
.chat-pair-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px 8px;
    background: #F1F8F3;
}
.chat-pair-actions .btn {
    flex: 1 1 140px;
    min-height: 42px;
    justify-content: center;
}
.chat-inline-review {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 10px 12px 8px;
    border: 0;
    border-top: 1px solid #E4DDD2;
    background: #fffdf8;
    z-index: 31;
}
.chat-inline-review-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.chat-inline-review-row .btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 14px;
}
#chatModal .chat-input-area.chat-composer-yield {
    display: none !important;
}
.chat-inline-review-title {
    margin: 0;
    font-weight: 800;
    color: var(--primary-dark);
}
.chat-inline-review-stars {
    display: flex;
    gap: 6px;
}
.chat-inline-review-star {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: #F3EEE6;
    color: #C4B8A8;
    font-size: 1.35rem;
    line-height: 1;
}
.chat-inline-review-star.is-on {
    background: #E7F2EA;
    color: #2D6A4F;
}
.chat-inline-review-comment {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    min-height: 44px;
    max-height: 96px;
    resize: none;
    font-size: 16px;
}
.chat-todo-summary::-webkit-details-marker {
    display: none;
}
.chat-todo-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 32vh;
    overflow-y: auto;
    padding-bottom: 4px;
}
.chat-todo-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #FFFFFF;
}
.chat-todo-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.chat-todo-title {
    font-size: 0.9rem;
    color: var(--primary-dark);
}
.chat-todo-status {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}
.chat-todo-context {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--text-muted);
}
.chat-todo-action {
    min-height: 40px;
    width: 100%;
}
.chat-notice-compact {
    padding: 8px 12px !important;
    margin: 6px 0 !important;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #FFFFFF;
    max-width: 100%;
}
.chat-notice-compact .chat-timeline-title {
    font-size: 0.86rem;
    font-weight: 800;
}
.chat-notice-compact .chat-timeline-body,
.chat-notice-compact .chat-timeline-meta {
    font-size: 0.78rem;
    line-height: 1.35;
}
.chat-notice-compact .chat-dossier-event-actions .btn {
    min-height: 36px;
    font-size: 0.82rem;
}
.lyann-inbox-pending {
    color: var(--primary);
    font-weight: 700;
}
.chat-dossier-jalons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.chat-dossier-jalon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.88rem;
}
.chat-timeline-card.chat-dossier-event {
    padding: 10px 12px;
    margin: 8px 0;
    max-width: 100%;
}
.chat-dossier-history {
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}
@media (max-width: 430px) {
    .chat-missions-together {
        max-width: 7.25rem;
    }
    #chatModal .chat-header-info strong {
        font-size: 0.92rem;
    }
}
@media (max-width: 380px) {
    .chat-header-bar {
        padding-left: 8px;
        padding-right: 8px;
        gap: 4px;
    }
    .chat-header-user {
        gap: 4px;
    }
    #chatModal .chat-header-avatar,
    body.lyann-messaging-open #chatModal .chat-header-avatar {
        width: 24px !important;
        height: 24px !important;
    }
    #chatModal .chat-back-to-contacts-btn,
    #chatModal .chat-more-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    .chat-missions-together i {
        display: none;
    }
    .chat-missions-together {
        max-width: 6.6rem;
        padding: 3px 7px;
        font-size: 0.68rem;
        gap: 0;
    }
    #chatModal .chat-header-info strong {
        font-size: 0.88rem;
    }
}
@media (max-width: 430px) {
    .chat-dossier-strip {
        max-height: 76px;
    }
    .chat-mission-banner {
        flex-wrap: wrap;
    }
}

/* MESSAGES CONTAINER & BUBBLES */
.chat-messages-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--m-chat-bg);
    -webkit-overflow-scrolling: touch;
}

.chat-msg-bubble {
    width: max-content;
    max-width: 100%;
    min-width: 4.5rem;
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 1rem; /* 16px */
    line-height: 1.4;
    position: relative;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}
.chat-msg-text {
    display: block;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
}

.chat-msg-bubble.received {
    align-self: flex-start;
    background: #FFFFFF;
    border: 1px solid var(--border);
    color: var(--text);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.chat-msg-bubble.sent {
    align-self: flex-end;
    background: var(--primary);
    color: #FFFFFF;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(74, 124, 89, 0.2);
}

.chat-msg-time {
    font-size: 0.75rem; /* 12px */
    margin-top: 4px;
    opacity: 0.8;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* COMPOSER / INPUT AREA */
.chat-input-area {
    flex: 0 0 auto;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: #FFFFFF;
    position: relative;
    z-index: 30;
}

.chat-input-field-mobile {
    flex: 1;
    min-height: 48px;
    max-height: 130px;
    border-radius: 24px !important;
    border: 1.5px solid var(--border) !important;
    padding: 12px 18px !important;
    font-size: 1rem !important; /* 16px */
    line-height: 1.35 !important;
    resize: none !important;
    outline: none !important;
    background: #FAF9F6 !important;
    color: var(--text) !important;
}
.chat-input-field-mobile:focus {
    background: #FFFFFF !important;
    border-color: var(--primary) !important;
}

.chat-send-btn-mobile {
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border: none !important;
}

.btn-chat-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: #F4F6F4;
    color: var(--primary-dark);
    font-size: 1.3rem;
    cursor: pointer;
    flex-shrink: 0;
}

/* ==========================================================================
   CARTE PROPOSITION & CARTE SYSTEME DANS LE CHAT
   ========================================================================== */
.chat-msg-card {
    width: 90%;
    max-width: 360px;
    margin: 12px 0;
    padding: 20px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-msg-card.align-right {
    align-self: flex-end;
}
.chat-msg-card.align-left {
    align-self: flex-start;
}

.chat-card-header {
    font-size: 0.88rem; /* 14px */
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-card-price {
    font-size: 1.85rem; /* 30px */
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: -0.02em;
    margin: 4px 0;
}

.chat-card-inline-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.chat-card-inline-actions .btn-primary {
    height: 52px;
    width: 100%;
    border-radius: 15px;
    font-size: 1rem; /* 16px */
    font-weight: 700;
    justify-content: center;
    background: var(--primary);
    color: #FFFFFF;
}

.chat-card-inline-actions .btn-outline {
    height: 44px;
    width: 100%;
    border-radius: 12px;
    font-size: 0.95rem; /* 15px */
    font-weight: 600;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
}

/* ==========================================================================
   VERTICAL SELECTION SHEET: TARIF DIRECT VS DEVIS PAR JALONS
   ========================================================================== */
.choice-cards-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 0;
}

.choice-card-vertical {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.choice-card-vertical:hover, .choice-card-vertical:active {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(74, 124, 89, 0.12);
}

.choice-card-title {
    font-size: 1.15rem; /* 18-20px */
    font-weight: 800;
    color: var(--primary-dark);
}
.choice-card-desc {
    font-size: 0.95rem; /* 15px */
    color: var(--text);
    line-height: 1.4;
}
.choice-card-ex {
    font-size: 0.85rem; /* 13-14px */
    color: var(--text-muted);
    font-style: italic;
}
.choice-card-btn {
    height: 50px;
    width: 100%;
    border-radius: 14px;
    font-size: 1rem; /* 16px */
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
}

/* ==========================================================================
   FORMULAIRE TARIF DIRECT (FORMULAIRE MOBILE PROPRE)
   ========================================================================== */
.mobile-form-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mobile-form-title {
    font-size: 1.35rem; /* 22-24px */
    font-weight: 800;
    color: var(--text);
}
.mobile-form-subtitle {
    font-size: 0.92rem; /* 15px */
    color: var(--text-muted);
    margin-top: -14px;
}

.mobile-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mobile-form-label {
    font-size: 0.95rem; /* 15px */
    font-weight: 700;
    color: var(--text);
}
.mobile-form-textarea {
    width: 100%;
    min-height: 110px;
    border-radius: 16px;
    border: 1.5px solid var(--border);
    padding: 16px;
    font-size: 1rem; /* 16px */
    outline: none;
    background: #FAF9F6;
    color: var(--text);
    resize: none;
}
.mobile-form-textarea:focus {
    background: #FFFFFF;
    border-color: var(--primary);
}

.amount-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FAF9F6;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 8px 20px;
}
.amount-input-wrapper:focus-within {
    background: #FFFFFF;
    border-color: var(--primary);
}
.amount-input-field {
    flex: 1;
    height: 52px;
    border: none;
    background: transparent;
    font-size: 1.75rem; /* 28px */
    font-weight: 800;
    color: var(--primary-dark);
    outline: none;
}
.amount-input-symbol {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
}

.mobile-form-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.mobile-form-btn-submit {
    height: 52px;
    width: 100%;
    border-radius: 15px;
    font-size: 1rem; /* 16px */
    font-weight: 700;
    background: var(--primary);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
}
.mobile-form-btn-cancel {
    height: 44px;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem; /* 15px */
    font-weight: 600;
    cursor: pointer;
}

/* QUOTE / REPLY BOX INSIDE BUBBLE */
.chat-msg-quote {
    background: rgba(0, 0, 0, 0.06);
    border-left: 3.5px solid var(--primary);
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.82rem;
}
.chat-msg-bubble.sent .chat-msg-quote {
    background: rgba(255, 255, 255, 0.18);
    border-left-color: #FFFFFF;
}

/* REPLY BANNER ABOVE COMPOSER */
.chat-reply-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #EBF3EE;
    border-top: 1px solid var(--border);
    border-left: 4px solid var(--primary);
}
.chat-reply-bar-author {
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--primary-dark);
}
.chat-reply-bar-text {
    font-size: 0.82rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.chat-reply-cancel-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
}

/* COMPOSER / INPUT AREA */
.chat-input-area {
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: #FFFFFF;
    position: sticky;
    bottom: 0;
    z-index: 30;
}

.chat-input-field-mobile {
    flex: 1;
    min-height: 44px;
    max-height: 130px;
    border-radius: 22px !important;
    border: 1.5px solid var(--border) !important;
    padding: 10px 16px !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    resize: none !important;
    outline: none !important;
    background: #FAF9F6 !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}
.chat-input-field-mobile:focus {
    background: #FFFFFF !important;
    border-color: var(--primary) !important;
}

.chat-send-btn-mobile {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
}

/* LYANN ACTIONS BOTTOM SHEET (+ Menu) */
.chat-bottom-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 1000003;
    display: flex;
    align-items: flex-end;
    animation: fadeInNotif 0.2s ease-out;
}
.chat-bottom-sheet-card {
    width: 100%;
    background: #FFFFFF;
    border-radius: 24px 24px 0 0;
    padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
    animation: slideUpSheet 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes slideUpSheet {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.chat-bottom-sheet-handle {
    width: 36px;
    height: 5px;
    background: #CBD5E1;
    border-radius: 3px;
    margin: 0 auto 14px;
}
.chat-bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.chat-bottom-sheet-header h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
}
.chat-bottom-sheet-close {
    border: none;
    background: #F1F5F9;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-muted);
}
.chat-bottom-sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.chat-bs-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    touch-action: manipulation;
}
.chat-bs-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.15s ease;
}
.chat-bs-action-btn:active .chat-bs-icon-wrap {
    transform: scale(0.92);
}
.chat-bs-action-btn span {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
}

/* PHOTO LIGHTBOX VIEWER MODAL */
.chat-photo-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.92);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInNotif 0.2s ease-out;
}
.chat-photo-viewer-close {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: 16px;
    background: rgba(255,255,255,0.2);
    color: #FFFFFF;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
}
.chat-photo-viewer-img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 12px;
}

.chat-msg-photo-wrap {
    max-width: 240px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(29, 42, 68, 0.06);
    cursor: pointer;
}

.chat-msg-photo {
    display: block;
    max-width: 240px;
    max-height: 280px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.chat-msg-doc-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 180px;
}

.chat-msg-doc-name {
    font-weight: 700;
    word-break: break-word;
}

.chat-msg-doc-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.chat-msg-doc-open,
.chat-msg-retry {
    margin-top: 8px;
    border: 0;
    background: transparent;
    color: #2F5D45;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    min-height: 32px;
}

.chat-history-loader {
    text-align: center;
    color: #64748b;
    font-size: 0.8rem;
    padding: 8px 0;
}

#chatCheckoutOverlay.chat-overlay-pane {
    top: 64px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}
#chatCheckoutOverlay > div {
    max-height: none !important;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
}
#lyannCardPaymentElement {
    min-height: 48px;
    width: 100%;
    box-sizing: border-box;
}
#lyannCardPaymentElement iframe {
    width: 100% !important;
    min-height: 24px;
}

/* Fix Overlay Position */
.chat-overlay-pane {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-top: 1px solid var(--border);
    animation: fadeInNotif 0.2s ease-out;
    overflow-y: auto;
}

/* Chat Search Bar in Sidebar */
.chat-search-wrapper {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: #FFFFFF;
    position: relative;
}
.chat-search-input {
    width: 100%;
    height: 36px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    padding: 0 14px 0 34px;
    font-size: 0.82rem;
    outline: none;
    background: #F9FAFB;
    transition: var(--transition);
}
.chat-search-input:focus {
    background: #FFFFFF;
    border-color: var(--primary);
}
.chat-search-icon {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.95rem;
    pointer-events: none;
}

/* Typing Indicator */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    border-bottom-left-radius: 2px;
    align-self: flex-start;
    width: fit-content;
    box-shadow: var(--shadow-sm);
}
.typing-indicator span {
    width: 7px;
    height: 7px;
    background: var(--primary-light);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Date Separator */
.chat-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
    position: relative;
}
.chat-date-separator::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--border);
    z-index: 1;
}
.chat-date-separator span {
    position: relative;
    z-index: 2;
    background: #F7FAF8;
    padding: 2px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Empty State */
.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 30px;
    text-align: center;
    color: var(--text-muted);
}
.chat-empty-state i {
    font-size: 3.5rem;
    color: var(--primary-light);
    margin-bottom: 12px;
    opacity: 0.7;
}
.chat-empty-state h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
}
.chat-empty-state p {
    font-size: 0.85rem;
    max-width: 280px;
    line-height: 1.4;
}

/* Bubble Animations & Status */
.chat-msg-bubble {
    animation: chatBubbleSlideIn 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes chatBubbleSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.chat-msg-status {
    display: inline-flex;
    margin-left: 4px;
    font-size: 0.85rem;
    vertical-align: middle;
}
.chat-msg-status.read {
    color: #48CAE4;
}

/* Inline Card Actions inside Chat Cards */
.chat-card-inline-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.chat-card-inline-actions .btn {
    flex: 1;
    padding: 6px 10px;
    font-size: 0.78rem;
    border-radius: var(--radius-sm);
    justify-content: center;
}

/* ==========================================================================
   MINI-FENÊTRE PROFIL EXPRESS (#quickProfileModal)
   ========================================================================== */
.modal-card-quick-profile {
    max-width: 480px;
    width: 92%;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
}

.quick-profile-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 30px 24px 20px;
    color: #FFFFFF;
    text-align: center;
    position: relative;
}

.quick-profile-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #FFFFFF;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    margin-bottom: 10px;
}

.quick-profile-body {
    padding: 24px;
    background: #FFFFFF;
}

.lyann-moment-card {
    width: min(100%, 420px);
    margin: 10px auto;
    padding: 12px 14px;
    border-radius: 16px;
    background: #F4F7F2;
    border: 1px solid #D5E3D6;
    color: #1E2822;
    box-sizing: border-box;
}

.lyann-moment-kicker {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #3D6B4F;
    margin-bottom: 4px;
}

.lyann-moment-text {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.92rem;
    line-height: 1.45;
}

.lyann-moment-time {
    display: block;
    margin-top: 6px;
    font-size: 0.72rem;
    color: #6B7C70;
    text-align: right;
}

.quick-skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 18px;
}

.quick-skill-pill {
    background: #EBF3EE;
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

/* ==========================================================================
   MÉDIAS MULTIMÉDIAS SUR LE LAKOU (3 PHOTOS MAX / VIDÉO 30S)
   ========================================================================== */
.flash-media-upload-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.media-upload-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    background: #F4F6F4;
    border: 1px solid var(--border);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.media-upload-btn:hover {
    background: #EBF3EE;
    color: var(--primary);
}

.flash-media-preview-container {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.flash-media-preview-thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    object-fit: cover;
    border: 2px solid var(--primary-light);
}

.flash-card-media-gallery {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.flash-card-media-gallery.grid-1 { grid-template-columns: 1fr; }
.flash-card-media-gallery.grid-2 { grid-template-columns: 1fr 1fr; }
.flash-card-media-gallery.grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.flash-media-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.flash-video-player {
    width: 100%;
    max-height: 280px;
    border-radius: var(--radius-md);
    background: #000000;
}

/* ==========================================================================
   ESPACE MON COMPTE & BOUTON PROFIL HEADER (.nav-profile-btn & #userAccountModal)
   ========================================================================== */
/* Logique d'affichage conditionnel selon l'état de connexion */
.logged-in-only {
    display: none !important;
}

.logged-out-only {
    display: inline-flex !important;
}

/* Quand l'utilisateur est connecté (.user-is-logged-in sur body) */
body.user-is-logged-in .logged-in-only {
    display: inline-flex !important;
}

body.user-is-logged-in .mobile-nav-list a.logged-in-only,
body.user-is-logged-in .mobile-menu-docked-footer .logged-in-only {
    display: flex !important;
}

body.user-is-logged-in .logged-out-only {
    display: none !important;
}

#mobileHamburgerDrawer .drawer-profile-header.logged-out-only,
#mobileHamburgerDrawer .drawer-guest-header {
    display: flex !important;
    width: 100%;
}
body.user-is-logged-in #mobileHamburgerDrawer .drawer-profile-header.logged-out-only,
body.user-is-logged-in #mobileHamburgerDrawer .drawer-guest-header {
    display: none !important;
}
#mobileHamburgerDrawer .drawer-profile-header.logged-in-only,
#mobileHamburgerDrawer .drawer-menu-group.logged-in-only,
#mobileHamburgerDrawer .drawer-sub-link.logged-in-only {
    display: none !important;
}
body.user-is-logged-in #mobileHamburgerDrawer .drawer-profile-header.logged-in-only {
    display: flex !important;
}
body.user-is-logged-in #mobileHamburgerDrawer .drawer-menu-group.logged-in-only {
    display: block !important;
}
body.user-is-logged-in #mobileHamburgerDrawer .drawer-sub-link.logged-in-only {
    display: flex !important;
}
#mobileHamburgerDrawer .drawer-footer.logged-in-only {
    display: none !important;
}
body.user-is-logged-in #mobileHamburgerDrawer .drawer-footer.logged-in-only {
    display: block !important;
}
.activity-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 6px;
    border: none;
    background: transparent;
    color: #C45C4A;
    border-radius: 10px;
    cursor: pointer;
}

.activity-delete-btn:hover,
.activity-delete-btn:focus-visible {
    background: rgba(196, 92, 74, 0.1);
}
.drawer-guest-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--primary-dark, #1F3827);
}

.nav-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 2px solid var(--primary-light);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    position: relative;
}

.nav-profile-btn:hover {
    background: rgba(74, 124, 89, 0.12);
    border-color: var(--primary);
    transform: scale(1.05);
}

.nav-profile-avatar-wrap {
    position: relative;
    width: 34px;
    height: 34px;
}

.nav-profile-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.nav-profile-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: #2E7D32;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
}

/* Modales Profil */
#userAccountModal.modal-overlay,
#quickProfileModal.modal-overlay,
#profileDashboardModal.modal-overlay {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
    z-index: 10000 !important;
}

#userAccountModal .modal-card,
#quickProfileModal .modal-card,
#profileDashboardModal .modal-card,
.modal-card-user-account,
.modal-card-public-profile,
.modal-card-quick-profile {
    margin-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    height: 100% !important;
}

/* MESSAGERIE (#chatModal) - ADAPTATIVE MOBILE ET DESKTOP 2-COLONNES */
#chatModal.modal-overlay:not(.active):not([style*="display: flex"]) {
    display: none !important;
}

@media (max-width: 991px) {
    #chatModal.modal-overlay.active,
    #chatModal.modal-overlay[style*="display: flex"] {
        display: flex !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 100% !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        touch-action: pan-y !important;
        z-index: 999999 !important;
    }
    #chatModal .modal-card-chat {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        touch-action: pan-y !important;
    }
    #chatModal .chat-modal-layout {
        margin: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        touch-action: pan-y !important;
    }
    #chatModal .chat-main-area,
    #chatModal .chat-main-pane {
        overflow-x: hidden !important;
        touch-action: pan-y !important;
    }
}

/* DESIGN DESKTOP WEB PREMIUM - 2 COLONNES CÔTÉ À CÔTÉ */
@media (min-width: 992px) {
    #chatModal.modal-overlay.active,
    #chatModal.modal-overlay[style*="display: flex"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(15, 23, 42, 0.65) !important;
        backdrop-filter: blur(8px) !important;
        padding: 24px !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 100vh !important;
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 999999 !important;
    }

    #chatModal .modal-card-chat {
        width: calc(100vw - 32px) !important;
        max-width: 1440px !important;
        height: calc(100vh - 32px) !important;
        max-height: none !important;
        min-height: 0 !important;
        border-radius: 24px !important;
        box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
        margin: auto !important;
        padding: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background: #FFFFFF !important;
        position: relative !important;
    }

    #chatModal .chat-modal-layout {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #chatModal .chat-contacts-sidebar {
        width: 360px !important;
        min-width: 340px !important;
        max-width: 380px !important;
        display: flex !important;
        flex-direction: column !important;
        border-right: 1px solid #E2E8F0 !important;
        background: #FFFFFF !important;
        height: 100% !important;
        flex-shrink: 0 !important;
    }

    #chatModal .chat-main-area,
    #chatModal .chat-main-pane {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        background: #F4F6F4 !important;
        overflow: hidden !important;
        min-width: 0 !important;
        width: auto !important;
    }

    /* Afficher simultanément sidebar et messagerie principale sur écran desktop */
    #chatModal .chat-modal-layout.mobile-conversation-active .chat-contacts-sidebar,
    #chatModal .chat-modal-layout:not(.mobile-conversation-active) .chat-contacts-sidebar {
        display: flex !important;
    }

    #chatModal .chat-modal-layout.mobile-conversation-active .chat-main-area,
    #chatModal .chat-modal-layout:not(.mobile-conversation-active) .chat-main-area {
        display: flex !important;
    }

    /* Masquer le bouton retour mobile en desktop */
    #chatModal .chat-back-to-contacts-btn {
        display: none !important;
    }

    /* Bouton de fermeture desktop modernisé */
    #chatModal .desktop-only-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 14px;
        right: 16px;
        z-index: 600;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #F1F5F9;
        border: 1px solid #CBD5E1;
        color: #475569;
        font-size: 1.1rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    #chatModal .desktop-only-close-btn:hover {
        background: #EF4444;
        color: #FFFFFF;
        border-color: #EF4444;
        transform: scale(1.08);
    }
}
#chatModal input,
#chatModal textarea,
#chatModal select,
#chatModal .chat-input-field-mobile,
#chatModal .chat-search-input {
    font-size: 16px !important;
}

/* Ne jamais proposer la réinscription ou le bouton rejoindre pour un utilisateur connecté */
body.user-is-logged-in .logged-out-only,
body.user-is-logged-in .signup-cta-banner,
body.user-is-logged-in .open-signup-trigger {
    display: none !important;
}

/* Modale Espace Mon Compte (Sidebar-based layout on desktop) */
.modal-card-user-account {
    max-width: 1040px !important;
    width: 95% !important;
    height: 96dvh !important;
    max-height: 96dvh !important;
    margin: 2vh auto !important;
    padding: 0 !important;
    overflow: hidden;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    grid-template-columns: 280px 1fr !important;
    grid-template-areas:
        "header header"
        "sidebar content" !important;
    border-radius: var(--radius-xl) !important;
}

.modal-card-public-profile {
    max-width: 960px !important;
    width: 95% !important;
    height: 96dvh !important;
    max-height: 96dvh !important;
    margin: 2vh auto !important;
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl) !important;
}

.account-modal-header {
    grid-area: header !important;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    color: #FFFFFF;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.account-user-profile-summary {
    display: flex;
    align-items: center;
    gap: 16px;
}

.account-avatar-lg {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-md);
}

.account-user-name {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 2px;
}

.account-user-meta {
    font-size: 0.85rem;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Barre d'onglets Mon Compte (Sidebar gauche par défaut) */
.account-tabs-nav {
    grid-area: sidebar !important;
    display: flex;
    flex-direction: column;
    background: #F4F6F4;
    border-right: 1px solid var(--border);
    border-bottom: none;
    padding: 20px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.account-tabs-nav::-webkit-scrollbar {
    display: none;
}

.account-tab-btn {
    padding: 14px 24px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-bottom: none;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
}

.account-tab-btn:hover {
    color: var(--primary);
    background: rgba(74, 124, 89, 0.04);
}

.account-tab-btn.active {
    color: var(--primary-dark);
    border-left-color: var(--primary-dark);
    border-bottom-color: transparent;
    background: #FFFFFF;
}

.modal-card-user-account .modal-body {
    grid-area: content !important;
    padding: 0 !important;
    max-height: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: #FFFFFF !important;
}

.modal-card-user-account .modal-body::-webkit-scrollbar {
    display: none !important;
}

.account-tab-content {
    display: block !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    padding: 24px 28px !important;
    margin-bottom: 0 !important;
    padding-bottom: 32px !important;
    border-bottom: none !important;
}

.account-tab-content:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 32px !important;
}

/* Cartes d'historique Mes LYANN */
.lyann-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    transition: var(--transition);
}

.lyann-history-item:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
}

.lyann-history-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lyann-history-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(74, 124, 89, 0.12);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.lyann-history-title {
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--text);
    margin-bottom: 2px;
}

.lyann-history-sub {
    font-size: 0.83rem;
    color: var(--text-muted);
}

/* Carte Abonnement */
.subscription-status-card {
    background: linear-gradient(135deg, #F8F9FA 0%, #EBF3EE 100%);
    border: 2px solid var(--primary-light);
    border-radius: var(--radius-xl);
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.subscription-plan-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

/* ==========================================================================
   SYSTÈME DE MENTIONS (@mention) & BOUTON "🤝 LYANNER" (APPEL & WHATSAPP)
   ========================================================================== */

/* Pilule de Tag @Mention */
.user-mention-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: rgba(74, 124, 89, 0.12);
    border: 1px solid rgba(74, 124, 89, 0.3);
    border-radius: var(--radius-full);
    color: var(--primary-dark);
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.user-mention-tag:hover {
    background: var(--primary);
    color: #FFFFFF;
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* Dropdown Auto-complétion @Mention */
.mention-autocomplete-dropdown {
    position: absolute;
    z-index: 9999;
    background: #FFFFFF;
    border: 1.5px solid var(--primary-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    max-height: 220px;
    overflow-y: auto;
    width: 280px;
    display: none;
}

.mention-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 1px solid var(--border-light);
}

.mention-autocomplete-item:last-child {
    border-bottom: none;
}

.mention-autocomplete-item:hover,
.mention-autocomplete-item.active {
    background: #EBF3EE;
}

.mention-item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.mention-item-name {
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--text);
    margin-bottom: 2px;
}

.mention-item-role {
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* Bouton "🤝 LYANNER" & Confirmation Modal */
.btn-lyanner {
    background: linear-gradient(135deg, #2E7D32 0%, #4A7C59 100%) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.35) !important;
    transition: var(--transition) !important;
}

.btn-lyanner:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.45) !important;
}

/* Raccourcis WhatsApp & Appel Direct */
.lyanned-shortcuts-box {
    background: linear-gradient(135deg, #F8F9FA 0%, #EBF3EE 100%);
    border: 2px solid var(--primary-light);
    border-radius: var(--radius-xl);
    padding: 24px;
    text-align: center;
    margin-top: 16px;
}

.shortcut-action-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

.btn-shortcut-call {
    background: #25D366;
    color: #FFFFFF;
    font-weight: 800;
    padding: 12px 18px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    transition: var(--transition);
}

.btn-shortcut-call:hover {
    background: #1EBE57;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.btn-shortcut-phone {
    background: var(--primary-dark);
    color: #FFFFFF;
    font-weight: 800;
    padding: 12px 18px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(44, 76, 56, 0.3);
    transition: var(--transition);
}

.btn-shortcut-phone:hover {
    background: var(--primary);
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Navigation buttons styling consistent sizing */
.nav-links .btn {
    padding: 8px 18px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    height: auto !important;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-links .btn-outline {
    background: #FFFFFF;
    color: var(--primary-dark) !important;
    border: 2px solid rgba(74, 124, 89, 0.4);
}
.nav-links .btn-primary {
    background: var(--gradient-logo);
    color: white !important;
    border: none;
}

/* Floating chat badge in bottom-right corner */
.floating-chat-badge {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(74, 124, 89, 0.35);
    cursor: pointer;
    z-index: 999;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
}
.floating-chat-badge:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 15px 30px rgba(74, 124, 89, 0.45);
}
.floating-chat-badge i {
    font-size: 1.8rem;
}
.floating-chat-badge-notif {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background-color: #C95140;
    border: 2px solid white;
    border-radius: 50%;
    display: none;
}
.floating-chat-badge-notif.active {
    display: block;
    animation: pulseNotif 2s infinite;
}

@keyframes pulseNotif {
    0% { transform: scale(0.9); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(0.9); opacity: 1; }
}

/* Notifications Dropdown Styling */
.nav-notif-btn:hover {
    background: rgba(74, 124, 89, 0.1);
    color: var(--primary);
}
.nav-notif-dropdown {
    transition: opacity 0.2s ease, transform 0.2s ease;
    overflow-x: hidden !important;
    word-break: break-word;
    overflow-wrap: break-word;
}
.notif-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: background 0.2s;
    cursor: pointer;
    text-align: left;
}
.notif-item:hover {
    background: #F8F9FA;
}
.notif-item-icon {
    font-size: 1.15rem;
    padding: 6px;
    border-radius: 50%;
    background: rgba(74, 124, 89, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.notif-item-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.notif-item-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-item-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: break-word;
}
.notif-item-time {
    font-size: 0.68rem;
    color: #A19F9A;
    margin-top: 4px;
}

/* Navbar Search Icon Link */
.nav-search-icon-link:hover {
    transform: scale(1.12);
    background: rgba(229, 179, 69, 0.35) !important;
    box-shadow: 0 4px 12px rgba(229, 179, 69, 0.3);
}

/* ==========================================================================
   SPEED-DIAL FLOATING QUICK ACTION BUTTON (BOTTOM LEFT)
   ========================================================================== */
.speed-dial-wrapper {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 998;
}

.speed-dial-trigger {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sand-yellow) 0%, #D4A843 100%);
    color: #1A1A1A;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 25px rgba(212, 168, 67, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

.speed-dial-trigger:hover {
    transform: scale(1.08);
    box-shadow: 0 15px 30px rgba(212, 168, 67, 0.55);
}

.speed-dial-wrapper.active .speed-dial-trigger {
    transform: rotate(45deg);
    background: var(--primary-dark);
    color: white;
}

.speed-dial-menu {
    position: absolute;
    bottom: 72px;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}

.speed-dial-wrapper.active .speed-dial-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

button.speed-dial-item,
.speed-dial-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white !important;
    padding: 10px 16px !important;
    border-radius: 30px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--border) !important;
    color: var(--primary-dark) !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease, background 0.2s ease;
    text-decoration: none;
    font-family: inherit;
    width: auto;
    text-align: left;
    outline: none;
}

.speed-dial-item:hover {
    transform: translateX(5px);
    background: var(--primary-dark);
    color: white;
}

.speed-dial-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(74, 124, 89, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--primary-dark);
}

.speed-dial-item:hover .speed-dial-icon {
    background: white;
    color: var(--primary-dark);
}

/* ==========================================================================
   TABLEAU DE BORD & LES 15 ONGLETS PROFIL UTILISATEUR
   ========================================================================== */
.profile-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.profile-kpi-card {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--shadow-sm);
}

.profile-kpi-val {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary-dark);
}

.profile-kpi-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.profile-section-card {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.profile-section-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Mobile Touch Ergonomics & Responsiveness Refinements */
@media (max-width: 768px) {
    .floating-chat-badge {
        bottom: 20px;
        right: 16px;
        width: 52px;
        height: 52px;
    }
    .floating-chat-badge i {
        font-size: 1.5rem;
    }
    .speed-dial-wrapper {
        bottom: 20px;
        left: 16px;
    }
    .speed-dial-trigger {
        width: 52px;
        height: 52px;
        font-size: 1.4rem;
    }
    .speed-dial-menu {
        bottom: 64px;
    }
    .modal-card-user-account {
        display: flex !important;
        flex-direction: column !important;
        width: 98% !important;
        max-height: 96dvh !important;
        grid-template-rows: none !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
    }
    .account-modal-header {
        padding: 16px 20px;
    }
    .account-avatar-lg {
        width: 50px;
        height: 50px;
    }
    .account-user-name {
        font-size: 1.15rem;
    }
    .account-tabs-nav {
        display: flex !important;
        flex-direction: row !important;
        background: #F4F6F4 !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 0 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
    .account-tab-btn {
        padding: 12px 14px !important;
        font-size: 0.82rem !important;
        border-left: none !important;
        border-bottom: 3px solid transparent !important;
        width: auto !important;
        text-align: center !important;
        gap: 8px !important;
    }
    .account-tab-btn.active {
        border-left-color: transparent !important;
        border-bottom-color: var(--primary-dark) !important;
        background: #FFFFFF !important;
    }
    .modal-card-user-account .modal-body {
        max-height: 75vh !important;
    }

    /* Optimisation Chat Messagerie Mobile (#chatModal) */
    .modal-card-chat {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    #chatModal .desktop-only-close-btn {
        display: none !important;
    }

    .chat-sidebar-header {
        padding: 12px 16px !important;
        min-height: 52px !important;
        box-sizing: border-box !important;
    }

    .chat-header-bar {
        padding: 8px 14px !important;
        min-height: 52px !important;
        box-sizing: border-box !important;
    }
    
    .chat-modal-layout {
        flex-direction: column;
        height: 100%;
        width: 100%;
        position: relative;
    }

    .chat-contacts-sidebar {
        width: 100% !important;
        flex: 1;
    }

    .chat-main-area {
        width: 100% !important;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* En format mobile : bascule dynamique entre la liste des contacts et la conversation active */
    .chat-modal-layout.mobile-conversation-active .chat-contacts-sidebar {
        display: none !important;
    }
    .chat-modal-layout.mobile-conversation-active .chat-main-area {
        display: flex !important;
    }

    .chat-modal-layout:not(.mobile-conversation-active) .chat-contacts-sidebar {
        display: block !important;
    }
    .chat-modal-layout:not(.mobile-conversation-active) .chat-main-area {
        display: none !important;
    }

    .chat-back-to-contacts-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        background: rgba(74, 124, 89, 0.12);
        border: none;
        color: var(--primary-dark);
        font-weight: 800;
        font-size: 0.85rem;
        padding: 6px 12px;
        border-radius: 20px;
        cursor: pointer;
        margin-right: 8px;
    }

    .modal-card-user-account,
    .modal-card-public-profile {
        width: 98% !important;
        height: 94vh !important;
        max-height: 94vh !important;
        margin: auto !important;
    }
}

/* ==========================================================================
   SIMPLIFIED BADGE PILLS (Profil vérifié + PRO)
   ========================================================================== */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
}
.badge-verified {
    background: rgba(74, 124, 89, 0.12);
    color: #4A7C59;
    border: 1px solid rgba(74, 124, 89, 0.2);
}
.badge-pro {
    background: linear-gradient(135deg, #E5B345 0%, #D4A843 100%);
    color: #1A1A1A;
    border: 1px solid rgba(229, 179, 69, 0.4);
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   MULTI-PHOTO GALLERY PROJECTS
   ========================================================================== */
.realization-card {
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.realization-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.realization-category-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(74, 124, 89, 0.1);
    color: var(--primary);
    margin-top: 4px;
}
.realization-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Project Detail Modal (Lightbox) */
.project-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.project-detail-overlay.active {
    display: flex;
    opacity: 1;
}
.project-detail-card {
    background: white;
    border-radius: var(--radius-xl);
    max-width: 720px;
    width: 95%;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.project-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.project-detail-close:hover {
    background: rgba(0,0,0,0.7);
}

/* Carousel */
.project-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: #111;
}
.project-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.project-carousel img.active {
    display: block;
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.85);
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 5;
    color: #1A1A1A;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.carousel-btn:hover { background: white; }
.carousel-btn.prev { left: 12px; }
.carousel-btn.next { right: 12px; }
.carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
}
.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.carousel-dot.active { background: white; }
.project-carousel-counter {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    z-index: 5;
}
.btn-fullscreen-photo {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.78rem;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
}
.btn-fullscreen-photo:hover { background: rgba(0,0,0,0.7); }
.project-detail-body {
    padding: 24px;
}
.project-detail-body h3 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 4px;
    color: var(--text);
}
.project-detail-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.project-detail-meta span {
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.project-detail-desc {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text);
}

/* Fullscreen Photo Overlay */
.fullscreen-photo-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.fullscreen-photo-overlay.active {
    display: flex;
}
.fullscreen-photo-overlay img {
    max-width: 95%;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 8px;
}

/* ==========================================================================
   REVIEW PHOTOS (Photos dans retours de voisins)
   ========================================================================== */
.review-photos-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.review-photo-thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.2s;
}
.review-photo-thumb:hover {
    border-color: var(--primary);
    transform: scale(1.05);
}
.review-photo-upload-wrapper {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    align-items: center;
}
.review-photo-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: rgba(74, 124, 89, 0.1);
    color: var(--primary);
    border: 1px dashed rgba(74, 124, 89, 0.3);
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.review-photo-upload-btn:hover {
    background: rgba(74, 124, 89, 0.18);
}

/* ==========================================================================
   DEVIS REVISION UI & VERSIONING
   ========================================================================== */
.devis-version-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(74, 124, 89, 0.1);
    color: var(--primary);
}
.devis-revision-card {
    background: #FFFAF0;
    border: 1.5px solid #E5B345;
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-top: 10px;
}
.devis-revision-card h5 {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}
.devis-diff-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.devis-diff-line:last-child { border-bottom: none; }
.devis-diff-old {
    text-decoration: line-through;
    color: var(--text-muted);
}
.devis-diff-new {
    color: var(--primary);
    font-weight: 700;
}
.devis-diff-change {
    font-weight: 800;
    color: #C95140;
    font-size: 0.85rem;
}
.devis-diff-change.positive { color: #C95140; }
.devis-diff-change.negative { color: #4A7C59; }
.devis-motif {
    background: rgba(74, 124, 89, 0.06);
    border-left: 3px solid var(--primary);
    padding: 10px 14px;
    margin-top: 10px;
    border-radius: 0 8px 8px 0;
    font-size: 0.82rem;
    color: var(--text);
    font-style: italic;
}
.devis-version-timeline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.devis-version-step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}
.devis-version-step.active { color: var(--primary); }
.devis-version-step .version-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
}
.devis-version-step.active .version-dot {
    background: var(--primary);
}
.devis-version-arrow {
    font-size: 0.85rem;
    color: var(--border);
}

/* Milestone Management */
.milestone-card {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color 0.2s;
}
.milestone-card:hover { border-color: var(--primary); }
.milestone-card.locked {
    background: #F8F9FA;
    opacity: 0.85;
    pointer-events: none;
}
.milestone-card.locked::after {
    content: '🔒';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.85rem;
}
.milestone-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 800;
    flex-shrink: 0;
}
.milestone-info { flex: 1; min-width: 0; }
.milestone-info h6 { font-size: 0.85rem; font-weight: 700; color: var(--text); margin: 0; }
.milestone-info span { font-size: 0.78rem; color: var(--text-muted); }
.milestone-amount {
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--primary);
}
.milestone-actions {
    display: flex;
    gap: 4px;
}
.milestone-actions button {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.2s;
    color: var(--text-muted);
}
.milestone-actions button:hover { background: rgba(0,0,0,0.05); }
.milestone-status-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
.milestone-status-badge.pending { background: #FFF3CD; color: #856404; }
.milestone-status-badge.paid { background: #D1E7DD; color: #0F5132; }
.milestone-status-badge.validated { background: rgba(74,124,89,0.12); color: #4A7C59; }
.milestone-status-badge.completed { background: #E8E4DD; color: #111; }

/* Add Milestone Button */
.btn-add-milestone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    background: none;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.btn-add-milestone:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Revision Overlay */
.devis-revision-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.98);
    border-radius: var(--radius-xl);
    z-index: 10;
    padding: 24px;
    overflow-y: auto;
}
.devis-revision-overlay.active { display: block; }

/* Multi-photo upload in add realization form */
.multi-photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.multi-photo-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--border);
}
.multi-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.multi-photo-item .remove-photo-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.multi-photo-item.is-cover {
    border-color: var(--primary);
}
.multi-photo-item .cover-badge {
    position: absolute;
    bottom: 2px;
    left: 2px;
    background: var(--primary);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 6px;
}

/* ==========================================================================
   AUDIT TRAIL COMPACT
   ========================================================================== */
.audit-trail-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 0;
    list-style: none;
}
.audit-trail-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 0.78rem;
    color: var(--text-muted);
}
.audit-trail-item:last-child { border-bottom: none; }
.audit-trail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    margin-top: 4px;
}
.audit-trail-time {
    font-size: 0.7rem;
    color: #A19F9A;
    white-space: nowrap;
}






/* ========================================================================== */
/* CHAT TRANSACTIONAL CARDS & CONTEXTUAL ACTIONS */
/* ========================================================================== */

.chat-contextual-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-alt);
    border-top: 1px solid var(--border-light);
}

.chat-msg-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-top: 8px;
    margin-bottom: 8px;
    width: 280px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text);
}

.chat-msg-card.align-right {
    margin-left: auto;
    border: 1px solid var(--primary-light);
    background: rgba(46, 125, 50, 0.03); /* slight green tint */
}

.chat-msg-card.align-left {
    margin-right: auto;
}

.chat-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-dark);
}

.chat-card-header i {
    color: var(--primary);
    font-size: 1.2rem;
}

.chat-card-body {
    font-size: 0.9rem;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-card-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-top: 4px;
}

.chat-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 5px;
}

.chat-card-actions .btn {
    width: 100%;
    padding: 8px;
    font-size: 0.85rem;
}

.dev-ai-badge {
    background: #6366f1;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Override default bubble for cards so they don't look like text bubbles */
.chat-msg-bubble.is-card {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
}


/* ========================================================================== */
/* LYANN CUSTOM DIALOG SYSTEM */
/* ========================================================================== */
.lyann-dialog-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: var(--shadow-xl);
    animation: modal-fade-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lyann-dialog-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 16px;
}

.lyann-dialog-icon.info {
    background: rgba(37, 99, 235, 0.1);
    color: #2563EB;
}

.lyann-dialog-icon.success {
    background: rgba(46, 125, 50, 0.1);
    color: #2E7D32;
}

.lyann-dialog-icon.warning {
    background: rgba(229, 179, 69, 0.15);
    color: #E5B345;
}

.lyann-dialog-title {
    font-size: 1.25rem;
    color: var(--text);
    margin-bottom: 8px;
    font-weight: 800;
}

.lyann-dialog-message {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 24px;
    white-space: pre-line;
}
.chat-wait-pill {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #E4DDD2;
    color: #1B4332;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(27, 67, 50, 0.12);
}
.chat-wait-pill[hidden] {
    display: none;
}
.chat-wait-spin {
    width: 16px;
    height: 16px;
    border: 2px solid #E7F2EA;
    border-top-color: #2D6A4F;
    border-radius: 50%;
    animation: lyannBtnSpin 0.7s linear infinite;
}

.lyann-dialog-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.lyann-dialog-actions .btn {
    flex: 1;
    justify-content: center;
}

/* ==========================================================================
   LYANN MOBILE & NATIVE APP SUPPORT (CAPACITOR / SAFE AREAS)
   ========================================================================== */

/* Anim de rotation pour l'icône GPS de chargement */
@keyframes spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}
.spin-animation {
    animation: spin 1s linear infinite !important;
}

@keyframes lyannBtnSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.lyann-btn-spin,
.btn .lyann-btn-spin,
button .ph.lyann-btn-spin {
    display: inline-block;
    animation: lyannBtnSpin 0.75s linear infinite;
    font-size: 1.15em;
    line-height: 1;
    vertical-align: middle;
}
.btn.is-busy,
button.is-busy {
    position: relative;
    pointer-events: none;
    min-width: 2.75rem;
    justify-content: center;
}

/*
 * Tab / page transitions — NEVER animate transform/opacity on body.
 * A transformed body becomes the containing block for position:fixed,
 * which collapses #chatModal when messaging hides page sections.
 */
#lyann-page-veil {
    position: fixed;
    inset: 0;
    z-index: 2147482500;
    background: #F7F5F0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease;
}
#lyann-page-veil.is-on {
    opacity: 1;
    pointer-events: auto;
}
@keyframes lyannPageEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}
#lyann-page-veil.is-enter {
    animation: lyannPageEnter 0.2s ease both;
}
@media (prefers-reduced-motion: reduce) {
    #lyann-page-veil,
    #lyann-page-veil.is-on {
        transition: none;
        opacity: 0;
        pointer-events: none;
    }
    #lyann-page-veil.is-enter {
        animation: none;
    }
    .lyann-btn-spin,
    .btn .lyann-btn-spin,
    button .ph.lyann-btn-spin {
        animation: none;
    }
}

/* Keep noise below chat (chat sits at 9000 while messaging is open). */
body.lyann-messaging-open::after {
    display: none !important;
}

/* Safe Area support pour Notch, barre de navigation, status bar sur iOS & Android */
body.is-native-app {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.is-native-app .navbar {
    top: calc(16px + env(safe-area-inset-top, 0px)) !important;
}

body.is-native-app .reveal {
    opacity: 1;
    transform: none;
}

body.is-native-app .hero,
body.is-native-app .results-hero-section,
body.is-native-app .pricing-hero-section,
body.is-native-app .about-hero,
body.is-native-app .legal-hero {
    padding-top: calc(140px + env(safe-area-inset-top, 0px)) !important;
}

body.is-native-app .feed-hero-section {
    padding-top: calc(70px + env(safe-area-inset-top, 0px)) !important;
}

body.is-native-app .speed-dial-wrapper {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

body.is-native-app #backToTopBtn {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Rallongement du footer pour les écrans avec boutons d'accueil virtuels (Safe Area Bottom) */
body.is-native-app .footer {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}

/* Modales d'action du chat mobile s'adaptent à la safe-area */
body.is-native-app #chatModal .modal-card {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   LYANN MOBILE SPECIFIC PREMIUM UI & COMPONENT STYLES
   ========================================================================== */

/* 1. Onglets de Navigation Basse (.mobile-bottom-nav) */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-light);
    display: none;
    justify-content: space-around;
    align-items: center;
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 999;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
}

body.is-native-app.has-member-nav .mobile-bottom-nav {
    display: flex;
}

body.is-native-app:not(.has-member-nav) {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.is-native-app {
    /* Laisser de l'espace pour le menu d'onglets du bas */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

.nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    background: none;
    border: none;
    padding: 6px 0;
    font-size: 0.72rem;
    font-family: inherit;
    font-weight: 700;
    transition: color 0.15s ease;
    cursor: pointer;
}

.nav-tab i {
    font-size: 1.4rem;
    margin-bottom: 2px;
}

.nav-tab.active {
    color: var(--primary);
}

/* Bouton d'action centrale en surélévation */
.nav-tab.btn-central-action {
    max-width: 56px;
    height: 48px;
    background: var(--gradient-logo);
    color: white;
    border-radius: var(--radius-lg);
    transform: translateY(-10px);
    box-shadow: 0 4px 14px rgba(74, 124, 89, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-tab.btn-central-action i {
    font-size: 1.6rem;
    margin-bottom: 0;
}

.nav-tab.btn-central-action:active {
    transform: translateY(-10px) scale(0.92);
}

/* Boot splash — logo GIF, 5s, fond uni, aucun cadre */
html.lyann-boot-splash-skip .lyann-boot-splash {
    display: none !important;
}
.lyann-boot-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8F8F5;
    border: 0;
    outline: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    pointer-events: auto;
}
.lyann-boot-splash img {
    width: 132px;
    height: 132px;
    max-width: 34vw;
    max-height: 34vw;
    display: block;
    border: 0;
    outline: none;
    box-shadow: none;
    background: #F8F8F5;
    border-radius: 0;
    mix-blend-mode: darken;
}
.lyann-boot-splash.is-done {
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

/* 2. Écran d'Onboarding de Bienvenue (.app-welcome-screen) */
.app-welcome-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-hero);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 24px calc(40px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    box-sizing: border-box;
}

.welcome-logo-container {
    margin-top: 12vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.welcome-logo-container svg {
    width: 90px;
    height: 90px;
}

.welcome-title {
    font-size: 2.1rem;
    font-weight: 900;
    color: var(--primary-dark);
    line-height: 1.25;
}

.welcome-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-top: 10px;
    max-width: 290px;
    line-height: 1.5;
}

.welcome-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* 3. Tiroir Coulissant / Bottom Sheet Générique (.mobile-bottom-sheet) */
.mobile-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.15);
    z-index: 10001;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

.mobile-bottom-sheet.active {
    transform: translateY(0);
}

.sheet-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.sheet-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.sheet-handle {
    width: 42px;
    height: 5px;
    background: rgba(0,0,0,0.1);
    border-radius: var(--radius-full);
    margin: -12px auto 20px auto;
}

.sheet-title {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 18px;
    text-align: center;
}

.sheet-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.sheet-option-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    width: 100%;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease;
}

.sheet-option-btn:active {
    background: rgba(74, 124, 89, 0.08);
}

.sheet-option-icon {
    font-size: 1.6rem;
}

.sheet-option-info h4 {
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--text);
    margin: 0;
}

.sheet-option-info p {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin: 3px 0 0 0;
    line-height: 1.3;
}

/* 4. Tableau de Bord Mobile (#mobileDashboard) */
#mobileDashboard {
    padding: calc(110px + env(safe-area-inset-top, 0px)) 16px 20px 16px;
    background: var(--gradient-hero);
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
    margin-bottom: 24px;
}

.dashboard-welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.dashboard-welcome h2 {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary-dark);
    margin: 0;
}

.dashboard-welcome p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 4px 0 0 0;
}

.dashboard-welcome-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    object-fit: cover;
    cursor: pointer;
}

.dashboard-search-bar {
    position: relative;
    margin-bottom: 20px;
}

.dashboard-search-bar i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: var(--text-muted);
}

.dashboard-search-bar input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px 13px 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: #FFFFFF;
    font-size: 0.95rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    font-family: inherit;
}

.dashboard-quick-actions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.dashboard-quick-actions::-webkit-scrollbar {
    display: none;
}

.action-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(74, 124, 89, 0.08);
    color: var(--primary-dark);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid rgba(74, 124, 89, 0.1);
}

.action-pill i {
    font-size: 1rem;
}

.dashboard-alert-card {
    background: rgba(229, 179, 69, 0.12);
    border: 1px solid rgba(229, 179, 69, 0.25);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-alert-card-text {
    font-size: 0.8rem;
    color: #8C6A1A;
    font-weight: 700;
    line-height: 1.4;
}

.dashboard-alert-card-btn {
    background: #E5B345;
    color: #1E2822;
    border: none;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}

/* 5. Réglages style iOS (.modal-card-user-account) */
.settings-group {
    margin-bottom: 24px;
}

.settings-group-title {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-left: 8px;
}

.settings-list {
    background: var(--bg-alt);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    background: none;
    width: 100%;
    text-align: left;
    border-left: none;
    border-right: none;
    border-top: none;
    font-family: inherit;
    transition: background 0.15s ease;
}

.settings-item:last-child {
    border-bottom: none;
}

.settings-item:active {
    background: rgba(0,0,0,0.03);
}

.settings-item-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}

.settings-item-label i {
    font-size: 1.2rem;
    color: var(--primary);
}

.settings-item-value {
    font-size: 0.82rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.settings-item-value i {
    font-size: 0.95rem;
}

.settings-item.danger-action {
    color: #E63B2E;
}

.settings-item.danger-action .settings-item-label {
    color: #E63B2E;
}

.settings-item.danger-action .settings-item-label i {
    color: #E63B2E;
}

/* ==========================================================================
   LYANN MOBILE DEFINITIVE DESIGN SYSTEM & TOKENS
   ========================================================================== */
:root {
    --m-space-1: 4px;
    --m-space-2: 8px;
    --m-space-3: 12px;
    --m-space-4: 16px;
    --m-space-5: 20px;
    --m-space-6: 24px;
    --m-space-8: 32px;
    --m-space-10: 40px;

    --m-radius-sm: 8px;
    --m-radius-md: 12px;
    --m-radius-lg: 16px;
    --m-radius-sheet: 24px;

    --m-btn-height: 50px;
    --m-touch-target: 44px;
    --m-bottom-nav-height: 72px;
    --m-header-height: 56px;
}

/* Supprimer les boutons flottants redondants sur l'application mobile native */
.speed-dial-wrapper,
.floating-chat-badge,
body.is-native-app #backToTopBtn,
body.is-native-app .speed-dial-wrapper,
body.is-native-app .floating-chat-badge,
body.has-bottom-nav .speed-dial-wrapper,
body.has-bottom-nav .floating-chat-badge {
    display: none !important;
}

/* Masquer la Bottom Bar dans les vues immersives */
body.hide-bottom-nav .mobile-bottom-nav,
body.in-chat-active .mobile-bottom-nav,
body.in-immersive-view .mobile-bottom-nav {
    display: none !important;
}

body.hide-bottom-nav {
    padding-bottom: 0 !important;
}

/* 5-Tab Bottom Navigation styling - 100% EVEN SPACING & SYMMETRY */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: none;
    justify-content: space-between;
    align-items: stretch;
    height: calc(var(--m-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: 0;
    padding-right: 0;
    z-index: 9999;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    overflow: visible !important;
}

@media (max-width: 991px) {
    .mobile-bottom-nav {
        display: flex !important;
    }
    body:not(.hide-bottom-nav) {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

body.is-native-app.has-member-nav .mobile-bottom-nav {
    display: flex !important;
}

body.is-native-app.has-member-nav {
    /* 20px clears the bar shadow so a scrolled action sits fully above it. */
    padding-bottom: calc(var(--m-bottom-nav-height) + 20px + env(safe-area-inset-bottom, 0px)) !important;
}

html:has(body.is-native-app.has-member-nav) {
    scroll-padding-bottom: calc(var(--m-bottom-nav-height) + 20px + env(safe-area-inset-bottom, 0px));
}

.nav-tab {
    flex: 1 1 20% !important;
    align-self: stretch !important;
    width: 20% !important;
    max-width: 20% !important;
    min-width: 0 !important;
    min-height: 44px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #718096;
    text-decoration: none;
    background: none;
    border: none;
    padding: 4px 0;
    font-size: 0.7rem;
    font-family: inherit;
    font-weight: 600;
    transition: color 0.15s ease;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    margin: 0 !important;
}

.nav-tab i {
    font-size: 1.3rem;
    margin-bottom: 2px;
}

.nav-tab span {
    font-size: 0.7rem;
    line-height: 1.1;
}

.nav-tab.active {
    color: var(--primary);
    font-weight: 700;
}

/* Central round Créer (+) button - Rond parfait 1:1, plus grand, dépassant en haut */
.nav-tab-central-item {
    position: relative !important;
    overflow: visible !important;
}

.btn-central-action {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    background: var(--primary) !important;
    color: #FFFFFF !important;
    transform: translateY(-14px) !important;
    box-shadow: 0 6px 16px rgba(74, 124, 89, 0.4) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: 3.5px solid #FFFFFF !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.btn-central-action i {
    font-size: 1.6rem !important;
    margin-bottom: 0 !important;
    color: #FFFFFF !important;
}

.btn-central-action:active {
    transform: translateY(-14px) scale(0.92) !important;
}

.central-tab-label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #718096 !important;
    margin-top: -10px !important;
    text-align: center !important;
}

/* Bokantaj Native Header */
.bokantaj-native-header {
    height: calc(var(--m-header-height) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: #FFFFFF;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: var(--m-space-5);
    padding-right: var(--m-space-5);
    position: sticky;
    top: 0;
    z-index: 100;
}

.bokantaj-native-header .logo-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    font-size: 1.25rem;
    color: var(--primary-dark);
}

.bokantaj-native-header .notif-bell-btn {
    position: relative;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--text);
    cursor: pointer;
    min-width: var(--m-touch-target);
    min-height: var(--m-touch-target);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-badge-count {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #E63B2E;
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: var(--radius-full);
}

/* Filter Chips (Horizontal Scroll) */
.mobile-filter-chips {
    display: flex;
    gap: var(--m-space-2);
    overflow-x: auto;
    padding: var(--m-space-3) var(--m-space-5);
    background: #FFFFFF;
}

.mobile-filter-chips::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: var(--bg-alt);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-chip.active {
    background: var(--primary);
    color: #FFFFFF;
    border-color: var(--primary);
}

/* Moi Tab View Styling */
.moi-tab-view {
    padding: var(--m-space-5);
}

.moi-profile-card {
    background: #FFFFFF;
    border-radius: var(--m-radius-lg);
    padding: var(--m-space-5);
    border: 1px solid var(--border-light);
    margin-bottom: var(--m-space-5);
    text-align: center;
}

.moi-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--m-space-3);
    border: 3px solid var(--primary-light);
}

.moi-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
}

.moi-city {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.moi-metrics-row {
    display: flex;
    justify-content: space-around;
    margin-top: var(--m-space-4);
    padding-top: var(--m-space-4);
    border-top: 1px solid var(--border-light);
}

.moi-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.moi-metric-num {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary-dark);
}

.moi-metric-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ==========================================================================
   AUDIO FEEDBACK VISUAL POLISH & MODAL FIXES
   ========================================================================== */

/* 1. Header & Navbar Background on Scroll */
.bokantaj-native-header,
body.is-native-app .navbar,
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid transparent !important;
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    z-index: 1000 !important;
    padding-top: max(16px, calc(16px + env(safe-area-inset-top, 0px))) !important;
    padding-bottom: 12px !important;
}

.bokantaj-native-header.scrolled,
body.is-native-app .navbar.scrolled,
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* 2. Full Width Publish Button in Bokantaj Composer */
.btn-publish-flash {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 12px !important;
    padding: 12px 22px !important;
    font-size: 0.95rem !important;
}

/* 3. Non-wrapping Badges (Disponibilité / Besoin) */
.flash-badge-dispo,
.flash-badge-besoin,
.flash-badge-reco {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* 4. Verified Checkmark Icon Inline Flow */
.flash-author-info strong {
    display: inline !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--text) !important;
}

.flash-author-info strong i,
.verified-icon-inline {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 4px !important;
    white-space: nowrap !important;
}

/* 5. High-contrast PRO Badge Text (White text on dark background) */
.badge-pro {
    background: #1E2822 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

.badge-pro-mini {
    background: #1E2822 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin-left: 4px !important;
}

/* 6. Centered Quick Profile Modal (#quickProfileModal) & Scroll Lock */
#quickProfileModal.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 20px 16px;
    box-sizing: border-box;
}

#quickProfileModal.modal-overlay.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#quickProfileModal .modal-card.modal-card-quick-profile {
    height: auto !important;
    width: min(440px, calc(100% - 24px));
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.modal-card-quick-profile {
    max-width: 480px;
    width: 100%;
    margin: 2vh auto !important;
    max-height: 96dvh !important;
    overflow-y: auto !important;
    border-radius: var(--radius-xl) !important;
    background: #FFFFFF !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
    position: relative !important;
}

#closeQuickProfileModalBtn,
.modal-close-btn {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    color: #FFFFFF !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    z-index: 20 !important;
    cursor: pointer !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}

#closeQuickProfileModalBtn:active,
.modal-close-btn:active {
    transform: scale(0.9) !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   WIZARD & TRANSACTION CHAT COMPONENTS
   ========================================================================== */

@keyframes pulse-shadow {
    0% { box-shadow: 0 0 0 0 rgba(74, 124, 89, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(74, 124, 89, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 124, 89, 0); }
}

.wizard-step {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.wizard-exact-date-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.wizard-exact-date-row[hidden] {
    display: none !important;
}

#wizardTitleBlock {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}
#wizardTitleBlock[hidden] {
    display: none !important;
}
#wizardTitleBlock > p {
    margin: 0;
}
#wizardTitleEdit {
    margin-top: 0 !important;
}
#wizardTitleSuggest {
    margin-top: 0 !important;
    align-self: flex-start;
}
#modal-request-help .wizard-step[data-step="2"] > h4 {
    margin-top: 12px;
}
#modal-request-help .modal-footer {
    gap: 16px;
}
#modal-request-help .modal-footer .btn {
    min-height: 44px;
    padding-left: 18px;
    padding-right: 18px;
}
.chat-inline-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.chat-inline-review-head .chat-inline-review-title {
    margin: 0;
}
.chat-inline-review-close {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #3D4A40;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.wizard-title-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.wizard-title-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    cursor: pointer;
}
.wizard-title-choice:has(input:checked) {
    border-color: var(--primary);
    background: rgba(74, 124, 89, 0.08);
}
.wizard-title-choice input {
    margin-top: 4px;
    flex-shrink: 0;
}
.wizard-title-choice span {
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
#wizardDescInput,
#wizardTitleInput {
    font-size: 16px;
}
.wizard-title-status {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 8px;
}
.wizard-title-status.is-error {
    color: #8A6405;
}
.wizard-title-status[hidden],
#wizardTitleEdit[hidden] {
    display: none !important;
}

.wizard-step.fade-out {
    opacity: 0;
    transform: translateX(-20px);
}

.wizard-step.fade-in {
    opacity: 0;
    transform: translateX(20px);
    animation: slideInFade 0.3s forwards ease;
}

@keyframes slideInFade {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Chat Transaction Cards */
.chat-tx-card {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 8px;
    box-shadow: var(--shadow-sm);
    width: 100%;
}

.chat-tx-card.offer {
    border-left: 4px solid var(--primary);
}

.chat-tx-card.payment {
    border-left: 4px solid var(--sand-yellow);
    background: #FFFCF5;
}

.chat-tx-card.success {
    border-left: 4px solid #4CAF50;
    background: #F2FAF3;
}

.chat-tx-header {
    font-weight: 800;
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-tx-price {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text);
    margin: 8px 0;
}

.chat-tx-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.chat-tx-btn {
    flex: 1;
    padding: 10px;
    font-size: 0.85rem;
    border-radius: 10px;
}

/* Star Rating */
.star-rating {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 16px 0;
}

.star-rating i {
    font-size: 2rem;
    color: #E5DFD5;
    cursor: pointer;
    transition: color 0.2s;
}

.star-rating i:hover,
.star-rating i.active {
    color: #E5B345;
}


/* ==========================================================================
   PERFECT CENTERING & ELEVATED POSITIONING FOR ALL MODALS
   ========================================================================== */
.modal-overlay.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    z-index: 100000 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.modal-overlay.active .modal-card,
.modal-overlay.active .modal-card-large,
.modal-overlay.active .modal-card-xl,
#modal-request-help.active .modal-card,
#loginModal.active .modal-card,
#onboardingModal.active .modal-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) !important;
    background-color: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    margin: auto !important;
    border-radius: 24px !important;
    max-height: 86vh !important;
    max-height: 86dvh !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
}

@media (max-width: 768px) {
    .modal-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 14px !important;
    }
    
    .modal-card,
    .modal-card-large,
    .modal-card-xl {
        border-radius: 20px !important;
        margin: auto !important;
        max-height: 88vh !important;
        max-height: 88dvh !important;
    }
}

/* ==========================================================================
   BARRE FILTRES DOSSIER UNIQUE BOKANTAJ (COMPACTE 1 SEULE LIGNE)
   ========================================================================== */
.feed-filters-bar-single-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 10px 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.feed-location-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.feed-location-select {
    background: transparent;
    border: none;
    font-weight: 800;
    font-size: 1rem;
    color: var(--primary-dark);
    cursor: pointer;
    outline: none;
    width: 100%;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.feed-filter-folder-wrapper {
    position: relative;
    flex-shrink: 0;
}

.feed-filter-folder-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F4F6F4;
    border: 1.5px solid rgba(74, 124, 89, 0.25);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.feed-filter-folder-btn:hover {
    background: #EBF3EE;
    border-color: var(--primary);
    transform: translateY(-1px);
}

.filter-active-text {
    color: var(--primary);
    font-weight: 800;
}

/* Dropdown Popover Folder */
.feed-filter-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 290px;
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: 0 16px 40px rgba(24, 34, 28, 0.18);
    padding: 10px;
    z-index: 1000;
    display: none;
    flex-direction: column;
    gap: 4px;
}

.feed-filter-dropdown-menu.active {
    display: flex;
    animation: fadeInDown 0.2s ease forwards;
}

.filter-dropdown-header {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 6px 10px 8px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.filter-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.15s ease;
}

.filter-dropdown-item:hover {
    background: #F4F6F4;
}

.filter-dropdown-item.active {
    background: rgba(74, 124, 89, 0.12);
}

.filter-item-icon {
    font-size: 1.25rem;
}

.filter-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.filter-item-info strong {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 700;
}

.filter-item-info small {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.filter-dropdown-item .check-icon {
    display: none;
    color: var(--primary);
    font-size: 1.1rem;
}

.filter-dropdown-item.active .check-icon {
    display: block;
}

/* ==========================================================================
   FIX BOOKING MODAL DATETIME OVERLAP & CLEAN INPUT PADDING
   ========================================================================== */
.clean-padding-input {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
}

.booking-datetime-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
}

@media (max-width: 576px) {
    .booking-datetime-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* ==========================================================================
   MOBILE HAMBURGER DRAWER (SIDEBAR LATÉRALE LYANN)
   ========================================================================== */
.hamburger-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(74, 124, 89, 0.08);
    border: 1px solid rgba(74, 124, 89, 0.2);
    color: var(--primary-dark);
    font-size: 1.35rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hamburger-menu-btn:hover,
.hamburger-menu-btn:active {
    background: rgba(74, 124, 89, 0.15);
    transform: scale(1.03);
}

.hamburger-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hamburger-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.hamburger-drawer-card {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: 320px;
    max-width: 88vw;
    height: 100vh;
    height: 100dvh;
    background: #FDFCF9;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25);
    z-index: 100000;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-left: 1px solid rgba(229, 179, 69, 0.25);
}

.hamburger-drawer-overlay.active .hamburger-drawer-card {
    transform: translateX(0);
}

/* En-tête profil du drawer — Chaleureux & Doux (Charte LYANN) */
.drawer-profile-header {
    padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 20px 20px;
    background: linear-gradient(135deg, #F4F8F5 0%, #E6F0E9 100%);
    border-bottom: 1.5px solid rgba(74, 124, 89, 0.2);
    border-radius: 0 0 18px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(74, 124, 89, 0.08);
}

.drawer-profile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.drawer-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
    box-shadow: 0 3px 10px rgba(74, 124, 89, 0.2);
}

.drawer-user-info {
    display: flex;
    flex-direction: column;
}

.drawer-user-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1F3827;
    line-height: 1.2;
}

.drawer-user-badge {
    font-size: 0.74rem;
    color: var(--primary);
    font-weight: 700;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(74, 124, 89, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
    width: fit-content;
}

.drawer-view-profile {
    font-size: 0.78rem;
    color: var(--primary);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.drawer-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(74, 124, 89, 0.2);
    background: rgba(74, 124, 89, 0.08);
    color: #1F3827;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.drawer-close-btn:hover {
    background: rgba(74, 124, 89, 0.18);
    transform: scale(1.05);
}

/* Corps du menu accordéon */
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 10px;
}

.drawer-menu-group {
    margin-bottom: 6px;
}

.drawer-accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #2D3748;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.drawer-accordion-btn:hover,
.drawer-accordion-btn.active {
    background: rgba(74, 124, 89, 0.08);
    color: var(--primary-dark);
}

.drawer-accordion-label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drawer-accordion-label i {
    font-size: 1.2rem;
    color: var(--primary);
}

.drawer-chevron {
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: transform 0.25s ease;
}

.drawer-accordion-btn.active .drawer-chevron {
    transform: rotate(90deg);
}

.drawer-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding-left: 38px;
}

.drawer-submenu.open {
    max-height: 520px;
    padding-top: 4px;
    padding-bottom: 8px;
}

.drawer-sub-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #4A5568;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.drawer-sub-link:hover {
    background: rgba(74, 124, 89, 0.06);
    color: var(--primary);
}

.drawer-direct-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #2D3748;
    text-decoration: none;
    border-radius: 12px;
    transition: background 0.2s ease, color 0.2s ease;
}

.drawer-direct-link {
    min-height: 44px;
    box-sizing: border-box;
}

.drawer-direct-link:hover,
.drawer-direct-link.active {
    background: rgba(74, 124, 89, 0.12);
    color: #2D5A39;
}

.drawer-direct-link.active {
    box-shadow: inset 3px 0 0 #4A7C59;
}

.drawer-primary-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(74, 124, 89, 0.16);
}

/* Pied de page du menu drawer */
.drawer-footer {
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)) 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: #FAFAFA;
}

.drawer-logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: rgba(225, 29, 72, 0.08);
    border: 1px solid rgba(225, 29, 72, 0.2);
    border-radius: 12px;
    color: #E11D48;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.drawer-logout-btn:hover {
    background: rgba(225, 29, 72, 0.15);
}

/* ==========================================================================
   ULTRA-FLUID & ELEGANT CHAT COMPOSER INPUT AREA (#chatModal)
   ========================================================================== */
.chat-input-area {
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    background: #FFFFFF;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: flex-end;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    flex-shrink: 0;
    transition: padding 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    z-index: 20;
}

.chat-input-area:focus-within {
    background: #FFFFFF;
    box-shadow: 0 -4px 20px rgba(74, 124, 89, 0.08);
    border-top-color: rgba(74, 124, 89, 0.25);
}

#chatInputForm {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Bouton Ajouter pièce jointe (+) */
.btn-chat-attach {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: rgba(74, 124, 89, 0.08);
    border: 1px solid rgba(74, 124, 89, 0.18);
    color: var(--primary-dark);
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-chat-attach:hover,
.btn-chat-attach:active {
    background: rgba(74, 124, 89, 0.18);
    transform: scale(1.05);
    color: var(--primary);
}

/* Textarea de saisie fluide */
.chat-input-field-mobile,
#chatInputField {
    flex: 1;
    min-height: 44px;
    max-height: 120px;
    height: 44px;
    padding: 10px 16px;
    font-size: 16px !important; /* Empêche le zoom automatique iOS Safari */
    line-height: 1.4;
    color: #1F2937;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 22px;
    resize: none;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, height 0.15s ease;
    font-family: inherit;
}

.chat-input-field-mobile:focus,
#chatInputField:focus {
    background: #FFFFFF;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.15);
}

/* Bouton Envoyer le message */
.chat-send-btn-mobile {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    color: #FFFFFF;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(74, 124, 89, 0.3);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-send-btn-mobile:hover,
.chat-send-btn-mobile:active {
    background: var(--primary-dark);
    transform: scale(1.06);
    box-shadow: 0 5px 15px rgba(74, 124, 89, 0.4);
}

/* ==========================================================================
   LYANN CHAT V2 FINAL POLISH STYLES
   ========================================================================== */
.online-dot {
    display: none !important;
}

.chat-header-subtitle {
    display: none !important;
}

/* Contact List Active Item in Sage Theme */
.chat-contact-item.active {
    background: #E8F5E9 !important;
    border-left: 3px solid #4A7C59 !important;
}

.chat-contact-item:hover:not(.active) {
    background: #F4F7F4 !important;
}

/* Unified Lyann Context Card */
.chat-mission-context-card {
    background: #FAFDFB !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    z-index: 25;
}

.chat-context-card-info {
    flex: 1;
    min-width: 0;
}

.chat-context-card-tag {
    font-size: 0.68rem;
    color: #4A7C59;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 3px;
}

.chat-context-card-title {
    font-size: 0.94rem;
    font-weight: 800;
    color: #1E2822;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hover-only Message Action Bar for Desktop */
@media (min-width: 769px) {
    .chat-msg-action-bar {
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.15s ease, visibility 0.15s ease !important;
    }

    .chat-msg-bubble-wrap:hover .chat-msg-action-bar,
    .chat-msg-bubble-wrap:focus-within .chat-msg-action-bar {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

.chat-context-card-meta {
    font-size: 0.78rem;
    color: #64748B;
    font-weight: 600;
    margin-top: 2px;
}

.chat-context-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.btn-chat-ctx {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    border: none;
}

.btn-chat-ctx.primary {
    background: #4A7C59;
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(74, 124, 89, 0.25);
}

.btn-chat-ctx.primary:hover {
    background: #3B6447;
    transform: translateY(-1px);
}

.btn-chat-ctx.secondary {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: #334155;
}

.btn-chat-ctx.secondary:hover {
    background: #F8FAFC;
    border-color: #94A3B8;
    color: #0F172A;
}

/* Attachment Menu Dropdown Popup */
.chat-input-area { overflow: visible; flex-wrap: wrap; }
.chat-attach-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 0 100%;
    width: 100%;
    margin-bottom: 8px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid #E6E1D6;
    border-radius: 14px;
    box-sizing: border-box;
}
.chat-attach-preview img,
.chat-attach-preview video {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    background: #111;
}
.chat-attach-progress {
    flex: 1;
    height: 6px;
    background: #E7E1D6;
    border-radius: 99px;
    overflow: hidden;
}
.chat-attach-progress > span {
    display: block;
    height: 100%;
    width: 0;
    background: #4A7C59;
}
.chat-msg-video {
    width: min(260px, 70vw);
    max-height: 360px;
    border-radius: 14px;
    background: #111;
    object-fit: contain;
}
.bokantaj-video {
    width: 100%;
    min-height: 180px;
    max-height: 70vh;
    background: #111;
    border-radius: 16px;
    object-fit: contain;
}
.chat-attach-menu {
    position: absolute;
    bottom: 64px;
    left: 16px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1000002;
    min-width: 200px;
    animation: fadeInAttach 0.15s ease-out;
}

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

.chat-attach-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.chat-attach-menu-item:hover {
    background: #F1F5F9;
    color: #0F172A;
}

.attach-badge-soon {
    font-size: 0.68rem;
    font-weight: 700;
    background: #F1F5F9;
    color: #64748B;
    padding: 2px 8px;
    border-radius: 10px;
}

/* ==========================================================================
   WIZARD DE COMPLÉTION DE PROFIL (#modalCompleteProfile)
   ========================================================================== */
.cp-skill-tag {
    background: #F3F4F6;
    border: 1.5px solid #E5E7EB;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.cp-skill-tag:hover {
    background: #E5E7EB;
    color: var(--primary-dark);
}

.cp-skill-tag.active {
    background: rgba(74, 124, 89, 0.12);
    border-color: var(--primary);
    color: var(--primary-dark);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(74, 124, 89, 0.15);
}

.cp-preset-avatar {
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.cp-preset-avatar:hover {
    transform: scale(1.1);
}

.cp-preset-avatar.active {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px var(--primary);
    transform: scale(1.1);
}

/* Modal Ergonomics, Vertical Centering & Scrollable Body */
#modalCompleteProfile.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

#modalCompleteProfile.modal-overlay.active {
    display: flex !important;
}

.modal-card-complete-profile {
    max-width: 520px;
    width: 100%;
    max-height: 85dvh;
    max-height: 85vh;
    border-radius: 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    margin: auto;
}

.modal-complete-profile-header {
    background: linear-gradient(135deg, #1F3827 0%, #2E4F38 100%);
    padding: 22px 24px 18px 24px;
    color: #FFFFFF;
    position: relative;
    flex-shrink: 0;
}

.modal-complete-profile-body {
    padding: 22px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media (max-width: 640px) {
    #modalCompleteProfile.modal-overlay {
        padding: 8px 12px;
        align-items: center;
        justify-content: center;
    }
    
    .modal-card-complete-profile {
        width: 100%;
        max-height: 90dvh;
        max-height: 90vh;
        border-radius: 20px;
    }

    .modal-complete-profile-header {
        padding: 18px 20px 14px 20px;
    }

    .modal-complete-profile-body {
        padding: 16px 18px;
    }
}

/* ==========================================================================
   MOBILE APP & SMALL SCREENS - PUBLIC MEMBER PROFILE MODAL PERFECT LAYOUT
   ========================================================================== */
@media (max-width: 768px) {
    #publicMemberProfileModal .modal-card-dashboard {
        width: 95% !important;
        max-width: 100% !important;
        height: 85vh !important;
        max-height: 88vh !important;
        border-radius: 20px !important;
        margin: auto !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    #publicMemberProfileModal .profile-header-banner {
        padding: 16px 18px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        background: linear-gradient(135deg, #FDFCF9 0%, #E6EFE9 100%) !important;
        border-bottom: 1px solid #E1ECE5 !important;
    }

    #publicMemberProfileModal .profile-user-summary {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
    }

    #publicMemberProfileModal .profile-avatar-large {
        width: 62px !important;
        height: 62px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    #publicMemberProfileModal .profile-user-name {
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        color: #1E3A2B !important;
        margin: 0 0 2px 0 !important;
    }

    #publicMemberProfileModal .profile-role-badge {
        font-size: 0.78rem !important;
        padding: 3px 10px !important;
        border-radius: 50px !important;
    }

    #publicMemberProfileModal .profile-location-text {
        font-size: 0.82rem !important;
        color: #5B7A6A !important;
    }

    #publicMemberProfileModal .social-action-bar {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-top: 4px !important;
    }

    #publicMemberProfileModal .btn-recommend {
        flex: 1 !important;
        padding: 8px 12px !important;
        font-size: 0.82rem !important;
        justify-content: center !important;
        border-radius: 50px !important;
    }

    #publicMemberProfileModal .btn-contact-direct {
        flex: 1 !important;
        padding: 8px 12px !important;
        font-size: 0.82rem !important;
        justify-content: center !important;
        border-radius: 50px !important;
    }

    #publicMemberProfileModal .btn-share-profile {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Tabs Bar Mobile */
    #publicMemberProfileModal .profile-tabs {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-around !important;
        background: #FFFFFF !important;
        border-bottom: 1.5px solid #E6EFE9 !important;
        padding: 0 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 4px !important;
        overflow-x: auto !important;
        flex-shrink: 0 !important;
    }

    #publicMemberProfileModal .public-tab-btn {
        flex: 1 !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 12px 6px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        border: none !important;
        border-bottom: 3px solid transparent !important;
        background: transparent !important;
        color: #6B8577 !important;
        border-radius: 0 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        margin-bottom: -1px !important;
    }

    #publicMemberProfileModal .public-tab-btn.active {
        color: #2D6A4F !important;
        border-bottom-color: #2D6A4F !important;
        font-weight: 800 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Modal Body & Tab Contents Mobile */
    #publicMemberProfileModal .profile-modal-body {
        display: block !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 16px 18px !important;
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #FAFCFA !important;
        box-sizing: border-box !important;
    }

    #publicMemberProfileModal .public-tab-content {
        display: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        float: none !important;
    }

    #publicMemberProfileModal .public-tab-content.active {
        display: block !important;
        width: 100% !important;
    }

    #publicMemberProfileModal .realizations-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    #publicMemberProfileModal .realization-img-wrapper {
        height: 100px !important;
    }

    #publicMemberProfileModal .realization-info {
        padding: 8px !important;
    }

    #publicMemberProfileModal .realization-title {
        font-size: 0.82rem !important;
    }
}

/* ===== ENHANCED CHAT UI & CONVERSATION DELETION ===== */
.chat-contact-swipe-wrapper {
    position: relative;
    overflow: hidden;
    background: #DC2626;
    flex: 0 0 auto;
    flex-shrink: 0;
    height: auto;
}

.chat-contact-item {
    position: relative;
    z-index: 2;
    background: #FFFFFF;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.chat-contact-item:hover .btn-delete-conv-desktop {
    opacity: 1;
    visibility: visible;
}

.btn-delete-conv-desktop {
    opacity: 0;
    visibility: hidden;
    background: none;
    border: none;
    color: #9CA3AF;
    font-size: 1.1rem;
    padding: 6px 8px;
    margin-left: auto;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
}

.btn-delete-conv-desktop:hover {
    color: #DC2626;
    background: rgba(220, 38, 38, 0.1);
}

.btn-delete-conv-mobile {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    background: #DC2626;
    color: #FFFFFF;
    border: none;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    z-index: 1;
}

.chat-msg-bubble-wrap {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: fit-content;
    max-width: min(78%, 520px);
    min-width: 4.5rem;
    margin-bottom: 8px;
    align-self: flex-start;
}

.chat-msg-bubble-wrap.sent {
    align-self: flex-end;
    margin-left: auto;
}

.chat-msg-action-bar {
    position: absolute;
    top: 4px;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    gap: 3px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 10;
}
.chat-msg-bubble-wrap.received .chat-msg-action-bar,
.chat-msg-bubble-wrap:not(.sent) .chat-msg-action-bar { left: calc(100% + 6px); }
.chat-msg-bubble-wrap.sent .chat-msg-action-bar { right: calc(100% + 6px); }

.chat-msg-bubble-wrap:hover .chat-msg-action-bar {
    opacity: 1;
    visibility: visible;
}

.chat-msg-act-btn {
    background: none;
    border: none;
    font-size: 1rem;
    padding: 3px 5px;
    cursor: pointer;
    border-radius: 50%;
    color: var(--text-muted);
    transition: transform 0.12s ease;
}

.chat-msg-act-btn:hover {
    transform: scale(1.25);
    color: var(--primary);
}

.chat-msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.chat-reaction-badge {
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 2px 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.chat-quoted-block {
    background: rgba(0,0,0,0.04);
    border-left: 3px solid var(--primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
    margin-bottom: 6px;
    color: var(--text-muted);
}

.chat-msg-bubble.sent .chat-quoted-block {
    background: rgba(255,255,255,0.2);
    border-left-color: #FFFFFF;
    color: rgba(255,255,255,0.9);
}

.chat-attach-popup {
    position: absolute;
    bottom: 60px;
    left: 16px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 100;
    min-width: 210px;
}

.chat-attach-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    background: none;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.12s ease;
}

.chat-attach-option:hover {
    background: #F3F4F6;
    color: var(--primary);
}

/* ==========================================================================
   LYANN STEP 9 — FINAL USER PROFILE EXPERIENCE (PRODUCT, UX, UI & REAL DATA)
   ========================================================================== */

/* Toast Notification */
.lyann-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #1D2A44;
    color: #FFFFFF;
    padding: 12px 20px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10000;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.lyann-toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Hero & Identity Section */
.lyann-profile-hero {
    background: #FDFCF9;
    border: 1px solid #E4DDD2;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.lyann-profile-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #2D6A4F 0%, #40916C 50%, #F4A261 100%);
}

.lyann-profile-hero-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

@media (max-width: 640px) {
    .lyann-profile-hero-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.lyann-profile-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.lyann-profile-avatar-img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    background: #F1F5F9;
}

.lyann-avatar-edit-btn {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2D6A4F;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.15s ease, background 0.15s ease;
}

.lyann-avatar-edit-btn:hover {
    transform: scale(1.1);
    background: #1B4332;
}

.lyann-profile-hero-details {
    flex: 1 1 10rem;
    min-width: min(100%, 10rem);
    max-width: 100%;
}

.lyann-profile-display-name,
.lyann-profile-location {
    max-width: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    writing-mode: horizontal-tb;
}

.lyann-profile-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

@media (max-width: 640px) {
    .lyann-profile-name-row {
        justify-content: center;
    }
    .lyann-profile-cta-group {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    .lyann-profile-cta-group .btn {
        min-height: 44px;
    }
    .lyann-profile-section {
        padding: 16px;
        margin-bottom: 14px;
    }
}

.lyann-profile-activity {
    margin: 2px 0 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #3F5C49;
}

.lyann-profile-display-name {
    font-size: 1.45rem;
    font-weight: 800;
    color: #1F3827;
    margin: 0;
    line-height: 1.25;
}

.lyann-profile-location {
    font-size: 0.9rem;
    color: #64748B;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

/* Badges */
.lyann-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lyann-badge-verified {
    background: #E8F5E9;
    color: #2D6A4F;
    border: 1px solid #C8E6C9;
}

.lyann-badge-pro {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
}

/* Compact Trust Line */
.lyann-trust-line-compact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .lyann-trust-line-compact {
        justify-content: center;
    }
}

.lyann-trust-line-star {
    color: #F59E0B;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.lyann-trust-dot {
    color: #CBD5E1;
    font-size: 0.6rem;
}

.lyann-profile-bio {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.55;
    margin-top: 6px;
}

.lyann-profile-cta-group {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .lyann-profile-cta-group {
        justify-content: center;
        width: 100%;
    }
    .lyann-profile-cta-group .btn {
        flex: 1;
        justify-content: center;
        min-width: 140px;
    }
}

/* Profile Completion Card (Self View Only) */
.lyann-completion-card {
    background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 100%);
    border: 1px solid #BBF7D0;
    border-radius: 18px;
    padding: 18px 22px;
    margin-bottom: 20px;
}

.lyann-completion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.lyann-completion-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #166534;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lyann-completion-pct-badge {
    background: #2D6A4F;
    color: #FFFFFF;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
}

.lyann-completion-bar-bg {
    width: 100%;
    height: 8px;
    background: #DCFCE7;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.lyann-completion-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2D6A4F, #52B788);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.lyann-completion-items {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.lyann-completion-chip {
    background: #FFFFFF;
    border: 1px solid #DCFCE7;
    color: #166534;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.lyann-completion-chip:hover {
    background: #F0FDF4;
    border-color: #86EFAC;
}

/* Sections Styling */
.lyann-profile-section {
    background: #FFFCF8;
    border: 1px solid #E4DDD2;
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
}

.lyann-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.lyann-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1F3827;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.lyann-block-edit-btn {
    background: #F1F5F9;
    border: none;
    color: #475569;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.lyann-block-edit-btn:hover {
    background: #E2E8F0;
    color: #1E293B;
}

/* Services Grid ("Ce que je peux faire") */
.lyann-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.lyann-service-chip {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.lyann-service-chip:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
}

.lyann-service-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #E6EFE9;
    color: #2D6A4F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.lyann-service-info h5 {
    margin: 0 0 2px 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1E293B;
}

.lyann-service-info p {
    margin: 0;
    font-size: 0.8rem;
    color: #64748B;
    line-height: 1.4;
}

/* Intervention Area ("Je me déplace") */
.lyann-relocation-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.lyann-relocation-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #E8F5E9;
    color: #2D6A4F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.lyann-relocation-text strong {
    display: block;
    font-size: 0.95rem;
    color: #1E293B;
}

.lyann-relocation-text span {
    font-size: 0.85rem;
    color: #64748B;
}

/* Portfolio Gallery ("Mes réalisations") */
.lyann-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

@media (max-width: 640px) {
    .lyann-portfolio-grid {
        display: flex;
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .lyann-portfolio-card {
        min-width: 240px;
        scroll-snap-align: start;
        flex-shrink: 0;
    }
}

.lyann-portfolio-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    position: relative;
}

.lyann-portfolio-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.lyann-portfolio-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: #F1F5F9;
    display: block;
}

.lyann-portfolio-info {
    padding: 12px;
}

.lyann-portfolio-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1E293B;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lyann-portfolio-caption {
    font-size: 0.8rem;
    color: #64748B;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lyann-portfolio-privacy-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

.lyann-portfolio-privacy-badge.public {
    background: rgba(45, 106, 79, 0.85);
    color: #FFFFFF;
}

.lyann-portfolio-privacy-badge.private {
    background: rgba(100, 116, 139, 0.85);
    color: #FFFFFF;
}

/* Lightbox Modal */
.lyann-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.lyann-lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.lyann-lightbox-card {
    background: #FFFFFF;
    border-radius: 20px;
    max-width: 650px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.lyann-lightbox-img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.lyann-lightbox-details {
    padding: 20px 24px;
}

/* Activity Metrics Grid */
.lyann-activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.lyann-activity-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lyann-activity-val {
    font-size: 1.3rem;
    font-weight: 800;
    color: #1D2A44;
}

.lyann-activity-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748B;
}

/* Subscription Card (Self-only) */
.lyann-subscription-card {
    background: linear-gradient(135deg, #1D2A44 0%, #2D3A54 100%);
    color: #FFFFFF;
    border-radius: 18px;
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.lyann-subscription-info h4 {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
    color: #FFFFFF;
}

.lyann-subscription-info p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
}

/* Zero Data Component */
.lyann-zero-data {
    text-align: center;
    padding: 32px 16px;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 16px;
}

.lyann-zero-data-icon {
    font-size: 2.2rem;
    color: #94A3B8;
    margin-bottom: 8px;
    display: block;
}

.lyann-zero-data-title {
    font-weight: 700;
    color: #475569;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 2px;
}

.lyann-zero-data-sub {
    font-size: 0.85rem;
    color: #64748B;
}

/* ==========================================================================
   STEP 17 — SEARCH EXPERIENCE V2 (« JE CHERCHE » / « J’AI UN BESOIN »)
   ========================================================================== */
.search-v2-intent-container {
    margin-bottom: 24px;
}

.search-v2-header h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text, #1E2822);
    margin-bottom: 14px;
    text-align: left;
}

.search-v2-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .search-v2-cards {
        grid-template-columns: 1fr;
    }
}

.search-v2-card {
    background: #FFFFFF;
    border: 2px solid var(--border, #E5DFD5);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.search-v2-card:hover {
    border-color: var(--primary, #4A7C59);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 124, 89, 0.12);
}

.search-v2-card.active {
    border-color: var(--primary, #4A7C59);
    background: linear-gradient(135deg, #FFFFFF 0%, #F4F8F5 100%);
    box-shadow: 0 6px 20px rgba(74, 124, 89, 0.15);
}

.search-v2-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(74, 124, 89, 0.12);
    color: var(--primary, #4A7C59);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.search-v2-card-body h4 {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text, #1E2822);
}

.search-v2-card-body p {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-muted, #5C6E62);
    line-height: 1.45;
}

.search-v2-card-check {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary, #4A7C59);
    color: #FFFFFF;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.search-v2-card.active .search-v2-card-check {
    display: flex;
}

.search-v2-examples {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.example-chip {
    background: rgba(74, 124, 89, 0.08);
    border: 1px solid rgba(74, 124, 89, 0.15);
    color: var(--primary-dark, #35583F);
    padding: 10px 14px;
    min-height: 44px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.example-chip:hover {
    background: var(--primary, #4A7C59);
    color: #FFFFFF;
}

.need-intent-hero-box {
    background: #FFFFFF;
    border: 2px solid #E5DFD5;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.need-quick-chips {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.need-example-chip {
    background: #FDFCF9;
    border: 1.5px solid #E5DFD5;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #243329;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.need-example-chip:hover {
    border-color: var(--primary, #4A7C59);
    background: rgba(74, 124, 89, 0.06);
    color: var(--primary-dark, #35583F);
}

.need-example-chip i {
    font-size: 1.1rem;
    color: var(--primary, #4A7C59);
}

/* ==========================================================================
   LYANN — MASTER DESIGN SYSTEM V2 (UNIFIED COMPONENT FRAMEWORK)
   ========================================================================== */

/* 1. SCROLL-LOCK & LAYOUT STABILITY */
html {
    scrollbar-gutter: stable;
}

html.lyann-scroll-lock,
body.lyann-scroll-lock,
body.modal-open,
body.drawer-open,
body.sheet-open,
body.lyann-surface-open,
body.lyann-messaging-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

html.lyann-scroll-lock .modal-overlay.active,
html.lyann-scroll-lock .mobile-bottom-sheet.active,
html.lyann-scroll-lock #mobileHamburgerDrawerOverlay.active,
html.lyann-scroll-lock .chat-messages-scroll,
html.lyann-scroll-lock .chat-contacts-list,
html.lyann-scroll-lock .account-v3-body,
html.lyann-scroll-lock .modal-overlay.active .modal-card,
html.lyann-scroll-lock .hamburger-drawer-card {
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* 2. UNIFIED BUTTON FAMILY */
.btn-primary,
.btn-submit,
.btn-cta {
    background: linear-gradient(135deg, #4A7C59 0%, #3F6D4E 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--radius-md, 16px) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.98rem !important;
    padding: 13px 26px !important;
    min-height: 46px !important;
    box-shadow: 0 4px 14px rgba(74, 124, 89, 0.22) !important;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

.btn-primary:hover,
.btn-submit:hover,
.btn-cta:hover {
    background: linear-gradient(135deg, #538A63 0%, #35583F 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(74, 124, 89, 0.32) !important;
}

.btn-primary:active,
.btn-submit:active,
.btn-cta:active {
    transform: translateY(0) scale(0.98) !important;
}

.btn-secondary,
.btn-outline {
    background: #FFFFFF !important;
    color: #243329 !important;
    border: 1.5px solid #E5DFD5 !important;
    border-radius: var(--radius-md, 16px) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 12px 24px !important;
    min-height: 46px !important;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

.btn-secondary:hover,
.btn-outline:hover {
    border-color: #4A7C59 !important;
    color: #4A7C59 !important;
    background: rgba(74, 124, 89, 0.04) !important;
    transform: translateY(-1px) !important;
}

.btn-accent {
    background: linear-gradient(135deg, #F4D375 0%, #E5B345 100%) !important;
    color: #17231C !important;
    border: none !important;
    border-radius: var(--radius-md, 16px) !important;
    font-weight: 800 !important;
    font-size: 0.98rem !important;
    padding: 13px 26px !important;
    min-height: 46px !important;
    box-shadow: 0 4px 14px rgba(229, 179, 69, 0.28) !important;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.btn-accent:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(229, 179, 69, 0.40) !important;
}

/* 3. UNIFIED FORM CONTROLS */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea,
.form-control {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    border: 1.5px solid #E5DFD5 !important;
    background-color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.96rem !important;
    color: #243329 !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    outline: none !important;
    border-color: #4A7C59 !important;
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.18) !important;
}

/* 4. UNIFIED MODAL OVERLAYS & CARDS */
.modal-overlay {
    background: rgba(15, 23, 18, 0.68) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.modal-card,
.modal-card-large,
.modal-card-xl {
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 18, 0.22) !important;
    overflow: hidden !important;
}

.modal-close-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(244, 239, 230, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #243329 !important;
    transition: all 0.2s ease !important;
}

.modal-close-btn:hover {
    background: #4A7C59 !important;
    color: #FFFFFF !important;
    transform: rotate(90deg) !important;
}

/* 5. UNIFIED BADGES & PILLS */
.pill-badge,
.badge-status,
.status-pill {
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.pill-green,
.badge-validated,
.badge-completed {
    background: rgba(74, 124, 89, 0.12) !important;
    color: #35583F !important;
    border: 1px solid rgba(74, 124, 89, 0.25) !important;
}

.pill-yellow,
.badge-pending {
    background: rgba(229, 179, 69, 0.15) !important;
    color: #B28014 !important;
    border: 1px solid rgba(229, 179, 69, 0.3) !important;
}

.pill-blue,
.badge-info {
    background: rgba(123, 197, 227, 0.18) !important;
    color: #2D7B8C !important;
    border: 1px solid rgba(123, 197, 227, 0.35) !important;
}

/* 6. CARD CONTAINERS CLEANUP */
.feed-card,
.profile-card,
.lyan-card,
.quote-card,
.mission-card {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    border: 1.5px solid #E5DFD5 !important;
    box-shadow: 0 4px 16px rgba(36, 51, 41, 0.04) !important;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.feed-card:hover,
.profile-card:hover,
.lyan-card:hover {
    box-shadow: 0 10px 28px rgba(36, 51, 41, 0.08) !important;
    border-color: rgba(74, 124, 89, 0.3) !important;
}

/* 7. SAFE AREA TOUCH TARGETS */
@media (max-width: 768px) {
    .btn,
    .nav-tab,
    .hamburger-menu-btn,
    .nav-profile-btn {
        min-height: 44px !important;
        touch-action: manipulation !important;
    }
}

/* ==========================================================================
   LYANN — APP HOME V1 STYLES (ACCUEIL CONNECTÉ NATIVE MOBILE)
   ========================================================================== */
.app-home-view {
    padding: 16px var(--lyann-page-padding-x, 20px) 32px;
    max-width: 600px;
    margin: 0 auto;
}

.app-home-greeting-card {
    margin-bottom: 20px;
}

.app-home-greeting-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text, #243329);
    line-height: 1.2;
    margin-bottom: 4px;
}

.app-home-greeting-sub {
    font-size: 0.96rem;
    color: var(--text-muted, #5C6E62);
}

.app-home-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 28px;
}

.app-home-action-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg, 20px);
    padding: 18px 16px;
    border: 1.5px solid #E5DFD5;
    box-shadow: 0 4px 16px rgba(36, 51, 41, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
    cursor: pointer;
    position: relative;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.action-card-need {
    background: linear-gradient(145deg, #FFFFFF 0%, #F5F9F6 100%);
    border-color: rgba(74, 124, 89, 0.3);
}

.action-card-search {
    background: linear-gradient(145deg, #FFFFFF 0%, #FEFAF0 100%);
    border-color: rgba(229, 179, 69, 0.35);
}

.app-home-action-card:active {
    transform: scale(0.97);
}

.action-card-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.action-card-need .action-card-badge {
    background: rgba(74, 124, 89, 0.12);
    color: #4A7C59;
}

.action-card-search .action-card-badge {
    background: rgba(229, 179, 69, 0.16);
    color: #C69222;
}

.action-card-content h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #17231C;
    margin-bottom: 4px;
}

.action-card-content p {
    font-size: 0.82rem;
    color: #5C6E62;
    line-height: 1.35;
}

.action-card-arrow {
    position: absolute;
    top: 18px;
    right: 14px;
    font-size: 1.1rem;
    color: var(--text-muted);
}

.app-home-section {
    margin-bottom: 28px;
}

.app-home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.app-home-section-header h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #17231C;
}

.section-link-more {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary, #4A7C59);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Bottom Nav Centered Action Item */
.mobile-bottom-nav .nav-tab-central-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn-central-action {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4A7C59 0%, #35583F 100%);
    color: #FFFFFF;
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 14px rgba(74, 124, 89, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-top: -14px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.btn-central-action:active {
    transform: scale(0.92);
}

/* ==========================================================================
   LYANN MOBILE UX STABILIZATION V1 (375px, 390px, 430px)
   ========================================================================== */

/* 1. Fix Explorer Hero Spacing on Native & Mobile */
@media (max-width: 768px) {
    body.is-native-app .hero {
        padding-top: calc(88px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 24px !important;
        margin-bottom: 0 !important;
    }

    body.is-native-app .results-hero-section,
    .results-page .results-hero-section {
        padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 16px !important;
        margin-bottom: 0 !important;
    }

    .results-hero-title {
        font-size: 1.25rem !important;
        margin-bottom: 4px !important;
    }

    .results-hero-sub {
        font-size: 0.85rem !important;
        margin-bottom: 12px !important;
    }
}

/* 2. Fix Chat Mission Context Card (Prevent Vertical Text Collapse & Action Overflow) */
@media (max-width: 768px) {
    .chat-mission-context-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 14px !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .chat-context-card-info {
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
    }

    .chat-context-card-tag {
        font-size: 0.68rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        width: 100% !important;
    }

    .chat-context-card-title {
        font-size: 0.88rem !important;
        line-height: 1.25 !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        word-break: normal !important;
    }

    .chat-context-card-meta {
        font-size: 0.78rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        width: 100% !important;
    }

    .chat-context-card-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        width: 100% !important;
        padding-bottom: 4px !important;
    }

    .chat-context-card-actions::-webkit-scrollbar {
        display: none !important;
    }

    .btn-chat-ctx {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
        border-radius: 18px !important;
    }
}

/* 3. Fix Messaging Search Field Icon & Placeholder Overlap */
.chat-search-wrapper {
    position: relative !important;
    padding: 10px 16px !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--border, #E2E8F0) !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.chat-search-wrapper .chat-search-icon {
    position: absolute !important;
    left: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94A3B8 !important;
    font-size: 1.1rem !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.chat-search-wrapper .chat-search-input {
    width: 100% !important;
    height: 42px !important;
    border-radius: 21px !important;
    border: 1.5px solid var(--border, #E2E8F0) !important;
    padding-left: 44px !important;
    padding-right: 16px !important;
    font-size: 0.9rem !important;
    outline: none !important;
    background: #F8FAFC !important;
    color: #1E293B !important;
    box-sizing: border-box !important;
}

.chat-search-wrapper .chat-search-input:focus {
    background: #FFFFFF !important;
    border-color: var(--primary, #4A7C59) !important;
}

/* 4. Hide Bottom Navigation when Mobile Conversation is Active in Chat */
#chatModal.modal-overlay.active .chat-modal-layout.mobile-conversation-active ~ .mobile-bottom-nav,
body.chat-conversation-open .mobile-bottom-nav {
    display: none !important;
}

/* 5. Safe Overflow & Layout Boundaries for 375px, 390px, 430px */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ==========================================================================
   6. STABILIZATION V1 — Native App Header Sentinel Protection
   ========================================================================== */
/* Ensure native header is ALWAYS visible when sentinel is active */
.is-native-app .navbar[data-native-header-active] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

.is-native-app .navbar[data-native-header-active] .nav-container {
    display: flex !important;
    visibility: visible !important;
}

/* ==========================================================================
   7. STABILIZATION V1 — Native Chat Context Card (Anti-Vertical-Text)
   ========================================================================== */
/* Force column layout on native app regardless of viewport width detection */
.is-native-app .chat-mission-context-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 14px !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.is-native-app .chat-context-card-info {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.is-native-app .chat-context-card-tag {
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 100% !important;
}

.is-native-app .chat-context-card-title {
    font-size: 0.88rem !important;
    line-height: 1.25 !important;
    display: block !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    width: 100% !important;
    max-width: 100% !important;
}

.is-native-app .chat-context-card-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 4px !important;
}

.is-native-app .chat-context-card-actions::-webkit-scrollbar {
    display: none !important;
}

.is-native-app .btn-chat-ctx {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.8rem !important;
    padding: 6px 12px !important;
    border-radius: 18px !important;
}

/* ==========================================================================
   8. STABILIZATION V1 — Chat Modal Container Width Constraints
   ========================================================================== */
.is-native-app .chat-modal-layout,
.is-native-app .chat-thread-container,
.is-native-app .chat-thread-panel {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.is-native-app #chatModal .modal-card,
.is-native-app #chatModal .modal-inner {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   LYANN — MOBILE UX POLISH V2
   ========================================================================== */

/* 1. DRAWER HAMBURGER : INSET / FLOATING PANEL & SUBTLE BACKDROP */
@media (max-width: 768px), (pointer: coarse) {
    .hamburger-drawer-overlay {
        background: rgba(15, 23, 42, 0.42) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    .hamburger-drawer-card {
        top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
        right: 12px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
        left: auto !important;
        height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px) !important;
        width: 88vw !important;
        max-width: 360px !important;
        border-radius: 28px !important;
        box-shadow: -8px 12px 36px rgba(0, 0, 0, 0.22) !important;
        border: 1px solid rgba(229, 179, 69, 0.3) !important;
        overflow: hidden !important;
    }
}

/* 2. DRAWER CLOSE BUTTON (MIN TOUCH TARGET 44x44px & Z-INDEX) */
.drawer-close-btn,
.mobile-menu-close {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 20 !important;
    touch-action: manipulation !important;
}

/* 3 & 4. EXPLORER : INTENT CARDS COMPACT HORIZONTAL STACK (≤ 430px) */
@media (max-width: 640px) {
    .search-v2-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .search-v2-card {
        padding: 10px 14px !important;
        align-items: center !important;
        min-height: 52px !important;
        border-radius: 14px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    }

    .search-v2-card-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }

    .search-v2-card-body h4 {
        font-size: 0.92rem !important;
        font-weight: 800 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .search-v2-card-body p {
        font-size: 0.78rem !important;
        color: var(--text-muted, #5C6E62) !important;
        margin: 2px 0 0 0 !important;
        line-height: 1.2 !important;
    }

    .search-v2-card-check {
        position: static !important;
        margin-left: auto !important;
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0 !important;
    }
}

/* 5 & 6. BOKANTAJ : COMPACT FILTERS & HORIZONTAL TOPIC SCROLLER */
.bokantaj-top-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 8px 0;
}

.bokantaj-segment-group {
    display: inline-flex;
    background: rgba(74, 124, 89, 0.08);
    padding: 3px;
    border-radius: 20px;
    border: 1px solid rgba(74, 124, 89, 0.15);
    gap: 2px;
}

.bokantaj-segment-group .feed-pill {
    padding: 6px 14px !important;
    border-radius: 16px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted, #5C6E62) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 34px !important;
}

.bokantaj-segment-group .feed-pill.active {
    background: #FFFFFF !important;
    color: var(--primary-dark, #1F3827) !important;
    box-shadow: 0 2px 8px rgba(36, 51, 41, 0.1) !important;
}

.btn-bokantaj-filter-sheet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--primary-dark, #1F3827);
    background: rgba(74, 124, 89, 0.1);
    border: 1px solid rgba(74, 124, 89, 0.25);
    cursor: pointer;
    min-height: 36px;
    transition: all 0.2s ease;
}

.btn-bokantaj-filter-sheet:active {
    transform: scale(0.97);
}

.bokantaj-topic-scroller,
.bokantaj-topic-scroller.suggestion-tags {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding-bottom: 6px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.bokantaj-topic-scroller::-webkit-scrollbar {
    display: none !important;
}

.bokantaj-topic-scroller > *,
.bokantaj-topic-scroller .chip-pill,
.bokantaj-topic-scroller .tag,
.bokantaj-topic-scroller .hashtag-tag {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(74, 124, 89, 0.2) !important;
    color: var(--text, #243329) !important;
    min-height: 34px !important;
}

.bokantaj-topic-scroller .chip-pill.active,
.bokantaj-topic-scroller .tag.active {
    background: rgba(74, 124, 89, 0.14) !important;
    border-color: var(--primary, #4A7C59) !important;
    color: var(--primary-dark, #1F3827) !important;
}


/* 6. BOKANTAJ CATEGORY FILTER BOTTOM SHEET */
.mobile-bottom-sheet {
    align-items: flex-end !important;
    padding: 0 !important;
}

.mobile-bottom-sheet-card {
    width: 100% !important;
    max-width: 540px !important;
    background: #FDFCF9 !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)) 20px !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 auto !important;
}

.bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(74, 124, 89, 0.15);
}

.bottom-sheet-header h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary-dark, #1F3827);
    margin: 0;
}

.bottom-sheet-body {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-right: 4px;
}

.filter-sheet-section h4 {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #5C6E62);
    margin: 0 0 10px 0;
}

.filter-sheet-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text, #243329);
    cursor: pointer;
}

.filter-sheet-type-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sheet-type-btn {
    padding: 8px 14px;
    border-radius: 18px;
    border: 1px solid rgba(74, 124, 89, 0.2);
    background: #FFFFFF;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text, #243329);
    cursor: pointer;
}

.sheet-type-btn.active {
    background: var(--primary, #4A7C59);
    color: #FFFFFF;
    border-color: var(--primary, #4A7C59);
}

.filter-sheet-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sheet-topic-tag {
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid rgba(74, 124, 89, 0.2);
    background: #FFFFFF;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--primary-dark, #1F3827);
    cursor: pointer;
}

.sheet-topic-tag.active {
    background: rgba(74, 124, 89, 0.18);
    border-color: var(--primary, #4A7C59);
    color: var(--primary-dark, #1F3827);
}

.bottom-sheet-footer {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(74, 124, 89, 0.15);
}

/* ==========================================================================
   LYANN — ELEGANT COMPACT CHAT MODAL DESIGN V2
   ========================================================================== */

#chatModal.modal-overlay {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 999999 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px calc(env(safe-area-inset-bottom, 0px) + 14px) 14px !important;
    box-sizing: border-box !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

#chatModal.modal-overlay.active,
#chatModal.modal-overlay[style*="display: flex"] {
    display: flex !important;
}

#chatModal .modal-card-chat {
    width: 94% !important;
    max-width: 820px !important;
    height: 650px !important;
    max-height: 88vh !important;
    max-height: 88dvh !important;
    min-height: 520px !important;
    border-radius: 24px !important;
    border: none !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3) !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    margin: auto !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

@media (max-width: 768px) {
    #chatModal .modal-card-chat {
        width: 94vw !important;
        max-width: 440px !important;
        height: 85vh !important;
        height: 85dvh !important;
        max-height: 720px !important;
        min-height: 480px !important;
        border-radius: 24px !important;
    }
}

/* 8. REMOVE TOP MESSAGE BUTTON ON NATIVE APP HEADER */
body.is-native-app .nav-msg-btn,
body.capacitor-native .nav-msg-btn,
.is-native-platform .nav-msg-btn {
    display: none !important;
}

/* 9. GLOBAL ACTION BUTTON HIERARCHY (PRIORITY 1, 2, 3) */
.btn-primary,
.btn-p1 {
    background: linear-gradient(135deg, #4A7C59 0%, #E5B345 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(74, 124, 89, 0.25) !important;
    font-weight: 750 !important;
    min-height: 44px !important;
}

.btn-primary:hover,
.btn-p1:hover {
    background: linear-gradient(135deg, #3B6447 0%, #D4A234 100%) !important;
    box-shadow: 0 6px 18px rgba(74, 124, 89, 0.35) !important;
}

.btn-secondary,
.btn-outline,
.btn-p2 {
    background: #FFFFFF !important;
    border: 1.5px solid #4A7C59 !important;
    color: #17231C !important;
    font-weight: 650 !important;
    min-height: 44px !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-p2:hover {
    background: #F1F7F3 !important;
    border-color: #3B6447 !important;
    color: #0F1813 !important;
}

.btn-tertiary,
.btn-p3 {
    background: #4A7C59 !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 650 !important;
    min-height: 44px !important;
}

.btn-tertiary:hover,
.btn-p3:hover {
    background: #3B6447 !important;
}

/* 7. WEB DESKTOP ACCOUNT V3 SUBVIEWS RESPONSIVE LAYOUT */
@media (min-width: 992px) {
    #userAccountModal .account-v3-section {
        margin-bottom: 28px !important;
    }
    #userAccountModal .account-v3-section-content,
    #userAccountModal .account-v3-desktop-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
        gap: 16px !important;
    }
}

/* SLEEK CHAT SEARCH BAR & PREVENT ICON OVERLAP */
.chat-search-wrapper {
    position: relative !important;
    padding: 10px 16px !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.chat-search-wrapper .chat-search-icon {
    position: absolute !important;
    left: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #4A7C59 !important;
    font-size: 1.15rem !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.chat-search-wrapper .chat-search-input {
    width: 100% !important;
    height: 42px !important;
    border-radius: 21px !important;
    border: 1.5px solid rgba(74, 124, 89, 0.2) !important;
    padding-left: 48px !important;
    padding-right: 16px !important;
    font-size: 0.9rem !important;
    outline: none !important;
    background: #F8FAFC !important;
    color: #1E293B !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.chat-search-wrapper .chat-search-input::placeholder {
    color: #94A3B8 !important;
    opacity: 1 !important;
}

.chat-search-wrapper .chat-search-input:focus {
    background: #FFFFFF !important;
    border-color: var(--primary, #4A7C59) !important;
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.12) !important;
}

/* VECTOR ICON FOR CHAT SIDEBAR HEADER */
.chat-sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #E2E8F0 !important;
    background: #FDFCF9 !important;
}

.chat-sidebar-header span {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--primary-dark, #1F3827) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.chat-sidebar-header .chat-close-modal-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(74, 124, 89, 0.2) !important;
    background: rgba(74, 124, 89, 0.08) !important;
    color: #1F3827 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.chat-sidebar-header .chat-close-modal-btn:hover {
    background: rgba(74, 124, 89, 0.18) !important;
    transform: scale(1.05) !important;
}

/* COMPACT LYANN CONTEXT CARD */
.chat-mission-context-card {
    background: #FDFCF9 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.chat-mission-context-card .btn-chat-ctx {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    border: 1px solid rgba(74, 124, 89, 0.25) !important;
    transition: all 0.2s ease !important;
}

.chat-mission-context-card .btn-chat-ctx.primary {
    background: var(--primary, #4A7C59) !important;
    color: #FFFFFF !important;
    border-color: var(--primary, #4A7C59) !important;
}

.chat-mission-context-card .btn-chat-ctx.secondary {
    background: #FFFFFF !important;
    color: var(--primary-dark, #1F3827) !important;
}

/* Bokantaj Feed Mobile Container Safeguard */
@media (max-width: 600px) {
    .container {
        padding: 0 16px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    .feed-layout-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 0 !important;
    }
    .feed-main-column, .flash-feed-list, .lyann-feed-list {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Bokantaj Card Typography Polish (Scoped strictly to .flash-card / .lyann-card) */
.flash-card .lyann-author-name {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.98rem !important;
    color: #17231C !important;
}

.flash-card .lyann-card-title {
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 650 !important;
    font-size: 1.15rem !important;
    color: #17231C !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em !important;
}

.flash-card .lyann-card-description {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 450 !important;
    font-size: 0.95rem !important;
    color: #334155 !important;
    line-height: 1.5 !important;
}
/* ==========================================================================
   LYANN — CTA IDENTITY TOKENS (REUSABLE CONCEPTUALLY)
   ========================================================================== */
.lyann-cta-primary {
    background: linear-gradient(110deg, #4A7C59 0%, #80A86E 42%, #E5B345 100%) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    border-radius: 22px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 14px rgba(74, 124, 89, 0.22) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.lyann-cta-secondary {
    background: rgba(255, 255, 255, 0.70) !important;
    color: #17231C !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    border-radius: 22px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(74, 124, 89, 0.25) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.lyann-cta-secondary i {
    color: #4A7C59 !important;
    font-size: 1.05rem !important;
}

.lyann-cta-primary:active {
    transform: scale(0.98) !important;
}

.lyann-cta-secondary:active {
    background: rgba(255, 255, 255, 0.90) !important;
    transform: scale(0.98) !important;
}



/* Bokantaj Card Surface & Soft Elevation Polish (Scoped strictly to Bokantaj feed cards) */
.flash-card.lyann-card {
    background: #FAF6F0 !important;
    border: 1px solid rgba(74, 124, 89, 0.28) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 18, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    border-radius: 20px !important;
}

.flash-card:not(.lyann-card) {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    border-radius: 20px !important;
}

/* Fail-safe Public Web Header Suppression on Native App Shell */
body.is-native-app .navbar .open-login-trigger,
body.is-native-app .navbar .nav-search,
body.is-native-app .navbar .nav-actions .open-login-trigger,
body.is-native-app .navbar .nav-auth-btn {
    display: none !important;
}

/* ==========================================================================
   LYANN — ACCOUNT / PROFILE EXPERIENCE V3
   ========================================================================== */

.account-v3-modal-card {
    background: #F8FAFC !important;
    border-radius: 24px 24px 0 0 !important;
    max-width: 580px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12) !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

@media (min-width: 768px) {
    .account-v3-modal-card {
        border-radius: 24px !important;
        margin: auto !important;
    }
}

/* Top Header Bar */
.account-v3-topbar {
    background: #FFFFFF;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #F1F5F9;
    position: sticky;
    top: 0;
    z-index: 10;
}

.account-v3-topbar-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.account-v3-topbar-close {
    background: #F1F5F9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.account-v3-topbar-close:hover {
    background: #E2E8F0;
    color: #0F172A;
}

.account-v3-topbar-close:active {
    transform: scale(0.95);
}

/* Sub-view Navigation Bar / Pills */
.account-v3-subnav {
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.account-v3-subnav::-webkit-scrollbar {
    display: none;
}

.account-v3-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #64748B;
    background: #F1F5F9;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 40px;
    box-sizing: border-box;
}

.account-v3-nav-pill i {
    font-size: 1rem;
}

.account-v3-nav-pill:hover {
    background: #E2E8F0;
    color: #334155;
}

.account-v3-nav-pill.active {
    background: rgba(74, 124, 89, 0.12);
    color: #2D5A3C;
    border-color: rgba(74, 124, 89, 0.3);
}

/* Scrollable Container */
.account-v3-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

/* Sub-view Section Container */
.account-v3-view-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: accountV3FadeIn 0.2s ease-out forwards;
}

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

/* Section Header & Group */
.account-v3-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748B;
    margin: 4px 4px 8px 4px;
}

.account-v3-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.account-v3-card-inner {
    padding: 16px;
}

/* Header User Profile Banner */
.account-v3-user-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.account-v3-user-avatar-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.account-v3-user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.account-v3-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.account-v3-user-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-v3-user-email {
    font-size: 0.85rem;
    color: #64748B;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* List Rows */
.account-v3-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #F1F5F9;
    min-height: 52px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
    box-sizing: border-box;
}

.account-v3-row:last-child {
    border-bottom: none;
}

.account-v3-row:hover {
    background: #F8FAFC;
}

.account-v3-row:active {
    background: #F1F5F9;
}

.account-v3-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.account-v3-row-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(74, 124, 89, 0.08);
    color: #2D5A3C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.account-v3-row-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.account-v3-row-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0;
}

.account-v3-row-subtitle {
    font-size: 0.8rem;
    color: #64748B;
    margin: 0;
}

.account-v3-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.account-v3-row-chevron {
    color: #94A3B8;
    font-size: 1.05rem;
}

/* Status Badges */
.account-v3-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
}

.account-v3-badge-verified {
    background: #DCFCE7;
    color: #15803D;
}

.account-v3-badge-pro {
    background: #FEF3C7;
    color: #B45309;
}

.account-v3-badge-pending {
    background: #FEF9C3;
    color: #A16207;
}

.account-v3-badge-unverified {
    background: #F1F5F9;
    color: #64748B;
}

/* Finance Grid Stats */
.account-v3-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.account-v3-stat-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-v3-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0F172A;
}

.account-v3-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
}

/* Action Buttons */
.account-v3-btn-primary {
    background: #4A7C59;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
}

.account-v3-btn-primary:hover {
    background: #3B6447;
}

.account-v3-btn-primary:active {
    transform: scale(0.98);
}

.account-v3-btn-outline {
    background: transparent;
    color: #334155;
    border: 1px solid #CBD5E1;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
}

.account-v3-btn-outline:hover {
    background: #F8FAFC;
    border-color: #94A3B8;
}

.account-v3-btn-danger {
    background: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FCA5A5;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
}

.account-v3-btn-danger:hover {
    background: #FEE2E2;
}

/* Empty State Styling */
.account-v3-empty {
    text-align: center;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.account-v3-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.account-v3-empty-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

.account-v3-empty-subtitle {
    font-size: 0.83rem;
    color: #64748B;
    margin: 0;
}

/* Mobile Hamburger Drawer Polish */
.mobile-drawer-v3 {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.mobile-drawer-profile-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #F8FAFC;
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    margin-bottom: 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.mobile-drawer-profile-card:hover {
    background: #F1F5F9;
}

.mobile-drawer-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.mobile-drawer-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.mobile-drawer-user-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-drawer-view-profile-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4A7C59;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mobile-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    color: #334155;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    min-height: 48px;
    box-sizing: border-box;
}

.mobile-drawer-item i {
    font-size: 1.15rem;
    color: #4A7C59;
}

.mobile-drawer-item:hover {
    background: rgba(74, 124, 89, 0.08);
    color: #2D5A3C;
}

.mobile-drawer-divider {
    height: 1px;
    background: #E2E8F0;
    margin: 12px 0;
}

.mobile-drawer-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FCA5A5;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    box-sizing: border-box;
}

.mobile-drawer-logout-btn:hover {
    background: #FEE2E2;
}

.mobile-drawer-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #4A7C59;
    color: #FFFFFF;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ==========================================================================
   LYANN — REFAIRE COMPLÈTEMENT L'ESPACE COMPTE WEB DESKTOP (ACCOUNT DESKTOP SHELL)
   ========================================================================== */

/* 1. Mobile Viewport (< 768px) — Full Native Mobile App Experience */
@media (max-width: 767px) {
    #userAccountModal.modal-overlay {
        padding: 0 !important;
        margin: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        background: rgba(15, 23, 19, 0.6) !important;
        backdrop-filter: blur(4px);
    }

    #userAccountModal .modal-card,
    #userAccountModal .modal-card-user-account {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: #FDFCF9 !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: none !important;
        border: none !important;
    }

    .account-shell-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        background: #FDFCF9 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .account-desktop-sidebar {
        display: none !important;
    }

    .account-desktop-main {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        background: #FDFCF9 !important;
    }

    .account-main-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 12px !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        background: #FFFFFF !important;
        border-bottom: 1px solid #EAE6DF !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        box-sizing: content-box !important;
    }

    .mobile-only-btn {
        display: flex !important;
    }

    .account-v3-back-btn,
    .account-main-close-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 50% !important;
        background: #F4F0E8 !important;
        border: none !important;
        color: #17231C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.25rem !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        touch-action: manipulation;
    }

    .account-header-titles {
        flex: 1 !important;
        text-align: center !important;
    }

    .account-main-title {
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #17231C !important;
        margin: 0 !important;
    }

    .account-main-subtitle {
        display: none !important;
    }

    .account-main-body {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 16px 20px 40px 20px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .account-v3-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
    }

    .account-v3-col-left,
    .account-v3-col-right {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .account-desktop-section {
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    .account-section-heading {
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        color: #64748B !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        margin: 0 0 10px 4px !important;
    }

    .identity-strip {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        background: #FFFFFF !important;
        border: 1px solid #EAE6DF !important;
        border-radius: 18px !important;
        padding: 16px 18px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .account-identity-avatar {
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 2px solid #FFFFFF !important;
    }

    .avatar-camera-btn {
        position: absolute !important;
        bottom: -2px !important;
        right: -2px !important;
        width: 26px !important;
        height: 26px !important;
        border-radius: 50% !important;
        background: #4A7C59 !important;
        color: #FFFFFF !important;
        border: 2px solid #FFFFFF !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.8rem !important;
    }

    .identity-strip-text {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .identity-display-name {
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        color: #17231C !important;
        display: block !important;
        line-height: 1.3 !important;
    }

    .identity-email {
        font-size: 0.84rem !important;
        color: #64748B !important;
        display: block !important;
        margin-top: 2px !important;
    }

    .identity-territory {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 0.78rem !important;
        color: #4A7C59 !important;
        font-weight: 600 !important;
        margin-top: 4px !important;
    }

    .account-group-box {
        background: #FFFFFF !important;
        border: 1px solid #EAE6DF !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .account-divider {
        height: 1px !important;
        background: #F1ECE4 !important;
        margin: 0 16px !important;
    }

    .account-touch-row {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        background: #FFFFFF !important;
        border: none !important;
        padding: 14px 18px !important;
        min-height: 64px !important;
        cursor: pointer !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .account-touch-row .row-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 12px !important;
        background: rgba(74, 124, 89, 0.1) !important;
        color: #4A7C59 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.25rem !important;
        flex-shrink: 0 !important;
    }

    .account-touch-row .row-content {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .account-touch-row .row-title {
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 0.96rem !important;
        font-weight: 700 !important;
        color: #17231C !important;
        display: block !important;
    }

    .account-touch-row .row-subtitle {
        font-size: 0.82rem !important;
        color: #64748B !important;
        display: block !important;
        margin-top: 2px !important;
    }

    .account-touch-row .row-chevron {
        font-size: 1.1rem !important;
        color: #94A3B8 !important;
    }
}

/* 2. Tablet Viewport (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    #userAccountModal.modal-overlay {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
        background: rgba(15, 23, 19, 0.5) !important;
        backdrop-filter: blur(6px);
    }

    #userAccountModal .modal-card,
    #userAccountModal .modal-card-user-account,
    .account-shell-container {
        width: 100% !important;
        max-width: 740px !important;
        max-height: 90vh !important;
        border-radius: 24px !important;
        background: #FDFCF9 !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
        overflow: hidden !important;
        margin: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .account-desktop-sidebar {
        display: none !important;
    }

    .account-desktop-main {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .account-main-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 18px 28px !important;
        border-bottom: 1px solid #EAE6DF !important;
        background: #FFFFFF !important;
    }

    .mobile-only-btn {
        display: flex !important;
    }

    .account-v3-back-btn,
    .account-main-close-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: #F4F0E8 !important;
        border: none !important;
        color: #17231C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.15rem !important;
        cursor: pointer !important;
    }

    .account-main-title {
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: #17231C !important;
        margin: 0 !important;
    }

    .account-main-subtitle {
        font-size: 0.84rem !important;
        color: #64748B !important;
        display: block !important;
        margin-top: 2px !important;
    }

    .account-main-body {
        padding: 24px 28px !important;
        box-sizing: border-box !important;
        max-height: calc(90vh - 75px) !important;
        overflow-y: auto !important;
    }

    .account-v3-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        width: 100% !important;
    }

    .identity-strip {
        display: flex !important;
        align-items: center !important;
        gap: 18px !important;
        background: #FFFFFF !important;
        border: 1px solid #EAE6DF !important;
        border-radius: 20px !important;
        padding: 20px !important;
    }

    .account-identity-avatar {
        width: 64px !important;
        height: 64px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .avatar-camera-btn {
        position: absolute !important;
        bottom: -2px !important;
        right: -2px !important;
        width: 26px !important;
        height: 26px !important;
        border-radius: 50% !important;
        background: #4A7C59 !important;
        color: #FFFFFF !important;
        border: 2px solid #FFFFFF !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.8rem !important;
    }

    .identity-display-name {
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 1.18rem !important;
        font-weight: 700 !important;
        color: #17231C !important;
    }

    .identity-email {
        font-size: 0.86rem !important;
        color: #64748B !important;
    }

    .identity-territory {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 0.8rem !important;
        color: #4A7C59 !important;
        font-weight: 600 !important;
    }

    .account-group-box {
        background: #FFFFFF !important;
        border: 1px solid #EAE6DF !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .account-touch-row {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        background: #FFFFFF !important;
        padding: 16px 20px !important;
        min-height: 68px !important;
        cursor: pointer !important;
    }

    .account-touch-row .row-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        background: rgba(74, 124, 89, 0.1) !important;
        color: #4A7C59 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.25rem !important;
    }

    .account-touch-row .row-content {
        flex: 1 !important;
    }

    .account-touch-row .row-title {
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #17231C !important;
    }

    .account-touch-row .row-subtitle {
        font-size: 0.85rem !important;
        color: #64748B !important;
    }

    .account-touch-row .row-chevron {
        font-size: 1.1rem !important;
        color: #94A3B8 !important;
    }
}

/* 3. Desktop Viewport (>= 1024px) — Dedicated Account Center Shell with Sidebar */
@media (min-width: 1024px) {
    #userAccountModal.modal-overlay {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
        background: rgba(15, 23, 19, 0.55) !important;
        backdrop-filter: blur(8px) !important;
    }

    #userAccountModal .modal-card,
    #userAccountModal .modal-card-user-account {
        width: min(1180px, calc(100vw - 64px)) !important;
        height: min(780px, calc(100vh - 64px)) !important;
        max-width: 1180px !important;
        max-height: 780px !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 24px !important;
        background: #FDFCF9 !important;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18) !important;
        overflow: hidden !important;
        margin: auto !important;
        border: 1px solid rgba(255, 255, 255, 0.7) !important;
        padding: 0 !important;
    }

    .account-desktop-shell,
    .account-shell-container {
        width: 100% !important;
        height: 100% !important;
        display: grid !important;
        grid-template-columns: 270px minmax(0, 1fr) !important;
        background: #FDFCF9 !important;
        overflow: hidden !important;
    }

    /* Left Sidebar Navigation Pane */
    .account-desktop-sidebar {
        width: 270px !important;
        min-width: 270px !important;
        background: #FFFFFF !important;
        border-right: 1px solid #EAE6DF !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 28px 20px !important;
        box-sizing: border-box !important;
    }

    .sidebar-user-profile {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        margin-bottom: 28px !important;
        padding-bottom: 20px !important;
        border-bottom: 1px solid #F1ECE4 !important;
    }

    .sidebar-avatar-wrap {
        width: 54px !important;
        height: 54px !important;
        flex-shrink: 0 !important;
    }

    .sidebar-user-avatar {
        width: 54px !important;
        height: 54px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 2px solid #FFFFFF !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }

    .sidebar-user-info {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .sidebar-user-name {
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #17231C !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .sidebar-user-location {
        font-size: 0.8rem !important;
        color: #4A7C59 !important;
        font-weight: 600 !important;
        display: block !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .sidebar-nav-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        flex: 1 !important;
    }

    .sidebar-nav-btn {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 12px 16px !important;
        border-radius: 14px !important;
        background: transparent !important;
        border: none !important;
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: #475569 !important;
        cursor: pointer !important;
        transition: all 0.18s ease !important;
        text-align: left !important;
    }

    .sidebar-nav-btn i {
        font-size: 1.25rem !important;
        color: #64748B !important;
        transition: color 0.18s ease !important;
    }

    .sidebar-nav-btn:hover {
        background: #F4F0E8 !important;
        color: #17231C !important;
    }

    .sidebar-nav-btn:hover i {
        color: #17231C !important;
    }

    .sidebar-nav-btn.active {
        background: #EBF2ED !important;
        color: #4A7C59 !important;
        font-weight: 700 !important;
        box-shadow: inset 3px 0 0 #4A7C59 !important;
    }

    .sidebar-nav-btn.active i {
        color: #4A7C59 !important;
    }

    /* Right Main Content Pane */
    .account-desktop-main {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        background: #FDFCF9 !important;
        overflow: hidden !important;
    }

    .account-main-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 72px !important;
        padding: 0 36px !important;
        background: #FFFFFF !important;
        border-bottom: 1px solid #EAE6DF !important;
        flex-shrink: 0 !important;
    }

    .mobile-only-btn {
        display: none !important;
    }

    .account-header-titles {
        flex: 1 !important;
    }

    .account-main-title {
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 1.35rem !important;
        font-weight: 700 !important;
        color: #17231C !important;
        margin: 0 !important;
    }

    .account-main-subtitle {
        font-size: 0.86rem !important;
        color: #64748B !important;
        display: block !important;
        margin-top: 2px !important;
    }

    .account-main-close-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: #F4F0E8 !important;
        border: none !important;
        color: #17231C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.15rem !important;
        cursor: pointer !important;
        transition: background 0.18s ease !important;
    }

    .account-main-close-btn:hover {
        background: #E6E0D4 !important;
    }

    .account-main-body {
        flex: 1 !important;
        padding: 32px 36px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        background: #FDFCF9 !important;
    }

    /* 2-Column Responsive Inner Grid for Mon compte */
    .account-v3-grid {
        display: grid !important;
        grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.4fr) !important;
        gap: 28px !important;
        align-items: start !important;
        width: 100% !important;
    }

    .account-v3-col-left,
    .account-v3-col-right {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .account-desktop-section {
        margin-bottom: 0 !important;
        width: 100% !important;
    }

    .account-section-heading {
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        color: #64748B !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        margin: 0 0 12px 4px !important;
    }

    /* Identity Strip */
    .identity-strip {
        background: #FFFFFF !important;
        border: 1px solid #EAE6DF !important;
        border-radius: 20px !important;
        padding: 24px !important;
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .account-identity-avatar {
        width: 72px !important;
        height: 72px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 3px solid #FFFFFF !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }

    .avatar-camera-btn {
        position: absolute !important;
        bottom: -2px !important;
        right: -2px !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: #4A7C59 !important;
        color: #FFFFFF !important;
        border: 2px solid #FFFFFF !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.85rem !important;
        cursor: pointer !important;
        transition: background 0.15s ease !important;
    }

    .avatar-camera-btn:hover {
        background: #3B6447 !important;
    }

    .identity-strip-text {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .identity-display-name {
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: #17231C !important;
        display: block !important;
        line-height: 1.3 !important;
    }

    .identity-email {
        font-size: 0.88rem !important;
        color: #64748B !important;
        display: block !important;
        margin-top: 4px !important;
        word-break: break-all !important;
    }

    .identity-territory {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 0.82rem !important;
        color: #4A7C59 !important;
        font-weight: 600 !important;
        margin-top: 8px !important;
        background: rgba(74, 124, 89, 0.08) !important;
        padding: 4px 10px !important;
        border-radius: 12px !important;
    }

    /* Single Group Container for Profil Public & Verification */
    .account-group-box {
        background: #FFFFFF !important;
        border: 1px solid #EAE6DF !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
        width: 100% !important;
    }

    .account-divider {
        height: 1px !important;
        background: #F1ECE4 !important;
        margin: 0 20px !important;
    }

    .account-touch-row {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        background: #FFFFFF !important;
        border: none !important;
        padding: 18px 22px !important;
        min-height: 74px !important;
        cursor: pointer !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .account-touch-row:hover {
        background: #FDFBF7 !important;
    }

    .account-touch-row .row-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        border-radius: 14px !important;
        background: rgba(74, 124, 89, 0.1) !important;
        color: #4A7C59 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.35rem !important;
        flex-shrink: 0 !important;
    }

    .account-touch-row .row-content {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .account-touch-row .row-title {
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 1.02rem !important;
        font-weight: 700 !important;
        color: #17231C !important;
        display: block !important;
        line-height: 1.3 !important;
    }

    .account-touch-row .row-subtitle {
        font-size: 0.86rem !important;
        color: #64748B !important;
        display: block !important;
        margin-top: 3px !important;
        line-height: 1.3 !important;
    }

    .sidebar-footer {
        padding-top: 16px !important;
        border-top: 1px solid #F1ECE4 !important;
        margin-top: auto !important;
    }

    .sidebar-logout-btn {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        background: rgba(225, 29, 72, 0.06) !important;
        border: 1px solid rgba(225, 29, 72, 0.15) !important;
        color: #E11D48 !important;
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        transition: all 0.18s ease !important;
    }

    .sidebar-logout-btn:hover {
        background: rgba(225, 29, 72, 0.12) !important;
        border-color: rgba(225, 29, 72, 0.3) !important;
    }

    .account-desktop-sections {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        max-width: 760px !important;
    }
}

/* Activity Switch Tabs & Status Pills */
.activity-switch-tabs {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #EAE6DF !important;
    padding-bottom: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.activity-tab-chip {
    padding: 8px 16px !important;
    border-radius: 20px !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #475569 !important;
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.18s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.activity-tab-chip:hover {
    background: #F4F0E8 !important;
    color: #17231C !important;
}

.activity-tab-chip.active {
    background: #17231C !important;
    color: #FFFFFF !important;
    border-color: #17231C !important;
    font-weight: 700 !important;
}

.pill-badge.pill-blue {
    background: #E0F2FE !important;
    color: #0369A1 !important;
}

.pill-badge.pill-gray {
    background: #F1F5F9 !important;
    color: #475569 !important;
}

.pill-badge.pill-red {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
}

/* ==========================================================================
   FAVORITES V2 — BOOKMARK BUTTON TOUCH TARGET & HIT TEST (IOS & WEB)
   ========================================================================== */
.lyann-favorite-btn,
.btn-fav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.lyann-favorite-btn i,
.btn-fav-toggle i {
    pointer-events: none !important;
    font-size: 1.3rem;
}

.lyann-favorite-btn:active,
.btn-fav-toggle:active {
    transform: scale(0.92) !important;
}

/* ==========================================================================
   COMMENT ÇA MARCHE — RESPONSIVE MOBILE UX & TYPOGRAPHY POLISH (V2.1)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Mobile Hero Scale & Padding */
    .how-hero {
        padding-top: 100px !important;
        padding-bottom: 24px !important;
    }

    .how-hero-title {
        font-size: clamp(1.7rem, 6.2vw, 2.25rem) !important;
        line-height: 1.22 !important;
        margin-bottom: 12px !important;
        letter-spacing: -0.02em !important;
    }

    .how-hero .hero-subtitle {
        font-size: clamp(0.9rem, 3.6vw, 1.02rem) !important;
        line-height: 1.5 !important;
        margin-bottom: 18px !important;
        max-width: 100% !important;
        padding: 0 8px !important;
    }

    /* 2. Hero CTAs Action Hierarchy & Full Width Stack */
    .hero-cta-group {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        gap: 10px !important;
    }

    .hero-cta-group .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
    }

    /* 3. Hero Illustration Compact Height */
    .how-illustration-container {
        margin-top: 18px !important;
    }

    .how-illustration-img {
        max-height: 190px !important;
        width: auto !important;
        margin: 0 auto !important;
    }

    /* 4. Mobile Section Rhythm & Vertical Gaps */
    .philosophy-section {
        padding: 30px 0 !important;
    }

    .philosophy-section h2 {
        font-size: clamp(1.3rem, 4.8vw, 1.6rem) !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .philosophy-section p {
        font-size: 0.92rem !important;
        line-height: 1.55 !important;
    }

    .two-ways-section {
        padding: 32px 0 !important;
    }

    .two-ways-section .section-header {
        margin-bottom: 20px !important;
    }

    .two-ways-section h2 {
        font-size: clamp(1.35rem, 5vw, 1.65rem) !important;
        margin-bottom: 8px !important;
    }

    .two-ways-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .two-ways-card {
        padding: 20px 18px !important;
        border-radius: 16px !important;
    }

    .two-ways-card h3 {
        font-size: 1.18rem !important;
        margin-bottom: 8px !important;
    }

    .two-ways-card p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }

    .two-ways-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.4rem !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }

    /* 5. Mobile 6-Step Cards Natural Sizing */
    .steps-detail-section {
        padding: 36px 0 !important;
    }

    .steps-detail-section .section-header {
        margin-bottom: 24px !important;
    }

    .steps-detail-section h2 {
        font-size: clamp(1.35rem, 5vw, 1.65rem) !important;
    }

    .detailed-steps-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .detail-step-card {
        padding: 18px 16px 18px 18px !important;
        min-height: 0 !important;
        height: auto !important;
        border-radius: 16px !important;
    }

    .detail-step-card .step-number-badge {
        top: 14px !important;
        right: 14px !important;
        width: 26px !important;
        height: 26px !important;
        font-size: 0.8rem !important;
    }

    .detail-step-card .step-card-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.35rem !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
    }

    .detail-step-card h3 {
        font-size: 1.1rem !important;
        font-weight: 800 !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }

    .detail-step-card p {
        font-size: 0.88rem !important;
        line-height: 1.48 !important;
        margin-bottom: 0 !important;
    }

    /* 6. Payment Section Mobile & Bokantaj & Trust */
    .payment-guarantee-section {
        padding: 40px 0 !important;
    }

    .payment-guarantee-section h2 {
        font-size: clamp(1.3rem, 4.8vw, 1.6rem) !important;
        margin-bottom: 8px !important;
    }

    .payment-guarantee-section .section-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    .payment-guarantee-section .section-header {
        margin-bottom: 20px !important;
    }

    .bokantaj-feature-section {
        padding: 32px 0 !important;
    }

    .bokantaj-feature-section > .container > div {
        padding: 24px 18px !important;
        border-radius: 18px !important;
    }

    .bokantaj-feature-section h2 {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }

    .bokantaj-feature-section p {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
        margin-bottom: 18px !important;
    }

    .trust-charter-section {
        padding: 36px 0 !important;
    }

    .trust-charter-section h2 {
        font-size: clamp(1.35rem, 5vw, 1.65rem) !important;
    }

    .charter-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .charter-card {
        padding: 20px 18px !important;
        border-radius: 16px !important;
    }

    .charter-icon {
        font-size: 1.8rem !important;
        margin-bottom: 10px !important;
    }

    .charter-card h4 {
        font-size: 1.05rem !important;
        margin-bottom: 6px !important;
    }

    .charter-card p {
        font-size: 0.88rem !important;
        line-height: 1.48 !important;
    }

    .profile-evolution-section {
        padding: 30px 0 !important;
    }

    .profile-evolution-section h2 {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }

    .profile-evolution-section p {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
    }

    /* 7. Final CTA & Native Fixed Bottom Navigation Clearance */
    .cta-section {
        padding: 36px 0 calc(96px + env(safe-area-inset-bottom, 24px)) !important;
    }

    .cta-section h2 {
        font-size: clamp(1.4rem, 5.2vw, 1.7rem) !important;
    }

    .cta-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .cta-card {
        padding: 22px 18px !important;
        border-radius: 16px !important;
    }
}




/* LYANN CHAT LAYERING CONTRACT v2 */
.chat-main-area.chat-child-surface-active #chatMissionContextBar,
.chat-main-area.chat-child-surface-active #chatMissionContext,
.chat-main-area.chat-child-surface-active #chatContextualActionsBar,
.chat-main-area.chat-child-surface-active #chatViewMissionBtn {
    display: none !important;
}

.chat-main-area.chat-child-surface-active .chat-overlay-pane {
    top: var(--lyann-chat-header-offset, 54px) !important;
    z-index: 250 !important;
}

/* Window order is assigned in script.js: the surface opened last stays in front. */

/* LYANN CHAT CHILD SURFACE ROUTING CONTRACT v1 */
body:has(#chatActionChoicesOverlay[style*="display: flex"]) #chatMissionContextBar,
body:has(#chatDirectPriceForm[style*="display: flex"]) #chatMissionContextBar,
body:has(#chatMilestoneDevisForm[style*="display: flex"]) #chatMissionContextBar,
body:has(#chatCheckoutOverlay[style*="display: flex"]) #chatMissionContextBar,
body:has(#chatTrackingOverlay[style*="display: flex"]) #chatMissionContextBar,
body:has(#chatSubmitProofOverlay[style*="display: flex"]) #chatMissionContextBar,
body:has(#chatProposeDateForm[style*="display: flex"]) #chatMissionContextBar,
body:has(#chatLeaveReviewForm[style*="display: flex"]) #chatMissionContextBar,
body:has(#chatActionChoicesOverlay[style*="display:flex"]) #chatMissionContextBar,
body:has(#chatDirectPriceForm[style*="display:flex"]) #chatMissionContextBar,
body:has(#chatMilestoneDevisForm[style*="display:flex"]) #chatMissionContextBar,
body:has(#chatCheckoutOverlay[style*="display:flex"]) #chatMissionContextBar,
body:has(#chatTrackingOverlay[style*="display:flex"]) #chatMissionContextBar,
body:has(#chatSubmitProofOverlay[style*="display:flex"]) #chatMissionContextBar,
body:has(#chatProposeDateForm[style*="display:flex"]) #chatMissionContextBar,
body:has(#chatLeaveReviewForm[style*="display:flex"]) #chatMissionContextBar {
    display: none !important;
}

body:has(#chatTrackingOverlay[style*="display: flex"]) #chatTrackingOverlay,
body:has(#chatTrackingOverlay[style*="display:flex"]) #chatTrackingOverlay {
    z-index: 600 !important;
}
#chatModal:has(#chatTrackingOverlay[style*="display: flex"]) .chat-missions-together,
#chatModal:has(#chatTrackingOverlay[style*="display:flex"]) .chat-missions-together,
#chatModal:has(#chatTrackingOverlay.is-open) .chat-missions-together,
#chatModal:has(#chatMissionPickerOverlay[style*="display: flex"]) .chat-missions-together,
#chatModal:has(#chatMissionPickerOverlay[style*="display:flex"]) .chat-missions-together,
#chatModal:has(#chatMissionPickerOverlay.is-open) .chat-missions-together {
    display: none !important;
}

/* LYANN CANONICAL MESSAGING SHELL v4 */
/* Parent conversation content can never bleed through a child workflow. */
#chatModal .chat-main-area.lyann-child-surface-open #chatMissionContextBar,
#chatModal .chat-main-area.lyann-child-surface-open #chatMissionContext,
#chatModal .chat-main-area.lyann-child-surface-open #chatContextualActionsBar,
#chatModal .chat-main-area.lyann-child-surface-open #chatViewMissionBtn,
#chatModal .chat-main-area.lyann-child-surface-open #chatMessagesContainer,
#chatModal .chat-main-area.lyann-child-surface-open #chatReplyBar,
#chatModal .chat-main-area.lyann-child-surface-open .chat-input-area,
#chatModal .chat-main-area.lyann-child-surface-open .chat-pending-actions-banner {
  display: none !important;
}

#chatModal .chat-main-area.lyann-child-surface-open .chat-overlay-pane { z-index: 1000 !important; }
#chatModal .chat-main-area.lyann-child-surface-open .chat-overlay-pane:not([style*="display: none"]):not([style*="display:none"]) { display: flex !important; }

/* Historical renderer can hydrate data, but can never flash as a visible screen. */
body.lyann-messaging-transition #chatModal { visibility: hidden !important; pointer-events: none !important; }

@media (max-width: 768px) {
  /* Messaging is a top-level app screen, never a modal sitting above another screen. */
  body.lyann-messaging-open.chat-conversation-open .mobile-bottom-nav,
  body.lyann-messaging-open .speed-dial-wrapper,
  body.lyann-messaging-open #backToTopBtn {
    display: none !important;
  }

  body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) .mobile-bottom-nav {
    display: flex !important;
    z-index: 21000 !important;
  }

  body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal.modal-overlay {
    bottom: calc(var(--m-bottom-nav-height, 72px) + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
  }

  body.lyann-messaging-open #chatModal.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    z-index: 9000 !important;
  }

  /* Native iOS keeps the same opaque surface. The safe area is padding inside
     the header, so the page behind never shows through the status bar. */
  body.is-native-app.lyann-messaging-open #chatModal.modal-overlay {
    top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
  }

  body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal.modal-overlay,
  body.is-native-app.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal.modal-overlay {
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: calc(var(--m-bottom-nav-height, 72px) + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    max-height: none !important;
  }

  html body.keyboard-open.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal.modal-overlay.active {
    bottom: 0 !important;
    height: auto !important;
  }

  /* The list keeps the same navbar as the other tabs: logo, menu, notifications. */
  body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) .navbar,
  body.is-native-app.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) .navbar,
  body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) .navbar.scrolled {
    z-index: 20500 !important;
    background: #F1F8F3 !important;
    background-color: #F1F8F3 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom-color: transparent !important;
    pointer-events: auto !important;
  }

  body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal.modal-overlay,
  body.is-native-app.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal.modal-overlay {
    top: var(--lyann-inbox-nav-offset, calc(76px + env(safe-area-inset-top, 0px))) !important;
    background: #F1F8F3 !important;
    background-color: #F1F8F3 !important;
  }

  body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal .lyann-inbox-brand {
    display: none !important;
  }

  body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal .chat-sidebar-header.lyann-inbox-header {
    padding: 2px 20px 2px !important;
  }

  body.lyann-messaging-open #chatModal > .modal-card,
  body.lyann-messaging-open #chatModal .modal-card-chat,
  body.lyann-messaging-open #chatModal .chat-modal-layout {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
  }

  body.lyann-messaging-open #chatModal .chat-sidebar-header,
  body.lyann-messaging-open #chatModal .chat-header-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding-top: calc(4px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 4px !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.lyann-messaging-open #chatModal .chat-header-avatar {
    width: 28px;
    height: 28px;
  }
  body.lyann-messaging-open #chatModal .chat-header-subtitle {
    display: none;
  }
  body.lyann-messaging-open #chatModal {
    --lyann-chat-header-offset: calc(44px + env(safe-area-inset-top, 0px));
  }
  body.lyann-messaging-open #chatTrackingOverlay > div:first-child {
    padding: 8px 12px !important;
  }
  body.lyann-messaging-open #chatTrackingOverlay #btnExitTracking {
    min-height: 44px;
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
  }
  body.lyann-messaging-open.chat-conversation-open #chatModal .chat-main-area.lyann-child-surface-open .chat-missions-together {
    display: none !important;
  }

  
  

  /* Keep the composer above the iPhone home indicator without exposing the
     underlying page behind the messaging route. */
  body.is-native-app.lyann-messaging-open #chatModal .chat-input-area,
  body.is-native-app.lyann-messaging-open #chatModal #chatReplyBar {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }

  #chatModal .chat-modal-layout:not(.mobile-conversation-active) .chat-contacts-sidebar { display: flex !important; width: 100% !important; }
  #chatModal .chat-modal-layout:not(.mobile-conversation-active) .chat-main-area { display: none !important; }
  #chatModal .chat-modal-layout.mobile-conversation-active .chat-contacts-sidebar { display: none !important; }
  #chatModal .chat-modal-layout.mobile-conversation-active .chat-main-area { display: flex !important; width: 100% !important; min-width: 0 !important; }
}

/* Readable header, one close control, empty conversation chrome */
#loginModal .input-with-icon .modal-input {
    padding-left: 52px !important;
}

#chatModal .desktop-only-close-btn {
    display: none !important;
}

@media (min-width: 769px) {
    #chatModal .chat-header-bar .chat-close-modal-btn {
        display: none !important;
    }

    #chatModal .chat-modal-layout:not(.has-active-conversation) #chatViewMissionBtn,
    #chatModal .chat-modal-layout:not(.has-active-conversation) #chatReplyBar,
    #chatModal .chat-modal-layout:not(.has-active-conversation) .chat-input-area,
    #chatModal .chat-modal-layout:not(.has-active-conversation) .chat-fav-header-btn,
    #chatModal .chat-modal-layout:not(.has-active-conversation) #chatMoreOptionsBtn,
    #chatModal .chat-modal-layout:not(.has-active-conversation) .chat-header-user,
    #chatModal .chat-modal-layout:not(.has-active-conversation) .chat-messages-scroll,
    #chatModal .chat-modal-layout:not(.has-active-conversation) #chatMissionContextBar,
    #chatModal .chat-modal-layout:not(.has-active-conversation) #chatContextualActionsBar {
        display: none !important;
    }

    #chatModal .chat-modal-layout:not(.has-active-conversation) .chat-main-area {
        justify-content: center;
        background: #F7F8F6;
    }

    #chatModal .chat-modal-layout:not(.has-active-conversation) .chat-main-area::before {
        content: "Choisissez une conversation";
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        color: #5b6b61;
        font-size: 0.95rem;
        font-weight: 600;
        padding: 40px 24px;
        text-align: center;
    }
}

/* The first profile step no longer asks for a short headline. */
div:has(> #cpHeadline) { display: none !important; }

.nav-search-icon-link { display: none !important; }
.explorer-profile-card { cursor: pointer; }

@media (min-width: 992px) {
    .modal-overlay.active .modal-card,
    .modal-overlay.active .modal-card-large,
    .modal-overlay.active .modal-card-xl {
        max-width: min(960px, calc(100vw - 96px));
    }
    .modal-overlay .modal-close-btn {
        top: 16px !important;
        right: 16px !important;
        background: #fff !important;
        color: #1E293B !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
        z-index: 40 !important;
    }
    #chatModal .desktop-only-close-btn {
        display: none !important;
    }
    #chatModal .chat-header-bar .chat-close-modal-btn {
        display: inline-flex !important;
    }
}

/* Context card stays inside the conversation column. align-items:center
   on a column flex was centering a nowrap title wider than the pane. */
.chat-mission-context-card {
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.chat-context-card-info,
.chat-context-card-header-row,
.chat-context-card-title,
.chat-context-card-tag {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.chat-context-card-header-row {
    gap: 8px !important;
}
.chat-context-card-header-row .chat-context-card-tag {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.chat-context-view-link {
    flex-shrink: 0 !important;
}
.chat-context-card-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.input-with-icon > input,
.input-with-icon > .modal-input,
.input-with-icon > select {
    padding-left: 52px !important;
}

.bokantaj-photos {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
}
.bokantaj-photo {
    padding: 0;
    border: 0;
    background: #e8eeea;
    cursor: pointer;
    overflow: hidden;
    min-height: 0;
}
.bokantaj-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bokantaj-photos-1 { grid-template-columns: 1fr; }
.bokantaj-photos-1 .bokantaj-photo { height: 280px; }
.bokantaj-photos-2 { grid-template-columns: 1fr 1fr; }
.bokantaj-photos-2 .bokantaj-photo { height: 220px; }
.bokantaj-photos-3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 140px 140px;
}
.bokantaj-photos-3 .bokantaj-photo:first-child {
    grid-row: 1 / span 2;
    height: 100%;
}
.bokantaj-photos-4 { grid-template-columns: 1fr 1fr; }
.bokantaj-photos-4 .bokantaj-photo { height: 140px; }

.bokantaj-carousel {
    position: fixed;
    inset: 0;
    z-index: 1000002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 18, 0.92);
    padding: 48px 64px;
}
.bokantaj-carousel[hidden] { display: none; }
.bokantaj-carousel-img {
    max-width: min(960px, 100%);
    max-height: calc(100vh - 96px);
    object-fit: contain;
    border-radius: 12px;
}
.bokantaj-carousel-close,
.bokantaj-carousel-nav {
    position: absolute;
    border: 0;
    background: #fff;
    color: #17231C;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.bokantaj-carousel-close { top: 16px; right: 16px; }
.bokantaj-carousel-prev { left: 12px; }
.bokantaj-carousel-next { right: 12px; }

.lyann-post-menu { position: relative; flex-shrink: 0; }
.lyann-post-menu summary {
    list-style: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #475569;
    font-size: 1.3rem;
}
.lyann-post-menu summary::-webkit-details-marker { display: none; }
.lyann-post-menu-panel {
    position: absolute;
    right: 0;
    top: 44px;
    z-index: 30;
    min-width: 160px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    padding: 6px;
}
.lyann-post-menu-panel button {
    background: none;
    border: 0;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 700;
    color: #17231C;
    cursor: pointer;
}
.lyann-post-menu-panel button:hover { background: #F4F7F5; }
.lyann-post-menu-panel .btn-delete-own-lyann,
.lyann-post-menu-panel .btn-delete-own-post { color: #9B3A32; }

.request-lifecycle-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.request-lifecycle-actions button {
    border: 1px solid #D5DDD8;
    background: #fff;
    color: #17231C;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

/* Message count sits on the messages control, on web and in the tab bar. */
.nav-msg-btn,
#btnHeaderChat,
#tab-messages {
    position: relative;
    overflow: visible;
}
.msg-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 4;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #C95140;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-sizing: border-box;
}
.msg-badge-count.is-on {
    display: inline-flex !important;
}
#tab-messages .msg-badge-count {
    top: 2px;
    right: 12%;
}

/* Message bubbles stay content-sized. Re-rendering must not stretch or blink them. */
#chatMessagesContainer,
.chat-messages-scroll {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}
.chat-main-area { position: relative; }
.chat-bottom-refresh {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    z-index: 4;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.chat-bottom-refresh-pill {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(74, 124, 89, 0.28);
    box-shadow: 0 2px 8px rgba(36, 56, 43, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}
.chat-bottom-refresh-spin {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(74, 124, 89, 0.25);
    border-top-color: #4A7C59;
    box-sizing: border-box;
}
.chat-bottom-refresh.is-refreshing .chat-bottom-refresh-spin {
    animation: chat-bottom-refresh-spin 0.7s linear infinite;
}
@keyframes chat-bottom-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .chat-bottom-refresh.is-refreshing .chat-bottom-refresh-spin { animation: none; }
}
#chatMessagesContainer > *,
.chat-messages-scroll > * {
    flex: 0 0 auto;
}
.chat-msg-bubble-wrap {
    height: auto;
    flex: 0 0 auto;
}
.chat-msg-bubble {
    height: auto;
    min-height: 0;
    animation: none;
}

.explorer-type-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 8px;
}
.explorer-type-pill.is-profile { background: #E7F0EA; color: #2D5A39; }
.explorer-type-pill.is-annonce { background: #F8EFD6; color: #8A5A12; }
.explorer-mixed-title {
    margin: 18px 0 8px;
    font-size: 0.95rem;
    color: #1F3827;
}
.explorer-btn-lyanner {
    border-color: #C9A24D !important;
    color: #6B4E16 !important;
    background: #FFF8E8 !important;
}

/* Native: keep global artisan atmosphere (do not kill body::before). */
body.is-native-app::before {
    display: block !important;
    opacity: 0.08;
    z-index: -1;
    background-image: url('hero-image.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 40%;
}

body.is-native-app .hamburger-drawer-overlay {
    background: #FDFCF9 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.is-native-app .hamburger-drawer-card {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-top: env(safe-area-inset-top, 0px);
}

.testimonials-section {
    overflow: hidden;
    z-index: 1;
}
.feed-preview-section {
    position: relative;
    z-index: 2;
    background: #FFFFFF !important;
    margin-top: 0 !important;
    clear: both;
}
.feed-preview-section .flash-feed-list,
.feed-preview-section .flash-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    position: relative;
}
.feed-preview-section .flash-card {
    background: #FFFFFF !important;
}
@media (max-width: 768px) {
    .testimonial-slide {
        padding: 22px 18px;
    }
    .testimonial-slide blockquote {
        font-size: 1rem;
        line-height: 1.65;
    }
}
body.is-native-app .cta-section {
    padding: 28px 0 calc(88px + env(safe-area-inset-bottom, 16px)) !important;
    margin-bottom: 0 !important;
}
body.is-native-app .footer { margin-top: 0 !important; }

/* Native guest landing. The website never receives html.is-native-shell. */
#nativeGuestHome[hidden] { display: none !important; }
html.is-native-shell .hero,
html.is-native-shell #about,
html.is-native-shell #search-services,
html.is-native-shell #talents,
html.is-native-shell #testimonials,
html.is-native-shell .feed-preview-section,
html.is-native-shell #join,
html.is-native-shell .footer,
html.is-native-shell .lyann-footer {
    display: none !important;
}
html.is-native-shell body:not(.user-is-logged-in) {
    overflow: hidden;
    height: 100dvh;
    background: #F7F5F0;
}
html.is-native-shell body:not(.user-is-logged-in)::before {
    /* Guest home paints its own hero layer on #nativeGuestHome */
    display: none;
}
html.is-native-shell body:not(.user-is-logged-in) .navbar .nav-container,
html.is-native-shell body:not(.user-is-logged-in) .native-header-row--guest {
    justify-content: center !important;
}
html.is-native-shell body:not(.user-is-logged-in) .navbar .hamburger-menu-btn,
html.is-native-shell body:not(.user-is-logged-in) .navbar .mobile-header-actions,
html.is-native-shell body:not(.user-is-logged-in) .navbar .desktop-nav-menu {
    display: none !important;
}
html.is-native-shell body:not(.user-is-logged-in) #nativeGuestHome:not([hidden]) {
    display: flex;
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(76px + env(safe-area-inset-top, 0px));
    bottom: 0;
    flex-direction: column;
    background: transparent;
}
@keyframes lyannIosBgDrift {
    from { background-position: center 42%; }
    to { background-position: center 58%; }
}
html.is-native-shell body:not(.user-is-logged-in) #nativeGuestHome:not([hidden])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: transparent;
    background-image: url('hero-image.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: 0.25;
    animation: lyannIosBgDrift 36s ease-in-out infinite alternate;
}
html.is-native-shell body:not(.user-is-logged-in) .navbar,
html.is-native-shell body:not(.user-is-logged-in) .navbar.scrolled {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
@media (prefers-reduced-motion: reduce) {
    html.is-native-shell body:not(.user-is-logged-in) #nativeGuestHome:not([hidden])::before {
        animation: none;
        background-position: center center;
    }
}
.native-guest-pager {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.native-guest-pager::-webkit-scrollbar { display: none; }
.native-guest-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
.native-guest-slide-inner {
    padding: 8px 16px 16px;
    min-height: 100%;
    box-sizing: border-box;
}
.native-guest-slide h1,
.native-guest-slide h2 {
    font-family: 'Outfit', sans-serif;
    color: #1F3827;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.native-guest-hero .native-guest-slide-inner {
    text-align: center;
}
.native-guest-hero h1 {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 4px 0 12px;
    text-align: center;
}
.native-guest-hero p {
    font-size: 1.05rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
    margin: 0 auto 16px;
    max-width: 22rem;
}
.native-guest-lead,
.native-guest-world p {
    color: #4C5C52;
    line-height: 1.5;
    margin: 0 0 14px;
}
.native-guest-hero .hero-story,
.native-guest-hero video {
    width: 100%;
    border-radius: 20px;
}
.native-guest-hero video::-webkit-media-controls,
.native-guest-hero video::-webkit-media-controls-start-playback-button,
.native-guest-hero video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none;
    opacity: 0;
    pointer-events: none;
}
/* Keep still hidden unless prefers-reduced-motion. Do not force display:block. */
.native-guest-hero .hero-story-still {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    .native-guest-hero .hero-story-video {
        display: none;
    }
    .native-guest-hero .hero-story-still {
        display: block;
    }
}
.native-guest-hero .hero-story--square {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.native-guest-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.native-guest-steps li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.native-guest-steps li > span {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E7F0EA;
    color: #2D5A39;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.native-guest-steps strong {
    display: block;
    color: #1F3827;
    margin-bottom: 2px;
}
.native-guest-steps p {
    margin: 0;
    color: #4C5C52;
    line-height: 1.45;
}
.native-guest-how .native-guest-slide-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 4px 16px 8px;
}
.native-guest-how h2 {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 4px 0 12px;
    text-align: center;
}
.native-guest-how .native-guest-lead {
    font-size: 1.05rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
    margin: 0 auto 12px;
    max-width: 22rem;
}
.native-guest-how .native-guest-steps {
    flex: 1;
    min-height: 0;
    gap: 8px;
}
.native-guest-how .native-guest-steps li {
    flex: 1 1 0;
    min-height: 0;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(74, 124, 89, 0.16);
    border-radius: 16px;
    text-align: left;
}
.native-guest-how .native-guest-steps li > .native-guest-step-emoji,
.native-guest-choice > .native-guest-step-emoji {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #E4F0E7;
    color: #4A7C59;
    font-size: 1.35rem;
    font-weight: 500;
}
.native-guest-how .native-guest-steps strong {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.native-guest-how .native-guest-steps p {
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.native-guest-world {
    background: #FFFFFF;
    border: 1px solid rgba(74, 124, 89, 0.18);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 0;
}
.native-guest-world-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: #1F3827;
    margin-bottom: 6px;
}
.native-guest-world-title i { color: #4A7C59; }
.native-guest-world-boka .native-guest-world-title i { color: #C9842A; }
.native-guest-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FDFCF9;
    border-radius: 14px;
    padding: 12px 14px;
    color: #6B7A70;
    margin-bottom: 10px;
}
.native-guest-tags { display: flex; gap: 8px; }
.native-guest-tags span,
.native-guest-skills span {
    background: #F8EFD6;
    color: #6B4E16;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.82rem;
    font-weight: 700;
}
.native-guest-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.native-guest-skills span {
    background: #FFFFFF;
    color: #1F3827;
    border: 1px solid rgba(74, 124, 89, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.native-guest-skills i { color: #4A7C59; }
.native-guest-more,
.native-guest-login {
    background: none;
    border: 0;
    color: #2D5A39;
    font-weight: 700;
    padding: 10px 0 0;
    font-family: inherit;
    font-size: 0.95rem;
}
.native-guest-trust-photo {
    width: 100%;
    border-radius: 20px;
    display: block;
    margin: 8px 0 14px;
    max-height: 220px;
    object-fit: cover;
}
.native-guest-trust-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.native-guest-trust-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1F3827;
    font-weight: 600;
}
.native-guest-trust-list i { color: #4A7C59; }
#nativeGuestStoriesSlot .testimonials-section {
    border-radius: 20px;
    margin: 0;
    padding: 0;
    background: transparent;
}
#nativeGuestStoriesSlot .testimonials-section .container {
    padding: 0;
    max-width: none;
}
#nativeGuestStoriesSlot .section-header {
    margin-bottom: 12px;
}
.native-guest-progress {
    position: relative;
    z-index: 1;
    flex: none;
}
.native-guest-swipe {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: calc(100% + 2px);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    pointer-events: none;
    color: #4A7C59;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    opacity: var(--swipe-o, 0);
}
.native-guest-swipe[hidden] { display: none !important; }
.native-guest-swipe-finger {
    position: relative;
    width: 26px;
    height: 26px;
    flex: none;
    transform: translateX(var(--swipe-x, 14px)) rotate(-16deg);
}
.native-guest-swipe-finger svg { display: block; }
.native-guest-swipe-trail {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 16px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(74, 124, 89, 0), rgba(74, 124, 89, 0.45));
    transform: translateY(-50%);
}
.native-guest-swipe-label { text-align: left; }
.native-guest-dots {
    position: relative;
    z-index: 1;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 4px;
}
.native-guest-dots.is-last {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.native-guest-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(31, 56, 39, 0.38);
    cursor: pointer;
    transition: width 200ms ease, background-color 200ms ease;
}
.native-guest-dot.is-active {
    background: #4A7C59;
    width: 22px;
    border-radius: 999px;
}
.native-guest-demo-slide .native-guest-slide-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding-bottom: 8px;
}
.native-guest-demo-slide h2 {
    margin: 0 0 4px;
    font-size: 1.35rem;
    text-align: left;
}
.native-guest-demo-slide .native-guest-lead {
    margin: 0 0 8px;
    font-size: 0.92rem;
}
.native-guest-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #FFFDF8;
    border: 1px solid rgba(74, 124, 89, 0.22);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(36, 51, 41, 0.12), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.native-guest-stage-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(180deg, #F6F1E6 0%, #EEF4EF 100%);
}
.native-guest-here {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin: 0;
    padding: 5px 10px;
    border-radius: 999px;
    background: #fff;
    color: #2D5A39;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(36, 51, 41, 0.06);
}
.native-guest-here i { color: #4A7C59; font-size: 0.95rem; }
.native-guest-post,
.native-guest-annonce,
.native-guest-deal {
    background: #fff;
    border: 1.5px solid #E5DFD5;
    border-radius: 20px;
    padding: 10px 12px;
    box-shadow: 0 4px 14px rgba(36, 51, 41, 0.05);
}
.native-guest-post header,
.native-guest-person {
    display: flex;
    align-items: center;
    gap: 10px;
}
.native-guest-post header img,
.native-guest-person img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: none;
    object-fit: cover;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(74, 124, 89, 0.28);
}
.native-guest-post header div { min-width: 0; }
.native-guest-post strong,
.native-guest-person strong,
.native-guest-annonce h3 {
    font-size: 0.92rem;
    line-height: 1.25;
    color: #17231C;
}
.native-guest-post strong i {
    color: #4A7C59;
    font-size: 0.78rem;
}
.native-guest-post header span,
.native-guest-annonce p {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 500;
    color: #64748B;
}
.native-guest-post em {
    display: inline-block;
    margin-top: 8px;
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #475569;
    background: #F1F5F9;
    border-radius: 12px;
    padding: 3px 8px;
}
.native-guest-post p,
.native-guest-person p {
    margin: 6px 0 0;
    font-size: 0.86rem;
    line-height: 1.4;
    color: #334155;
}
.native-guest-photo {
    width: 100%;
    height: 92px;
    margin-top: 8px;
    border-radius: 14px;
    object-fit: cover;
    background: #F7F5F0;
}
.native-guest-social {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    color: #64748B;
    font-size: 0.72rem;
    font-weight: 700;
}
.native-guest-social span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.native-guest-social .ph-heart { color: #E76F51; }
.native-guest-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    background: #fff;
    color: #6b7c72;
    font-size: 0.88rem;
    border: 1.5px solid #E5DFD5;
    box-shadow: 0 2px 8px rgba(36, 51, 41, 0.04);
}
.native-guest-person {
    padding: 8px 10px;
    border: 1.5px solid #D3E0D6;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(36, 51, 41, 0.05);
}
.native-guest-person div { min-width: 0; flex: 1; }
.native-guest-person p { margin: 0; }
.native-guest-chip,
.native-guest-publish,
.native-guest-deal span {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid #4A7C59;
    color: #2D5A39;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 800;
}
.native-guest-publish {
    align-self: stretch;
    min-height: 40px;
    border-radius: 12px;
    background: #4A7C59;
    color: #fff;
}
.native-guest-annonce span {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(229, 179, 69, 0.18);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #8A6A22;
}
.native-guest-annonce h3 { margin: 0; }
.native-guest-annonce b {
    display: block;
    margin-top: 6px;
    color: #2D5A39;
    font-size: 0.95rem;
}
.native-guest-thread { display: flex; flex-direction: column; gap: 6px; }
.native-guest-thread > p {
    margin: 0;
    max-width: 88%;
    padding: 8px 10px;
    border-radius: 16px;
    font-size: 0.82rem;
    line-height: 1.35;
}
.native-guest-thread .is-sent {
    align-self: flex-end;
    background: #4A7C59;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.native-guest-thread .is-received {
    align-self: flex-start;
    background: #fff;
    color: #243329;
    border: 1px solid #e3e9e5;
    border-bottom-left-radius: 4px;
}
.native-guest-deal header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}
.native-guest-deal strong { color: #1F3827; font-size: 0.88rem; }
.native-guest-deal b { color: #1F3827; }
.native-guest-deal span { margin-top: 6px; }
.native-guest-step-line {
    align-self: flex-start !important;
    background: #F7F5F0 !important;
    color: #2D5A39 !important;
    border: 0 !important;
    font-weight: 700;
}
.native-guest-step-line.is-done { background: #E7F0EA !important; }
.native-guest-tabbar {
    flex: none;
    display: flex;
    align-items: stretch;
    height: 62px;
    padding: 6px 4px;
    gap: 2px;
    border-top: 1px solid rgba(36, 51, 41, 0.08);
    background: #fff;
    box-shadow: 0 -8px 18px rgba(36, 51, 41, 0.05);
}
.native-guest-tab {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: #8A978E;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.1;
    border-radius: 14px;
}
.native-guest-tab i { font-size: 1.2rem; }
.native-guest-tab.is-active {
    color: #fff;
    background: #4A7C59;
    box-shadow: 0 6px 14px rgba(74, 124, 89, 0.34);
}
.native-guest-tab.is-active i { font-size: 1.28rem; }
.native-guest-signoff {
    margin: 8px 0 0;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7c72;
}
@media (max-height: 740px) {
    .native-guest-demo-slide h2 { font-size: 1.18rem; }
    .native-guest-demo-slide .native-guest-lead { font-size: 0.84rem; }
    .native-guest-photo { height: 72px; }
    .native-guest-tabbar { height: 56px; padding-top: 4px; padding-bottom: 4px; }
    .native-guest-social { font-size: 0.66rem; gap: 8px; }
    .native-guest-login-slide h2 { font-size: 1.55rem; margin-bottom: 4px; }
    .native-guest-login-slide .native-guest-lead { font-size: 0.88rem; margin-bottom: 6px; }
    .native-guest-signoff { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .native-guest-dot { transition: none; }
    .native-guest-swipe { display: none !important; }
}
@media (max-width: 340px) {
    .native-guest-swipe { font-size: 0.7rem; gap: 6px; margin: 0 12px; }
}
.native-guest-welcome h2 {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 2px 0 12px;
    text-align: center;
}
.native-guest-space-tag {
    display: inline-block;
    margin-bottom: 2px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4A7C59;
}
.native-guest-space-tag.is-boka { color: #B9831C; }
@media (max-height: 760px) {
    .native-guest-space-tag { display: none; }
}
.native-guest-how .native-guest-steps li > .native-guest-step-emoji.is-boka,
.native-guest-choice > .native-guest-step-emoji.is-boka {
    background: #F6EED6;
    color: #C69222;
}
.native-guest-welcome {
    flex: none;
    margin: 0;
    padding: 14px 14px 12px;
    text-align: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(74, 124, 89, 0.14);
    border-radius: 18px;
}
@media (max-height: 760px) {
    .native-guest-login-slide .native-guest-auth { gap: 6px; }
    .native-guest-welcome { padding: 10px 12px 8px; }
    #nativeGuestLoginForm { gap: 4px; }
    #nativeGuestLoginForm input { min-height: 40px; }
}
.native-guest-auth {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.native-guest-auth .btn {
    width: 100%;
    justify-content: center;
}
.native-guest-login-form,
#nativeGuestLoginForm {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#nativeGuestLoginForm label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}
#nativeGuestLoginForm input {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(74, 124, 89, 0.22);
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    background: #FFFFFF;
    color: var(--text);
}
.native-guest-auth-foot {
    margin: 4px 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.native-guest-auth-foot button {
    border: 0;
    background: none;
    color: #4A7C59;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.native-guest-cta.is-hidden,
.native-guest-dots.is-hidden { display: none; }
.native-guest-cta {
    position: relative;
    z-index: 1;
    flex: none;
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: transparent;
    border-top: 0;
}
.native-guest-cta .btn {
    flex: 1;
    min-height: 48px;
    justify-content: center;
}
.native-guest-login {
    display: block;
    width: 100%;
    text-align: center;
    color: #4C5C52;
    font-weight: 600;
    font-size: 0.9rem;
}
#obJoinChooser .ob-join-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#obJoinChooser .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
}

.chat-timeline-card {
    max-width: 440px;
    margin: 12px 0;
    padding: 14px 16px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.chat-timeline-title {
    font-weight: 800;
    color: #1d2a44;
}
.chat-timeline-meta,
.chat-timeline-time,
.chat-timeline-state {
    margin-top: 6px;
    color: #4c5c52;
    font-size: 0.9rem;
}
.chat-timeline-amount {
    margin-top: 8px;
    font-weight: 800;
    color: #1d2a44;
}
.chat-timeline-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.chat-timeline-actions .btn {
    flex: 1;
    justify-content: center;
}
.chat-mission-card {
    max-width: min(420px, 100%);
    width: 100%;
    box-sizing: border-box;
    margin: 12px 0;
    padding: 16px;
    border: 1.5px solid #e3e9e5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(36, 56, 43, 0.06);
}
.chat-action-panel.is-neutral {
    background: #f7f9f7;
    border-style: dashed;
    box-shadow: none;
}
.chat-mission-kicker {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b7c72;
    line-height: 1.3;
}
.chat-mission-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}
.chat-mission-head h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    color: #1d2a44;
}
.chat-mission-head strong {
    flex: none;
    color: #1d2a44;
}
.chat-mission-status {
    margin: 8px 0 0;
    font-weight: 700;
    color: #35583f;
}
.chat-mission-actor {
    margin: 4px 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #C69222;
}
.chat-mission-steps {
    display: flex;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.chat-mission-steps li {
    flex: 1;
    min-height: 28px;
    padding-top: 6px;
    border-top: 3px solid #e4e0d8;
    color: #7b8a82;
    font-size: 0.72rem;
    line-height: 1.2;
}
.chat-mission-steps li[data-state="done"] {
    border-top-color: #4A7C59;
    color: #35583f;
}
.chat-mission-steps li[data-state="current"] {
    border-top-color: #C9A24A;
    color: #1E2822;
    font-weight: 700;
}
.chat-mission-context {
    margin: 12px 0 0;
    color: #42504a;
    font-size: 0.92rem;
    line-height: 1.4;
}
.chat-mission-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.chat-mission-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
}
.chat-mission-actions .btn-outline {
    order: 1;
}
.chat-mission-details {
    margin-top: 12px;
}
.chat-mission-details summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #35583f;
    font-weight: 700;
}
.chat-mission-jump {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-top: 2px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: #F3F7F4;
    color: #35583F;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.chat-mission-jump[hidden] { display: none !important; }
.chat-mission-history {
    max-width: 440px;
    margin: 8px 0 12px;
    color: #5C6B62;
    font-size: 0.88rem;
}
.chat-mission-history summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    color: #35583F;
}
.chat-mission-history p {
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid #e3e9e5;
}
.chat-payout-prompt {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f4f7f4;
    border: 1px solid #d5e3d8;
}
.chat-payout-prompt p {
    margin: 0 0 8px;
    color: #1d2a44;
    font-size: 0.92rem;
    line-height: 1.4;
}
.chat-payout-prompt-title {
    font-weight: 700;
}
.chat-payout-prompt .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
}
.chat-payout-ready {
    max-width: 440px;
    margin: 12px auto;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    text-align: center;
}
.chat-payout-ready p {
    margin: 0;
    color: #14532d;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.4;
}
#obJoinChooser .btn-apple-auth {
    background: #1F3827;
    color: #FFFFFF;
    border-radius: 12px;
}
.ob-join-login {
    background: none;
    border: 0;
    color: #2D5A39;
    font-weight: 700;
    padding: 8px 0 0;
    font-family: inherit;
}


/* Bokantaj visiteur : le contenu d'abord, le compositeur réservé aux membres */
.feed-guest-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(74, 124, 89, 0.08);
    border: 1px solid #D3E0D6;
    border-radius: var(--radius-xl, 18px);
    padding: 12px 16px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #1F3827;
}
.feed-guest-cta .btn { min-height: 44px; padding: 8px 18px; }
#payoutAccountRow .row-content { flex: 1; min-width: 0; }
#payoutAccountAction {
    width: auto;
    flex: none;
    padding: 8px 14px;
}
#payoutAccountAction.is-payout-update {
    width: auto !important;
    flex: none !important;
    min-height: 40px !important;
    padding: 8px 16px !important;
    border: 1.5px solid #4A7C59 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: #2D5A39 !important;
    font-size: 0.9rem !important;
}
#payoutAccountReady {
    display: inline-flex;
    align-items: center;
    flex: none;
}
body.user-is-logged-out #flashComposerCard { display: none; }
body:not(.user-is-logged-out) .feed-guest-cta { display: none; }

/* Panneau des notifications (header natif) */
.lyann-notif-backdrop.active {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 100001;
    background: rgba(24, 34, 28, 0.55);
}
.lyann-notif-sheet {
    position: relative;
    width: min(520px, 100%);
    max-height: min(78dvh, 720px);
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    color: var(--text, #1F3827);
    font-family: 'Outfit', sans-serif;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}
.lyann-notif-handle {
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.12);
    margin: 4px auto 12px;
}
.lyann-notif-head-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}
.lyann-notif-head-row h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #1F3827;
}
.lyann-notif-unread {
    background: #4A7C59;
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
}
.lyann-notif-head-row .modal-close-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-left: auto;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background: rgba(74, 124, 89, 0.12) !important;
    color: #1F3827 !important;
    border: none !important;
    opacity: 1;
}
.lyann-notif-mark-all {
    background: none;
    border: none;
    color: #4A7C59;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
    padding: 0;
}
.lyann-notif-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    flex: 1 1 auto;
    padding-bottom: 8px;
}
.lyann-notif-empty {
    text-align: center;
    padding: 36px 16px 28px;
    color: var(--text-muted, #5C6B62);
}
.lyann-notif-empty i {
    font-size: 2.4rem;
    color: #4A7C59;
    opacity: 0.55;
}
.lyann-notif-empty p {
    margin: 8px 0 4px;
    font-weight: 700;
    color: #1F3827;
}
.lyann-notif-empty span {
    font-size: 0.82rem;
}
.notif-item-card {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-alt, #F7F5F0);
    border-radius: 16px;
    border-left: 4px solid transparent;
    cursor: pointer;
    text-align: left;
}
.notif-item-card.is-unread {
    background: rgba(74, 124, 89, 0.08);
    border-left-color: #4A7C59;
}
.lyann-notif-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(74, 124, 89, 0.12);
    color: #4A7C59;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.15rem;
}
.lyann-notif-copy {
    flex: 1;
    min-width: 0;
}
.lyann-notif-kind {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #4A7C59;
    margin-bottom: 2px;
}
.lyann-notif-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.lyann-notif-title-row strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1F3827;
}
.lyann-notif-title-row span {
    font-size: 0.72rem;
    color: var(--text-muted, #5C6B62);
    white-space: nowrap;
}
.lyann-notif-copy p {
    font-size: 0.8rem;
    color: var(--text-muted, #5C6B62);
    margin: 4px 0 0;
    line-height: 1.35;
}
#lyannDetailModal .lyann-detail-card {
    width: min(520px, calc(100vw - 28px)) !important;
    max-width: 520px !important;
    max-height: min(86dvh, 740px);
    display: flex;
    flex-direction: column;
    padding: 0;
}
#lyannDetailModal .lyann-detail-header {
    padding: 16px 16px 14px;
    border-bottom: 1px solid #E6E1D6;
}
#lyannDetailModal .lyann-detail-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
#lyannDetailModal .lyann-detail-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 52px);
    margin: 0;
    background: rgba(74, 124, 89, 0.12);
    color: #2D5A39;
    font-weight: 800;
    font-size: 0.75rem;
    line-height: 1.35;
    padding: 6px 10px;
    border-radius: 999px;
}
#lyannDetailModal .modal-close-btn {
    position: static;
    flex: none;
    width: 40px;
    height: 40px;
}
#lyannDetailModal #lyannDetailTitle {
    margin: 14px 0 0;
    font-size: 1.28rem;
    line-height: 1.25;
    font-weight: 800;
    color: #1E2822;
}
#lyannDetailModal .lyann-detail-status {
    display: inline-flex;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #EBF3EE;
    color: #2D5A39;
    font-size: 0.78rem;
    font-weight: 700;
}
#lyannDetailModal #lyannDetailBody {
    padding: 16px 16px 8px;
    overflow-y: auto;
}
#lyannDetailModal #lyannDetailFooter {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid #E6E1D6;
    background: #FBF9F4;
}
#lyannDetailModal #lyannDetailFooter .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
}
#lyannDetailModal .lyann-detail-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
#lyannDetailModal .activity-delete-btn {
    color: #C45C4A;
    border-color: rgba(196, 92, 74, 0.35);
}

.lyann-notif-cta {
    display: inline-flex;
    margin-top: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #4A7C59;
}

/* display:!important on components such as .btn-outline overrides the UA [hidden] rule. */
[hidden] {
    display: none !important;
}

/* Account identity must stay a horizontal line. A flex sibling with min-width:auto
   was squeezing the name column down to one character. */
.identity-avatar-wrap {
    position: relative !important;
    flex: 0 0 auto !important;
}

.identity-strip {
    flex-wrap: wrap !important;
    align-items: center !important;
}

.identity-strip-text,
.sidebar-user-info,
.drawer-user-info,
.account-header-titles,
.account-touch-row .row-content {
    flex: 1 1 10rem !important;
    min-width: 8rem !important;
    max-width: 100% !important;
}

.identity-display-name,
.identity-location,
.identity-territory,
.sidebar-user-name,
.sidebar-user-location,
.drawer-user-name,
.account-main-title,
.account-main-subtitle,
.account-touch-row .row-title,
.account-touch-row .row-subtitle,
.lyann-profile-display-name,
.lyann-profile-location {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    line-height: 1.35 !important;
}

.identity-display-name,
.sidebar-user-name,
.drawer-user-name,
.account-main-title,
.lyann-profile-display-name {
    display: block !important;
}

.identity-location,
.identity-territory,
.sidebar-user-location {
    display: flex !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin-top: 4px !important;
    color: #4A7C59 !important;
    font-weight: 600 !important;
}

.identity-location > i,
.identity-territory > i,
.sidebar-user-location > i {
    flex: 0 0 auto !important;
    line-height: 1.35 !important;
}

.identity-edit-btn {
    flex: 1 1 auto !important;
    margin-left: auto !important;
    white-space: normal !important;
    max-width: 100% !important;
}

@media (max-width: 640px) {
    .identity-edit-btn {
        flex: 1 1 100% !important;
        margin-left: 0 !important;
    }
}

/* Inbox list — mint field, white cards, filters */
#chatModal .chat-contacts-sidebar {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #F1F8F3 !important;
    border-right: 0 !important;
}
body.lyann-messaging-open #chatModal .chat-sidebar-header.lyann-inbox-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 0 !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 6px !important;
    background: #F1F8F3 !important;
    background-color: #F1F8F3 !important;
    border-bottom: 0 !important;
}
#chatModal .lyann-inbox-brand,
#chatModal .lyann-inbox-title,
#chatModal .lyann-inbox-subtitle {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
}
#chatModal .lyann-inbox-brand { display: flex !important; align-items: center !important; gap: 8px !important; }
#chatModal .chat-contacts-sidebar > .chat-search-wrapper {
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    margin: 12px 16px 8px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
body.keyboard-open.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal.modal-overlay,
body.keyboard-open.is-native-app.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal.modal-overlay {
    bottom: 0 !important;
    height: auto !important;
}
#chatModal .lyann-inbox-header .chat-close-modal-btn { display: none !important; }
#chatModal .lyann-inbox-brand { display: flex; align-items: center; gap: 8px; }
#chatModal .lyann-inbox-mark { width: 34px; height: 34px; display: block; }
#chatModal .lyann-inbox-word { font-weight: 800; letter-spacing: 0.04em; color: #3E7A52; font-size: 1.05rem; }
#chatModal .lyann-inbox-title { margin: 8px 0 0; font-size: 1.85rem; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: #17231c; }
#chatModal .lyann-inbox-subtitle { margin: 4px 0 0; max-width: 22rem; color: #3d5144; font-size: 0.92rem; font-weight: 500; line-height: 1.3; }
#chatModal .lyann-inbox-motifs { position: absolute; inset: 0; pointer-events: none; color: #5f9a74; opacity: 0.1; }
#chatModal .lyann-inbox-motif { position: absolute; }
#chatModal .lyann-inbox-motif.is-leaf { width: 64px; height: 64px; top: 6px; right: 8px; transform: rotate(16deg); }
#chatModal .lyann-inbox-motif.is-bubble { width: 30px; height: 30px; top: 8px; right: 78px; }
#chatModal .lyann-inbox-motif.is-share { width: 26px; height: 26px; top: 42px; right: 18px; }
#chatModal .chat-search-wrapper { margin: 12px 16px 8px; position: relative; z-index: 1; }
#chatModal .chat-search-wrapper .chat-search-input {
    background: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    min-height: 48px;
    box-shadow: 0 1px 0 rgba(36, 56, 43, 0.04);
}
#chatModal .lyann-inbox-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 16px 10px;
    scrollbar-width: none;
    position: relative;
    z-index: 1;
}
#chatModal .lyann-inbox-filters::-webkit-scrollbar { height: 0; }
#chatModal .lyann-inbox-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: #fff;
    color: #24352b;
    border-radius: 999px;
    min-height: 32px;
    padding: 4px 10px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
#chatModal .lyann-inbox-pill i { font-size: 0.95rem; opacity: 0.8; }
#chatModal .lyann-inbox-pill.is-active { background: #3f7d52; color: #fff; }
#chatModal .lyann-inbox-pill.is-active i { opacity: 1; }
/* Inbox list must be the scrollport: flex child + min-height:0, or iOS clips
   content under overflow:hidden ancestors with no nested scroll. */
#chatModal .chat-contacts-sidebar > .chat-sidebar-header,
#chatModal .chat-contacts-sidebar > .chat-search-wrapper,
#chatModal .chat-contacts-sidebar > .lyann-inbox-filters {
    flex: 0 0 auto !important;
}
#chatModal .chat-contacts-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain;
    padding: 8px 12px 96px;
    background: transparent;
    position: relative;
    z-index: 1;
}
/* flex-shrink:0 — iOS WKWebView shrinks flex children in a scrollport and cards overlap */
#chatModal .chat-contact-item,
#chatModal button.chat-contact-item {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    min-height: 76px !important;
    height: auto !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 6px 16px rgba(47, 84, 58, 0.05);
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    transform: none !important;
    line-height: 1.35 !important;
}
#chatModal .chat-contact-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    height: auto !important;
    overflow: hidden !important;
}
#chatModal .chat-contact-avatar,
#chatModal .chat-contact-avatar-wrap.is-support {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
#chatModal .chat-contact-avatar-wrap.is-support {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #d7e6dc;
}
#chatModal .chat-contact-avatar-wrap.is-support svg { width: 30px; height: 30px; }
#chatModal .chat-contact-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
#chatModal .chat-contact-name { font-weight: 650; color: #17231c; min-width: 0; }
#chatModal .chat-contact-item.is-unread .chat-contact-name { font-weight: 800; }
#chatModal .chat-contact-preview {
    color: #6b7c72;
    font-size: 0.86rem;
    line-height: 1.35;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#chatModal .chat-contact-item.is-unread .chat-contact-preview { color: #24352b; font-weight: 650; }
#chatModal .chat-contact-time { margin-left: auto; color: #8a9a90; font-size: 0.75rem; font-weight: 600; flex: 0 0 auto; }
#chatModal .lyann-inbox-role {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 800;
    color: #3f7d52;
    background: #e7f3eb;
    border-radius: 999px;
    padding: 2px 6px;
}
#chatModal .lyann-inbox-context {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    color: #5d6f64;
    font-size: 0.75rem;
    font-weight: 700;
}
#chatModal .lyann-inbox-context span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#chatModal .lyann-inbox-unread {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #3f7d52;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#chatModal .lyann-inbox-unread[hidden] { display: none !important; }
#chatModal .lyann-inbox-new {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    background: #3f7d52;
    border-radius: 999px;
    padding: 2px 7px;
}
#chatModal .chat-contact-item.is-unread {
    background: #f4faf6;
}
#chatModal .chat-contact-item.is-live-new {
    box-shadow: inset 3px 0 0 #3f7d52;
}
#chatModal .lyann-inbox-compose {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: #3f7d52;
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 10px 24px rgba(63, 125, 82, 0.28);
    cursor: pointer;
}
#chatModal .lyann-inbox-filter-empty { text-align: center; color: #5d6f64; padding: 28px 12px; }
@media (max-width: 900px) {
    body.chat-list-open:not(.keyboard-open) #chatModal.modal-overlay.active {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        height: auto;
    }
    body.chat-list-open .mobile-bottom-nav { z-index: 6500; }
    body.chat-conversation-open #chatModal.modal-overlay.active { bottom: 0; }
}

#chatModal .chat-contact-avatar-wrap.is-support .lyann-support-mark,
#chatModal .chat-header-avatar[src="logo-app-256.png"] {
    object-fit: contain;
    background: #fff;
    padding: 4px;
    box-sizing: border-box;
}
#chatModal .chat-messages-scroll { padding: 8px 12px 12px !important; }
#chatModal .chat-msg-bubble { padding: 8px 12px; }
#chatModal .chat-msg-bubble-wrap { margin: 0 0 8px; }
#chatModal .chat-msg-time { margin-top: 2px; font-size: 0.68rem; }
#chatModal .chat-msg-status { font-size: 0.68rem; font-weight: 700; }
#chatModal .chat-empty-state.is-compact {
    height: auto;
    justify-content: flex-start;
    padding: 28px 8px 8px;
}
#chatModal .chat-empty-state.is-compact .chat-empty-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 800;
    color: #17231c;
}
#chatModal .chat-empty-state.is-compact p { margin: 0; color: #5d6f64; font-size: 0.9rem; }
#chatActionsBottomSheet .lyann-attach-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
#chatActionsBottomSheet .lyann-attach-grid .chat-bs-action-btn {
    min-height: 88px;
    padding: 14px 8px;
    border-radius: 18px;
    background: #F1F8F3;
}
#chatActionsBottomSheet .lyann-attach-grid .chat-bs-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: #fff;
    color: #3f7d52;
    font-size: 1.45rem;
}

/* Devis flow: center the whole block when it fits, scroll when it does not. */
#chatModal #chatActionChoicesOverlay.chat-overlay-pane,
#chatModal #chatDirectPriceForm.chat-overlay-pane,
#chatModal #chatMilestoneDevisForm.chat-overlay-pane {
    justify-content: center;
    justify-content: safe center;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 16px max(20px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
#chatModal #chatActionChoicesOverlay.chat-overlay-pane > *,
#chatModal #chatDirectPriceForm.chat-overlay-pane > form,
#chatModal #chatMilestoneDevisForm.chat-overlay-pane > form {
    width: min(100%, 520px);
    max-width: 520px;
    flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: 0;
    box-sizing: border-box;
}
#chatModal #chatMilestoneDevisForm.chat-overlay-pane > form {
    max-height: none !important;
    overflow: visible !important;
}
#chatModal #chatDirectPriceForm input,
#chatModal #chatDirectPriceForm textarea,
#chatModal #chatMilestoneDevisForm input,
#chatModal #chatMilestoneDevisForm textarea {
    scroll-margin-block: 28px;
}
body.keyboard-open #chatModal #chatDirectPriceForm.chat-overlay-pane,
body.keyboard-open #chatModal #chatMilestoneDevisForm.chat-overlay-pane {
    justify-content: flex-start;
    padding-top: 16px;
}

#lyannDetailModal.modal-overlay.active,
#lyannDetailModal.modal-overlay.lyann-surface-active {
    z-index: 24000 !important;
}
.lyann-commune-picker {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    text-align: left;
    cursor: pointer;
    background: #fff;
}
.lyann-commune-drawer {
    position: fixed;
    inset: 0;
    z-index: 2147483020;
    display: flex;
    align-items: flex-end;
    background: rgba(24, 34, 28, 0.55);
}
.lyann-commune-drawer[hidden] { display: none !important; }
.lyann-commune-card {
    width: 100%;
    max-height: min(78dvh, 640px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}
.lyann-commune-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}
.lyann-commune-head h3 { margin: 0; flex: 1; font-size: 1.05rem; }
.lyann-commune-back,
.lyann-commune-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: #F1F8F3;
    color: #17231c;
    cursor: pointer;
}
.lyann-commune-list { overflow: auto; padding: 8px 0 4px; }
.lyann-commune-row {
    width: 100%;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    border: 0;
    border-bottom: 1px solid #edf3ee;
    background: transparent;
    text-align: left;
    padding: 8px 4px;
    font: inherit;
    color: #17231c;
    cursor: pointer;
}
.lyann-commune-row span { font-size: 0.78rem; color: #5d6f64; }
.lyann-commune-row.is-preferred strong { color: #2D5A39; }
.lyann-commune-empty {
    margin: 16px 4px;
    color: #5d6f64;
    font-size: 0.92rem;
}

/* Messaging must fully cover page chrome (filters, universe, homepage sections). */
body.lyann-messaging-open {
    background: #F1F8F3 !important;
}
body.lyann-messaging-open::before {
    display: block !important;
    opacity: 0.08;
    z-index: -1;
    background-color: transparent;
    background-image: url('hero-image.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 40%;
    animation: none;
}
body.lyann-messaging-open .bokantaj-top-filter-row,
body.lyann-messaging-open #bokantajFilterSheetModal,
body.lyann-messaging-open .feed-hero-section,
body.lyann-messaging-open .feed-main-section,
body.lyann-messaging-open .lyann-universe-header,
body.lyann-messaging-open .hero,
body.lyann-messaging-open .trust-section,
body.lyann-messaging-open #about,
body.lyann-messaging-open section.section,
body.lyann-messaging-open footer.footer,
body.lyann-messaging-open .site-footer,
body.lyann-messaging-open #flashComposerCard,
body.lyann-messaging-open .feed-guest-cta,
body.lyann-messaging-open .speed-dial-wrapper,
body.lyann-messaging-open #backToTopBtn,
body.lyann-messaging-open #explorer,
body.lyann-messaging-open .explorer-page,
body.lyann-messaging-open .explorer-shell,
body.lyann-messaging-open .results-layout,
body.lyann-messaging-open .flash-feed-list {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* While messaging owns the shell, keep Mon Compte out of the way — but never
   after the router has dismissed messaging to open account / publish. */
body.lyann-messaging-open:not(:has(#userAccountModal.modal-overlay.active)) #userAccountModal,
body.lyann-messaging-open:not(:has(#userAccountModal.modal-overlay.active)) #userAccountModal.modal-overlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/*
 * Stacking — chat must NEVER sit above menu / notifications.
 * Chat stays under 10000. Overlays use near-max z-index + body portal.
 */
html body.lyann-messaging-open #chatModal.modal-overlay,
html body.lyann-messaging-open #chatModal.modal-overlay.active,
html body.lyann-messaging-open #chatModal.modal-overlay[style*="display: flex"],
html body.lyann-messaging-open #chatModal.modal-overlay:has(.chat-modal-layout.mobile-conversation-active) {
    z-index: 9000 !important;
}
html body #mobileHamburgerDrawerOverlay,
html body #mobileHamburgerDrawerOverlay.hamburger-drawer-overlay,
html body #mobileHamburgerDrawerOverlay.active,
html body .hamburger-drawer-overlay.active {
    z-index: 2147483000 !important;
}
html body #mobileHamburgerDrawerOverlay .hamburger-drawer-card,
html body #mobileHamburgerDrawer {
    z-index: 2147483001 !important;
}
html body #notificationsModal,
html body #notificationsModal.sheet-backdrop,
html body #notificationsModal.lyann-notif-backdrop,
html body #notificationsModal.sheet-backdrop.active,
html body #notificationsModal.lyann-notif-backdrop.active,
html body .lyann-notif-backdrop.active {
    z-index: 2147483002 !important;
}

/* Major surfaces must open ABOVE the native hamburger (iOS was opening behind it). */
html body #userAccountModal.modal-overlay.active,
html body #userAccountModal.modal-overlay.lyann-surface-active,
html body #modal-request-help.modal-overlay.active,
html body #loginModal.modal-overlay.active,
html body #onboardingModal.modal-overlay.active,
html body #modalCompleteProfile.modal-overlay.active,
html body #lyannDetailModal.modal-overlay.active,
html body #lyannDetailModal.modal-overlay.lyann-surface-active,
html body #publicMemberProfileModal.modal-overlay.active,
html body #quickProfileModal.modal-overlay.active {
    z-index: 2147483030 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
html body.is-native-app #userAccountModal.modal-overlay.active,
html body.is-native-app #modal-request-help.modal-overlay.active {
    display: flex !important;
}
#notificationsModal.sheet-backdrop.active,
#notificationsModal.lyann-notif-backdrop.active,
.lyann-notif-backdrop.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
    background: rgba(24, 34, 28, 0.55) !important;
}

/* Mobile messaging = opaque fullscreen app screen (never a card over Mon Compte). */
@media (max-width: 991px) {
    body.lyann-messaging-open #chatModal.modal-overlay,
    body.lyann-messaging-open #chatModal.modal-overlay.active,
    body.lyann-messaging-open #chatModal.modal-overlay[style*="display: flex"] {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        background: #F1F8F3 !important;
        background-color: #F1F8F3 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }
    body.lyann-messaging-open #chatModal > .modal-card,
    body.lyann-messaging-open #chatModal .modal-card-chat {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        background: #F1F8F3 !important;
    }
    body.lyann-messaging-open.chat-list-open #chatModal.modal-overlay,
    body.lyann-messaging-open.chat-conversation-open #chatModal.modal-overlay,
    body.lyann-messaging-open #chatModal .chat-modal-layout,
    body.lyann-messaging-open #chatModal .chat-contacts-sidebar {
        background: #F1F8F3 !important;
        background-color: #F1F8F3 !important;
    }
}

/* Desktop messaging = centered 2-pane card; keep sizes readable. */
@media (min-width: 992px) {
    body.lyann-messaging-open #chatModal.modal-overlay,
    body.lyann-messaging-open #chatModal.modal-overlay.active,
    body.lyann-messaging-open #chatModal.modal-overlay[style*="display: flex"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
        background: rgba(15, 23, 42, 0.55) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }
    body.lyann-messaging-open #chatModal > .modal-card,
    body.lyann-messaging-open #chatModal .modal-card-chat {
        width: min(1240px, calc(100vw - 48px)) !important;
        max-width: 1240px !important;
        height: min(860px, calc(100vh - 48px)) !important;
        max-height: calc(100vh - 48px) !important;
        min-height: 560px !important;
        margin: auto !important;
        border-radius: 24px !important;
        box-shadow: 0 25px 70px rgba(0, 0, 0, 0.28) !important;
        overflow: hidden !important;
        background: #FFFFFF !important;
    }
    body.lyann-messaging-open #chatModal .chat-modal-layout {
        flex-direction: row !important;
        background: #FFFFFF !important;
    }
    body.lyann-messaging-open #chatModal .chat-contacts-sidebar {
        width: 360px !important;
        min-width: 320px !important;
        max-width: 380px !important;
        background: #FAFAFA !important;
        border-right: 1px solid #E2E8F0 !important;
    }
    body.lyann-messaging-open #chatModal .chat-main-area,
    body.lyann-messaging-open #chatModal .chat-messages-scroll {
        background: #F4F6F4 !important;
    }
    body.lyann-messaging-open #chatModal .chat-sidebar-header.lyann-inbox-header {
        padding: 18px 20px 8px !important;
        background: #FAFAFA !important;
    }
    body.lyann-messaging-open #chatModal .lyann-inbox-title {
        font-size: 1.45rem !important;
    }
    body.lyann-messaging-open #chatModal .chat-mission-card,
    body.lyann-messaging-open #chatModal [data-deal-recap],
    body.lyann-messaging-open #chatModal .lyann-live-quote-card {
        max-width: min(420px, 92%) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body.lyann-messaging-open #chatModal .lyann-thread-context {
        max-width: 100% !important;
        margin: 10px 16px 8px !important;
    }
    body.lyann-messaging-open #chatModal .chat-msg-bubble-wrap {
        max-width: min(420px, 72%) !important;
        min-width: 4.5rem !important;
    }
    body.lyann-messaging-open #chatModal .chat-msg-bubble {
        width: max-content !important;
        max-width: 100% !important;
        min-width: 4.5rem !important;
    }
    body.lyann-messaging-open #chatModal .chat-msg-text {
        width: max-content !important;
        max-width: 100% !important;
        writing-mode: horizontal-tb !important;
        white-space: pre-wrap !important;
        word-break: normal !important;
    }
    body.lyann-messaging-open #chatModal .chat-back-to-contacts-btn {
        display: none !important;
    }
    body.lyann-messaging-open #chatModal .desktop-only-close-btn {
        display: flex !important;
    }

    /* Desktop inbox rows — readable cards, no overlap */
    body.lyann-messaging-open #chatModal .chat-contacts-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 8px 14px 88px !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }
    body.lyann-messaging-open #chatModal .chat-contact-item,
    body.lyann-messaging-open #chatModal button.chat-contact-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 76px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        border: 1px solid #e7eee9 !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 2px 8px rgba(36, 56, 43, 0.04) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        position: relative !important;
        transform: none !important;
        line-height: 1.35 !important;
    }
    body.lyann-messaging-open #chatModal .chat-contact-item.active {
        background: #E8F5E9 !important;
        border-color: rgba(74, 124, 89, 0.35) !important;
    }
    body.lyann-messaging-open #chatModal .chat-contact-avatar-wrap {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        flex: 0 0 48px !important;
        margin-top: 2px !important;
    }
    body.lyann-messaging-open #chatModal .chat-contact-avatar,
    body.lyann-messaging-open #chatModal .chat-contact-avatar-wrap.is-support {
        width: 48px !important;
        height: 48px !important;
    }
    body.lyann-messaging-open #chatModal .chat-contact-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }
    body.lyann-messaging-open #chatModal .chat-contact-name-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px 8px !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    body.lyann-messaging-open #chatModal .chat-contact-name {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 0.98rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    body.lyann-messaging-open #chatModal .chat-contact-time {
        margin-left: auto !important;
        flex: 0 0 auto !important;
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }
    body.lyann-messaging-open #chatModal .chat-contact-preview {
        display: block !important;
        font-size: 0.86rem !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        -webkit-line-clamp: unset !important;
    }
    body.lyann-messaging-open #chatModal .lyann-inbox-context {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 2px !important;
        max-width: 100% !important;
    }
    body.lyann-messaging-open #chatModal .lyann-inbox-context span {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    body.lyann-messaging-open #chatModal .lyann-inbox-unread,
    body.lyann-messaging-open #chatModal .chat-unread-dot {
        align-self: center !important;
        flex: 0 0 auto !important;
        margin-top: 12px !important;
    }
    body.lyann-messaging-open #chatModal .lyann-inbox-title {
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
    }
    body.lyann-messaging-open #chatModal .lyann-inbox-subtitle {
        font-size: 0.88rem !important;
        max-width: 18rem !important;
    }
}
#chatMessagesContainer .lyann-quote-highlight {
    outline: 2px solid #4A7C59;
    box-shadow: 0 0 0 4px rgba(74, 124, 89, 0.22);
    transition: outline-color 0.3s ease, box-shadow 0.3s ease;
}

/* Conversation as a page inside Messages: mint field, compact header, short slide. */
.chat-thread-pending {
    margin: 28px auto;
    color: #5d6f64;
    font-size: 0.92rem;
    text-align: center;
}
#chatModal .chat-header-bar .chat-close-modal-btn,
#chatModal .chat-header-bar .close-chat-modal-trigger {
    display: none !important;
}
body.lyann-messaging-open #chatModal.modal-overlay:has(.chat-modal-layout.mobile-conversation-active) {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 9000 !important;
}
body.lyann-messaging-open:has(#chatModal .chat-modal-layout.mobile-conversation-active) .mobile-bottom-nav,
body.lyann-messaging-open:has(#chatModal .chat-modal-layout.mobile-conversation-active) .navbar {
    visibility: hidden !important;
    pointer-events: none !important;
}
body.chat-conversation-open.lyann-messaging-open #chatModal .chat-header-bar {
    background: #F1F8F3 !important;
    background-color: #F1F8F3 !important;
    min-height: 44px !important;
    height: auto !important;
    /* visible : le menu ••• sort sous le header — hidden le coupait / le passait derrière le fil */
    overflow: visible !important;
    flex-shrink: 0 !important;
    border-bottom: 0 !important;
    position: relative !important;
    z-index: 4000 !important;
    /* No transform: any transform on chrome above the thread can still confuse iOS hit-testing. */
}
body.chat-conversation-open.lyann-messaging-open #chatModal .chat-header-dropdown.active {
    z-index: 5000 !important;
}
body.chat-conversation-open #chatModal .chat-main-area,
body.chat-conversation-open #chatModal .chat-messages-scroll {
    background: #F1F8F3 !important;
    background-color: #F1F8F3 !important;
}
/* iOS WKWebView: nested overflow-y scroll breaks when an ancestor keeps a transform
   (even translateX(0)). Keep the off-screen slide transform; clear it when active. */
body.chat-conversation-open #chatModal .chat-messages-scroll,
body.chat-conversation-open #chatModal #chatMessagesContainer {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain;
}
/* Inbox (list open, thread closed): same scrollport contract as the thread.
   Sidebar only — do not force .chat-modal-layout to column (desktop is 2-pane). */
body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal .chat-contacts-sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal .chat-contacts-list,
body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal #chatContactsList {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain;
}
body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal .chat-contact-item,
body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal button.chat-contact-item,
body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal .chat-contact-swipe-wrapper {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    height: auto !important;
    max-height: none !important;
}
/* Sticky header is redundant once the list is the scroller; keep chrome in flow. */
body.lyann-messaging-open.chat-list-open:not(.chat-conversation-open) #chatModal .chat-sidebar-header {
    position: relative !important;
    top: auto !important;
}
body.chat-conversation-open #chatModal .chat-msg-bubble.received {
    background: #ffffff !important;
    color: #17231c !important;
    border: 0 !important;
}
body.chat-conversation-open #chatModal .chat-msg-bubble.sent {
    background: #3f7d52 !important;
    color: #ffffff !important;
}
#chatModal .lyann-thread-context {
    min-height: 56px;
    height: auto !important;
    max-height: none !important;
    margin: 8px 12px 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    gap: 10px;
    box-shadow: 0 1px 0 rgba(36, 56, 43, 0.04);
    flex: 0 0 auto !important;
    overflow: visible !important;
    position: relative;
    z-index: 20;
}
.lyann-thread-context-kicker {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #3f7d52;
}
.lyann-thread-context-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.lyann-thread-context-primary {
    border: 0;
    background: #3f7d52;
    color: #fff;
    border-radius: 999px;
    min-height: 36px;
    padding: 0 12px;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
}
.lyann-thread-context-open {
    border: 0;
    background: transparent;
    color: #3f7d52;
    font-weight: 800;
    font-size: 0.85rem;
    min-height: 36px;
    padding: 0 4px;
    cursor: pointer;
}
html body.keyboard-open.chat-conversation-open #chatModal.modal-overlay,
html body.keyboard-open.chat-conversation-open #chatModal.modal-overlay.active {
    top: var(--lyann-vv-offset, 0px) !important;
    height: var(--lyann-vv-height, 100dvh) !important;
    bottom: auto !important;
    max-height: none !important;
}
@media (max-width: 768px) {
    #chatModal .chat-modal-layout:not(.mobile-conversation-active) .chat-main-area {
        display: flex !important;
        visibility: hidden;
        pointer-events: none;
        position: absolute;
        inset: 0;
        transform: translateX(100%);
        transition: transform 200ms ease;
        z-index: 2;
        background: #F1F8F3 !important;
    }
    #chatModal .chat-modal-layout.mobile-conversation-active .chat-contacts-sidebar {
        display: flex !important;
        position: relative !important;
        z-index: 1 !important;
    }
    #chatModal .chat-modal-layout.mobile-conversation-active .chat-sidebar-header {
        z-index: 1 !important;
    }
    #chatModal .chat-modal-layout.mobile-conversation-active .chat-main-area {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible;
        pointer-events: auto;
        position: absolute;
        inset: 0;
        /* transform:none — translateX(0) still creates a containing block and kills iOS thread scroll */
        transform: none;
        transition: transform 200ms ease;
        z-index: 5 !important;
        width: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background: #F1F8F3 !important;
    }
}
#chatModal #chatViewMissionBtn,
#chatModal #chatMissionContextBar,
#chatModal #chatMissionContext,
#chatModal #chatFinanceStrip,
#chatModal .lyann-finance-strip,
#chatModal #chatContextualActionsBar:empty {
    display: none !important;
}

.milestone-allocation-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.md-milestone-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.md-milestone-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}
.md-milestone-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.md-milestone-remove {
    min-height: 40px;
    padding: 6px 12px;
    font-size: 0.78rem;
}
.md-milestone-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.md-milestone-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
}
.md-milestone-grid input,
.md-milestone-card > .modal-input,
#mdTotalAmount {
    min-height: 44px;
    font-size: 16px;
}
.md-add-milestone {
    min-height: 48px;
    width: 100%;
    font-weight: 800;
}
.md-assign-remainder {
    min-height: 40px;
    width: 100%;
    font-size: 0.78rem;
}
.md-allocation-summary {
    position: relative;
    padding: 10px 12px;
    border-radius: 12px;
    background: #F1F8F3;
    border: 1px solid var(--border);
    font-size: 0.78rem;
}
.md-allocation-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.md-allocation-live {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
}
#milestoneDevisForm {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    max-height: min(78vh, 640px);
}
@media (max-width: 390px) {
    .md-milestone-grid {
        grid-template-columns: 1fr;
    }
}

.lyann-profile-share-overlay {
    z-index: 1000008;
}
.lyann-profile-share-card {
    max-height: min(82vh, 640px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.lyann-share-subtitle {
    margin: 0 0 14px;
    font-size: 0.88rem;
    color: #64748b;
}
.lyann-share-dest-grid {
    display: grid;
    gap: 10px;
}
.lyann-share-dest-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    text-align: left;
}
.lyann-share-dest-btn i {
    font-size: 1.4rem;
    color: var(--primary);
}
.lyann-share-search {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 16px;
    margin-bottom: 10px;
}
.lyann-share-recipient-list {
    overflow-y: auto;
    max-height: 46vh;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lyann-share-recipient {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    text-align: left;
    font-weight: 700;
}
.lyann-share-recipient img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #e6efe9;
}
.lyann-share-empty {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 0.88rem;
}
.lyann-shared-profile-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 180px;
    padding: 12px 14px;
    border: 1px solid rgba(74, 124, 89, 0.28);
    border-radius: 16px;
    background: #f4faf6;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.lyann-shared-profile-kicker {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4A7C59;
}
.lyann-shared-profile-name {
    font-size: 0.98rem;
    font-weight: 800;
}
.lyann-shared-profile-cta {
    font-size: 0.8rem;
    font-weight: 700;
    color: #4A7C59;
}

/* Page changes are full HTML documents. Keep the gap the same cream as the app,
   and cross-fade for about 180ms. Older WebViews get a short leave fade in script.js. */
html {
    background: #FDFCF9;
}
@view-transition {
    navigation: auto;
}
::view-transition-old(root) {
    animation: lyann-page-out 180ms ease both;
}
::view-transition-new(root) {
    animation: lyann-page-in 180ms ease both;
}
@keyframes lyann-page-out {
    to { opacity: 0; }
}
@keyframes lyann-page-in {
    from { opacity: 0; }
}
@supports not (view-transition-name: root) {
    body {
        animation: lyann-page-in 180ms ease;
    }
}
html.lyann-page-leave body {
    opacity: 0;
    transition: opacity 160ms ease;
}
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
    ::view-transition-old(root),
    ::view-transition-new(root),
    body {
        animation: none;
    }
    html.lyann-page-leave body {
        transition: none;
    }
}

#publicMemberProfileModal .lyann-profile-topbar {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    justify-content: flex-end;
    padding: 10px 10px 0;
    background: linear-gradient(#f7f4ee 72%, rgba(247, 244, 238, 0));
}
#publicMemberProfileModal .lyann-profile-topbar .modal-close-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #24352b !important;
    border: 1px solid #e5dfd5 !important;
}
#publicMemberProfileModal .profile-modal-body { padding: 0 16px 28px; }
#publicMemberProfileModal .modal-card-dashboard { background: #f7f4ee !important; }
#publicMemberProfileModal .lyann-profile-hero-content,
#publicMemberProfileModal .lyann-profile-hero-details,
#publicMemberProfileModal .lyann-profile-name-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
#publicMemberProfileModal .lyann-profile-display-name {
    margin: 8px 0 0;
    font-size: 1.45rem;
    line-height: 1.2;
    color: #1e2822;
}
#publicMemberProfileModal .lyann-profile-bio {
    max-width: 36rem;
    margin: 4px 0 0;
    padding: 12px 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e7e1d6;
    color: #24352b;
    line-height: 1.45;
}
#publicMemberProfileModal .lyann-profile-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}
#publicMemberProfileModal .lyann-profile-cta-group .btn { min-height: 48px; border-radius: 999px; }
#publicMemberProfileModal .lyann-profile-section,
#publicMemberProfileModal .lyann-completion-card {
    margin-top: 14px;
    padding: 16px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e7e1d6;
}
#publicMemberProfileModal .lyann-section-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
    margin-bottom: 12px;
}
#publicMemberProfileModal .lyann-section-title { margin: 0; font-size: 1.05rem; color: #1e2822; }
#publicMemberProfileModal .lyann-profile-action,
#publicMemberProfileModal .lyann-completion-chip {
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px solid #4a7c59;
    background: #fff;
    color: #24352b;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}
#publicMemberProfileModal .lyann-skills-flex {
    display: grid !important;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#publicMemberProfileModal .lyann-service-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 14px;
    background: #f4f8f5;
    border: 1px solid #d7e3da;
    color: #1f3827;
    font-weight: 700;
}
#publicMemberProfileModal .lyann-completion-header { margin: 0 0 10px; font-weight: 700; color: #24352b; }
#publicMemberProfileModal .lyann-completion-items { display: flex; flex-wrap: wrap; gap: 8px; }
#publicMemberProfileModal .lyann-avatar-edit-btn { min-width: 44px; min-height: 44px; }

/* Secondary native pages: the title bar stays a solid strip, never over the text. */
body.is-native-app .navbar.native-page-header,
body.is-native-app .navbar.native-page-header.scrolled {
    top: 0 !important;
    min-height: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: 8px !important;
    background: #FDFCF9 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(36, 53, 43, 0.08) !important;
    box-shadow: none !important;
}
body.is-native-app .navbar.native-page-header .native-header-row {
    background: #FDFCF9;
}