:root{
    --pm-bg:#f5f8fc;
    --pm-surface:rgba(255,255,255,.92);
    --pm-surface-2:rgba(255,255,255,.72);
    --pm-line:rgba(15,23,42,.08);
    --pm-line-strong:rgba(15,23,42,.12);
    --pm-text:#0f172a;
    --pm-muted:#64748b;
    --pm-primary:#2563eb;
    --pm-primary-2:#4f46e5;
    --pm-success:#10b981;
    --pm-danger:#ef4444;
    --pm-warning:#f59e0b;
    --pm-shadow:0 20px 60px rgba(2,6,23,.10);
    --pm-shadow-soft:0 12px 32px rgba(2,6,23,.07);
    --pm-radius:22px;
    --pm-radius-sm:16px;
    --pm-font: Inter, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}



    html {
    color: var(--pm-text);
    font-family: var(--pm-font);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

p,
span,
div,
li,
a,
button,
input,
select,
textarea,
small,
strong {
    font-family: var(--pm-font);
}


body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--pm-bg);
    background-color: var(--pm-bg);
    position: relative;
}

body.page-marketing {
    background:
        linear-gradient(135deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.34) 100%),
        /*
        url('https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=1974&auto=format&fit=crop') no-repeat center center fixed;
        */
        url('../images/background.png') no-repeat center center fixed;
    background-size: cover;
    background-color: #0f172a;
}

body.page-app {
    background:
        radial-gradient(900px circle at 10% 0%, rgba(37,99,235,.05), transparent 42%),
        radial-gradient(900px circle at 90% 10%, rgba(16,185,129,.04), transparent 40%),
        linear-gradient(180deg, #f8fbff 0%, #f5f8fc 100%);
    background-color: #f5f8fc;
}

/* Reset pour le menu mobile */
.pm-mobile-menu,
.pm-mobile-menu * {
    box-sizing: border-box;
    pointer-events: auto;
}

.pm-mobile-menu {
    background: #ffffff !important;
    color: #333333 !important;
}

.pm-mobile-menu .pm-mobile-link {
    color: #333333 !important;
    opacity: 1 !important;
}

.pm-mobile-menu .pm-mobile-link:hover {
    background: #f5f5f5 !important;
    color: #0056b3 !important;
}

/* Pour les éléments de sous-menu */
.pm-mobile-menu .sub-menu {
    background: #f8f9fa !important;
}

.pm-mobile-menu .sub-menu a {
    color: #333333 !important;
}

.pm-mobile-menu .sub-menu a:hover {
    background: #e9ecef !important;
}

.app-shell{
    flex: 1 0 auto;
}

#global-loader {
    display: none !important;
}

.app-shell {
    flex: 1 0 auto;
}

/* Topbar totalement transparente (texte blanc) */
.pm-topbar {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.pm-topbar-inner {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: .92rem;
    font-weight: 400;
}

.pm-mini-links,
.pm-mini-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pm-mini-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pm-mini-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: rgba(255,255,255,0.85) !important;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 999px;
    transition: .16s ease;
    letter-spacing: .005em;
}

.pm-mini-link:hover {
    color: white !important;
    background: rgba(255,255,255,0.15);
}

/* Styles généraux (conservés) */
.pm-mainbar .navbar {
    padding-top: 12px;
    padding-bottom: 12px;
}

.pm-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

/* ... le reste de tes styles (inchangé) ... */
.pm-brand-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--pm-line);
    box-shadow: var(--pm-shadow-soft);
    padding: 6px;
}

.pm-brand-text strong {
    display: block;
    color: var(--pm-text);
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 620;
    letter-spacing: -.01em;
}

.pm-brand-text span {
    display: block;
    color: var(--pm-muted);
    font-size: .78rem;
    font-weight: 400;
    margin-top: 2px;
    letter-spacing: .01em;
}

.pm-nav .nav-link {
    color: var(--pm-text);
    font-weight: 500;
    border-radius: 14px;
    padding: 10px 14px !important;
    transition: .16s ease;
    letter-spacing: .01em;
}

.pm-nav .nav-link:hover,
.pm-nav .nav-link:focus {
    background: rgba(37,99,235,.08);
    color: var(--pm-primary);
}

.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 540;
    border: 1px solid transparent;
    transition: .18s ease;
    box-shadow: none;
    letter-spacing: .01em;
}

.pm-btn:hover {
    transform: translateY(-1px);
}

.pm-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--pm-primary), var(--pm-primary-2), var(--pm-success));
    box-shadow: 0 16px 34px rgba(37,99,235,.22);
}

.pm-btn-primary:hover {
    color: #fff;
    box-shadow: 0 22px 44px rgba(37,99,235,.26);
}

.pm-btn-light {
    color: var(--pm-text);
    background: rgba(255,255,255,.94);
    border-color: var(--pm-line);
    box-shadow: var(--pm-shadow-soft);
}

.pm-btn-light:hover {
    color: var(--pm-text);
    background: #fff;
}

.pm-account {
    position: relative;
}

.pm-account-menu {
    min-width: 250px;
    border: 1px solid var(--pm-line);
    border-radius: 18px;
    padding: 10px;
    box-shadow: var(--pm-shadow);
    background: rgba(255,255,255,.98);
}

.pm-account-head {
    padding: 10px 12px 12px;
    border-bottom: 1px solid rgba(15,23,42,.06);
    margin-bottom: 8px;
}

.pm-account-head strong {
    display: block;
    color: var(--pm-text);
    font-weight: 600;
    letter-spacing: -.01em;
}

.pm-account-head span {
    display: block;
    color: var(--pm-muted);
    font-size: .85rem;
    margin-top: 2px;
    word-break: break-word;
    font-weight: 400;
}

.pm-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--pm-text);
    font-weight: 500;
    transition: .16s ease;
    letter-spacing: .005em;
}

.pm-dropdown-item:hover {
    background: rgba(37,99,235,.08);
    color: var(--pm-primary);
}

.pm-flash {
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 500;
    box-shadow: var(--pm-shadow);
    border: 1px solid var(--pm-line);
    background: #fff;
    letter-spacing: .003em;
}

.pm-flash-success {
    border-color: rgba(16,185,129,.18);
    background: rgba(16,185,129,.08);
    color: #065f46;
}

.pm-flash-error,
.pm-flash-danger {
    border-color: rgba(239,68,68,.18);
    background: rgba(239,68,68,.08);
    color: #991b1b;
}

.pm-flash-warning {
    border-color: rgba(245,158,11,.18);
    background: rgba(245,158,11,.10);
    color: #92400e;
}

.pm-flash-info {
    border-color: rgba(37,99,235,.18);
    background: rgba(37,99,235,.08);
    color: #1d4ed8;
}

.pm-page {
    padding: 0 !important;
    margin: 0 !important;
}

.pm-footer {
    flex-shrink: 0;
    margin-top: 0 !important;
    background:
        radial-gradient(900px circle at 10% 0%, rgba(37,99,235,.14), transparent 45%),
        radial-gradient(900px circle at 90% 10%, rgba(16,185,129,.10), transparent 42%),
        linear-gradient(135deg, #0f172a 0%, #111827 55%, #1e293b 100%);
    color: #fff;
    border-top: 1px solid rgba(255,255,255,.08);
}

.pm-footer-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: 12px;
    color: #fff;
}

.pm-footer-text {
    color: rgba(255,255,255,.75);
    font-weight: 400;
    line-height: 1.75;
    margin: 0;
}

.pm-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pm-footer-links li + li {
    margin-top: 10px;
}

.pm-footer-links a {
    color: rgba(255,255,255,.78);
    text-decoration: none;
    font-weight: 400;
    transition: .16s ease;
    letter-spacing: .01em;
}

.pm-footer-links a:hover {
    color: #fff;
}

.pm-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.pm-footer-brand-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    padding: 6px;
}

.pm-footer-brand strong {
    color: #fff;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.pm-footer-brand span {
    display: block;
    color: rgba(255,255,255,.70);
    font-size: .78rem;
    font-weight: 400;
    margin-top: 2px;
    letter-spacing: .01em;
}

.pm-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.68);
    font-weight: 400;
    font-size: .92rem;
    letter-spacing: .01em;
}

.navbar-toggler{
    width: 46px;
    height: 46px;
    border-radius: 14px !important;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--pm-line-strong) !important;
    box-shadow: var(--pm-shadow-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-toggler:focus{
    box-shadow: none !important;
}

.navbar-toggler-icon{
    width: 1.2rem;
    height: 1.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(15,23,42,0.90)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

@media (max-width: 991.98px){
    #pmNavbar{
        margin-top: 14px;
        padding: 12px;
        border-radius: 18px;
        border: 1px solid var(--pm-line);
        background: rgba(255,255,255,.96);
        box-shadow: var(--pm-shadow-soft);
    }

    #pmNavbar .navbar-nav{
        gap: 6px;
    }

    #pmNavbar .nav-link{
        padding: 12px 14px !important;
    }

    #pmNavbar .d-flex.align-items-center.gap-2{
        margin-top: 12px;
        width: 100%;
    }

    #pmNavbar .pm-btn{
        width: 100%;
    }
}

.pm-flash-container{
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 24px));
}

.pm-flash{
    border-radius: 16px;
    padding: 14px 16px;
    font-size: .83rem;
    font-weight: 600;
    line-height: 1.55;
    color: #0f172a;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 18px 38px rgba(2,6,23,.12);
    backdrop-filter: blur(10px);
    opacity: 1;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s ease;
}

.pm-flash-success{
    border-left: 4px solid #10b981;
}

.pm-flash-error,
.pm-flash-danger{
    border-left: 4px solid #ef4444;
}

.pm-flash-warning{
    border-left: 4px solid #f59e0b;
}

.pm-flash-info{
    border-left: 4px solid #2563eb;
}

.pm-flash.is-hiding{
    opacity: 0;
    transform: translateY(-8px);
}


.pm-navbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.pm-menu{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
}

.pm-menu-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:12px;
    color:#1f2937 !important;
    font-weight:500;
    text-decoration:none;
    transition:.2s ease;
}

.pm-menu-link:hover,
.pm-menu-link.active{
    background: rgba(37,99,235,.10);
    color:#2563eb !important;
}

.pm-buttons{
    display:flex;
    align-items:center;
    gap:10px;
}

.pm-btn-light{
    background: rgba(255,255,255,.94);
    border: 1px solid var(--pm-line);
    color: var(--pm-text) !important;
}

.pm-btn-primary{
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color:#fff;
}

.pm-hamburger{
    background: rgba(255,255,255,.94);
    border: 1px solid var(--pm-line);
    color:#1f2937;
    width:44px;
    height:44px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}


body.page-marketing .pm-navbar .container,
body.page-marketing .pm-navbar-inner{
    background: transparent !important;
}

body.page-marketing .pm-menu-link{
    color:#ffffff !important;
}

body.page-marketing .pm-menu-link:hover,
body.page-marketing .pm-menu-link.active{
    background: rgba(255,255,255,.15);
    color:#ffffff !important;
}

body.page-marketing .pm-btn-light{
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    color:#ffffff !important;
    box-shadow: none !important;
}

body.page-marketing .pm-hamburger{
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    color:#ffffff !important;
    box-shadow: none !important;
}

/* logo en couleur */
body.page-marketing .menu-brand,
body.page-marketing .menu-brand img,
body.page-marketing .menu-brand svg{
    filter: none !important;
}



body.page-marketing .pm-navbar.is-scrolled .container,
body.page-marketing .pm-navbar.scrolled .container,
body.page-marketing .pm-navbar.is-scrolled .pm-navbar-inner,
body.page-marketing .pm-navbar.scrolled .pm-navbar-inner{
    background: transparent !important;
}

body.page-marketing .pm-navbar.is-scrolled .pm-menu-link,
body.page-marketing .pm-navbar.scrolled .pm-menu-link{
    color:#1f2937 !important;
}

body.page-marketing .pm-navbar.is-scrolled .pm-menu-link:hover,
body.page-marketing .pm-navbar.is-scrolled .pm-menu-link.active,
body.page-marketing .pm-navbar.scrolled .pm-menu-link:hover,
body.page-marketing .pm-navbar.scrolled .pm-menu-link.active{
    background: rgba(37,99,235,.10) !important;
    color:#2563eb !important;
}

body.page-marketing .pm-navbar.is-scrolled .pm-btn-light,
body.page-marketing .pm-navbar.scrolled .pm-btn-light{
    background:#ffffff !important;
    border-color:#e2e8f0 !important;
    color:#1f2937 !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
}

body.page-marketing .pm-navbar.is-scrolled .pm-hamburger,
body.page-marketing .pm-navbar.scrolled .pm-hamburger{
    background:#ffffff !important;
    border-color:#e2e8f0 !important;
    color:#1f2937 !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
}

body.page-marketing .pm-navbar.is-scrolled .menu-brand,
body.page-marketing .pm-navbar.is-scrolled .menu-brand img,
body.page-marketing .pm-navbar.is-scrolled .menu-brand svg,
body.page-marketing .pm-navbar.scrolled .menu-brand,
body.page-marketing .pm-navbar.scrolled .menu-brand img,
body.page-marketing .pm-navbar.scrolled .menu-brand svg{
    filter: none !important;
}

@media (max-width: 991.98px){
    body.page-marketing .pm-navbar{
        padding: 10px 0 !important;
    }
}

/* Menu mobile */
.pm-mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background: white;
    z-index: 10000;
    transition: left 0.3s;
    padding: 20px;
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
}
.pm-mobile-menu.open {
    left: 0;
}
.pm-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 20px;
}
.pm-mobile-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.pm-mobile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    color: #1f2937;
    text-decoration: none;
    font-weight: 500;
}
.pm-mobile-link:hover {
    background: #f1f5f9;
}
.pm-mobile-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Overlay menu mobile fermé par défaut */
.pm-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;

    opacity: 0;
    visibility: hidden;

    transition: opacity .2s ease, visibility .2s ease;
}

/* Visible uniquement quand le menu mobile est réellement ouvert */
body.pm-menu-open .pm-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.pm-mobile-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0.5rem;
    /* autres styles existants */
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.menu-brand{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    height:40px;
    line-height:1;
    padding:0;
    margin:0;
    text-decoration:none;
    overflow:hidden;
    flex-shrink:0;
}

.menu-brand svg,
.menu-brand img{
    display:block;
    height:32px !important;
    width:auto !important;
    max-height:32px;
}

.pm-footer{
padding: 70px 0 24px;
}

.pm-footer-brand-block{
max-width: 320px;
}

.pm-footer-desc{
margin-top: 16px;
color: rgba(255,255,255,.72);
font-size: .95rem;
line-height: 1.7;
}

.pm-footer-title{
margin-bottom: 16px;
color: #fff;
font-size: .98rem;
font-weight: 800;
}

.pm-footer-links{
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}

.pm-footer-links li{
margin: 0;
}

.pm-footer-links a{
color: rgba(255,255,255,.72);
text-decoration: none;
font-size: .95rem;
font-weight: 500;
transition: .18s ease;
}

.pm-footer-links a:hover{
color: #fff;
}

.pm-footer-socials{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}

.pm-social-link{
width: 42px;
height: 42px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: rgba(255,255,255,.78);
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.10);
transition: .18s ease;
}

.pm-social-link:hover{
color: #fff;
background: rgba(255,255,255,.14);
transform: translateY(-2px);
}

.pm-footer-bottom{
margin-top: 34px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.10);
text-align: center;
color: rgba(255,255,255,.70);
font-size: .92rem;
line-height: 1.7;
}

.pm-footer-sep{
display: inline-block;
margin: 0 8px;
opacity: .5;
}

@media (max-width: 991.98px){
.pm-footer{
    padding: 54px 0 22px;
}

.pm-footer-brand-block{
    max-width: 100%;
}
}

@media (max-width: 575.98px){
.pm-footer{
    padding: 42px 0 20px;
}

.pm-footer-title{
    margin-bottom: 12px;
    font-size: .95rem;
}

.pm-footer-links{
    gap: 8px;
}

.pm-footer-links a{
    font-size: .92rem;
}

.pm-footer-socials{
    gap: 10px;
}

.pm-social-link{
    width: 40px;
    height: 40px;
}

.pm-footer-bottom{
    margin-top: 26px;
    font-size: .88rem;
}

.pm-footer-sep{
    display: none;
}
}

.pm-user-dropdown{
    position: relative;
}

.pm-user-dropdown .dropdown-toggle::after{
    margin-left: .55rem;
    vertical-align: .12rem;
    border-top: .32em solid currentColor;
    border-right: .26em solid transparent;
    border-left: .26em solid transparent;
    opacity: .5;
    transition: transform .2s ease, opacity .2s ease;
}

.pm-user-dropdown .dropdown-toggle.show::after{
    transform: rotate(180deg);
    opacity: .85;
}

.pm-user-trigger{
    display: inline-flex;
    align-items: center;
    gap: .78rem;
    padding: .58rem .95rem .58rem .68rem;
    min-height: 48px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(248,250,252,.72) 100%);
    box-shadow:
        0 14px 32px rgba(15, 23, 42, .08),
        inset 0 1px 0 rgba(255,255,255,.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #0f172a;
    transition: all .22s ease;
}

.pm-user-trigger:hover,
.pm-user-trigger:focus,
.pm-user-trigger.show{
    color: #0f172a;
    border-color: rgba(96,165,250,.25);
    background:
        linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,250,252,.82) 100%);
    box-shadow:
        0 18px 36px rgba(15, 23, 42, .1),
        0 0 0 4px rgba(59,130,246,.06),
        inset 0 1px 0 rgba(255,255,255,.88);
    transform: translateY(-1px);
}

.pm-user-avatar{
    position: relative;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
    color: #2563eb;
    border: 1px solid rgba(59,130,246,.14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        0 8px 18px rgba(37,99,235,.12);
    font-size: .92rem;
}

.pm-user-avatar::after{
    content: "";
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px rgba(34,197,94,.14);
}

.pm-user-meta{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
    min-width: 0;
}

.pm-user-name{
    font-size: .81rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -.01em;
    max-width: 165px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-user-subtitle{
    margin-top: .22rem;
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}

.pm-dropdown-menu{
    width: 320px;
    padding: .6rem;
    margin-top: .8rem !important;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,250,252,.86) 100%);
    box-shadow:
        0 26px 70px rgba(15, 23, 42, .16),
        0 8px 24px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    min-width: unset;
    overflow: hidden;
}

.pm-dropdown-top{
    position: relative;
    padding: .95rem;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(96,165,250,.16), transparent 38%),
        linear-gradient(180deg, rgba(241,245,249,.95) 0%, rgba(248,250,252,.92) 100%);
    border: 1px solid rgba(148,163,184,.12);
    margin-bottom: .52rem;
}

.pm-dropdown-top-inner{
    display: flex;
    align-items: center;
    gap: .82rem;
    min-width: 0;
}

.pm-dropdown-top-avatar{
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #bfdbfe 0%, #c7d2fe 100%);
    color: #1d4ed8;
    border: 1px solid rgba(59,130,246,.14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.78),
        0 12px 22px rgba(59,130,246,.12);
    font-size: 1rem;
}

.pm-dropdown-top-text{
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pm-dropdown-top-title{
    font-size: .83rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.01em;
}

.pm-dropdown-top-mail{
    margin-top: .22rem;
    font-size: .72rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-dropdown-badge{
    display: inline-flex;
    align-items: center;
    gap: .34rem;
    margin-top: .55rem;
    padding: .3rem .56rem;
    border-radius: 999px;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(148,163,184,.15);
    color: #475569;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    width: fit-content;
}

.pm-dropdown-divider{
    border: 0;
    height: 1px;
    margin: .52rem .2rem;
    background: linear-gradient(90deg, transparent, rgba(148,163,184,.26), transparent);
}

.pm-dropdown-item{
    display: flex;
    align-items: center;
    gap: .78rem;
    padding: .82rem .86rem;
    border-radius: 16px;
    text-decoration: none;
    color: #0f172a;
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .005em;
    transition: all .18s ease;
    position: relative;
}

.pm-dropdown-item:hover{
    color: #0f172a;
    background:
        linear-gradient(90deg, rgba(255,255,255,.88), rgba(241,245,249,.94));
    transform: translateX(2px);
}

.pm-dropdown-item-icon{
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(241,245,249,.95));
    border: 1px solid rgba(148,163,184,.14);
    color: #64748b;
    font-size: .85rem;
    transition: all .18s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.pm-dropdown-item:hover .pm-dropdown-item-icon{
    color: #2563eb;
    border-color: rgba(59,130,246,.15);
    background: linear-gradient(180deg, rgba(239,246,255,.98), rgba(224,231,255,.98));
}

.pm-dropdown-item-text{
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.pm-dropdown-item-label{
    font-size: .78rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.pm-dropdown-item-note{
    margin-top: .14rem;
    font-size: .66rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.25;
}

.pm-dropdown-item-arrow{
    color: #94a3b8;
    font-size: .72rem;
    transition: transform .18s ease, color .18s ease;
}

.pm-dropdown-item:hover .pm-dropdown-item-arrow{
    color: #2563eb;
    transform: translateX(2px);
}

.pm-dropdown-item-danger{
    color: #b91c1c;
}

.pm-dropdown-item-danger .pm-dropdown-item-label,
.pm-dropdown-item-danger .pm-dropdown-item-note{
    color: inherit;
}

.pm-dropdown-item-danger .pm-dropdown-item-icon{
    color: #dc2626;
    background: linear-gradient(180deg, rgba(254,242,242,.96), rgba(254,226,226,.92));
    border-color: rgba(239,68,68,.12);
}

.pm-dropdown-item-danger:hover{
    background: linear-gradient(90deg, rgba(254,242,242,.96), rgba(254,226,226,.86));
    color: #991b1b;
}

@media (max-width: 576px){
    .pm-user-name{
        max-width: 96px;
    }

    .pm-user-subtitle{
        display: none;
    }

    .pm-dropdown-menu{
        width: 285px;
    }
}

.fd-swal-stack{
    display:flex;
    flex-direction:column;
    gap:12px;
    text-align:left;
}

.fd-swal-banner{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:13px 14px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(245,158,11,.12), rgba(251,191,36,.08));
    border:1px solid rgba(245,158,11,.18);
    color:#92400e;
    font-size:.9rem;
    line-height:1.6;
    font-weight:500;
}

.fd-swal-banner.is-danger{
    background:linear-gradient(180deg, rgba(239,68,68,.10), rgba(248,113,113,.08));
    border:1px solid rgba(239,68,68,.18);
    color:#b91c1c;
}

.fd-swal-panel{
    padding:14px 15px;
    border-radius:18px;
    background:#fff;
    border:1px solid rgba(15,23,42,.07);
    box-shadow:0 8px 24px rgba(15,23,42,.05);
}

.fd-swal-label{
    margin-bottom:7px;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#94a3b8;
}

.fd-swal-message{
    color:#475569;
    font-size:.94rem;
    line-height:1.72;
    font-weight:400;
}

.fd-swal-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}

.fd-swal-stat{
    padding:13px 14px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98));
    border:1px solid rgba(15,23,42,.07);
    box-shadow:0 8px 22px rgba(15,23,42,.04);
}

.fd-swal-stat span{
    display:block;
    margin-bottom:4px;
    font-size:.78rem;
    color:#94a3b8;
    font-weight:600;
}

.fd-swal-stat strong{
    display:block;
    color:#0f172a;
    font-size:1rem;
    font-weight:700;
    letter-spacing:-.02em;
}

.fd-swal-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.fd-swal-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 11px;
    border-radius:999px;
    background:rgba(37,99,235,.08);
    border:1px solid rgba(37,99,235,.10);
    color:#1d4ed8;
    font-size:.8rem;
    font-weight:600;
    line-height:1;
}

.fd-swal-chip-muted{
    background:#f8fafc;
    border:1px solid rgba(15,23,42,.08);
    color:#64748b;
}

@media (max-width: 576px){
    .fd-swal-grid{
        grid-template-columns:1fr;
    }
}

.mol-topbar-lang{
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 1200;
}

.mol-topbar-lang .mol-dd-btn{
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    padding: .55rem .85rem;
    border-radius: 12px;
}

.mol-topbar-lang .mol-dd-caret{
    font-size: 12px;
    transition: transform .25s ease;
}

.mol-topbar-lang.is-open .mol-dd-caret{
    transform: rotate(180deg);
}

.mol-topbar-lang .mol-dd-menu{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .14);
    border: 1px solid rgba(15, 23, 42, .08);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    overflow: hidden;
}

.mol-topbar-lang.is-open .mol-dd-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mol-topbar-lang .mol-dd-item{
    text-decoration: none;
    color: inherit;
}

.mol-topbar-lang .mol-dd-item:hover{
    background: rgba(15, 23, 42, .04);
}
        

/* ===== Footer SaaS VIP (dark premium, super clean) ===== */
.mol-footer{
background:
    radial-gradient(1000px circle at 10% 0%, rgba(13,110,253,.25), transparent 55%),
    radial-gradient(800px circle at 90% 10%, rgba(32,201,151,.18), transparent 55%),
    linear-gradient(180deg, rgba(12,16,26,1), rgba(8,10,16,1));
border-top: 1px solid rgba(255,255,255,.08);
}

.mol-footer-brand .mol-logo{
width: 38px; height: 38px;
display:inline-grid; place-items:center;
border-radius: 12px;
background: linear-gradient(135deg, rgba(13,110,253,.95), rgba(32,201,151,.8));
color:#0b1020; font-weight: 900;
box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.mol-badge{
font-size: .72rem;
padding: .2rem .55rem;
border-radius: 999px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.75);
}

.mol-footer-desc{ max-width: 46ch; }

.mol-footer-title{
color: rgba(255,255,255,.92);
letter-spacing: .2px;
margin-bottom: .75rem;
}

.mol-footer-links li{ margin: .45rem 0; }
.mol-footer-links a{
color: rgba(255,255,255,.65);
text-decoration: none;
transition: .15s ease;
}
.mol-footer-links a:hover{
color: rgba(255,255,255,.95);
transform: translateX(2px);
}

.mol-chip{
font-size: .78rem;
padding: .32rem .6rem;
border-radius: 999px;
color: rgba(255,255,255,.72);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.08);
}

.mol-newsletter{
display:flex;
gap: .6rem;
padding: .55rem;
border-radius: 16px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.mol-input{
flex: 1;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(10,14,24,.55);
color: rgba(255,255,255,.92);
padding: 0 12px;
outline: none;
}
.mol-input::placeholder{ color: rgba(255,255,255,.45); }
.mol-input:focus{
border-color: rgba(13,110,253,.55);
box-shadow: 0 0 0 .25rem rgba(13,110,253,.15);
}

.mol-btn{
height: 44px;
padding: 0 14px;
border: 0;
border-radius: 12px;
color: #071018;
font-weight: 700;
background: linear-gradient(135deg, rgba(13,110,253,1), rgba(32,201,151,1));
box-shadow: 0 14px 30px rgba(0,0,0,.25);
transition: transform .15s ease, filter .15s ease;
}
.mol-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.mol-btn:active{ transform: translateY(0px); }

.mol-social-btn{
width: 38px; height: 38px;
display:inline-grid; place-items:center;
border-radius: 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.78);
text-decoration:none;
transition: .15s ease;
}
.mol-social-btn:hover{
color: rgba(255,255,255,.98);
transform: translateY(-1px);
border-color: rgba(255,255,255,.18);
}

.mol-sep{
border-color: rgba(255,255,255,.08);
opacity: 1;
}

.mol-legal-link{
color: rgba(255,255,255,.65);
text-decoration:none;
font-size: .92rem;
}
.mol-legal-link:hover{ color: rgba(255,255,255,.95); }
.mol-dot{ color: rgba(255,255,255,.25); padding: 0 .25rem; }
        
:root
{
    --mol-border: rgba(15, 23, 42, .10);
    --mol-shadow: 0 18px 45px rgba(2, 6, 23, .12);
    --mol-muted: rgba(15, 23, 42, .62);
    --mol-bg: rgba(255, 255, 255, .96);
    --mol-radius: 18px;
}

.mol-presence-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    border:1px solid transparent;
    white-space:nowrap;
}

.mol-presence-pill__dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:currentColor;
    flex:0 0 8px;
}

.mol-presence-pill.online{
    background:rgba(25,195,125,.12);
    color:#15803d;
    border-color:rgba(25,195,125,.24);
}

.mol-presence-pill.offline{
    background:rgba(148,163,184,.14);
    color:#475569;
    border-color:rgba(148,163,184,.28);
}

.mol-toast__dot.offline{
    background:#9aa0a6;
    box-shadow:0 0 0 3px rgba(154,160,166,.15);
}

.mol-toast__dot.online{
    background:var(--mol-success);
    box-shadow:0 0 0 3px rgba(34,197,94,.14);
}

/* ✅ Panel FIXE quoi qu'il arrive */
.mol-chat-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 380px;
    z-index: 2000;

    background: var(--mol-bg);
    border-left: 1px solid var(--mol-border);
    box-shadow: var(--mol-shadow);
    backdrop-filter: blur(10px);

    transform: translateX(110%);
    transition: transform 0.22s ease;
    display: flex;
    flex-direction: column;
}

/* Ouvert */
body.mol-chat-open .mol-chat-panel {
    transform: translateX(0);
}

.mol-chat-panel__header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--mol-border);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mol-chat-title {
    font-weight: 950;
    font-size: 16px;
}
.mol-chat-sub {
    color: var(--mol-muted);
    font-size: 12px;
    margin-top: 2px;
}

/* Boutons icônes */
.mol-btn-icon {
    border: 0;
    background: rgba(15, 23, 42, .06);
    border-radius: 12px;
    padding: 8px 10px;
}
.mol-btn-icon:hover {
    background: rgba(13, 110, 253, .10);
}

/* Body scrolle uniquement ici */
.mol-chat-panel__body {
    padding: 10px 14px 14px;
    overflow-y: auto;
    flex: 1;
}

/* Search */
.mol-search {
    position: relative;
}
.mol-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mol-muted);
}
.mol-search__input {
    border-radius: 999px;
    border: 1px solid var(--mol-border);
    background: rgba(248, 250, 252, .9);
    padding-left: 42px;
}

/* Liste conversations */
.mol-chat-list {
    margin-top: 12px;
}
.mol-chat-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 14px;
    transition: 0.15s ease;
    cursor: pointer;
}
.mol-chat-item:hover {
    background: rgba(13, 110, 253, .08);
}

/* Dock bubbles fixed */
.mol-toast-dock {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2100;
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-direction: row-reverse;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    padding: 6px;
}

.mol-chat-panel{
    transform: translateX(110%);
    transition: transform .25s ease;
    }
    .mol-chat-panel.is-open{
    transform: translateX(0);
}


.mol-chat-item{
cursor:pointer;
padding:8px;
border-radius:12px;
transition: background .15s ease;
}
.mol-chat-item:hover{
background: rgba(0,0,0,0.05);
}

.mol-friend-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.mol-friend-row{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px;
    border-radius:14px;
    background:white;
    transition:all .15s ease;
    border:1px solid rgba(0,0,0,.05);
}

.mol-friend-row:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 25px rgba(0,0,0,.08);
}

.mol-avatar-wrapper{
    position:relative;
    width:46px;
    height:46px;
}

.mol-avatar{
    width:46px;
    height:46px;
    border-radius:50%;
    object-fit:cover;
}

.mol-status{
    position:absolute;
    bottom:0;
    right:0;
    width:10px;
    height:10px;
    border-radius:50%;
    border:2px solid white;
}

.mol-status.online{ background:#19c37d; }
.mol-status.offline{ background:#9aa0a6; }

.mol-friend-info{ flex:1; }

.mol-friend-name{
    font-weight:700;
    font-size:.95rem;
}

.mol-friend-meta{
    font-size:.75rem;
    color:rgba(0,0,0,.45);
}

.mol-friend-actions{
    display:flex;
    gap:6px;
}

/* =========================================================
FIX ICONS dropdown conversation (mobile)
- Ne touche pas la topbar
- Ne touche que la bubble/toast du chat
========================================================= */
@media (max-width: 991.98px){

/* Force les icônes visibles dans le menu */
#molChatToasts .dropdown-menu .dropdown-item i,
#molChatToasts .dropdown-menu .dropdown-item .bi,
#molChatToasts .dropdown-menu .dropdown-item .fa,
#molChatToasts .dropdown-menu .dropdown-item .fw-icon{
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    width: 1.25rem !important;
    min-width: 1.25rem !important;
    text-align: center !important;
}

/* Evite que le thème écrase la place des icônes */
#molChatToasts .dropdown-menu .dropdown-item{
    gap: .6rem !important;
}
}

.mol-chat-item .small,
.mol-chat-item .text-secondary,
.mol-bubble-left,
.mol-time,
.mol-meta {
    color: #000 !important;
}
/* ===== CHAT TOAST LAYER FIX ===== */

.toast-chat-layer{
    position: fixed;
    bottom: 20px;

    /* 👇 ajuste à la largeur réelle de ton panel */
    right: 380px;   /* distance depuis le bord droit */

    z-index: 9999;  /* AU-DESSUS DU PANEL */
    
    display: flex;
    flex-direction: column;
    gap: 12px;

}

/* chaque bubble */
.toast-chat-layer .toast{
    pointer-events: auto;
    min-width: 320px;
}

/* ===== CHAT BUBBLE POSITION FIX ===== */

.mol-toast-chat{
    right: 380px;          /* ← décale à gauche du panel */
    bottom: 20px;
    z-index: 9999;         /* ← AU-DESSUS de tout */
    pointer-events: none;
}

.mol-toast-chat .toast{
    pointer-events: auto;
    min-width: 320px;
}
/* ===== MULTI CHAT LAYER ===== */

.mol-toast-chat{
    position: fixed;
    bottom: 20px;

    /* distance depuis le panel */
    right: 380px;

    z-index: 9999;

    display: flex;
    flex-direction: row-reverse;   /* 👈 IMPORTANT */
    gap: 12px;

    align-items: flex-end;
    pointer-events: none;

    max-width: calc(100vw - 420px);
}

/* Chaque bubble */
.mol-toast-chat .toast{
    pointer-events: auto;
    min-width: 320px;
    max-width: 320px;
}

/* =========================
MOL Chat Toast — Premium
========================= */

:root{
    --mol-radius: 18px;
    --mol-radius-sm: 14px;
    --mol-border: rgba(15,23,42,.08);
    --mol-muted: rgba(15,23,42,.62);

    --mol-bg: #ffffff;
    --mol-surface: rgba(255,255,255,.92);
    --mol-soft: rgba(2,6,23,.03);

    --mol-shadow: 0 18px 45px rgba(2,6,23,.14);
    --mol-shadow-sm: 0 10px 25px rgba(2,6,23,.10);

    --mol-primary: #2563eb;
    --mol-primary-2: #60a5fa;
    --mol-success: #22c55e;
}

.mol-toast{
    width: 360px;
    border: 1px solid var(--mol-border);
    border-radius: var(--mol-radius);
    overflow: hidden;
    background: var(--mol-bg);
    box-shadow: var(--mol-shadow);
    backdrop-filter: blur(10px);
}

/* Header */
.mol-toast .toast-header{
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
    border-bottom: 1px solid var(--mol-border);
}
.mol-toast__avatar{
    width: 40px; height: 40px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 8px 18px rgba(2,6,23,.10);
}
.mol-toast__avatar img{ width: 100%; height: 100%; object-fit: cover; }

.mol-toast__title{
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.1;
}
.mol-toast__status{
    font-size: 12px;
    color: var(--mol-muted);
    display:flex; align-items:center; gap:6px;
}
.mol-toast__dot{
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--mol-success);
    box-shadow: 0 0 0 3px rgba(34,197,94,.14);
}

/* Header buttons (premium pills) */
.mol-toast .btn-icon{
    width: 34px; height: 34px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius: 12px;
    border: 1px solid var(--mol-border);
    background: rgba(255,255,255,.85);
    box-shadow: 0 8px 18px rgba(2,6,23,.08);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mol-toast .btn-icon:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(2,6,23,.14);
    background: rgba(255,255,255,.95);
}
.mol-toast .btn-icon:active{ transform: translateY(0); }

/* Messages zone */
.mol-toast__msgs{
    height: 240px;
    overflow: auto;
    padding: 14px;
    background:
        radial-gradient(900px circle at 20% 0%, rgba(37,99,235,.07), transparent 55%),
        radial-gradient(900px circle at 90% 20%, rgba(34,197,94,.06), transparent 55%),
        linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.015));
}

/* nice scrollbar */
.mol-toast__msgs::-webkit-scrollbar{ width: 10px; }
.mol-toast__msgs::-webkit-scrollbar-thumb{
    background: rgba(15,23,42,.12);
    border-radius: 99px;
    border: 3px solid rgba(255,255,255,.55);
}
.mol-toast__msgs::-webkit-scrollbar-thumb:hover{ background: rgba(15,23,42,.18); }

/* Chat bubbles */
.mol-msg{
    display:flex;
    margin: 8px 0;
}
.mol-msg--me{ justify-content: flex-end; }

.mol-bubble{
    max-width: 78%;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.06);
    box-shadow: 0 10px 22px rgba(2,6,23,.08);
    font-size: 13.5px;
    line-height: 1.35;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.mol-bubble--me{
    background: linear-gradient(135deg, var(--mol-primary), var(--mol-primary-2));
    color: white;
    border-color: rgba(255,255,255,.18);
}
.mol-bubble--other{
    background: rgba(255,255,255,.92);
    color: rgba(2,6,23,.92);
}

/* little tail */
.mol-bubble--me::after,
.mol-bubble--other::after{
    content:"";
    position:absolute;
    bottom: 6px;
    width: 14px; height: 14px;
    transform: rotate(45deg);
    border-radius: 4px;
    z-index: 0;
}
.mol-bubble--me::after{
    right: -6px;
    background: linear-gradient(135deg, var(--mol-primary), var(--mol-primary-2));
}
.mol-bubble--other::after{
    left: -6px;
    background: rgba(255,255,255,.92);
    border-left: 1px solid rgba(15,23,42,.06);
    border-bottom: 1px solid rgba(15,23,42,.06);
}

.mol-meta{
    margin-top: 4px;
    font-size: 11px;
    color: rgba(15,23,42,.55);
}
.mol-msg--me .mol-meta{ text-align: right; color: rgba(255,255,255,.78); }

/* Input bar (Messenger vibe) */
.mol-inputbar{
    padding: 10px;
    border-top: 1px solid var(--mol-border);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
}

.mol-inputwrap{
    display:flex;
    align-items:flex-end;
    gap: 8px;
}

.mol-tools{
    display:flex;
    gap: 6px;
    align-items:flex-end;
}

.mol-toolbtn{
    width: 36px; height: 36px;
    border-radius: 999px;
    border: 1px solid var(--mol-border);
    background: rgba(255,255,255,.9);
    box-shadow: 0 10px 18px rgba(2,6,23,.08);
    display:flex; align-items:center; justify-content:center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.mol-toolbtn:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 26px rgba(2,6,23,.14);
}

.mol-textarea{
    flex: 1;
    resize: none;
    min-height: 36px;
    max-height: 110px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid var(--mol-border);
    background: rgba(255,255,255,.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    outline: none;
    font-size: 13.5px;
    line-height: 1.2;
}
.mol-textarea:focus{
    border-color: rgba(37,99,235,.35);
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.mol-send{
    width: 42px; height: 42px;
    border-radius: 999px;
    border: 0;
    color: white;
    background: linear-gradient(135deg, var(--mol-primary), var(--mol-primary-2));
    box-shadow: 0 16px 30px rgba(37,99,235,.28);
    display:flex; align-items:center; justify-content:center;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.mol-send:hover{
    transform: translateY(-1px);
    box-shadow: 0 22px 38px rgba(37,99,235,.34);
}
.mol-send:active{ transform: translateY(0); filter: brightness(.98); }

/* Emoji popup (simple) */
.mol-emoji-pop{
    position:absolute;
    bottom: 58px;
    left: 12px;
    width: 280px;
    background: rgba(255,255,255,.98);
    border: 1px solid var(--mol-border);
    border-radius: 16px;
    box-shadow: var(--mol-shadow);
    padding: 10px;
    display:none;
}
.mol-emoji-pop.show{ display:block; }
.mol-emoji-grid{
    display:grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
}
.mol-emoji{
    width: 26px; height: 26px;
    border-radius: 10px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition: background .12s ease, transform .12s ease;
}
.mol-emoji:hover{ background: rgba(2,6,23,.06); transform: translateY(-1px); }


/* Conteneur des bulles (toasts) : horizontal, côte à côte */
#molChatToasts{
    position: fixed;
    bottom: 16px;

    /* ✅ clé du fix : bulles à gauche du panel */
    right: 380px;              /* largeur du panel Messaging */

    z-index: 9999;

    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;

    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px;

    max-width: calc(100vw - 460px); /* évite débordement */
    -webkit-overflow-scrolling: touch;
}

#molChatToasts .toast{
flex: 0 0 auto;
}


#molChatToasts{ display:flex !important; flex-direction:row !important; }


/* --- Anim toast appear --- */
@keyframes mol-pop {
    0% { transform: translateY(12px) scale(.96); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes mol-shake {
    0%,100%{ transform: translateX(0); }
    25%{ transform: translateX(-2px); }
    75%{ transform: translateX(2px); }
}

/* Appliquer à chaque toast */
#molChatToasts .toast{
    animation: mol-pop .18s ease-out;
    transform-origin: bottom right;
}

/* dropdown du header dans la bubble */
#molChatToasts .toast { overflow: visible !important; }
#molChatToasts .toast-header { overflow: visible !important; }

#molChatToasts .chat-header-actions { position: relative; z-index: 1065; }
#molChatToasts .chat-header-actions .dropdown-menu { z-index: 99999; }


/* Minimized: toast body caché, taille réduite */
.mol-minimized{
    width: 70px !important;
    border-radius: 999px !important;
}
.mol-minimized .toast-body,
.mol-minimized [id^="molToastBody-"]{
    display:none !important;
}
.mol-minimized .toast-header{
    border-bottom: 0 !important;
    padding: 8px 10px !important;
}
.mol-minimized .mol-title-wrap{
    display:none !important;
}

/* Dock avatars (pour mode overflow) */
#molChatDock{
    position: fixed;
    bottom: 16px;
    right: 16px; /* si tu as panel, tu peux mettre right: 360px aussi */
    z-index: 9999;

    display:flex;
    gap: 10px;
    align-items:flex-end;
    padding: 6px;
}
.mol-dock-pill{
    height: 44px;
    display:flex;
    align-items:center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 18px 40px rgba(2,6,23,.14);
    cursor:pointer;
    user-select:none;
}
.mol-dock-pill:hover{ animation: mol-shake .15s ease-in-out; }
.mol-dock-ava{
    width: 32px; height: 32px; border-radius:999px; overflow:hidden;
    border: 1px solid rgba(255,255,255,.8);
}
.mol-dock-ava img{ width:100%; height:100%; object-fit:cover; }
.mol-dock-count{
    font-weight: 800;
    font-size: 12px;
    color: rgba(2,6,23,.78);
}

/* Typing indicator bubble */
.mol-typing{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 22px rgba(2,6,23,.08);
}
.mol-dots{
    display:inline-flex;
    gap: 4px;
}
.mol-dot{
    width: 6px; height: 6px; border-radius: 99px;
    background: rgba(2,6,23,.35);
    animation: mol-dot 1s infinite ease-in-out;
}
.mol-dot:nth-child(2){ animation-delay: .12s; }
.mol-dot:nth-child(3){ animation-delay: .24s; }
    @keyframes mol-dot{
    0%,100%{ transform: translateY(0); opacity:.45; }
    50%{ transform: translateY(-4px); opacity:1; }
}

/* Emoji picker TOUJOURS au-dessus des toasts */
body .emoji-picker {
    z-index: 999999 !important;
}

    /* Force EmojiButton au-dessus de TOUTE l’UI */
body > .emoji-picker {
    position: fixed !important;
    z-index: 2147483647 !important; /* max safe */
}

/* Certaines versions utilisent ces classes internes */
.emoji-picker,
.emoji-picker__wrapper {
    z-index: 2147483647 !important;
}


#molChatToasts{
    position: fixed;
    z-index: 9999;
}

.mol-msg-avatar{
    width:18px;
    height:18px;
    object-fit:cover;
    border-radius:999px;
    margin-top:2px;
    }

    .mol-time{
    font-size:10px;
    opacity:.65;
    display:flex;
    align-items:center;
    gap:4px;
    }

    .mol-check{
    font-size:12px;
    position:relative;
    top:1px;
    }


/* =========================
FIX MOBILE CHAT BOTTOM BAR
========================= */
@media (max-width: 991.98px){

/* Le panel doit vraiment occuper l'écran visible */
.mol-chat-panel{
    top: var(--mol-topbar-h, 0px) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--mol-topbar-h, 0px)) !important;
    max-height: calc(100dvh - var(--mol-topbar-h, 0px)) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Le body du panel doit laisser vivre la conversation */
.mol-chat-panel__body{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
}

/* Vue conversation mobile */
#molChatThread{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Important : ne pas laisser le collapse casser le flex */
#molChatThreadBody{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* La liste des messages scrolle, pas la barre du bas */
#molChatThreadMsgs{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 10px !important;
}

/* Barre de saisie toujours visible */
#molChatThread .mol-inputbar{
    position: relative !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    z-index: 8 !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
}

/* La rangée du bas ne doit jamais sortir */
#molChatThread .mol-inputwrap,
#molChatThread .mol-bottombar__row{
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
}

#molChatThread .mol-tools,
#molChatThread .mol-bottombar__left,
#molChatThread .mol-bottombar__right{
    flex: 0 0 auto !important;
}

#molChatThread .mol-textarea,
#molChatThread .mol-compose__input{
    min-width: 0 !important;
    width: 100% !important;
}

/* ===== Fix aussi pour les bulles/toasts de conversation sur mobile ===== */
#molChatToasts{
    left: 12px !important;
    right: 12px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    max-width: none !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

#molChatToasts .toast{
    width: 100% !important;
    max-width: 100% !important;
}

#molChatToasts .toast-body{
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

#molChatToasts [id^="molToastMsgs-"]{
    flex: 1 1 auto !important;
    min-height: 180px !important;
    max-height: 42vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#molChatToasts .mol-bottombar{
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 5 !important;
    background: #fff !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
}
}


@media (max-width: 991.98px){

.mol-chat-panel{
    top: var(--mol-topbar-h, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--mol-topbar-h, 0px)) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.mol-chat-panel__body{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#molChatThread{
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
}

#molChatThreadBody{
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#molChatThreadMsgs{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

#molChatThread .mol-inputbar{
    position: relative !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    z-index: 20 !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
}

#molChatToasts{
    left: 12px !important;
    right: 12px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    width: auto !important;
    max-width: none !important;
    flex-direction: column !important;
}

#molChatToasts .toast{
    width: 100% !important;
    max-width: 100% !important;
}

#molChatToasts [id^="molToastMsgs-"]{
    max-height: 42vh !important;
    overflow-y: auto !important;
}

#molChatToasts .mol-bottombar{
    position: relative !important;
    background: #fff !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
}
}

.mol-avatar-wrap{
    position:relative;width:38px;height:38px;border-radius:999px;flex:0 0 38px;
}
.mol-avatar-status-dot{
    position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:999px;
    border:2px solid #fff;box-shadow:0 0 0 1px rgba(15,23,42,.08);z-index:3;
}
.mol-avatar-status-dot.is-online{background:#16a34a}
.mol-avatar-status-dot.is-recently-offline{background:#f59e0b}
.mol-avatar-status-dot.is-offline{background:#ef4444}

.mol-msg-row{
    position:relative;
    transition:transform .18s ease;
    will-change:transform;
    user-select:none;
}
.mol-msg-card{
    max-width:min(82%, 520px);
    border-radius:18px;
    padding:10px 12px;
    box-shadow:0 8px 24px rgba(15,23,42,.06);
    border:1px solid rgba(15,23,42,.06);
    overflow:hidden;
}
.mol-msg-card.mine{
    background:linear-gradient(180deg,#2563eb,#1d4ed8);
    color:#fff;
    border-bottom-right-radius:8px;
}
.mol-msg-card.other{
    background:#fff;
    color:#0f172a;
    border-bottom-left-radius:8px;
}
.mol-msg-meta{
    font-size:.75rem;
    opacity:.85;
    margin-top:4px;
}
.mol-msg-reply-quote{
    border-left:3px solid rgba(255,255,255,.45);
    background:rgba(255,255,255,.10);
    padding:7px 9px;
    border-radius:10px;
    margin-bottom:8px;
    font-size:.82rem;
}
.mol-msg-card.other .mol-msg-reply-quote{
    border-left-color:#3b82f6;
    background:#eff6ff;
}

.mol-attachment{
    display:flex;align-items:center;gap:10px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;padding:10px 12px;
    margin-top:6px;
}
.mol-msg-card.other .mol-attachment{
    background:#f8fafc;border-color:#e2e8f0;
}
.mol-attachment__icon{
    width:36px;height:36px;border-radius:12px;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.16);
    flex:0 0 36px;
}
.mol-msg-card.other .mol-attachment__icon{background:#e2e8f0}
.mol-attachment__name{
    font-weight:700;line-height:1.2;
    word-break:break-word;
}
.mol-attachment__meta{
    font-size:.78rem;opacity:.8;
}
.mol-attachment__download{
    margin-left:auto;
    width:34px;height:34px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
    text-decoration:none;
    color:inherit;
    background:rgba(255,255,255,.12);
}
.mol-msg-card.other .mol-attachment__download{background:#e2e8f0}

.mol-voice-wrap{
    display:flex;align-items:center;gap:8px;
    margin-top:6px;padding:8px 10px;border-radius:14px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.16);
}
.mol-msg-card.other .mol-voice-wrap{
    background:#f8fafc;border-color:#e2e8f0;
}
.mol-voice-wrap audio{width:100%;height:34px}

.mol-reply-box{
    display:none;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    margin:8px 10px 0;
    border-radius:14px;
    background:#f8fafc;
    border-left:4px solid #2563eb;
}
.mol-reply-box.is-active{display:flex}
.mol-reply-box__title{
    font-size:.78rem;font-weight:800;color:#2563eb;margin-bottom:2px;
}
.mol-reply-box__text{
    font-size:.82rem;color:#334155;line-height:1.25;word-break:break-word;
}
.mol-reply-close{
    border:0;background:transparent;color:#64748b;
    width:28px;height:28px;border-radius:999px;
}

.mol-inputbar{
    border-top:1px solid rgba(15,23,42,.06);
    background:#fff;
}
.mol-inputwrap{
    display:flex;align-items:flex-end;gap:8px;padding:10px;
}
.mol-tools{
    display:flex;align-items:center;gap:6px;flex:0 0 auto;
}
.mol-toolbtn{
    width:38px;height:38px;border-radius:12px;border:0;
    display:inline-flex;align-items:center;justify-content:center;
    background:#f1f5f9;color:#0f172a;
    transition:.18s ease;
}
.mol-toolbtn:hover{background:#e2e8f0}
.mol-toolbtn.is-recording{
    background:#fee2e2;color:#b91c1c;animation:molPulse 1s infinite;
}
@keyframes molPulse{
    0%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}
    70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}
    100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
}

.mol-textarea{
    min-height:42px;max-height:120px;
    resize:none;overflow:auto;
    border:1px solid #e2e8f0;
    background:#fff;color:#0f172a;
    border-radius:16px;padding:10px 12px;
    flex:1 1 auto;outline:none;
}
.mol-textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.mol-send{
    width:42px;height:42px;border:0;border-radius:14px;
    display:inline-flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,#2563eb,#1d4ed8);
    color:#fff;flex:0 0 auto;
}

.mol-msg-menu{
    position:fixed;z-index:2147483647;min-width:180px;
    background:#fff;border:1px solid rgba(15,23,42,.08);
    border-radius:14px;box-shadow:0 16px 36px rgba(15,23,42,.16);
    padding:6px;display:none;
}
.mol-msg-menu.is-open{display:block}
.mol-msg-menu button{
    width:100%;border:0;background:#fff;color:#0f172a;
    display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;
    text-align:left;
}
.mol-msg-menu button:hover{background:#f8fafc}
.mol-msg-swipe-hint{
    position:absolute;top:50%;transform:translateY(-50%);
    font-size:.78rem;font-weight:700;opacity:.0;transition:.18s ease;
    pointer-events:none;
}
.mol-msg-swipe-hint.reply{left:8px;color:#2563eb}
.mol-msg-swipe-hint.delete{right:8px;color:#dc2626}
.mol-msg-row.is-swiping-right .mol-msg-swipe-hint.reply{opacity:1}
.mol-msg-row.is-swiping-left .mol-msg-swipe-hint.delete{opacity:1}
        
    /* =========================================================
    FIX MOBILE — actions header toast chat
    (3 points / minimize / close invisibles)
    ========================================================= */
    @media (max-width: 991.98px){

    /* 1) Le header ne doit pas couper */
    #molChatToasts .toast-header{
        overflow: visible !important;
    }

    /* 2) L’alignement : empêcher le flex de “manger” les boutons */
    #molChatToasts .toast-header .d-flex.justify-content-between{
        min-width: 0 !important;
    }

    /* 3) Le bloc actions : toujours visible + non compressé */
    #molChatToasts .chat-header-actions{
        display: inline-flex !important;
        align-items: center !important;
        gap: .35rem !important;
        flex: 0 0 auto !important;     /* ✅ ne rétrécit pas */
        white-space: nowrap !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 99999 !important;
    }

    /* 4) Les boutons : taille touch-friendly */
    #molChatToasts .chat-header-actions .btn{
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: .35rem .45rem !important;
        line-height: 1 !important;
    }

    /* 5) Les icônes : forcer visibles */
    #molChatToasts .chat-header-actions i{
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 1rem !important;
    }

    /* 6) Le dropdown doit passer au-dessus */
        #molChatToasts .chat-header-actions .dropdown-menu{
            z-index: 2147483647 !important;
        }
    }

    @media (max-width: 991.98px){
        #molChatToasts .chat-header-actions,
        #molChatToasts .chat-header-actions *{
            display: revert !important;
        }
    }


    /* =========================================================
    FIX: actions du header toast visibles sur mobile
    ========================================================= */
    @media (max-width: 991.98px){

    /* Le wrapper principal du header */
    #molChatToasts .toast-header .d-flex.justify-content-between{
        min-width: 0 !important;           /* autorise le shrink */
    }

    /* Le bloc gauche (avatar + name + status) : doit pouvoir se rétrécir */
    #molChatToasts .toast-header .d-flex.align-items-center{
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    /* Le texte (name + status) doit couper au lieu de pousser */
    #molChatToasts .toast-header .flex-grow-1{
        min-width: 0 !important;
    }
    #molChatToasts .toast-header .flex-grow-1 .fw-bold{
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    #molChatToasts .toast-header .flex-grow-1 .small{
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Le bloc actions : ne doit jamais être écrasé */
    #molChatToasts .chat-header-actions{
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        margin-left: 8px !important;
    }
    }


    /* =========================================================
    HARD FIX (mobile) — forcer l'affichage des actions du header toast
    Ne touche QUE les bulles du chat (#molChatToasts)
    ========================================================= */
    @media (max-width: 991.98px){

    /* Le header reste sur une seule ligne */
    #molChatToasts .toast-header > .d-flex{
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }

    /* Bloc gauche (avatar + nom + status) peut rétrécir */
    #molChatToasts .toast-header > .d-flex > :first-child{
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    /* ✅ Bloc actions : FORCÉ VISIBLE */
    #molChatToasts .chat-header-actions{
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: .35rem !important;

        flex: 0 0 auto !important;
        min-width: max-content !important;
        white-space: nowrap !important;

        opacity: 1 !important;
        visibility: visible !important;

        position: relative !important;
        z-index: 2147483647 !important;
    }

    /* ✅ Les boutons du bloc actions : FORCÉS VISIBLE */
    #molChatToasts .chat-header-actions a,
    #molChatToasts .chat-header-actions button{
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
    }

    /* ✅ Les icônes : FORCÉES VISIBLE */
    #molChatToasts .chat-header-actions i{
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 1rem !important;
        line-height: 1 !important;
    }
    }
    @media (max-width: 991.98px){
    #molChatToasts .toast-header .btn{ display:inline-flex !important; }
    }

    @media (max-width: 991.98px){
        #molChatToasts .toast{
            width: min(360px, calc(100vw - 24px)) !important;
        }

        #molChatToasts .toast-header{
            overflow: visible !important;
        }

        #molChatToasts .chat-header-actions{
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            flex: 0 0 auto !important;
            min-width: max-content !important;
            white-space: nowrap !important;
            gap: 4px !important;
        }
    }

    @media (max-width: 991.98px){
        #molChatThread .chat-thread-actions{
            display:flex !important;
            align-items:center !important;
            justify-content:flex-end !important;
            gap:4px !important;
            flex:0 0 auto !important;
            min-width:max-content !important;
            white-space:nowrap !important;
            overflow:visible !important;
        }

        #molChatThread .chat-thread-actions .btn,
        #molChatThread .chat-thread-actions a.btn{
            display:inline-flex !important;
            align-items:center !important;
            justify-content:center !important;
            width:32px !important;
            height:32px !important;
            padding:0 !important;
            flex:0 0 auto !important;
        }

        #molChatThread .dropdown-menu{
            z-index:2147483647 !important;
        }
    }
        
            .mol-flash-container{
                position: fixed;
                top: calc(env(safe-area-inset-top) + 16px);
                right: calc(env(safe-area-inset-right) + 16px);
                z-index: 2147483647;
                pointer-events: none;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .mol-flash{
                pointer-events: auto;
                min-width: 280px;
                max-width: min(92vw, 420px);
                padding: 14px 18px;
                border-radius: 12px;
                color: #fff;
                font-weight: 600;
                box-shadow: 0 16px 40px rgba(0,0,0,0.20);
                animation: toastIn .35s ease, toastOut .35s ease 4s forwards;
                backdrop-filter: blur(6px);
            }

            .mol-flash-success{ background: rgba(22, 163, 74, .95); }
            .mol-flash-danger{  background: rgba(220, 38, 38, .95); }
            .mol-flash-warning{ background: rgba(245, 158, 11, .95); }

            @keyframes toastIn{
                from{ transform: translate3d(120%,0,0); opacity: 0; }
                to{ transform: translate3d(0,0,0); opacity: 1; }
            }
            @keyframes toastOut{
                to{ transform: translate3d(120%,0,0); opacity: 0; }
            }

            @media (max-width: 576px){
                .mol-flash-container{
                    left: 50%;
                    right: auto;
                    transform: translateX(-50%);
                    top: calc(env(safe-area-inset-top) + 12px);
                    width: calc(100% - 24px);
                    max-width: 520px;
                }

                .mol-flash{
                    width: 100%;
                }
            }
       
            .mol-bottombar{
                background:#fff;
                border-top:1px solid #eef2f7;
                padding:8px 10px 10px;
            }

            .mol-bottombar__row{
                display:flex;
                align-items:flex-end;
                gap:8px;
            }

            .mol-bottombar__left,
            .mol-bottombar__right{
                display:flex;
                align-items:center;
                gap:6px;
                flex:0 0 auto;
            }

            .mol-bottombar__center{
                flex:1 1 auto;
                min-width:0;
            }

            .mol-circle-btn{
                width:40px;
                height:40px;
                border:0;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                background:transparent;
                color:#1877f2;
                transition:.15s ease;
                font-size:1.22rem;
            }

            .mol-circle-btn:hover{
                background:#eff6ff;
            }

            .mol-circle-btn.is-recording{
                background:#fee2e2;
                color:#dc2626;
                animation:molPulse 1s infinite;
            }

            .mol-compose{
                min-height:42px;
                border-radius:999px;
                background:#f0f2f5;
                display:flex;
                align-items:flex-end;
                gap:6px;
                padding:6px 8px 6px 14px;
            }

            .mol-compose__input{
                flex:1 1 auto;
                min-width:0;
                border:0;
                outline:none;
                resize:none;
                background:transparent;
                color:#0f172a;
                min-height:28px;
                max-height:120px;
                overflow:auto;
                padding:6px 0;
                line-height:1.35;
                box-shadow:none !important;
            }

            .mol-compose__input::placeholder{
                color:#6b7280;
            }

            .mol-compose__emoji{
                width:34px;
                height:34px;
                border:0;
                background:transparent;
                color:#1877f2;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                flex:0 0 auto;
                font-size:1.15rem;
            }

            .mol-compose__emoji:hover{
                background:#e5e7eb;
            }

            .mol-like-btn{
                width:40px;
                height:40px;
                border:0;
                border-radius:999px;
                background:transparent;
                color:#1877f2;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                font-size:1.4rem;
                transition:.15s ease;
            }

            .mol-like-btn:hover{
                background:#eff6ff;
            }

            .mol-send-btn{
                width:40px;
                height:40px;
                border:0;
                border-radius:999px;
                background:#1877f2;
                color:#fff;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                font-size:1rem;
                transition:.15s ease;
            }

            .mol-send-btn:hover{
                background:#166fe0;
            }

            .mol-hidden{
                display:none !important;
            }
        
            /* ===== TOAST / BUBBLE GLOBAL ===== */
            #molChatToasts .toast{
                background:#fff !important;
                border:1px solid #e5e7eb !important;
                box-shadow:0 12px 32px rgba(15,23,42,.10) !important;
                backdrop-filter:none !important;
                -webkit-backdrop-filter:none !important;
                filter:none !important;
                transform:none !important;
            }

            #molChatToasts .toast-header{
                background:#fff !important;
                border-bottom:1px solid #eef2f7 !important;
                backdrop-filter:none !important;
                -webkit-backdrop-filter:none !important;
            }

            #molChatToasts .toast-body{
                background:#fff !important;
            }

            #molChatToasts [id^="molToastMsgs-"]{
                background:#f8fafc !important;
            }

            /* ===== AVATAR + PRESENCE ===== */
            .mol-avatar-wrap{
                position:relative;
                width:38px;
                height:38px;
                border-radius:999px;
                flex:0 0 38px;
            }

            .mol-avatar-status-dot{
                position:absolute;
                right:-1px;
                bottom:-1px;
                width:12px;
                height:12px;
                border-radius:999px;
                border:2px solid #fff;
                box-shadow:0 0 0 1px rgba(15,23,42,.08);
                z-index:3;
            }

            .mol-avatar-status-dot.is-online{
                background:#22c55e;
            }

            .mol-avatar-status-dot.is-recently-offline{
                background:#f59e0b;
            }

            .mol-avatar-status-dot.is-offline{
                background:#ef4444;
            }

            /* ===== LISTE CONVERSATIONS ===== */
            .mol-chat-item{
                border-radius:16px;
                padding:10px 10px;
                transition:background .15s ease;
            }

            .mol-chat-item:hover{
                background:#f8fafc;
            }

            .mol-presence-dot{
                position:absolute;
                right:1px;
                bottom:1px;
                width:11px;
                height:11px;
                border-radius:999px;
                border:2px solid #fff;
            }

            .mol-presence-online{ background:#22c55e; }
            .mol-presence-recently-offline{ background:#f59e0b; }
            .mol-presence-offline{ background:#ef4444; }

            .mol-presence-pill{
                display:inline-flex;
                align-items:center;
                gap:6px;
                padding:4px 10px;
                border-radius:999px;
                font-size:.76rem;
                font-weight:700;
            }

            .mol-presence-pill__dot{
                width:8px;
                height:8px;
                border-radius:999px;
                display:inline-block;
            }

            .mol-presence-pill.online{
                background:#ecfdf5;
                color:#166534;
            }

            .mol-presence-pill.online .mol-presence-pill__dot{
                background:#22c55e;
            }

            .mol-presence-pill.offline{
                background:#f8fafc;
                color:#475569;
            }

            .mol-presence-pill.offline .mol-presence-pill__dot{
                background:#94a3b8;
            }

            .mol-unread{
                min-width:22px;
                height:22px;
                padding:0 7px;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                background:#1877f2;
                color:#fff;
                font-size:.76rem;
                font-weight:800;
                margin-top:6px;
            }

            /* ===== MESSAGES ===== */
            .mol-msg-row{
                position:relative;
                transition:transform .18s ease;
                will-change:transform;
                user-select:none;
            }

            .mol-msg-swipe-hint{
                position:absolute;
                top:50%;
                transform:translateY(-50%);
                font-size:.78rem;
                font-weight:700;
                opacity:0;
                transition:.18s ease;
                pointer-events:none;
            }

            .mol-msg-swipe-hint.reply{
                left:8px;
                color:#1877f2;
            }

            .mol-msg-swipe-hint.delete{
                right:8px;
                color:#dc2626;
            }

            .mol-msg-row.is-swiping-right .mol-msg-swipe-hint.reply{ opacity:1; }
            .mol-msg-row.is-swiping-left .mol-msg-swipe-hint.delete{ opacity:1; }

            .mol-msg-avatar{
                width:22px;
                height:22px;
                border-radius:999px;
                object-fit:cover;
                display:block;
            }

            .mol-msg-card{
                display:inline-block;
                width:fit-content;
                min-width:52px;
                max-width:min(78%, 300px);
                border-radius:20px;
                padding:10px 12px;
                box-shadow:none !important;
                border:1px solid rgba(15,23,42,.08) !important;
                overflow:hidden;
                filter:none !important;
                backdrop-filter:none !important;
                -webkit-backdrop-filter:none !important;
                white-space:pre-wrap;
                overflow-wrap:break-word;
                word-break:normal;
            }

            .mol-msg-card.mine{
                background:#1877f2 !important;
                color:#fff !important;
                border-color:#1877f2 !important;
                border-bottom-right-radius:8px;
            }

            .mol-msg-card.other{
                background:#fff !important;
                color:#0f172a !important;
                border-bottom-left-radius:8px;
            }

            .mol-msg-body{
                white-space:pre-wrap;
                overflow-wrap:break-word;
                word-break:normal;
                line-height:1.35;
            }

            .mol-system-line{
                display:flex;
                justify-content:center;
                margin:10px 0;
            }

            .mol-system-badge{
                display:inline-flex;
                align-items:center;
                gap:6px;
                padding:6px 12px;
                border-radius:999px;
                background:#eef2ff;
                color:#475569;
                font-size:.78rem;
                font-weight:700;
                border:1px solid #dbeafe;
            }

            .mol-call-card{
                display:flex;
                align-items:center;
                gap:10px;
                padding:10px 12px;
                border-radius:14px;
                background:rgba(255,255,255,.12);
                border:1px solid rgba(255,255,255,.16);
                margin-top:4px;
            }

            .mol-msg-card.other .mol-call-card{
                background:#f8fafc;
                border-color:#e2e8f0;
            }

            .mol-call-card__icon{
                width:34px;
                height:34px;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                background:rgba(255,255,255,.16);
                flex:0 0 34px;
            }

            .mol-msg-card.other .mol-call-card__icon{
                background:#e2e8f0;
            }

            .mol-call-card__title{
                font-weight:700;
                line-height:1.2;
            }

            .mol-call-card__meta{
                font-size:.78rem;
                opacity:.82;
            }

            .mol-system-badge{
                display:inline-flex;
                align-items:center;
                gap:6px;
                padding:6px 12px;
                border-radius:999px;
                background:#eef2ff;
                color:#475569;
                font-size:.78rem;
                font-weight:700;
                border:1px solid #dbeafe;
            }

            .mol-call-card{
                display:flex;
                align-items:center;
                gap:10px;
                padding:10px 12px;
                border-radius:14px;
                background:rgba(255,255,255,.12);
                border:1px solid rgba(255,255,255,.16);
                margin-top:4px;
            }

            .mol-msg-card.other .mol-call-card{
                background:#f8fafc;
                border-color:#e2e8f0;
            }

            .mol-call-card__icon{
                width:34px;
                height:34px;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                background:rgba(255,255,255,.16);
                flex:0 0 34px;
            }

            .mol-msg-card.other .mol-call-card__icon{
                background:#e2e8f0;
            }

            .mol-call-card__title{
                font-weight:700;
                line-height:1.2;
            }

            .mol-call-card__meta{
                font-size:.78rem;
                opacity:.82;
            }

            .mol-msg-meta{
                font-size:.74rem;
                opacity:.82;
                margin-top:4px;
                text-shadow:none !important;
            }

            .mol-check{
                vertical-align:middle;
            }

            .mol-msg-reply-quote{
                border-left:3px solid rgba(255,255,255,.50);
                background:rgba(255,255,255,.14);
                padding:7px 9px;
                border-radius:12px;
                margin-bottom:8px;
                font-size:.82rem;
                backdrop-filter:none !important;
                -webkit-backdrop-filter:none !important;
                box-shadow:none !important;
            }

            .mol-msg-card.other .mol-msg-reply-quote{
                border-left-color:#1877f2;
                background:#eff6ff;
            }

            /* ===== FICHIERS ===== */
            .mol-attachment{
                display:flex;
                align-items:center;
                gap:10px;
                background:rgba(255,255,255,.12);
                border:1px solid rgba(255,255,255,.16);
                border-radius:14px;
                padding:10px 12px;
                margin-top:6px;
                box-shadow:none !important;
                backdrop-filter:none !important;
                -webkit-backdrop-filter:none !important;
            }

            .mol-msg-card.other .mol-attachment{
                background:#f8fafc;
                border-color:#e2e8f0;
            }

            .mol-attachment__icon{
                width:36px;
                height:36px;
                border-radius:12px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                background:rgba(255,255,255,.16);
                flex:0 0 36px;
            }

            .mol-msg-card.other .mol-attachment__icon{
                background:#e2e8f0;
            }

            .mol-attachment__name{
                font-weight:700;
                line-height:1.2;
                word-break:break-word;
            }

            .mol-attachment__meta{
                font-size:.78rem;
                opacity:.8;
            }

            .mol-attachment__download{
                margin-left:auto;
                width:34px;
                height:34px;
                border-radius:10px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                text-decoration:none;
                color:inherit;
                background:rgba(255,255,255,.12);
                flex:0 0 34px;
            }

            .mol-msg-card.other .mol-attachment__download{
                background:#e2e8f0;
            }

            /* ===== VOCAL ===== */
            .mol-voice-wrap{
                display:flex;
                align-items:center;
                gap:8px;
                margin-top:6px;
                padding:8px 10px;
                border-radius:14px;
                background:rgba(255,255,255,.12);
                border:1px solid rgba(255,255,255,.16);
                box-shadow:none !important;
                backdrop-filter:none !important;
                -webkit-backdrop-filter:none !important;
            }

            .mol-msg-card.other .mol-voice-wrap{
                background:#f8fafc;
                border-color:#e2e8f0;
            }

            .mol-voice-wrap audio{
                width:100%;
                height:34px;
            }

            /* ===== REPONSE ===== */
            .mol-reply-box{
                display:none;
                align-items:flex-start;
                justify-content:space-between;
                gap:10px;
                padding:8px 10px;
                margin:8px 10px 0;
                border-radius:14px;
                background:#f8fafc;
                border-left:4px solid #1877f2;
            }

            .mol-reply-box.is-active{
                display:flex;
            }

            .mol-reply-box__title{
                font-size:.78rem;
                font-weight:800;
                color:#1877f2;
                margin-bottom:2px;
            }

            .mol-reply-box__text{
                font-size:.82rem;
                color:#334155;
                line-height:1.25;
                word-break:break-word;
            }

            .mol-reply-close{
                border:0;
                background:transparent;
                color:#64748b;
                width:28px;
                height:28px;
                border-radius:999px;
            }

            /* ===== CONTEXT MENU ===== */
            .mol-msg-menu{
                position:fixed;
                z-index:2147483647;
                min-width:180px;
                background:#fff;
                border:1px solid rgba(15,23,42,.08);
                border-radius:14px;
                box-shadow:0 16px 36px rgba(15,23,42,.16);
                padding:6px;
                display:none;
            }

            .mol-msg-menu.is-open{
                display:block;
            }

            .mol-msg-menu button{
                width:100%;
                border:0;
                background:#fff;
                color:#0f172a;
                display:flex;
                align-items:center;
                gap:8px;
                padding:10px 12px;
                border-radius:10px;
                text-align:left;
            }

            .mol-msg-menu button:hover{
                background:#f8fafc;
            }

            /* ===== BOTTOM BAR MESSENGER ===== */
            .mol-bottombar{
                background:#fff;
                border-top:1px solid #eef2f7;
                padding:8px 10px 10px;
            }

            .mol-bottombar__row{
                display:flex;
                align-items:flex-end;
                gap:8px;
            }

            .mol-bottombar__left,
            .mol-bottombar__right{
                display:flex;
                align-items:center;
                gap:6px;
                flex:0 0 auto;
            }

            .mol-bottombar__center{
                flex:1 1 auto;
                min-width:0;
            }

            .mol-circle-btn{
                width:40px;
                height:40px;
                border:0;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                background:transparent;
                color:#1877f2;
                transition:.15s ease;
                font-size:1.22rem;
                box-shadow:none !important;
            }

            .mol-circle-btn:hover{
                background:#eff6ff;
            }

            .mol-circle-btn.is-recording{
                background:#fee2e2;
                color:#dc2626;
                animation:molPulse 1s infinite;
            }

            .mol-compose{
                min-height:42px;
                border-radius:999px;
                background:#f0f2f5;
                display:flex;
                align-items:flex-end;
                gap:6px;
                padding:6px 8px 6px 14px;
            }

            .mol-compose__input{
                flex:1 1 auto;
                min-width:0;
                border:0;
                outline:none;
                resize:none;
                background:transparent;
                color:#0f172a;
                min-height:28px;
                max-height:120px;
                overflow:auto;
                padding:6px 0;
                line-height:1.35;
                box-shadow:none !important;
            }

            .mol-compose__input::placeholder{
                color:#6b7280;
            }

            .mol-compose__emoji{
                width:34px;
                height:34px;
                border:0;
                background:transparent;
                color:#1877f2;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                flex:0 0 auto;
                font-size:1.15rem;
            }

            .mol-compose__emoji:hover{
                background:#e5e7eb;
            }

            .mol-like-btn{
                width:40px;
                height:40px;
                border:0;
                border-radius:999px;
                background:transparent;
                color:#1877f2;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                font-size:1.4rem;
                transition:.15s ease;
            }

            .mol-like-btn:hover{
                background:#eff6ff;
            }

            .mol-send-btn{
                width:40px;
                height:40px;
                border:0;
                border-radius:999px;
                background:#1877f2;
                color:#fff;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                font-size:1rem;
                transition:.15s ease;
            }

            .mol-send-btn:hover{
                background:#166fe0;
            }

            .mol-hidden{
                display:none !important;
            }

            /* ===== UTILITAIRES ===== */
            #molChatToasts img,
            #molChatToasts .avatar-img,
            #molChatToasts .mol-msg-avatar{
                image-rendering:auto;
                backface-visibility:hidden;
                -webkit-backface-visibility:hidden;
                transform:translateZ(0);
            }

            #molChatToasts .fw-bold,
            #molChatToasts .mol-msg-meta,
            #molChatToasts .mol-attachment__name,
            #molChatToasts .mol-attachment__meta,
            #molChatToasts .small,
            #molChatToasts .mol-compose__input{
                text-shadow:none !important;
                filter:none !important;
            }

            @keyframes molPulse{
                0%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}
                70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}
                100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
            }
        
            .mol-msg-avatar{
                width:20px;
                height:20px;
                border-radius:999px;
                object-fit:cover;
                display:block;
            }

            .mol-msg-bubble-wrap{
                display:flex;
                flex-direction:column;
                max-width:78%;
            }

            .mol-msg-bubble-wrap.mine{
                align-items:flex-end;
                margin-left:auto;
            }

            .mol-msg-bubble-wrap.other{
                align-items:flex-start;
                margin-right:auto;
            }

            .mol-msg-card{
                display:inline-block;
                width:auto;
                min-width:44px;
                max-width:100%;
                border-radius:20px;
                padding:10px 12px;
                border:1px solid rgba(15,23,42,.08) !important;
                overflow:hidden;
                white-space:normal;
                word-break:break-word;
                overflow-wrap:anywhere;
                line-height:1.35;
                box-shadow:none !important;
            }

            .mol-msg-card.mine{
                background:#1877f2 !important;
                color:#fff !important;
                border-color:#1877f2 !important;
                border-bottom-right-radius:8px;
            }

            .mol-msg-card.other{
                background:#fff !important;
                color:#0f172a !important;
                border-bottom-left-radius:8px;
            }

            .mol-msg-body{
                display:block;
                width:auto;
                max-width:100%;
                white-space:pre-wrap;
                word-break:break-word;
                overflow-wrap:anywhere;
                line-height:1.35;
            }

            .mol-msg-meta{
                font-size:.74rem;
                opacity:.82;
                margin-top:4px;
                text-shadow:none !important;
            }

            .mol-msg-card.mine .mol-msg-meta,
            .mol-msg-card.other .mol-msg-meta{
                text-align:inherit;
            }

            .mol-msg-reply-quote{
                width:100%;
                box-sizing:border-box;
                border-left:3px solid rgba(255,255,255,.50);
                background:rgba(255,255,255,.14);
                padding:7px 9px;
                border-radius:12px;
                margin-bottom:8px;
                font-size:.82rem;
            }

            .mol-msg-card.other .mol-msg-reply-quote{
                border-left-color:#1877f2;
                background:#eff6ff;
            }

            .mol-msg-reply-quote__author{
                font-weight:800;
                margin-bottom:2px;
            }

            .mol-msg-reply-quote__text{
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
            }
       
            .mol-reply-banner{
                display:flex;
                align-items:center;
                gap:6px;
                margin:0 0 6px 2px;
                font-size:.78rem;
                color:#64748b;
                font-weight:600;
            }

            .mol-reply-banner i{
                font-size:.82rem;
            }

            .mol-msg-bubble-wrap{
                display:flex;
                flex-direction:column;
                max-width:78%;
            }

            .mol-msg-bubble-wrap.mine{
                align-items:flex-end;
                margin-left:auto;
            }

            .mol-msg-bubble-wrap.other{
                align-items:flex-start;
                margin-right:auto;
            }

            .mol-msg-card{
                display:inline-block;
                width:auto;
                min-width:44px;
                max-width:100%;
                border-radius:20px;
                padding:10px 12px;
                border:1px solid rgba(15,23,42,.08) !important;
                overflow:hidden;
                white-space:normal;
                word-break:break-word;
                overflow-wrap:anywhere;
                line-height:1.35;
                box-shadow:none !important;
            }

            .mol-msg-card.mine{
                background:#1877f2 !important;
                color:#fff !important;
                border-color:#1877f2 !important;
                border-bottom-right-radius:8px;
            }

            .mol-msg-card.other{
                background:#fff !important;
                color:#0f172a !important;
                border-bottom-left-radius:8px;
            }

            .mol-msg-body{
                display:block;
                width:auto;
                max-width:100%;
                white-space:pre-wrap;
                word-break:break-word;
                overflow-wrap:anywhere;
                line-height:1.35;
            }

            .mol-msg-reply-quote{
                width:100%;
                box-sizing:border-box;
                border-left:3px solid rgba(255,255,255,.50);
                background:rgba(255,255,255,.14);
                padding:7px 9px;
                border-radius:12px;
                margin-bottom:8px;
                font-size:.82rem;
            }

            .mol-msg-card.other .mol-msg-reply-quote{
                border-left-color:#1877f2;
                background:#eff6ff;
            }

            .mol-msg-reply-quote__author{
                font-weight:800;
                margin-bottom:2px;
            }

            .mol-msg-reply-quote__text{
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
            }

            .mol-msg-avatar{
                width:20px;
                height:20px;
                border-radius:999px;
                object-fit:cover;
                display:block;
            }

            .mol-msg-react-trigger{
                width:24px;
                height:24px;
                border:0;
                border-radius:999px;
                background:#fff;
                box-shadow:0 3px 10px rgba(15,23,42,.12);
                color:#64748b;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                position:absolute;
                bottom:-6px;
                right:-6px;
                z-index:2;
                opacity:.95;
            }

            .mol-msg-card.other + .mol-msg-react-anchor .mol-msg-react-trigger,
            .mol-msg-bubble-wrap.other .mol-msg-react-trigger{
                right:auto;
                left:-6px;
            }

            .mol-msg-reactions{
                display:flex;
                flex-wrap:wrap;
                gap:4px;
                margin-top:4px;
            }

            .mol-msg-reaction-chip{
                display:inline-flex;
                align-items:center;
                gap:4px;
                padding:2px 7px;
                border-radius:999px;
                background:#fff;
                border:1px solid #e5e7eb;
                font-size:.78rem;
                box-shadow:0 3px 10px rgba(15,23,42,.08);
            }

            .mol-msg-meta{
                font-size:.74rem;
                opacity:.82;
                margin-top:4px;
            }


            .mol-chat-image{
                display:block;
                max-width: 240px;
                width: 100%;
                max-height: 320px;
                object-fit: cover;
                border-radius: 16px;
                border: 1px solid rgba(15,23,42,.08);
                box-shadow: 0 10px 24px rgba(2,6,23,.10);
                background: #fff;
            }

            .mol-image-wrap,
            .mol-video-wrap,
            .mol-voice-wrap{
                margin-top: 6px;
            }

            .mol-chat-video{
                display:block;
                width: 100%;
                max-width: 260px;
                border-radius: 16px;
                background: #000;
                box-shadow: 0 10px 24px rgba(2,6,23,.12);
            }

            .mol-chat-audio{
                width: 100%;
                min-width: 220px;
                max-width: 260px;
            }

            .mol-attachment-actions{
                display:flex;
                align-items:center;
                justify-content:space-between;
                gap:10px;
                margin-top: 8px;
            }

            .mol-attachment-caption{
                font-size: 12px;
                color: rgba(15,23,42,.58);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .mol-image-link{
                display:inline-block;
                text-decoration:none;
            }


            /* ===== Rendu pièces jointes style Messenger ===== */

            .mol-inline-audio,
            .mol-inline-file,
            .mol-inline-media{
                margin-top: 6px;
                width: 100%;
            }

            .mol-chat-audio{
                display: block;
                width: 100%;
                max-width: 260px;
                min-width: 220px;
                height: 42px;
                border-radius: 999px;
                background: transparent;
            }

            .mol-inline-filebar{
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
                margin-top: 6px;
                width: 100%;
                max-width: 260px;
            }

            .mol-inline-filebar--audio{
                margin-top: 4px;
            }

            .mol-inline-filebar__main{
                min-width: 0;
                flex: 1 1 auto;
            }

            .mol-inline-filebar__name{
                font-size: 12px;
                line-height: 1.25;
                color: rgba(15,23,42,.68);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .mol-inline-filebar__meta{
                margin-top: 2px;
                font-size: 11px;
                color: rgba(15,23,42,.45);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .mol-inline-filebar__download{
                flex: 0 0 auto;
                width: 28px;
                height: 28px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 999px;
                text-decoration: none;
                color: rgba(15,23,42,.62);
                background: rgba(15,23,42,.06);
                border: 1px solid rgba(15,23,42,.08);
                transition: .15s ease;
            }

            .mol-inline-filebar__download:hover{
                color: #0f172a;
                background: rgba(13,110,253,.10);
                border-color: rgba(13,110,253,.16);
            }

            .mol-chat-image{
                display: block;
                width: 100%;
                max-width: 240px;
                max-height: 280px;
                object-fit: cover;
                border-radius: 18px;
                border: 1px solid rgba(15,23,42,.08);
                box-shadow: 0 8px 20px rgba(2,6,23,.10);
                background: #fff;
            }

            .mol-chat-video{
                display: block;
                width: 100%;
                max-width: 260px;
                border-radius: 18px;
                background: #000;
                box-shadow: 0 8px 20px rgba(2,6,23,.10);
            }

            .mol-inline-file{
                display: flex;
                align-items: center;
                gap: 10px;
                width: 100%;
                max-width: 270px;
                padding: 10px 12px;
                border-radius: 18px;
                background: rgba(255,255,255,.72);
                border: 1px solid rgba(15,23,42,.08);
                box-shadow: 0 8px 20px rgba(2,6,23,.06);
            }

            .mol-inline-file__icon{
                flex: 0 0 38px;
                width: 38px;
                height: 38px;
                border-radius: 12px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: rgba(15,23,42,.06);
                color: rgba(15,23,42,.70);
                font-size: 18px;
            }

            .mol-inline-file__main{
                min-width: 0;
                flex: 1 1 auto;
            }

            .mol-inline-file__name{
                font-size: 13px;
                font-weight: 700;
                line-height: 1.25;
                color: #0f172a;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .mol-inline-file__meta{
                margin-top: 2px;
                font-size: 11px;
                color: rgba(15,23,42,.48);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .mol-inline-file__download{
                flex: 0 0 auto;
                width: 32px;
                height: 32px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 999px;
                text-decoration: none;
                color: rgba(15,23,42,.64);
                background: rgba(15,23,42,.06);
                border: 1px solid rgba(15,23,42,.08);
                transition: .15s ease;
            }

            .mol-inline-file__download:hover{
                color: #0f172a;
                background: rgba(13,110,253,.10);
                border-color: rgba(13,110,253,.16);
            }

            /* Rend le bubble plus compact quand il contient seulement un média */
            .mol-msg-card .mol-inline-audio:only-child,
            .mol-msg-card .mol-inline-file:only-child,
            .mol-msg-card .mol-inline-media:only-child{
                margin-top: 0;
            }
       
            /* =========================
            FIX FINAL MOBILE CHAT
            ========================= */
            @media (max-width: 991.98px){

            .mol-chat-panel{
                position: fixed !important;
                top: var(--mol-topbar-h, 0px) !important;
                left: 0 !important;
                right: 0 !important;
                width: 100vw !important;
                height: calc(100dvh - var(--mol-topbar-h, 0px)) !important;
                max-height: calc(100dvh - var(--mol-topbar-h, 0px)) !important;
                overflow: hidden !important;
                display: flex !important;
                flex-direction: column !important;
            }

            .mol-chat-panel__body{
                flex: 1 1 auto !important;
                min-height: 0 !important;
                height: auto !important;
                overflow: hidden !important;
                display: flex !important;
                flex-direction: column !important;
                padding: 0 !important;
            }

            #molChatThread{
                display: flex !important;
                flex-direction: column !important;
                flex: 1 1 auto !important;
                min-height: 0 !important;
                height: 100% !important;
            }

            #molChatThreadBody{
                display: flex !important;
                flex-direction: column !important;
                flex: 1 1 auto !important;
                min-height: 0 !important;
                height: auto !important;
                overflow: hidden !important;
            }

            #molChatThreadMsgs{
                flex: 1 1 auto !important;
                min-height: 0 !important;
                height: auto !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch !important;
                padding-bottom: 8px !important;
            }

            /* le vrai fix */
            #molChatThread .mol-inputbar{
                position: relative !important;
                bottom: auto !important;
                left: auto !important;
                right: auto !important;
                flex: 0 0 auto !important;
                margin-top: auto !important;
                z-index: 30 !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                background: #fff !important;
                border-top: 1px solid #e5e7eb !important;
                padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
            }

            #molChatThread .mol-inputwrap{
                display: flex !important;
                align-items: flex-end !important;
                gap: 8px !important;
                flex-wrap: nowrap !important;
            }

            #molChatThread .mol-tools{
                display: flex !important;
                align-items: center !important;
                gap: 6px !important;
                flex: 0 0 auto !important;
            }

            #molChatThread .mol-textarea{
                flex: 1 1 auto !important;
                min-width: 0 !important;
                width: 100% !important;
                display: block !important;
            }

            #molChatThread .mol-send{
                flex: 0 0 auto !important;
                display: inline-flex !important;
            }

            /* si tu ouvres une bubble sur mobile */
            #molChatToasts{
                position: fixed !important;
                left: 12px !important;
                right: 12px !important;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
                width: auto !important;
                max-width: none !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 10px !important;
                z-index: 9999 !important;
            }

            #molChatToasts .toast{
                width: 100% !important;
                max-width: 100% !important;
            }

            #molChatToasts .toast-body{
                display: flex !important;
                flex-direction: column !important;
                min-height: 0 !important;
            }

            #molChatToasts [id^="molToastMsgs-"]{
                flex: 1 1 auto !important;
                min-height: 160px !important;
                max-height: 40vh !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
            }

            #molChatToasts .mol-bottombar{
                position: relative !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                background: #fff !important;
                border-top: 1px solid #e5e7eb !important;
                padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
                z-index: 20 !important;
            }

            #molChatToasts .mol-bottombar__row{
                display: flex !important;
                align-items: flex-end !important;
                gap: 8px !important;
                flex-wrap: nowrap !important;
            }

            #molChatToasts .mol-bottombar__left,
            #molChatToasts .mol-bottombar__right{
                display: flex !important;
                align-items: center !important;
                gap: 6px !important;
                flex: 0 0 auto !important;
            }

            #molChatToasts .mol-bottombar__center{
                flex: 1 1 auto !important;
                min-width: 0 !important;
            }

            #molChatToasts .mol-compose{
                display: flex !important;
                align-items: flex-end !important;
                min-height: 42px !important;
            }

            #molChatToasts .mol-compose__input{
                flex: 1 1 auto !important;
                min-width: 0 !important;
                width: 100% !important;
            }
            }
       
            @media (max-width: 991.98px){
            #molChatThread{
                height: 100% !important;
                min-height: 0 !important;
            }

            #molChatThreadBody{
                display: flex !important;
                flex-direction: column !important;
                flex: 1 1 auto !important;
                min-height: 0 !important;
                overflow: hidden !important;
            }

            #molChatThreadMsgs{
                flex: 1 1 auto !important;
                min-height: 0 !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch !important;
            }

            #molChatThread .mol-bottombar{
                flex: 0 0 auto !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                background: #fff !important;
                border-top: 1px solid #eef2f7 !important;
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
            }

            #molChatThread .mol-bottombar__row{
                display: flex !important;
                align-items: flex-end !important;
                gap: 8px !important;
                flex-wrap: nowrap !important;
            }

            #molChatThread .mol-bottombar__center{
                flex: 1 1 auto !important;
                min-width: 0 !important;
            }

            #molChatThread .mol-compose{
                display: flex !important;
                align-items: flex-end !important;
                min-height: 42px !important;
            }

            #molChatThread .mol-compose__input{
                flex: 1 1 auto !important;
                min-width: 0 !important;
                width: 100% !important;
            }
            }
        
            /* =========================================
            FIX APPEL MOBILE — compact et full screen
            ========================================= */
            @media (max-width: 576px){

            .mol-call-overlay{
                padding: 0 !important;
                align-items: stretch !important;
                justify-content: stretch !important;
            }

            .mol-call-shell{
                width: 100vw !important;
                height: 100dvh !important;
                min-height: 100dvh !important;
                border-radius: 0 !important;
                max-height: 100dvh !important;
            }

            .mol-call-top{
                padding: 10px 12px !important;
                gap: 8px !important;
                flex: 0 0 auto !important;
            }

            .mol-call-top-avatar{
                width: 40px !important;
                height: 40px !important;
            }

            .mol-call-top-name{
                font-size: .92rem !important;
            }

            .mol-call-top-status{
                font-size: .76rem !important;
                margin-top: 2px !important;
            }

            .mol-call-chip{
                height: 32px !important;
                padding: 0 10px !important;
                font-size: .74rem !important;
            }

            .mol-call-close{
                width: 36px !important;
                height: 36px !important;
            }

            .mol-call-main{
                display: flex !important;
                flex-direction: column !important;
                gap: 10px !important;
                padding: 10px !important;
                flex: 1 1 auto !important;
                min-height: 0 !important;
                overflow: hidden !important;
            }

            .mol-call-side{
                gap: 10px !important;
                flex: 0 0 auto !important;
            }

            /* Bloc profil compact */
            .mol-call-hero{
                min-height: auto !important;
                padding: 14px 12px !important;
                border-radius: 20px !important;
            }

            .mol-call-ring-wrap{
                width: 92px !important;
                height: 92px !important;
                margin: 0 auto 10px !important;
            }

            .mol-call-avatar-big{
                width: 68px !important;
                height: 68px !important;
                border-width: 3px !important;
            }

            .mol-call-center-badge{
                width: 34px !important;
                height: 34px !important;
                right: 6px !important;
                bottom: 8px !important;
                font-size: .9rem !important;
            }

            .mol-call-name{
                font-size: 1rem !important;
                margin-top: 2px !important;
            }

            .mol-call-status{
                margin-top: 4px !important;
                font-size: .82rem !important;
            }

            .mol-call-substatus{
                margin-top: 2px !important;
                font-size: .72rem !important;
            }

            /* Les 4 cartes deviennent compactes */
            .mol-call-quick{
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 8px !important;
            }

            .mol-call-mini{
                padding: 10px !important;
                border-radius: 16px !important;
            }

            .mol-call-mini-title{
                font-size: .62rem !important;
                margin-bottom: 4px !important;
            }

            .mol-call-mini-value{
                font-size: .78rem !important;
                line-height: 1.2 !important;
            }

            /* La vidéo prend enfin la vraie place */
            .mol-call-stage{
                flex: 1 1 auto !important;
                min-height: 0 !important;
                height: auto !important;
                border-radius: 20px !important;
                overflow: hidden !important;
            }

            .mol-call-remote{
                min-height: 0 !important;
                height: 100% !important;
            }

            .mol-call-local-card{
                width: 96px !important;
                height: 132px !important;
                right: 10px !important;
                bottom: 10px !important;
                border-radius: 18px !important;
            }

            .mol-call-label{
                top: 8px !important;
                left: 8px !important;
                padding: 5px 10px !important;
                font-size: .66rem !important;
            }

            .mol-call-screen-empty{
                font-size: 3rem !important;
            }

            /* Footer toujours visible */
            .mol-call-footer{
                flex: 0 0 auto !important;
                padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
                gap: 10px !important;
            }

            .mol-call-main-actions{
                gap: 8px !important;
            }

            .mol-call-secondary-actions{
                gap: 8px !important;
            }

            .mol-call-btn{
                min-width: 0 !important;
                flex: 1 1 0 !important;
                height: 44px !important;
                font-size: .86rem !important;
                border-radius: 999px !important;
                padding: 0 12px !important;
            }

            .mol-call-tool{
                width: 42px !important;
                height: 42px !important;
            }

            .mol-call-tool i,
            .mol-call-btn i{
                font-size: .92rem !important;
            }
            }
        

        
            .pm-navbar,
            .pm-navbar .container,
            .pm-navbar-inner,
            .pm-buttons,
            .pm-mobile-menu,
            .pm-mobile-buttons{
                overflow: visible !important;
            }

            .pm-buttons > .mol-dd,
            .pm-mobile-buttons > .mol-dd{
                position: relative;
                display: flex;
                align-items: center;
            }

            .pm-buttons > .mol-dd > .mol-dd-btn,
            .pm-mobile-buttons > .mol-dd > .mol-dd-btn{
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: .45rem;
                white-space: nowrap;
                text-decoration: none;
                cursor: pointer;
            }

            .pm-buttons > .mol-dd > .mol-dd-menu{
                position: absolute;
                top: calc(100% + 10px);
                right: 0;
                left: auto;
                min-width: 290px;
                max-width: 340px;
                z-index: 99999;
            }

            .pm-buttons > .mol-dd:first-child > .mol-dd-btn{
                min-height: 44px;
                padding: 0 14px;
                border-radius: 14px;
            }

            .pm-buttons > .mol-dd:first-child > .mol-dd-menu .mol-dd-item{
                white-space: nowrap;
            }

            .pm-mobile-buttons > .mol-dd{
                width: 100%;
                display: block;
            }

            .pm-mobile-buttons > .mol-dd > .mol-dd-btn{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .pm-mobile-buttons > .mol-dd > .mol-dd-menu{
                position: static;
                width: 100%;
                min-width: 100%;
                max-width: 100%;
                margin-top: 10px;
                z-index: 20;
            }

            .pm-mobile-buttons > .mol-dd > .mol-dd-menu .mol-dd-item{
                white-space: normal;
            }

            .pm-buttons li.mol-dd,
            .pm-mobile-buttons li.mol-dd{
                list-style: none;
                margin: 0;
                padding: 0;
            }

            .pm-buttons > li.mol-dd,
            .pm-mobile-buttons > li.mol-dd{
                position: relative !important;
                list-style: none;
                margin: 0;
                padding: 0;
            }

            .pm-buttons > li.mol-dd > .mol-dd-btn,
            .pm-mobile-buttons > li.mol-dd > .mol-dd-btn{
                display: inline-flex;
                align-items: center;
                gap: .45rem;
                text-decoration: none;
                cursor: pointer;
                white-space: nowrap;
            }

            .pm-buttons > li.mol-dd > .mol-dd-menu,
            .pm-mobile-buttons > li.mol-dd > .mol-dd-menu{
                display: block !important;
                opacity: 0;
                visibility: hidden;
                transform: translateY(10px) scale(.98);
                transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
                background: #fff;
                border: 1px solid rgba(15,23,42,.08);
                border-radius: 18px;
                box-shadow: 0 22px 60px rgba(15,23,42,.16);
                overflow: hidden;
            }

            /* Desktop */
            .pm-buttons > li.mol-dd > .mol-dd-menu{
                position: absolute !important;
                top: calc(100% + 10px);
                right: 0;
                left: auto !important;
                min-width: 300px;
                max-width: 340px;
                z-index: 9999;
            }

            /* Ouverture */
            .pm-buttons > li.mol-dd:hover > .mol-dd-menu,
            .pm-buttons > li.mol-dd:focus-within > .mol-dd-menu,
            .pm-buttons > li.mol-dd > .mol-dd-btn[aria-expanded="true"] + .mol-dd-menu,
            .pm-mobile-buttons > li.mol-dd:focus-within > .mol-dd-menu,
            .pm-mobile-buttons > li.mol-dd > .mol-dd-btn[aria-expanded="true"] + .mol-dd-menu{
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: translateY(0) scale(1);
            }

            /* Mobile */
            .pm-mobile-buttons > li.mol-dd{
                width: 100%;
            }

            .pm-mobile-buttons > li.mol-dd > .mol-dd-btn{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .pm-mobile-buttons > li.mol-dd > .mol-dd-menu{
                position: static !important;
                width: 100%;
                min-width: 100%;
                max-width: 100%;
                margin-top: 10px;
                box-shadow: 0 12px 30px rgba(15,23,42,.10);
            }

            /* Finition */
            .pm-buttons,
            .pm-mobile-buttons,
            .pm-navbar,
            .pm-navbar-inner,
            .pm-mobile-menu{
                overflow: visible !important;
            }

            .pm-buttons > li.mol-dd > .mol-dd-menu .mol-dd-item,
            .pm-mobile-buttons > li.mol-dd > .mol-dd-menu .mol-dd-item{
                display: flex;
                align-items: center;
                gap: .65rem;
                text-decoration: none;
            }

            .pm-buttons > li.mol-dd > .mol-dd-menu .mol-dd-item:hover,
            .pm-mobile-buttons > li.mol-dd > .mol-dd-menu .mol-dd-item:hover{
                background: #f8fafc;
            }

            .pm-menu > li.pm-has-submenu,
            .pm-mobile-nav > li.pm-mobile-has-submenu{
                position: relative;
                list-style: none;
            }

            .pm-has-submenu > .pm-menu-link,
            .pm-mobile-has-submenu > .pm-mobile-link{
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: .55rem;
            }

            .pm-submenu-caret{
                transition: transform .22s ease;
                font-size: 12px;
            }

            /* DESKTOP */
            .pm-menu > li.pm-has-submenu > .sub-menu{
                position: absolute;
                top: calc(100% + 10px);
                left: 0;
                min-width: 240px;
                margin: 0;
                padding: 10px;
                background: #fff;
                border: 1px solid rgba(15,23,42,.08);
                border-radius: 18px;
                box-shadow: 0 18px 50px rgba(15,23,42,.12);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transform: translateY(10px);
                transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
                z-index: 999;
            }

            .pm-menu > li.pm-has-submenu > .sub-menu li{
                list-style: none;
                margin: 0;
                padding: 0;
            }

            .pm-menu > li.pm-has-submenu > .sub-menu li + li{
                margin-top: 4px;
            }

            .pm-menu > li.pm-has-submenu > .sub-menu a{
                display: flex;
                align-items: center;
                width: 100%;
                padding: 10px 12px;
                border-radius: 12px;
                text-decoration: none;
                color: #0f172a;
                transition: background .18s ease, color .18s ease;
            }

            .pm-menu > li.pm-has-submenu > .sub-menu a:hover{
                background: #f8fafc;
                color: #2563eb;
            }

            .pm-menu > li.pm-has-submenu:hover > .sub-menu,
            .pm-menu > li.pm-has-submenu:focus-within > .sub-menu{
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: translateY(0);
            }

            .pm-menu > li.pm-has-submenu:hover > .pm-menu-link .pm-submenu-caret,
            .pm-menu > li.pm-has-submenu:focus-within > .pm-menu-link .pm-submenu-caret{
                transform: rotate(180deg);
            }

            /* MOBILE */
            .pm-mobile-nav > li.pm-mobile-has-submenu > .sub-menu{
                display: none;
                margin: 8px 0 0 0;
                padding: 8px 0 0 0;
                border-top: 1px solid rgba(15,23,42,.08);
            }

            .pm-mobile-nav > li.pm-mobile-has-submenu > .sub-menu li{
                list-style: none;
            }

            .pm-mobile-nav > li.pm-mobile-has-submenu > .sub-menu a{
                display: flex;
                align-items: center;
                width: 100%;
                padding: 10px 14px 10px 38px;
                text-decoration: none;
                color: #334155;
                border-radius: 12px;
            }

            .pm-mobile-nav > li.pm-mobile-has-submenu > .sub-menu a:hover{
                background: #f8fafc;
                color: #2563eb;
            }

            .pm-mobile-nav > li.pm-mobile-has-submenu.is-open > .sub-menu{
                display: block;
            }

            .pm-mobile-nav > li.pm-mobile-has-submenu.is-open > .pm-mobile-link .pm-submenu-caret{
                transform: rotate(180deg);
            }

            /* =========================
            ACCOUNT DROPDOWN PREMIUM
            ========================= */
            .mol-account-dd{
                position: relative;
            }

            .mol-account-btn{
                position: relative;
                display: inline-flex;
                align-items: center;
                gap: .7rem;
                padding: .72rem 1rem;
                border-radius: 999px;
                text-decoration: none;
                background: rgba(255,255,255,.10);
                border: 1px solid rgba(255,255,255,.16);
                color: #fff;
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
                transition: all .25s ease;
                box-shadow: 0 10px 28px rgba(15,23,42,.12);
            }

            .mol-account-btn:hover{
                color: #fff;
                transform: translateY(-1px);
                background: rgba(255,255,255,.16);
                border-color: rgba(255,255,255,.24);
                box-shadow: 0 14px 34px rgba(15,23,42,.18);
            }

            .mol-account-btn-icon{
                width: 34px;
                height: 34px;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
                border: 1px solid rgba(255,255,255,.14);
                font-size: 1rem;
                flex: 0 0 34px;
            }

            .mol-account-btn-text{
                font-size: .92rem;
                font-weight: 600;
                letter-spacing: .1px;
                white-space: nowrap;
            }

            .mol-account-btn-caret{
                font-size: .9rem;
                opacity: .85;
                transition: transform .25s ease;
            }

            .mol-account-dd.open .mol-account-btn-caret,
            .mol-account-dd.show .mol-account-btn-caret{
                transform: rotate(180deg);
            }

            .mol-account-menu{
                position: absolute;
                top: calc(100% + 14px);
                right: 0;
                width: 360px;
                max-width: calc(100vw - 24px);
                border-radius: 24px;
                overflow: hidden;
                border: 1px solid rgba(15,23,42,.08);
                background:
                    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 100%);
                backdrop-filter: blur(18px);
                -webkit-backdrop-filter: blur(18px);
                box-shadow:
                    0 24px 70px rgba(15,23,42,.18),
                    0 10px 30px rgba(15,23,42,.08);
                padding: 0;
                transform-origin: top right;
            }

            .mol-account-menu::before{
                content: "";
                position: absolute;
                top: -7px;
                right: 24px;
                width: 14px;
                height: 14px;
                background: rgba(255,255,255,.95);
                border-top: 1px solid rgba(15,23,42,.08);
                border-left: 1px solid rgba(15,23,42,.08);
                transform: rotate(45deg);
            }

            .mol-account-head{
                position: relative;
                padding: 1rem 1rem .95rem;
                background:
                    radial-gradient(circle at top right, rgba(37,99,235,.14), transparent 42%),
                    radial-gradient(circle at left bottom, rgba(79,70,229,.10), transparent 38%),
                    linear-gradient(180deg, rgba(248,250,252,.98), rgba(255,255,255,.92));
                border-bottom: 1px solid rgba(15,23,42,.06);
            }

            .mol-account-user{
                display: flex;
                align-items: center;
                gap: .9rem;
            }

            .mol-account-avatar{
                width: 54px;
                height: 54px;
                border-radius: 18px;
                overflow: hidden;
                flex: 0 0 54px;
                background: linear-gradient(135deg, #2563eb, #4f46e5);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.15rem;
                font-weight: 700;
                box-shadow: 0 10px 24px rgba(37,99,235,.24);
            }

            .mol-account-avatar img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            .mol-account-meta{
                min-width: 0;
                flex: 1 1 auto;
            }

            .mol-dd-title{
                font-size: 1rem;
                font-weight: 700;
                color: #0f172a;
                line-height: 1.2;
            }

            .mol-dd-sub{
                margin-top: .22rem !important;
                font-size: .82rem;
                color: #64748b;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .mol-account-links{
                padding: .65rem;
            }

            .mol-account-item{
                display: flex;
                align-items: center;
                gap: .85rem;
                width: 100%;
                padding: .78rem .85rem;
                border-radius: 18px;
                text-decoration: none;
                color: #0f172a;
                transition: all .22s ease;
                margin-bottom: .18rem;
                border: 1px solid transparent;
            }

            .mol-account-item:hover{
                text-decoration: none;
                color: #0f172a;
                background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(241,245,249,.95));
                border-color: rgba(37,99,235,.10);
                transform: translateX(2px);
            }

            .mol-account-item-icon{
                width: 42px;
                height: 42px;
                border-radius: 14px;
                flex: 0 0 42px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 1rem;
                color: #2563eb;
                background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(79,70,229,.08));
                border: 1px solid rgba(37,99,235,.10);
                box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
            }

            .mol-account-item-content{
                display: flex;
                flex-direction: column;
                min-width: 0;
            }

            .mol-account-item-title{
                font-size: .92rem;
                font-weight: 700;
                color: #0f172a;
                line-height: 1.15;
            }

            .mol-account-item-content small{
                margin-top: .18rem;
                font-size: .76rem;
                color: #64748b;
                line-height: 1.35;
            }

            .mol-account-footer{
                padding: .55rem .65rem .7rem;
                border-top: 1px solid rgba(15,23,42,.06);
                background: linear-gradient(180deg, rgba(248,250,252,.55), rgba(255,255,255,.88));
            }

            .mol-account-item-danger .mol-account-item-icon{
                color: #dc2626;
                background: linear-gradient(135deg, rgba(220,38,38,.11), rgba(239,68,68,.07));
                border-color: rgba(220,38,38,.10);
            }

            .mol-account-item-danger:hover{
                background: linear-gradient(180deg, rgba(254,242,242,.95), rgba(254,226,226,.88));
                border-color: rgba(220,38,38,.10);
            }

            .mol-account-item-danger:hover .mol-account-item-title{
                color: #b91c1c;
            }

            /* Etat menu ouvert si ton JS ajoute open/show */
            .mol-account-dd.open .mol-account-btn,
            .mol-account-dd.show .mol-account-btn{
                background: rgba(255,255,255,.18);
                border-color: rgba(255,255,255,.24);
                box-shadow: 0 14px 36px rgba(15,23,42,.18);
            }

            /* Responsive */
            @media (max-width: 575.98px){
                .mol-account-menu{
                    right: -8px;
                    width: 330px;
                    border-radius: 20px;
                }

                .mol-account-btn{
                    padding: .62rem .88rem;
                    gap: .55rem;
                }

                .mol-account-btn-text{
                    font-size: .88rem;
                }

                .mol-account-item{
                    padding: .72rem .75rem;
                }

                .mol-account-item-icon{
                    width: 38px;
                    height: 38px;
                    border-radius: 12px;
                    flex-basis: 38px;
                }

                .mol-account-avatar{
                    width: 48px;
                    height: 48px;
                    border-radius: 16px;
                    flex-basis: 48px;
                }
            }


            
            :root{
                --mol-chat-bg:#f5f7fb;
                --mol-chat-surface:rgba(255,255,255,.96);
                --mol-chat-surface-2:#ffffff;
                --mol-chat-line:rgba(15,23,42,.08);
                --mol-chat-line-strong:rgba(15,23,42,.12);
                --mol-chat-text:#0f172a;
                --mol-chat-muted:#64748b;
                --mol-chat-primary:#2563eb;
                --mol-chat-primary-2:#1d4ed8;
                --mol-chat-success:#16a34a;
                --mol-chat-warning:#f59e0b;
                --mol-chat-danger:#dc2626;
                --mol-chat-shadow:0 24px 60px rgba(15,23,42,.16);
                --mol-chat-shadow-soft:0 10px 26px rgba(15,23,42,.09);
                --mol-chat-radius:22px;
                --mol-chat-radius-sm:16px;
                --mol-topbar-h:0px;
                --mol-chat-vh:100dvh;
            }

            body.mol-chat-open{
                overflow:hidden;
            }

            .mol-btn-icon{
                width:38px;
                height:38px;
                border:none;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                background:#f8fafc;
                color:var(--mol-chat-text);
                box-shadow:inset 0 0 0 1px var(--mol-chat-line);
                transition:.2s ease;
            }

            .mol-btn-icon:hover{
                transform:translateY(-1px);
                background:#fff;
                box-shadow:0 10px 18px rgba(15,23,42,.08), inset 0 0 0 1px var(--mol-chat-line-strong);
            }

            .mol-chat-panel{
                position:fixed;
                top:var(--mol-topbar-h);
                right:18px;
                width:min(390px, calc(100vw - 24px));
                height:calc(var(--mol-chat-vh) - var(--mol-topbar-h) - 18px);
                max-height:calc(var(--mol-chat-vh) - var(--mol-topbar-h) - 18px);
                background:var(--mol-chat-surface);
                backdrop-filter:blur(20px);
                border:1px solid rgba(255,255,255,.6);
                border-radius:28px;
                box-shadow:var(--mol-chat-shadow);
                transform:translateY(14px) scale(.985);
                opacity:0;
                visibility:hidden;
                pointer-events:none;
                transition:.24s ease;
                z-index:2147482500;
                overflow:hidden;
            }

            .mol-chat-panel.is-open{
                opacity:1;
                visibility:visible;
                pointer-events:auto;
                transform:translateY(0) scale(1);
            }

            .mol-chat-panel__header{
                display:flex;
                align-items:center;
                justify-content:space-between;
                gap:12px;
                padding:16px 18px;
                background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
                border-bottom:1px solid var(--mol-chat-line);
            }

            .mol-chat-title{
                font-size:1rem;
                font-weight:800;
                color:var(--mol-chat-text);
                letter-spacing:-.02em;
            }

            .mol-chat-sub{
                font-size:.82rem;
                color:var(--mol-chat-muted);
                margin-top:2px;
            }

            .mol-chat-panel__body{
                height:calc(100% - 76px);
                display:flex;
                flex-direction:column;
                min-height:0;
                background:
                    radial-gradient(circle at top right, rgba(37,99,235,.08), transparent 30%),
                    linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%);
            }

            .mol-chat-search-wrap{
                padding:14px 16px 10px;
                flex:0 0 auto;
            }

            .mol-search{
                position:relative;
            }

            .mol-search__icon{
                position:absolute;
                left:14px;
                top:50%;
                transform:translateY(-50%);
                color:#94a3b8;
                font-size:.95rem;
            }

            .mol-search__input{
                height:46px;
                padding-left:40px;
                border-radius:16px;
                border:1px solid var(--mol-chat-line);
                background:rgba(255,255,255,.9);
                box-shadow:0 6px 16px rgba(15,23,42,.04);
            }

            .mol-search__input:focus{
                border-color:rgba(37,99,235,.28);
                box-shadow:0 0 0 4px rgba(37,99,235,.08);
            }

            .mol-chat-list{
                list-style:none;
                padding:0 16px 16px;
                margin:0;
                overflow:auto;
                flex:1 1 auto;
                min-height:0;
            }

            .mol-chat-item{
                display:flex;
                align-items:center;
                gap:12px;
                padding:12px;
                border-radius:18px;
                position:relative;
                background:rgba(255,255,255,.78);
                border:1px solid transparent;
                cursor:pointer;
                transition:.18s ease;
                box-shadow:0 8px 24px rgba(15,23,42,.04);
            }

            .mol-chat-item + .mol-chat-item{
                margin-top:10px;
            }

            .mol-chat-item:hover{
                background:#fff;
                border-color:rgba(37,99,235,.14);
                transform:translateY(-1px);
                box-shadow:0 16px 30px rgba(15,23,42,.08);
            }

            .mol-chat-item img{
                width:46px;
                height:46px;
                object-fit:cover;
                border-radius:999px;
                display:block;
            }

            .mol-presence-dot{
                position:absolute;
                right:-1px;
                bottom:-1px;
                width:13px;
                height:13px;
                border-radius:999px;
                border:2px solid #fff;
                box-shadow:0 0 0 1px rgba(15,23,42,.08);
            }

            .mol-presence-online{ background:#16a34a; }
            .mol-presence-recently-offline{ background:#f59e0b; }
            .mol-presence-offline{ background:#cbd5e1; }

            .mol-avatar-status-dot{
                position:absolute;
                right:-1px;
                bottom:-1px;
                width:12px;
                height:12px;
                border-radius:999px;
                border:2px solid #fff;
                box-shadow:0 0 0 1px rgba(15,23,42,.08);
            }

            .mol-avatar-status-dot.is-online{ background:#16a34a; }
            .mol-avatar-status-dot.is-recently-offline{ background:#f59e0b; }
            .mol-avatar-status-dot.is-offline{ background:#cbd5e1; }

            .mol-presence-pill{
                display:inline-flex;
                align-items:center;
                gap:6px;
                padding:4px 8px;
                border-radius:999px;
                font-size:.72rem;
                font-weight:700;
                border:1px solid transparent;
            }

            .mol-presence-pill__dot{
                width:6px;
                height:6px;
                border-radius:999px;
                display:block;
            }

            .mol-presence-pill.online{
                background:rgba(22,163,74,.09);
                color:#15803d;
                border-color:rgba(22,163,74,.14);
            }
            .mol-presence-pill.online .mol-presence-pill__dot{ background:#16a34a; }

            .mol-presence-pill.offline{
                background:rgba(148,163,184,.12);
                color:#64748b;
                border-color:rgba(148,163,184,.12);
            }
            .mol-presence-pill.offline .mol-presence-pill__dot{ background:#94a3b8; }

            .mol-unread{
                min-width:22px;
                height:22px;
                padding:0 7px;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                font-size:.72rem;
                font-weight:800;
                color:#fff;
                background:linear-gradient(135deg, var(--mol-chat-primary), #4f46e5);
                box-shadow:0 10px 18px rgba(37,99,235,.25);
            }

            .mol-toast-chat{
                position:fixed;
                right:18px;
                bottom:18px;
                z-index:2147482400;
                display:flex;
                flex-direction:row;
                align-items:flex-end;
                gap:14px;
                flex-wrap:wrap-reverse;
                max-width:calc(100vw - 24px);
                pointer-events:none;
            }

            .mol-toast-chat .toast{
                pointer-events:auto;
            }

            .mol-chat-toast{
                width:min(390px, calc(100vw - 24px));
                background:rgba(255,255,255,.98);
                border:none;
                border-radius:24px;
                overflow:visible;
                box-shadow:var(--mol-chat-shadow);
                backdrop-filter:blur(22px);
            }

            .mol-chat-toast .toast-header{
                padding:12px;
                border:none;
                border-bottom:1px solid var(--mol-chat-line);
                background:transparent;
                overflow:visible;
            }

            .mol-chat-toast .toast-body{
                background:transparent;
                overflow:hidden;
                border-bottom-left-radius:24px;
                border-bottom-right-radius:24px;
            }

            .mol-avatar-wrap{
                position:relative;
                flex:0 0 auto;
            }

            .mol-msg-box,
            #molChatThreadMsgs{
                height:320px;
                overflow:auto;
                padding:14px;
                background:
                    radial-gradient(circle at top right, rgba(37,99,235,.05), transparent 30%),
                    linear-gradient(180deg, #f8fbff 0%, #f6f9fd 100%);
            }

            .mol-msg-row{
                position:relative;
                transition:transform .18s ease;
                display:flex;
                align-items:flex-end;
                gap:8px;
            }

            .mol-msg-row.is-swiping-right .mol-msg-swipe-hint.reply{
                opacity:1;
                transform:translateY(-50%) scale(1);
            }

            .mol-msg-row.is-swiping-left .mol-msg-swipe-hint.delete{
                opacity:1;
                transform:translateY(-50%) scale(1);
            }

            .mol-msg-swipe-hint{
                position:absolute;
                top:50%;
                transform:translateY(-50%) scale(.92);
                opacity:0;
                pointer-events:none;
                font-size:.72rem;
                font-weight:700;
                color:var(--mol-chat-muted);
                background:#fff;
                border:1px solid var(--mol-chat-line);
                box-shadow:var(--mol-chat-shadow-soft);
                padding:6px 10px;
                border-radius:999px;
                transition:.18s ease;
                z-index:2;
                white-space:nowrap;
            }

            .mol-msg-swipe-hint.reply{ left:8px; }
            .mol-msg-swipe-hint.delete{ right:8px; }

            .mol-msg-avatar{
                width:30px;
                height:30px;
                border-radius:999px;
                object-fit:cover;
                display:block;
            }

            .mol-msg-bubble-wrap{
                max-width:min(76%, 520px);
            }

            .mol-msg-card{
                position:relative;
                border-radius:18px;
                padding:10px 12px;
                box-shadow:0 10px 18px rgba(15,23,42,.06);
                word-wrap:break-word;
                overflow-wrap:anywhere;
            }

            .mol-msg-card.mine{
                background:linear-gradient(135deg, var(--mol-chat-primary), #4f46e5);
                color:#fff;
                border-bottom-right-radius:8px;
            }

            .mol-msg-card.other{
                background:#fff;
                color:var(--mol-chat-text);
                border:1px solid var(--mol-chat-line);
                border-bottom-left-radius:8px;
            }

            .mol-msg-body{
                font-size:.92rem;
                line-height:1.5;
                white-space:pre-wrap;
            }

            .mol-msg-meta{
                font-size:.71rem;
                color:#94a3b8;
                margin-top:5px;
                padding:0 4px;
            }

            .mol-check{
                margin-left:4px;
                font-size:.8rem;
            }

            .mol-msg-react-trigger{
                position:absolute;
                right:-10px;
                bottom:-10px;
                width:28px;
                height:28px;
                border:none;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                background:#fff;
                color:var(--mol-chat-primary);
                box-shadow:0 8px 18px rgba(15,23,42,.12);
            }

            .mol-msg-reactions{
                display:flex;
                flex-wrap:wrap;
                gap:6px;
                margin-top:6px;
            }

            .mol-msg-reaction-chip{
                display:inline-flex;
                align-items:center;
                gap:5px;
                padding:4px 8px;
                border-radius:999px;
                background:#fff;
                border:1px solid var(--mol-chat-line);
                font-size:.72rem;
                font-weight:700;
                color:#334155;
                box-shadow:0 6px 12px rgba(15,23,42,.05);
            }

            .mol-msg-reply-quote{
                padding:8px 10px;
                border-radius:12px;
                margin-bottom:8px;
                background:rgba(255,255,255,.16);
                border-left:3px solid rgba(255,255,255,.42);
            }

            .mol-msg-card.other .mol-msg-reply-quote{
                background:#f8fafc;
                border-left-color:rgba(37,99,235,.28);
            }

            .mol-msg-reply-quote__author{
                font-size:.72rem;
                font-weight:800;
                margin-bottom:2px;
            }

            .mol-msg-reply-quote__text{
                font-size:.79rem;
                opacity:.92;
            }

            .mol-reply-banner{
                display:inline-flex;
                align-items:center;
                gap:6px;
                margin-bottom:6px;
                font-size:.72rem;
                font-weight:700;
                color:#64748b;
                padding-left:2px;
            }

            .mol-system-line{
                display:flex;
                justify-content:center;
                margin:12px 0;
            }

            .mol-system-badge{
                display:inline-flex;
                align-items:center;
                gap:8px;
                padding:8px 12px;
                border-radius:999px;
                background:#fff;
                border:1px solid var(--mol-chat-line);
                font-size:.78rem;
                color:#64748b;
                box-shadow:0 8px 16px rgba(15,23,42,.05);
            }

            .mol-inline-media,
            .mol-inline-file,
            .mol-inline-audio{
                margin-top:8px;
            }

            .mol-chat-image,
            .mol-chat-video{
                width:100%;
                max-height:280px;
                object-fit:cover;
                border-radius:14px;
                display:block;
                background:#e2e8f0;
            }

            .mol-chat-audio{
                width:100%;
            }

            .mol-inline-filebar,
            .mol-inline-file{
                display:flex;
                align-items:center;
                gap:10px;
                margin-top:8px;
                padding:10px 12px;
                border-radius:14px;
                background:rgba(255,255,255,.9);
                border:1px solid var(--mol-chat-line);
            }

            .mol-msg-card.mine .mol-inline-filebar,
            .mol-msg-card.mine .mol-inline-file{
                background:rgba(255,255,255,.14);
                border-color:rgba(255,255,255,.2);
                color:#fff;
            }

            .mol-inline-file__icon{
                width:36px;
                height:36px;
                border-radius:12px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                background:rgba(37,99,235,.08);
                color:var(--mol-chat-primary);
                flex:0 0 auto;
            }

            .mol-msg-card.mine .mol-inline-file__icon{
                background:rgba(255,255,255,.16);
                color:#fff;
            }

            .mol-inline-file__main,
            .mol-inline-filebar__main{
                min-width:0;
                flex:1 1 auto;
            }

            .mol-inline-file__name,
            .mol-inline-filebar__name{
                font-size:.83rem;
                font-weight:800;
                line-height:1.25;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
            }

            .mol-inline-file__meta,
            .mol-inline-filebar__meta{
                font-size:.72rem;
                opacity:.8;
                margin-top:2px;
            }

            .mol-inline-file__download,
            .mol-inline-filebar__download{
                width:34px;
                height:34px;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                text-decoration:none;
                color:inherit;
                background:rgba(255,255,255,.5);
                flex:0 0 auto;
            }

            .mol-reply-box{
                display:none;
                align-items:center;
                gap:10px;
                padding:10px 12px;
                margin:0 12px 10px;
                border-radius:16px;
                background:#fff;
                border:1px solid var(--mol-chat-line);
                box-shadow:var(--mol-chat-shadow-soft);
            }

            .mol-reply-box.is-active{
                display:flex;
            }

            .mol-reply-box__title{
                font-size:.75rem;
                font-weight:800;
                color:var(--mol-chat-primary);
            }

            .mol-reply-box__text{
                font-size:.8rem;
                color:var(--mol-chat-muted);
            }

            .mol-reply-close{
                width:32px;
                height:32px;
                border:none;
                border-radius:999px;
                background:#f8fafc;
                color:#334155;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                flex:0 0 auto;
            }

            .mol-bottombar{
                padding:0 12px 12px;
                background:transparent;
            }

            .mol-bottombar__row{
                display:flex;
                align-items:flex-end;
                gap:10px;
                padding:10px;
                border-radius:22px;
                background:rgba(255,255,255,.95);
                border:1px solid var(--mol-chat-line);
                box-shadow:0 12px 28px rgba(15,23,42,.06);
            }

            .mol-bottombar__left,
            .mol-bottombar__right{
                display:flex;
                align-items:center;
                gap:8px;
                flex:0 0 auto;
            }

            .mol-bottombar__center{
                flex:1 1 auto;
                min-width:0;
            }

            .mol-circle-btn,
            .mol-send-btn,
            .mol-like-btn{
                width:42px;
                height:42px;
                border:none;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                transition:.18s ease;
            }

            .mol-circle-btn{
                background:#f8fafc;
                color:#334155;
                box-shadow:inset 0 0 0 1px var(--mol-chat-line);
            }

            .mol-circle-btn:hover{
                background:#fff;
                transform:translateY(-1px);
            }

            .mol-send-btn{
                color:#fff;
                background:linear-gradient(135deg, var(--mol-chat-primary), #4f46e5);
                box-shadow:0 12px 22px rgba(37,99,235,.28);
            }

            .mol-like-btn{
                color:#2563eb;
                background:rgba(37,99,235,.08);
            }

            .mol-circle-btn.is-recording{
                background:rgba(220,38,38,.12);
                color:#dc2626;
                box-shadow:0 0 0 6px rgba(220,38,38,.08);
                animation:molPulse 1.1s infinite;
            }

            .mol-compose{
                position:relative;
                display:flex;
                align-items:flex-end;
                min-width:0;
            }

            .mol-compose__input{
                width:100%;
                min-height:42px;
                max-height:110px;
                resize:none;
                border:none;
                outline:none;
                background:#f8fafc;
                border-radius:18px;
                padding:10px 42px 10px 14px;
                font-size:.92rem;
                line-height:1.45;
                box-shadow:inset 0 0 0 1px rgba(15,23,42,.06);
            }

            .mol-compose__emoji{
                position:absolute;
                right:6px;
                bottom:6px;
                width:30px;
                height:30px;
                border:none;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                color:#64748b;
                background:transparent;
            }

            .mol-hidden{
                display:none !important;
            }

            .mol-msg-menu{
                position:fixed;
                min-width:180px;
                background:#fff;
                border:1px solid var(--mol-chat-line);
                border-radius:16px;
                box-shadow:var(--mol-chat-shadow);
                padding:6px;
                z-index:2147483647;
                display:none;
            }

            .mol-msg-menu.is-open{
                display:block;
            }

            .mol-msg-menu button{
                width:100%;
                border:none;
                background:transparent;
                display:flex;
                align-items:center;
                gap:10px;
                padding:10px 12px;
                border-radius:12px;
                color:#0f172a;
                font-size:.9rem;
                font-weight:600;
                text-align:left;
            }

            .mol-msg-menu button:hover{
                background:#f8fafc;
            }

            .mol-typing{
                display:inline-flex;
                align-items:center;
                gap:8px;
                background:#fff;
                border:1px solid var(--mol-chat-line);
                border-radius:999px;
                padding:8px 12px;
                box-shadow:0 8px 16px rgba(15,23,42,.05);
            }

            .mol-dots{
                display:inline-flex;
                align-items:center;
                gap:4px;
            }

            .mol-dot{
                width:6px;
                height:6px;
                border-radius:999px;
                background:#94a3b8;
                animation:molTyping 1s infinite ease-in-out;
            }
            .mol-dot:nth-child(2){ animation-delay:.15s; }
            .mol-dot:nth-child(3){ animation-delay:.3s; }

            .mol-call-overlay{
                position:fixed;
                inset:0;
                z-index:2147483600;
                background:
                    radial-gradient(circle at top left, rgba(37,99,235,.24), transparent 25%),
                    radial-gradient(circle at bottom right, rgba(79,70,229,.22), transparent 28%),
                    linear-gradient(135deg, #0b1220 0%, #101827 100%);
                padding:18px;
                overflow:auto;
            }

            .mol-call-shell{
                min-height:calc(100dvh - 36px);
                border-radius:28px;
                background:rgba(255,255,255,.08);
                border:1px solid rgba(255,255,255,.12);
                backdrop-filter:blur(16px);
                box-shadow:0 28px 70px rgba(0,0,0,.32);
                color:#fff;
                padding:16px;
                display:flex;
                flex-direction:column;
                gap:16px;
            }

            .mol-call-top,
            .mol-call-main,
            .mol-call-footer{
                display:flex;
                gap:16px;
            }

            .mol-call-top{
                align-items:center;
                justify-content:space-between;
                flex-wrap:wrap;
            }

            .mol-call-top-left,
            .mol-call-top-right{
                display:flex;
                align-items:center;
                gap:12px;
            }

            .mol-call-top-avatar{
                width:52px;
                height:52px;
                border-radius:999px;
                object-fit:cover;
                border:2px solid rgba(255,255,255,.2);
            }

            .mol-call-top-name{
                font-size:1rem;
                font-weight:800;
            }

            .mol-call-top-status{
                font-size:.82rem;
                color:rgba(255,255,255,.72);
            }

            .mol-call-chip{
                display:inline-flex;
                align-items:center;
                gap:8px;
                padding:10px 14px;
                border-radius:999px;
                background:rgba(255,255,255,.12);
                border:1px solid rgba(255,255,255,.14);
                font-size:.82rem;
                font-weight:700;
            }

            .mol-call-close{
                width:42px;
                height:42px;
                border:none;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                background:rgba(255,255,255,.12);
                color:#fff;
            }

            .mol-call-main{
                flex:1 1 auto;
                min-height:0;
                display:grid;
                grid-template-columns:340px minmax(0,1fr);
            }

            .mol-call-side{
                display:flex;
                flex-direction:column;
                gap:16px;
            }

            .mol-call-hero,
            .mol-call-quick,
            .mol-call-stage{
                border-radius:24px;
                background:rgba(255,255,255,.08);
                border:1px solid rgba(255,255,255,.12);
                padding:18px;
            }

            .mol-call-hero{
                text-align:center;
            }

            .mol-call-ring-wrap{
                position:relative;
                width:170px;
                height:170px;
                margin:0 auto 16px;
                display:grid;
                place-items:center;
            }

            .mol-call-pulse,
            .mol-call-pulse-2,
            .mol-call-pulse-3{
                position:absolute;
                inset:0;
                border-radius:999px;
                border:1px solid rgba(255,255,255,.16);
                animation:molCallPulse 2.4s infinite ease-out;
            }

            .mol-call-pulse-2{ animation-delay:.45s; }
            .mol-call-pulse-3{ animation-delay:.9s; }

            .mol-call-avatar-big{
                width:108px;
                height:108px;
                object-fit:cover;
                border-radius:999px;
                position:relative;
                z-index:2;
                border:4px solid rgba(255,255,255,.24);
            }

            .mol-call-center-badge{
                position:absolute;
                right:26px;
                bottom:24px;
                width:38px;
                height:38px;
                border-radius:999px;
                display:grid;
                place-items:center;
                background:#2563eb;
                color:#fff;
                box-shadow:0 10px 18px rgba(37,99,235,.35);
                z-index:3;
            }

            .mol-call-name{
                font-size:1.15rem;
                font-weight:800;
            }

            .mol-call-status{
                margin-top:4px;
                font-size:.92rem;
                font-weight:700;
            }

            .mol-call-substatus{
                margin-top:6px;
                font-size:.8rem;
                color:rgba(255,255,255,.72);
            }

            .mol-call-quick{
                display:grid;
                grid-template-columns:1fr 1fr;
                gap:12px;
            }

            .mol-call-mini{
                border-radius:18px;
                padding:14px;
                background:rgba(255,255,255,.08);
            }

            .mol-call-mini-title{
                font-size:.76rem;
                color:rgba(255,255,255,.7);
                margin-bottom:4px;
            }

            .mol-call-mini-value{
                font-size:.9rem;
                font-weight:800;
            }

            .mol-call-stage{
                position:relative;
                min-height:420px;
                overflow:hidden;
            }

            .mol-call-label{
                display:inline-flex;
                align-items:center;
                gap:8px;
                position:absolute;
                top:16px;
                left:16px;
                z-index:4;
                padding:8px 12px;
                border-radius:999px;
                background:rgba(0,0,0,.28);
                font-size:.75rem;
                font-weight:800;
                backdrop-filter:blur(8px);
            }

            .mol-call-remote,
            .mol-call-local{
                width:100%;
                height:100%;
                object-fit:cover;
                background:#0f172a;
                border-radius:20px;
            }

            .mol-call-screen-empty{
                position:absolute;
                inset:0;
                display:grid;
                place-items:center;
                font-size:4rem;
                color:rgba(255,255,255,.14);
                pointer-events:none;
            }

            .mol-call-local-card{
                position:absolute;
                right:16px;
                bottom:16px;
                width:min(240px, 34%);
                aspect-ratio:9/12;
                border-radius:22px;
                overflow:hidden;
                border:1px solid rgba(255,255,255,.16);
                box-shadow:0 18px 30px rgba(0,0,0,.25);
                background:#0f172a;
            }

            .mol-call-local-card .mol-call-label{
                left:10px;
                top:10px;
                padding:6px 10px;
            }

            .mol-call-footer{
                flex-direction:column;
                align-items:center;
                gap:12px;
            }

            .mol-call-main-actions,
            .mol-call-secondary-actions{
                display:flex;
                align-items:center;
                justify-content:center;
                gap:10px;
                flex-wrap:wrap;
            }

            .mol-call-btn{
                min-width:150px;
                height:50px;
                border-radius:999px;
                font-weight:800;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                gap:10px;
                box-shadow:0 16px 28px rgba(0,0,0,.18);
            }

            .mol-call-tool{
                width:48px;
                height:48px;
                border:none;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                color:#fff;
                background:rgba(255,255,255,.14);
                border:1px solid rgba(255,255,255,.14);
            }

            .mol-call-tool.is-muted{
                background:rgba(220,38,38,.22);
                color:#fff;
            }

            .mol-call-tool.is-active{
                background:rgba(37,99,235,.32);
            }

            @keyframes molPulse{
                0%{ box-shadow:0 0 0 0 rgba(220,38,38,.20); }
                70%{ box-shadow:0 0 0 10px rgba(220,38,38,0); }
                100%{ box-shadow:0 0 0 0 rgba(220,38,38,0); }
            }

            @keyframes molTyping{
                0%,80%,100%{ transform:scale(.8); opacity:.45; }
                40%{ transform:scale(1); opacity:1; }
            }

            @keyframes molCallPulse{
                0%{ transform:scale(.82); opacity:0; }
                35%{ opacity:.3; }
                100%{ transform:scale(1.25); opacity:0; }
            }

            @media (max-width: 991.98px){
                .mol-chat-panel{
                    right:0;
                    top:var(--mol-topbar-h);
                    width:100vw;
                    height:calc(var(--mol-chat-vh) - var(--mol-topbar-h));
                    max-height:calc(var(--mol-chat-vh) - var(--mol-topbar-h));
                    border-radius:0;
                    border:none;
                }

                .mol-toast-chat{
                    right:8px;
                    left:8px;
                    bottom:8px;
                    max-width:none;
                    justify-content:flex-end;
                }

                .mol-chat-toast{
                    width:min(100%, 390px);
                }

                .mol-call-shell{
                    min-height:calc(100dvh - 16px);
                    padding:12px;
                    border-radius:22px;
                }

                .mol-call-main{
                    grid-template-columns:1fr;
                }

                .mol-call-stage{
                    min-height:360px;
                }

                .mol-call-local-card{
                    width:130px;
                }
            }
       

            /* =========================
       MOL CHAT - PATCH UNIQUE PROPRE
       Remplace tous les anciens hotfix/patch/final/stable
       ========================= */

    :root{
        --mol-chat-dock-shift: 0px;
    }

    /* structure générale */
    #molChatPanel .mol-chat-panel__header,
    #molChatToasts .toast,
    #molChatToasts .toast-header,
    #molChatThread,
    #molChatThread .border-bottom,
    #molChatThread .border-bottom.bg-white{
        overflow: visible !important;
    }

    /* recherche sticky */
    #molChatPanel .mol-chat-search-wrap{
        position: sticky;
        top: 0;
        z-index: 5;
        background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
        backdrop-filter: blur(12px);
        margin-bottom: 0 !important;
        padding-bottom: 12px !important;
    }

    #molChatList{
        padding-top: 10px !important;
    }

    /* panel actions */
    .mol-panel-actions{
        display:flex;
        align-items:center;
        gap:8px;
        flex:0 0 auto;
        margin-left:auto;
    }

    .mol-panel-menu{
        position:fixed;
        display:none;
        min-width:250px;
        max-width:min(280px, calc(100vw - 20px));
        padding:8px;
        border:1px solid rgba(15,23,42,.08);
        border-radius:18px;
        background:rgba(255,255,255,.98);
        backdrop-filter:blur(16px);
        box-shadow:0 24px 48px rgba(15,23,42,.16);
        z-index:2147483647;
    }

    .mol-panel-menu.is-open{
        display:block;
    }

    .mol-panel-menu__item{
        width:100%;
        border:none;
        background:transparent;
        display:flex;
        align-items:center;
        gap:10px;
        text-align:left;
        padding:10px 12px;
        border-radius:12px;
        color:#334155;
        font-size:.92rem;
        font-weight:600;
    }

    .mol-panel-menu__item:hover{
        background:#f8fafc;
    }

    .mol-panel-menu__item i{
        width:18px;
        min-width:18px;
        text-align:center;
        color:#64748b;
    }

    .mol-panel-menu__divider{
        height:1px;
        background:rgba(15,23,42,.08);
        margin:8px 0;
    }

    /* dock desktop */
    @media (min-width: 992px){
        body.mol-chat-open #molChatToasts{
            left:auto !important;
            right:calc(18px + var(--mol-chat-dock-shift)) !important;
            max-width:calc(100vw - 36px - var(--mol-chat-dock-shift)) !important;

            display:flex !important;
            flex-direction:row !important;
            flex-wrap:nowrap !important;
            align-items:flex-end !important;
            justify-content:flex-end !important;
            gap:14px !important;

            overflow-x:auto !important;
            overflow-y:visible !important;
            scrollbar-width:none !important;
        }

        body.mol-chat-open #molChatToasts::-webkit-scrollbar{
            display:none !important;
        }

        body:not(.mol-chat-open) #molChatToasts{
            left:auto !important;
            right:18px !important;
            max-width:calc(100vw - 36px) !important;
        }
    }

    #molChatToasts{
        align-items:flex-end !important;
    }

    #molChatToasts .toast{
        flex:0 0 auto !important;
        align-self:flex-end !important;
        margin:0 !important;
        width:min(390px, calc(100vw - 24px)) !important;
        max-width:min(390px, calc(100vw - 24px)) !important;
        overflow:visible !important;
        pointer-events:auto;
    }

    /* bubble réduite */
    .mol-toast-mini{
        width:min(390px, calc(100vw - 24px)) !important;
        max-width:min(390px, calc(100vw - 24px)) !important;
        min-width:min(390px, calc(100vw - 24px)) !important;
    }

    .mol-toast-mini .toast-body{
        display:none !important;
    }

    .mol-toast-mini .toast-header{
        border-bottom:none !important;
    }

    /* on neutralise les anciens boutons injectés */
    .mol-mini-btn{
        display:none !important;
    }

    /* menu dropdown porté dans body */
    .toast .dropdown-menu:not(.mol-chat-portal-menu),
    #molChatThread .dropdown-menu:not(.mol-chat-portal-menu){
        display:none !important;
    }

    .mol-chat-portal-menu{
        position:fixed !important;
        display:none !important;
        min-width:240px !important;
        max-width:min(280px, calc(100vw - 20px)) !important;
        padding:8px !important;
        border:1px solid rgba(15,23,42,.08) !important;
        border-radius:18px !important;
        background:rgba(255,255,255,.98) !important;
        backdrop-filter:blur(16px) !important;
        box-shadow:0 24px 48px rgba(15,23,42,.16) !important;
        z-index:2147483647 !important;
    }

    .mol-chat-portal-menu.show{
        display:block !important;
    }

    .mol-chat-portal-menu .dropdown-item{
        display:flex !important;
        align-items:center !important;
        gap:10px !important;
        border-radius:12px !important;
        padding:10px 12px !important;
        font-size:.92rem !important;
        font-weight:600 !important;
        color:#334155 !important;
    }

    .mol-chat-portal-menu .dropdown-item:hover{
        background:#f8fafc !important;
    }

    .mol-chat-portal-menu .dropdown-item i{
        width:18px !important;
        min-width:18px !important;
        text-align:center !important;
        color:#64748b !important;
        font-size:.95rem !important;
    }

    .mol-chat-portal-menu .dropdown-divider{
        margin:8px -8px !important;
        border-top-color:rgba(15,23,42,.08) !important;
    }

    /* composer */
    .mol-bottombar{
        padding:10px 12px 12px !important;
        background:transparent !important;
    }

    .mol-bottombar__row{
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        gap:8px !important;
        min-width:0 !important;
        padding:8px !important;
        border-radius:999px !important;
        background:rgba(255,255,255,.98) !important;
        border:1px solid rgba(15,23,42,.08) !important;
        box-shadow:0 12px 26px rgba(15,23,42,.07) !important;
    }

    .mol-more-toggle{
        width:38px !important;
        height:38px !important;
        padding:0 !important;
        border:none !important;
        border-radius:999px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        flex:0 0 38px !important;
        background:rgba(37,99,235,.08) !important;
        color:#2563eb !important;
        transition:.2s ease !important;
    }

    .mol-more-toggle:hover{
        background:rgba(37,99,235,.14) !important;
        transform:translateY(-1px) !important;
    }

    .mol-bottombar__row.is-open .mol-more-toggle i{
        transform:rotate(180deg) !important;
    }

    .mol-bottombar__left{
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
        flex:0 0 auto !important;
        min-width:0 !important;
        max-width:0 !important;
        opacity:0 !important;
        overflow:hidden !important;
        pointer-events:none !important;
        margin:0 !important;
        transition:max-width .22s ease, opacity .18s ease, margin .18s ease !important;
    }

    .mol-bottombar__row.is-open .mol-bottombar__left{
        max-width:180px !important;
        opacity:1 !important;
        pointer-events:auto !important;
        margin-right:2px !important;
    }

    .mol-bottombar__center{
        flex:1 1 auto !important;
        min-width:0 !important;
    }

    .mol-bottombar__right{
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
        flex:0 0 auto !important;
        min-width:fit-content !important;
    }

    .mol-compose{
        position:relative !important;
        display:block !important;
        width:100% !important;
        min-width:0 !important;
    }

    .mol-compose__input{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        min-height:44px !important;
        max-height:110px !important;
        resize:none !important;
        border:none !important;
        outline:none !important;
        background:#f8fafc !important;
        border-radius:999px !important;
        padding:11px 46px 11px 16px !important;
        box-shadow:inset 0 0 0 1px rgba(15,23,42,.06) !important;
        font-size:.93rem !important;
        line-height:1.4 !important;
    }

    .mol-compose__input:focus{
        background:#fff !important;
        box-shadow:
            inset 0 0 0 1px rgba(37,99,235,.22) 0 0 0 4px rgba(37,99,235,.08) !important;
    }

    .mol-compose__emoji{
        position:absolute !important;
        top:50% !important;
        bottom:auto !important;
        right:8px !important;
        transform:translateY(-50%) !important;
        width:32px !important;
        height:32px !important;
        border:none !important;
        border-radius:999px !important;
        background:transparent !important;
        color:#64748b !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .mol-circle-btn,
    .mol-like-btn,
    .mol-send-btn{
        width:40px !important;
        height:40px !important;
        flex:0 0 40px !important;
        border-radius:999px !important;
    }

    .mol-like-btn{
        border:none !important;
        background:rgba(37,99,235,.08) !important;
        color:#2563eb !important;
    }

    .mol-send-btn{
        border:none !important;
        color:#fff !important;
        background:linear-gradient(135deg, #2563eb, #4f46e5) !important;
        box-shadow:0 10px 20px rgba(37,99,235,.22) !important;
    }

    .mol-like-btn.is-sending{
        opacity:.68 !important;
        pointer-events:none !important;
    }

    .mol-hidden{
        display:none !important;
    }

    /* mobile */
    @media (max-width: 991.98px){
        :root{
            --mol-chat-dock-shift: 0px !important;
        }

        #molChatToasts{
            right:8px !important;
            left:8px !important;
            max-width:none !important;
            flex-wrap:wrap-reverse !important;
            overflow-x:visible !important;
        }

        #molChatToasts .toast,
        #molChatToasts .toast.mol-toast-mini{
            width:min(100%, 390px) !important;
            max-width:min(100%, 390px) !important;
            min-width:min(100%, 390px) !important;
        }

        .mol-bottombar{
            padding-bottom:max(12px, env(safe-area-inset-bottom)) !important;
        }
    }
            
        
            /* =========================
            HOTFIX PREMIUM CHAT UI
            à coller tout à la fin
            ========================= */

            /* Le toast et le header doivent laisser sortir le menu */
            #molChatToasts .toast,
            #molChatToasts .toast-header,
            #molChatToasts .chat-header-actions,
            #molChatThread{
                overflow: visible !important;
            }

            /* ===== Recherche / panel ===== */
            #molChatPanel .mol-chat-search-wrap{
                position: sticky;
                top: 0;
                z-index: 4;
                background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
                backdrop-filter: blur(12px);
                margin-bottom: 0 !important;
                padding-bottom: 12px !important;
            }

            #molChatList{
                padding-top: 10px !important;
            }

            /* ===== Dropdown options ===== */
            .mol-chat-toast .dropdown-menu,
            #molChatThread .dropdown-menu{
                display: none;
                position: absolute !important;
                top: calc(100% + 8px) !important;
                right: 0 !important;
                left: auto !important;
                min-width: 220px;
                padding: 8px;
                border: 1px solid rgba(15,23,42,.08);
                border-radius: 18px;
                background: rgba(255,255,255,.98);
                backdrop-filter: blur(14px);
                box-shadow: 0 18px 40px rgba(15,23,42,.14);
                z-index: 2147483647 !important;
            }

            .mol-chat-toast .dropdown-menu.show,
            #molChatThread .dropdown-menu.show{
                display: block;
            }

            .mol-chat-toast .dropdown-menu .dropdown-item,
            #molChatThread .dropdown-menu .dropdown-item{
                border-radius: 12px;
                padding: 10px 12px;
                font-size: .9rem;
                font-weight: 600;
            }

            .mol-chat-toast .dropdown-menu .dropdown-item:hover,
            #molChatThread .dropdown-menu .dropdown-item:hover{
                background: #f8fafc;
            }

            /* ===== Minimize bubble ===== */
            .mol-mini-btn{
                width: 32px;
                height: 32px;
                padding: 0;
                border: none;
                border-radius: 999px;
                background: #f8fafc;
                color: #334155;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
                transition: .18s ease;
            }

            .mol-mini-btn:hover{
                background: #fff;
                transform: translateY(-1px);
            }

            .mol-toast-mini{
                width: 290px !important;
            }

            .mol-toast-mini .toast-body{
                display: none !important;
            }

            .mol-toast-mini .toast-header{
                border-bottom: none !important;
            }

            .mol-toast-mini .mol-mini-btn i{
                transform: rotate(180deg);
            }

            /* ===== Messenger-like composer ===== */
            .mol-bottombar{
                padding: 10px 12px 12px !important;
                background: transparent !important;
            }

            .mol-bottombar__row{
                display: grid !important;
                grid-template-columns: auto minmax(0,1fr) auto !important;
                align-items: center !important;
                gap: 8px !important;
                padding: 8px !important;
                border-radius: 999px !important;
                background: rgba(255,255,255,.98) !important;
                border: 1px solid rgba(15,23,42,.08) !important;
                box-shadow: 0 12px 26px rgba(15,23,42,.07) !important;
            }

            .mol-more-toggle{
                width: 38px;
                height: 38px;
                padding: 0;
                border: none;
                border-radius: 999px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: rgba(37,99,235,.08);
                color: #2563eb;
                flex: 0 0 38px;
                transition: .2s ease;
            }

            .mol-more-toggle:hover{
                transform: translateY(-1px);
                background: rgba(37,99,235,.12);
            }

            .mol-bottombar__row.mol-actions-open .mol-more-toggle i{
                transform: rotate(180deg);
            }

            .mol-bottombar__left{
                display: flex !important;
                align-items: center !important;
                gap: 8px !important;
                overflow: hidden !important;
                max-width: 0;
                opacity: 0;
                pointer-events: none;
                transition: max-width .22s ease, opacity .18s ease, margin .18s ease;
                margin-right: 0;
                flex: 0 0 auto !important;
            }

            .mol-bottombar__row.mol-actions-open .mol-bottombar__left{
                max-width: 180px;
                opacity: 1;
                pointer-events: auto;
                margin-right: 2px;
            }

            .mol-bottombar__center{
                min-width: 0 !important;
            }

            .mol-compose{
                position: relative;
                width: 100%;
                min-width: 0;
            }

            .mol-compose__input{
                width: 100% !important;
                min-height: 44px !important;
                max-height: 110px !important;
                resize: none !important;
                border: none !important;
                outline: none !important;
                background: #f8fafc !important;
                border-radius: 999px !important;
                padding: 11px 44px 11px 16px !important;
                box-shadow: inset 0 0 0 1px rgba(15,23,42,.06) !important;
                font-size: .93rem !important;
                line-height: 1.4 !important;
            }

            .mol-compose__input:focus{
                box-shadow: inset 0 0 0 1px rgba(37,99,235,.22), 0 0 0 4px rgba(37,99,235,.08) !important;
                background: #fff !important;
            }

            .mol-compose__emoji{
                position: absolute !important;
                right: 6px !important;
                bottom: 6px !important;
                width: 32px !important;
                height: 32px !important;
                border: none !important;
                border-radius: 999px !important;
                background: transparent !important;
                color: #64748b !important;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .mol-bottombar__right{
                display: flex !important;
                align-items: center !important;
                gap: 8px !important;
                flex: 0 0 auto !important;
            }

            .mol-like-btn,
            .mol-send-btn,
            .mol-circle-btn{
                width: 40px !important;
                height: 40px !important;
                border-radius: 999px !important;
            }

            .mol-like-btn{
                background: rgba(37,99,235,.08) !important;
                color: #2563eb !important;
                border: none !important;
            }

            .mol-like-btn.is-sending{
                opacity: .68;
                pointer-events: none;
            }

            .mol-send-btn{
                background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
                color: #fff !important;
                border: none !important;
                box-shadow: 0 10px 20px rgba(37,99,235,.22);
            }

            /* ===== thread mobile ===== */
            #molChatThread .border-bottom.bg-white{
                overflow: visible !important;
            }

            #molChatThreadMsgs{
                padding-bottom: 10px !important;
            }

            /* ===== helper ===== */
            .mol-hidden{
                display: none !important;
            }

            @media (max-width: 991.98px){
                .mol-bottombar{
                    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
                }

                #molChatThread .mol-bottombar__row{
                    padding: 8px !important;
                }
            }

            .pm-flash-container {
    position: fixed;
    top: 90px;
    right: 18px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(420px, calc(100vw - 28px));
}

.pm-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .14);
    border: 1px solid rgba(15, 23, 42, .08);
    color: #0f172a;
    font-weight: 700;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s ease;
}

.pm-flash-success {
    border-left: 5px solid #22c55e;
}

.pm-flash-danger {
    border-left: 5px solid #ef4444;
}

.pm-flash-warning {
    border-left: 5px solid #f59e0b;
}

.pm-flash-info {
    border-left: 5px solid #0ea5e9;
}

.pm-flash.pm-flash-hide {
    opacity: 0;
    transform: translateY(-10px);
}

@media (max-width: 575.98px) {
    .pm-flash-container {
        top: 76px;
        left: 14px;
        right: 14px;
        max-width: none;
    }
}





/* =========================================================
   FIX MENU MOBILE AU-DESSUS DE LA NAVBAR
   ========================================================= */

.pm-overlay {
    z-index: 100000 !important;
}

.pm-mobile-menu {
    z-index: 100001 !important;
}

.pm-mobile-close {
    position: relative;
    z-index: 100002 !important;
    pointer-events: auto !important;
}

body.pm-menu-open .pm-navbar,
body.pm-menu-open .navbar {
    z-index: 99998 !important;
}
  

:root {
    --mol-green: #00a870;
    --mol-green-dark: #009260;
    --mol-text: #1f2937;
    --mol-muted: #6b7280;
    --mol-border: #e5e7eb;
    --mol-soft-bg: #ffffff;
    --mol-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}



/* Logo */
.menu-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex: 0 0 auto;
}

.header-brand-img,
.desktop-logo {
    width: 185px;
    max-height: 56px;
    object-fit: contain;
    display: block;
}

/* Menu desktop */
.pm-menu {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0;
    margin: 0;
    list-style: none;
    flex: 1;
    justify-content: center;
}

.pm-menu > li {
    position: relative;
    list-style: none;
}

.pm-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--mol-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s ease, opacity 0.18s ease;
}

.pm-menu-link i {
    font-size: 14px;
    color: currentColor;
    opacity: 0.9;
}

.pm-menu-link:hover,
.pm-menu-link.active {
    color: var(--mol-green);
    text-decoration: none;
}

.pm-submenu-caret {
    font-size: 11px;
    margin-left: 1px !important;
}

/* Dropdown profils */
.pm-has-submenu .sub-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 190px;
    padding: 8px;
    margin: 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid var(--mol-border);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.18s ease;
    z-index: 30;
}

.pm-has-submenu:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.pm-has-submenu .sub-menu a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--mol-text);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: 0.18s ease;
}

.pm-has-submenu .sub-menu a:hover {
    color: var(--mol-green);
    background: rgba(0, 168, 112, 0.08);
}

/* Zone boutons droite */
.pm-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.pm-buttons li {
    list-style: none;
}

/* Boutons soft */
.pm-btn,
.mol-lang-btn,
.mol-account-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: 0.18s ease;
}

.pm-btn i {
    font-size: 14px;
}

/* Connexion */
.pm-btn-soft {
    color: var(--mol-text);
    background: #ffffff;
    border: 1px solid var(--mol-border);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
}

.pm-btn-soft:hover {
    color: var(--mol-green);
    border-color: rgba(0, 168, 112, 0.35);
    background: rgba(0, 168, 112, 0.04);
}

/* Inscription */
.pm-btn-green {
    color: #ffffff;
    background: var(--mol-green);
    border: 1px solid var(--mol-green);
    box-shadow: 0 8px 22px rgba(0, 168, 112, 0.22);
}

.pm-btn-green:hover {
    color: #ffffff;
    background: var(--mol-green-dark);
    border-color: var(--mol-green-dark);
    transform: translateY(-1px);
}

/* Langue */
.mol-topbar-lang {
    position: relative;
}

.mol-lang-btn {
    min-width: 88px;
    padding: 0 14px;
    color: var(--mol-text);
    background: #ffffff;
    border: 1px solid var(--mol-border);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
    cursor: pointer;
}

.mol-lang-btn img {
    border-radius: 50%;
    width: 22px;
    height: 22px;
    object-fit: cover;
}

.mol-lang-btn span {
    font-size: 14px;
    font-weight: 400;
}

.mol-lang-btn i {
    font-size: 12px;
    color: var(--mol-muted);
}

.mol-lang-btn:hover {
    border-color: rgba(0, 168, 112, 0.35);
    background: rgba(0, 168, 112, 0.04);
}

/* Dropdown générique */
.mol-dd-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 180px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--mol-border);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: 0.18s ease;
    z-index: 50;
}

.mol-dd:hover .mol-dd-menu,
.mol-dd.is-open .mol-dd-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.mol-dd-item {
    color: var(--mol-text);
    font-size: 13px;
    font-weight: 400;
    border-radius: 10px;
    text-decoration: none;
    transition: 0.18s ease;
}

.mol-dd-item:hover {
    color: var(--mol-green);
    background: rgba(0, 168, 112, 0.08);
}

/* Bouton compte connecté */
.mol-account-btn {
    color: var(--mol-text);
    background: #ffffff;
    border: 1px solid var(--mol-border);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
}

.mol-account-btn:hover {
    color: var(--mol-green);
    border-color: rgba(0, 168, 112, 0.35);
    background: rgba(0, 168, 112, 0.04);
}

.mol-account-btn-icon i,
.mol-account-btn-caret i {
    font-size: 14px;
}

/* Hamburger */
.pm-hamburger {
    width: 42px;
    height: 42px;
    border: 1px solid var(--mol-border);
    border-radius: 14px;
    background: #ffffff;
    color: var(--mol-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .pm-menu {
        gap: 18px;
    }

    .pm-menu-link {
        font-size: 13.5px;
    }

    .header-brand-img,
    .desktop-logo {
        width: 165px;
    }

    .pm-btn,
    .mol-lang-btn,
    .mol-account-btn {
        padding-inline: 14px;
        font-size: 13.5px;
    }
}

@media (max-width: 991.98px) {
    .pm-navbar-inner {
        min-height: 68px;
    }

    .header-brand-img,
    .desktop-logo {
        width: 155px;
    }
}


/* Navbar plus compacte */
.pm-navbar-inner {
    min-height: 30px;
}

/* Logo un peu plus petit */
.header-brand-img,
.desktop-logo {
    width: 165px;
    max-height: 48px;
}

/* Boutons plus compacts */
.pm-btn,
.mol-lang-btn,
.mol-account-btn {
    min-height: 38px;
    padding: 0 15px;
    border-radius: 13px;
    font-size: 13.5px;
}

/* Menu un peu plus fin */
.pm-menu-link {
    font-size: 13.5px;
}

.pm-menu-link i {
    font-size: 13px;
}

/* Espacement légèrement réduit */
.pm-menu {
    gap: 22px;
}

.pm-buttons {
    gap: 8px;
}

/* Mobile */
@media (max-width: 991.98px) {
    .pm-navbar-inner {
        min-height: 60px;
    }

    .header-brand-img,
    .desktop-logo {
        width: 145px;
        max-height: 42px;
    }

    .pm-hamburger {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
}


/* Fond blanc du menu */
.pm-navbar,
.pm-navbar .container,
.pm-navbar-inner {
    background: #ffffff;
}

/* Si ton header parent a un fond différent */
header,
.main-header,
.app-header,
.pm-header {
    background: #ffffff;
}

/* Menu mobile aussi */
.pm-mobile-menu,
.pm-mobile-header {
    background: #ffffff;
}

.pm-navbar {
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

/* ===== MENU FOND BLANC FIXE ===== */
.pm-navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;

    background: #ffffff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);

    padding: 8px 0;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.pm-navbar.scrolled,
.pm-navbar.navbar-scrolled,
.pm-navbar.is-scrolled {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}


/* ===== NAVBAR BLANCHE FIXE — PAS DE TRANSPARENCE / PAS D'EFFET AU SCROLL ===== */
.pm-navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;

    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .04);

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    padding: 8px 0;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.pm-navbar .container,
.pm-navbar-inner {
    background: transparent !important;
}

.pm-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Même rendu sur la page marketing */
body.page-marketing .pm-navbar,
body.page-marketing .pm-navbar.is-scrolled,
body.page-marketing .pm-navbar.scrolled {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;

    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .04) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.page-marketing .pm-navbar .container,
body.page-marketing .pm-navbar-inner,
body.page-marketing .pm-navbar.is-scrolled .container,
body.page-marketing .pm-navbar.scrolled .container,
body.page-marketing .pm-navbar.is-scrolled .pm-navbar-inner,
body.page-marketing .pm-navbar.scrolled .pm-navbar-inner {
    background: transparent !important;
}

/* Liens toujours sombres, même sur page marketing */
body.page-marketing .pm-menu-link,
body.page-marketing .pm-navbar.is-scrolled .pm-menu-link,
body.page-marketing .pm-navbar.scrolled .pm-menu-link {
    color: #1f2937 !important;
}

body.page-marketing .pm-menu-link:hover,
body.page-marketing .pm-menu-link.active,
body.page-marketing .pm-navbar.is-scrolled .pm-menu-link:hover,
body.page-marketing .pm-navbar.is-scrolled .pm-menu-link.active,
body.page-marketing .pm-navbar.scrolled .pm-menu-link:hover,
body.page-marketing .pm-navbar.scrolled .pm-menu-link.active {
    background: rgba(37, 99, 235, .10) !important;
    color: #2563eb !important;
}

/* Bouton connexion / hamburger toujours lisibles */
body.page-marketing .pm-btn-light,
body.page-marketing .pm-navbar.is-scrolled .pm-btn-light,
body.page-marketing .pm-navbar.scrolled .pm-btn-light {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1f2937 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
}

body.page-marketing .pm-hamburger,
body.page-marketing .pm-navbar.is-scrolled .pm-hamburger,
body.page-marketing .pm-navbar.scrolled .pm-hamburger {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1f2937 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
}



/* =========================================================
   MENU MON COMPTE — SOFT COMPACT PREMIUM
========================================================= */

.mol-account-menu {
    width: 292px !important;
    min-width: 292px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .14) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Header utilisateur plus fin */
.mol-account-head {
    padding: 10px !important;
    margin: 0 0 6px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #f8fbff, #f3f6ff) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
}

.mol-account-user {
    gap: 10px !important;
}

.mol-account-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.mol-account-avatar img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
}

.mol-dd-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: #0f172a !important;
}

.mol-dd-sub {
    margin-top: 3px !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    line-height: 1.15 !important;
}

/* Liens plus compacts */
.mol-account-links {
    padding: 2px 0 !important;
}

.mol-account-item {
    min-height: 48px !important;
    padding: 7px 9px !important;
    gap: 10px !important;
    border-radius: 13px !important;
    margin: 2px 0 !important;
    background: transparent !important;
}

.mol-account-item:hover {
    background: #f8fafc !important;
}

.mol-account-item-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    background: #f3f6ff !important;
    color: #2563eb !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08) !important;
}

.mol-account-item-content {
    min-width: 0 !important;
}

.mol-account-item-title {
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
    color: #111827 !important;
}

.mol-account-item-content small {
    display: block !important;
    margin-top: 3px !important;
    font-size: 11.3px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Footer déconnexion plus léger */
.mol-account-footer {
    margin-top: 6px !important;
    padding-top: 7px !important;
    border-top: 1px solid rgba(148, 163, 184, .14) !important;
}

.mol-account-item-danger {
    min-height: 48px !important;
}

.mol-account-item-danger .mol-account-item-icon {
    background: #fff1f2 !important;
    color: #ef4444 !important;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .10) !important;
}

.mol-account-item-danger:hover {
    background: #fff7f7 !important;
}

.mol-account-item-danger .mol-account-item-title {
    color: #991b1b !important;
    font-weight: 650 !important;
}

/* Bouton "Mon compte" plus soft aussi */
.mol-account-btn {
    min-height: 38px !important;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.mol-account-btn-icon {
    font-size: 14px !important;
}

.mol-account-btn-text {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.mol-account-btn-caret {
    font-size: 11px !important;
}

.mol-account-item-content small {
    display: none !important;
}

.mol-account-item {
    min-height: 42px !important;
}

.mol-account-item-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
}

/* =========================================================
   FIX FINAL MENU COMPACT
   Réduit la hauteur du menu sans casser la structure
========================================================= */

:root {
    --mol-navbar-height: 58px !important;
    --mol-chat-panel-top: 70px !important;
}

/* Menu plus bas, plus compact */
.pm-navbar {
    padding: 0 !important;
    min-height: 58px !important;
    height: 58px !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04) !important;
}

/* Centre verticalement le contenu du menu */
.pm-navbar .container {
    height: 58px !important;
    display: flex !important;
    align-items: center !important;
}

.pm-navbar-inner {
    min-height: 58px !important;
    height: 58px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* Logo plus petit */
.menu-brand {
    height: 42px !important;
}

.menu-brand img,
.menu-brand svg,
.header-brand-img,
.desktop-logo {
    height: 34px !important;
    max-height: 34px !important;
    width: auto !important;
}

/* Liens du menu plus compacts */
.pm-menu-link {
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

.pm-menu-link i {
    font-size: 13px !important;
}

/* Réduit les espacements entre menus */
.pm-menu {
    gap: 14px !important;
}

/* Boutons droite plus compacts */
.pm-buttons {
    gap: 8px !important;
}

.pm-btn,
.pm-btn-soft,
.pm-btn-green,
.mol-lang-btn,
.mol-account-btn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
}

/* Drapeau langue */
.mol-lang-btn img,
.mol-dd-btn img.country {
    width: 20px !important;
    height: 15px !important;
}

/* Si le menu est fixed, le body doit compenser seulement 58px */
body {
    padding-top: 58px !important;
}

/* Si le menu est sticky au lieu de fixed, pas besoin de padding body */
.pm-navbar:not([style*="fixed"]) + .app-shell,
.pm-navbar:not([style*="fixed"]) + main {
    margin-top: 0 !important;
}

/* Mobile */
@media (max-width: 991.98px) {
    :root {
        --mol-navbar-height: 56px !important;
        --mol-chat-panel-top: 66px !important;
    }

    .pm-navbar {
        min-height: 56px !important;
        height: 56px !important;
    }

    .pm-navbar .container,
    .pm-navbar-inner {
        min-height: 56px !important;
        height: 56px !important;
    }

    body {
        padding-top: 56px !important;
    }

    .menu-brand img,
    .menu-brand svg,
    .header-brand-img,
    .desktop-logo {
        height: 32px !important;
        max-height: 32px !important;
    }

    .pm-hamburger {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
    }
}


/* =========================================================
   MAIN D'OEUVRE LOCALE — NAVBAR GLOBALE PROPRE
   Version unique, sans répétitions
   Menu blanc plus haut pour couvrir l'espace bleu
========================================================= */

:root {
    --pm-bg: #f5f8fc;
    --pm-surface: rgba(255, 255, 255, .96);
    --pm-line: rgba(15, 23, 42, .08);
    --pm-line-strong: rgba(15, 23, 42, .12);
    --pm-text: #0f172a;
    --pm-muted: #64748b;
    --pm-primary: #2563eb;
    --pm-primary-soft: rgba(37, 99, 235, .10);
    --pm-success: #10b981;
    --pm-success-dark: #059669;
    --pm-shadow-soft: 0 10px 28px rgba(15, 23, 42, .06);
    --pm-shadow-menu: 0 8px 22px rgba(15, 23, 42, .05);
    --pm-font: Inter, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Hauteur réelle du menu blanc */
    --mol-navbar-height: 86px;

    /* Décalage du panneau chat sous le menu */
    --mol-chat-panel-top: 98px;
}

/* =========================================================
   BASE
========================================================= */

html {
    color: var(--pm-text);
    font-family: var(--pm-font);
    font-weight: 400;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    margin: 0;
    padding-top: var(--mol-navbar-height) !important;
    display: flex;
    flex-direction: column;
    background: #ffffff !important;
    font-family: var(--pm-font);
    font-size: 13px;
    letter-spacing: .01em;
    position: relative;
}

p,
span,
div,
li,
a,
button,
input,
select,
textarea,
small,
strong {
    font-family: var(--pm-font);
}

.app-shell {
    flex: 1 0 auto;
}

#global-loader {
    display: none !important;
}

/* Container large sans casser Bootstrap */
.container {
    width: min(100% - 24px, 1720px) !important;
    max-width: 1720px !important;
}

/* =========================================================
   NAVBAR PRINCIPALE FIXE
========================================================= */

.pm-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--mol-navbar-height) !important;
    min-height: var(--mol-navbar-height) !important;
    z-index: 3000 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
    box-shadow: var(--pm-shadow-menu) !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* Petit prolongement blanc pour couvrir la bande bleue sous le menu */
.pm-navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 10px;
    background: #ffffff;
    pointer-events: none;
    z-index: -1;
}

.pm-navbar .container {
    height: var(--mol-navbar-height) !important;
    display: flex !important;
    align-items: center !important;
    width: min(100% - 24px, 1720px) !important;
    max-width: 1720px !important;
}

.pm-navbar-inner {
    width: 100%;
    min-height: var(--mol-navbar-height) !important;
    height: var(--mol-navbar-height) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: visible !important;
}

/* Ne force plus toutes les .navbar Bootstrap en fixed */
.navbar {
    position: relative;
}

/* =========================================================
   LOGO
========================================================= */

.menu-brand {
    height: 54px !important;
    min-width: 132px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    line-height: 1;
    text-decoration: none !important;
    overflow: hidden;
}

.menu-brand img,
.menu-brand svg,
.header-brand-img,
.desktop-logo {
    display: block;
    height: 42px !important;
    max-height: 42px !important;
    width: auto !important;
    object-fit: contain;
}

/* =========================================================
   MENU DESKTOP
========================================================= */

.pm-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
    min-width: 0;
}

.pm-menu > li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pm-menu-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border-radius: 999px;
    color: #1f2937 !important;
    background: transparent;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.pm-menu-link i {
    font-size: 13px;
}

.pm-menu-link:hover,
.pm-menu-link.active {
    color: var(--pm-primary) !important;
    background: var(--pm-primary-soft);
}

.pm-menu-link:hover {
    transform: translateY(-1px);
}

/* =========================================================
   BOUTONS DROITE
========================================================= */

.pm-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    overflow: visible !important;
}

.pm-btn,
.pm-btn-soft,
.pm-btn-green {
    min-height: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 17px;
    border-radius: 16px;
    border: 1px solid transparent;
    font-size: 13px !important;
    font-weight: 650;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.pm-btn:hover,
.pm-btn-soft:hover,
.pm-btn-green:hover {
    transform: translateY(-1px);
}

.pm-btn-soft {
    color: #111827 !important;
    background: #ffffff;
    border-color: rgba(15, 23, 42, .08);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

.pm-btn-soft:hover {
    color: #111827 !important;
    background: #f8fafc;
}

.pm-btn-green {
    color: #ffffff !important;
    background: var(--pm-success);
    border-color: var(--pm-success);
    box-shadow: 0 12px 24px rgba(16, 185, 129, .22);
}

.pm-btn-green:hover {
    background: var(--pm-success-dark);
    border-color: var(--pm-success-dark);
    color: #ffffff !important;
}

/* =========================================================
   LANGUE DROPDOWN
========================================================= */

.mol-topbar-lang,
.pm-buttons > .mol-dd {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 3200;
}

.mol-lang-btn,
.mol-topbar-lang .mol-dd-btn {
    min-height: 42px !important;
    height: 42px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px !important;
    border: 0;
    border-radius: 16px;
    color: #111827;
    background: #ffffff;
    cursor: pointer;
    font-size: 13px !important;
    font-weight: 600;
    white-space: nowrap;
}

.mol-lang-btn img,
.mol-dd-btn img.country {
    width: 20px !important;
    height: 15px !important;
    object-fit: cover;
    border-radius: 2px;
}

.mol-topbar-lang .mol-dd-menu,
.pm-buttons > .mol-dd > .mol-dd-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    left: auto;
    min-width: 220px;
    padding: 8px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 22px 54px rgba(15, 23, 42, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    overflow: hidden;
    z-index: 4000;
}

.mol-topbar-lang.is-open .mol-dd-menu,
.pm-buttons > .mol-dd:hover > .mol-dd-menu,
.pm-buttons > .mol-dd:focus-within > .mol-dd-menu,
.pm-buttons > .mol-dd > .mol-dd-btn[aria-expanded="true"] + .mol-dd-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.mol-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    color: #0f172a;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
}

.mol-dd-item:hover {
    background: #f8fafc;
}

/* =========================================================
   SOUS-MENU PROFILS
========================================================= */

.pm-menu > li.pm-has-submenu {
    position: relative;
}

.pm-submenu-caret {
    font-size: 12px;
    transition: transform .22s ease;
}

.pm-menu > li.pm-has-submenu > .sub-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 240px;
    margin: 0;
    padding: 10px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index: 4000;
}

.pm-menu > li.pm-has-submenu:hover > .sub-menu,
.pm-menu > li.pm-has-submenu:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.pm-menu > li.pm-has-submenu:hover .pm-submenu-caret,
.pm-menu > li.pm-has-submenu:focus-within .pm-submenu-caret {
    transform: rotate(180deg);
}

.pm-menu > li.pm-has-submenu > .sub-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pm-menu > li.pm-has-submenu > .sub-menu li + li {
    margin-top: 4px;
}

.pm-menu > li.pm-has-submenu > .sub-menu a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    color: #0f172a;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    transition: background .18s ease, color .18s ease;
}

.pm-menu > li.pm-has-submenu > .sub-menu a:hover {
    background: #f8fafc;
    color: var(--pm-primary);
}

/* =========================================================
   MENU MON COMPTE
========================================================= */

.mol-account-dd {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mol-account-btn {
    min-height: 42px !important;
    height: 42px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px !important;
    border-radius: 999px;
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 650;
    white-space: nowrap;
}

.mol-account-btn:hover {
    color: #0f172a !important;
    background: #f8fafc !important;
}

.mol-account-btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, .10);
    color: var(--pm-primary);
}

.mol-account-btn-caret {
    font-size: 12px;
    opacity: .75;
    transition: transform .22s ease;
}

.mol-account-dd:hover .mol-account-btn-caret,
.mol-account-dd:focus-within .mol-account-btn-caret {
    transform: rotate(180deg);
}

.mol-account-menu {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 292px !important;
    min-width: 292px !important;
    max-width: calc(100vw - 24px);
    padding: 8px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .14) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(.98);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    overflow: hidden;
    z-index: 4000;
}

.mol-account-dd:hover .mol-account-menu,
.mol-account-dd:focus-within .mol-account-menu,
.mol-account-dd .mol-dd-btn[aria-expanded="true"] + .mol-account-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.mol-account-head {
    padding: 10px !important;
    margin: 0 0 6px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #f8fbff, #f3f6ff) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
}

.mol-account-user {
    display: flex;
    align-items: center;
    gap: 10px !important;
}

.mol-account-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #ffffff;
    font-size: 16px !important;
    font-weight: 700 !important;
    overflow: hidden;
}

.mol-account-avatar img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
}

.mol-account-meta {
    min-width: 0;
}

.mol-dd-title {
    margin: 0;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: #0f172a !important;
}

.mol-dd-sub {
    margin-top: 3px !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mol-account-links {
    padding: 2px 0 !important;
}

.mol-account-item {
    min-height: 48px !important;
    display: flex;
    align-items: center;
    gap: 10px !important;
    padding: 7px 9px !important;
    border-radius: 13px !important;
    margin: 2px 0 !important;
    color: #0f172a;
    background: transparent !important;
    text-decoration: none !important;
    transition: background .18s ease;
}

.mol-account-item:hover {
    background: #f8fafc !important;
    color: #0f172a;
}

.mol-account-item-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 11px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pm-primary);
    background: rgba(37, 99, 235, .10);
}

.mol-account-item-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mol-account-item-title {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.15;
}

.mol-account-item-content small {
    margin-top: 2px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.25;
}

.mol-account-footer {
    padding: 6px 0 0;
    margin-top: 6px;
    border-top: 1px solid rgba(15, 23, 42, .06);
}

.mol-account-item-danger .mol-account-item-icon {
    color: #dc2626;
    background: rgba(220, 38, 38, .10);
}

.mol-account-item-danger:hover .mol-account-item-title {
    color: #b91c1c;
}

/* =========================================================
   MENU MOBILE
========================================================= */

.pm-hamburger {
    width: 44px;
    height: 44px;
    border: 1px solid var(--pm-line);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    background: #ffffff;
    cursor: pointer;
}

.pm-mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    padding: 20px;
    background: #ffffff;
    z-index: 100001;
    transition: left .3s ease;
    box-shadow: 0 0 30px rgba(0, 0, 0, .10);
    overflow-y: auto;
}

.pm-mobile-menu.open {
    left: 0;
}

.pm-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.pm-mobile-close {
    position: relative;
    z-index: 100002;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: #f8fafc;
    color: #0f172a;
    cursor: pointer;
    font-size: 1.3rem;
}

.pm-mobile-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.pm-mobile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    color: #1f2937;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
}

.pm-mobile-link:hover {
    background: #f1f5f9;
}

.pm-mobile-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pm-mobile-buttons .pm-btn,
.pm-mobile-buttons .pm-btn-soft,
.pm-mobile-buttons .pm-btn-green {
    width: 100%;
}

.pm-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .50);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

body.pm-menu-open .pm-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Sous-menu mobile */
.pm-mobile-nav > li.pm-mobile-has-submenu {
    list-style: none;
}

.pm-mobile-has-submenu > .pm-mobile-link {
    justify-content: space-between;
}

.pm-mobile-nav > li.pm-mobile-has-submenu > .sub-menu {
    display: none;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.pm-mobile-nav > li.pm-mobile-has-submenu.is-open > .sub-menu {
    display: block;
}

.pm-mobile-nav > li.pm-mobile-has-submenu > .sub-menu li {
    list-style: none;
}

.pm-mobile-nav > li.pm-mobile-has-submenu > .sub-menu a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
}

.pm-mobile-nav > li.pm-mobile-has-submenu > .sub-menu a:hover {
    background: #f8fafc;
    color: var(--pm-primary);
}

/* =========================================================
   LAYOUT SOUS LE MENU
========================================================= */

main,
.app-shell,
.pm-page,
.page-content,
.content-wrapper,
.site-content,
#content,
#main {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: #ffffff;
}

main > section:first-child,
main > .sptb:first-child,
main > .mol-page:first-child,
main > .vip-wrap:first-child,
main > .page:first-child,
main > .mod-page:first-child,
main > .job-page-top:first-child {
    margin-top: 0 !important;
}

/* Si une section a .sptb en premier, on enlève le padding haut */
main > .sptb:first-child,
.app-shell > .sptb:first-child,
.page-content > .sptb:first-child {
    padding-top: 0 !important;
}

/* Garde de l'espace en bas avant footer */
main > .vip-wrap,
main > .page,
main > .mod-page,
main > .mol-page,
main > .sptb {
    padding-bottom: 80px;
}

/* =========================================================
   FLASH MESSAGES
========================================================= */

.pm-flash-container {
    position: fixed;
    top: calc(var(--mol-navbar-height) + 14px);
    right: 18px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(420px, calc(100vw - 28px));
}

.pm-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .14);
    border: 1px solid rgba(15, 23, 42, .08);
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s ease;
}

.pm-flash-success {
    border-left: 5px solid #22c55e;
}

.pm-flash-danger,
.pm-flash-error {
    border-left: 5px solid #ef4444;
}

.pm-flash-warning {
    border-left: 5px solid #f59e0b;
}

.pm-flash-info {
    border-left: 5px solid #0ea5e9;
}

.pm-flash.pm-flash-hide,
.pm-flash.is-hiding {
    opacity: 0;
    transform: translateY(-10px);
}

/* =========================================================
   CHAT SOUS LE MENU
========================================================= */

#molChatPanel {
    position: fixed !important;
    top: var(--mol-chat-panel-top) !important;
    bottom: auto !important;
    max-height: calc(100vh - var(--mol-chat-panel-top) - 16px) !important;
    overflow: hidden !important;
    z-index: 2500 !important;
}

#molChatPanel .mol-chat-panel-header,
#molChatPanel .mol-chat-panel__header {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #ffffff !important;
}

#molChatPanel .mol-chat-panel-body,
#molChatPanel .mol-chat-panel__body,
#molChatPanel .mol-chat-panel-content,
#molChatPanel .mol-chat-panel-lists,
#molChatPanel [data-mol-list] {
    overflow-y: auto !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199.98px) {
    .pm-menu {
        gap: 8px;
    }

    .pm-menu-link {
        padding: 0 10px;
        font-size: 12.5px !important;
    }

    .pm-btn,
    .pm-btn-soft,
    .pm-btn-green,
    .mol-lang-btn {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --mol-navbar-height: 76px;
        --mol-chat-panel-top: 76px;
    }

    body {
        padding-top: var(--mol-navbar-height) !important;
        font-size: 12.8px;
    }

    .container {
        width: calc(100% - 18px) !important;
        max-width: none !important;
    }

    .pm-navbar,
    .pm-navbar .container,
    .pm-navbar-inner {
        height: var(--mol-navbar-height) !important;
        min-height: var(--mol-navbar-height) !important;
    }

    .menu-brand {
        min-width: auto;
        height: 48px !important;
    }

    .menu-brand img,
    .menu-brand svg,
    .header-brand-img,
    .desktop-logo {
        height: 38px !important;
        max-height: 38px !important;
    }

    .pm-hamburger {
        width: 42px;
        height: 42px;
    }

    .pm-flash-container {
        top: calc(var(--mol-navbar-height) + 12px);
        left: 14px;
        right: 14px;
        max-width: none;
    }

    #molChatPanel {
        top: var(--mol-chat-panel-top) !important;
        width: 100vw !important;
        height: calc(100dvh - var(--mol-chat-panel-top)) !important;
        max-height: calc(100dvh - var(--mol-chat-panel-top)) !important;
        border-radius: 0 !important;
    }
}

@media (max-width: 575.98px) {
    :root {
        --mol-navbar-height: 72px;
        --mol-chat-panel-top: 72px;
    }

    .container {
        width: calc(100% - 12px) !important;
    }

    .pm-navbar,
    .pm-navbar .container,
    .pm-navbar-inner {
        height: var(--mol-navbar-height) !important;
        min-height: var(--mol-navbar-height) !important;
    }

    .menu-brand img,
    .menu-brand svg,
    .header-brand-img,
    .desktop-logo {
        height: 34px !important;
        max-height: 34px !important;
    }

    .pm-hamburger {
        width: 40px;
        height: 40px;
    }
}

/* Accessibilité */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* =========================================================
   GLOBAL SUBMIT SPINNER
   Spinner automatique sur les boutons de soumission
========================================================= */

.mol-submit-loading {
    position: relative !important;
    pointer-events: none !important;
    opacity: .88;
}

.mol-submit-loading .mol-submit-spinner {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 8px;
    vertical-align: -2px;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: molSubmitSpin .65s linear infinite;
}

.mol-submit-loading[disabled],
.mol-submit-loading.disabled {
    cursor: wait !important;
}

@keyframes molSubmitSpin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   GLOBAL SUBMIT SPINNER - VERSION SOLIDE
========================================================= */

.mol-submit-loading {
    pointer-events: none !important;
    opacity: .88 !important;
    cursor: wait !important;
}

.mol-submit-loading .mol-submit-spinner {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 8px;
    vertical-align: -3px;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: molSubmitSpin .65s linear infinite;
}

@keyframes molSubmitSpin {
    to {
        transform: rotate(360deg);
    }
}

.header-brand-img.desktop-logo {
    height: 70px !important;
    width: auto !important;
    max-height: none !important;
}

.app-header .header-brand {
    height: 80px;
    display: flex;
    align-items: center;
}

.site-brand{
    font-size: 28px;
    font-weight: 800;
    color: #0b4db8;
    text-decoration: none;
}

.site-brand span{
    color: #f7c600;
}

.site-brand-mobile{
    font-size: 22px;
    font-weight: 800;
    color: #0b4db8;
}

.site-brand-mobile span{
    color: #f7c600;
}

/* ============================================ */
/* SEPARATEUR RENFORCE - Style premium           */
/* ============================================ */

/* Version 1 - Style dégradé avec épaisseur */
.mol-sep {
    border: none;
    height: 3px;
    background: linear-gradient(90deg, 
        rgba(99, 102, 241, 0.15) 0%, 
        rgba(99, 102, 241, 0.4) 30%, 
        rgba(99, 102, 241, 0.6) 50%,
        rgba(99, 102, 241, 0.4) 70%,
        rgba(99, 102, 241, 0.15) 100%
    );
    border-radius: 4px;
    margin: 1.75rem 0;
    opacity: 1;
    width: 100%;
    position: relative;
}

/* Version 2 - Double trait avec ombre */
.mol-sep.double {
    height: 0;
    border: none;
    border-top: 3px solid rgba(99, 102, 241, 0.25);
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: 0;
    margin: 2rem 0;
    position: relative;
    background: transparent;
}

/* Version 3 - Trait épais avec point central */
.mol-sep.centered {
    height: 0;
    border: none;
    border-top: 3px solid rgba(99, 102, 241, 0.2);
    margin: 2rem 0;
    position: relative;
    background: transparent;
}

.mol-sep.centered::after {
    content: '◆';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    background: #0f172a;
    color: rgba(99, 102, 241, 0.4);
    padding: 0 16px;
    font-size: 10px;
}

/* Version 4 - Trait avec effet de brillance */
.mol-sep.glow {
    border: none;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(99, 102, 241, 0.6) 20%, 
        rgba(99, 102, 241, 0.9) 50%,
        rgba(99, 102, 241, 0.6) 80%,
        transparent 100%
    );
    border-radius: 4px;
    margin: 2rem 0;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
    position: relative;
}

/* Version 5 - Style minimal mais épais */
.mol-sep.thick {
    border: none;
    height: 3px;
    background: linear-gradient(90deg, 
        #e2e8f0 0%, 
        #94a3b8 50%,
        #e2e8f0 100%
    );
    border-radius: 4px;
    margin: 2rem 0;
}

/* Variante avec la couleur de votre marque */
.mol-sep.brand {
    border: none;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #6366f1 20%, 
        #8b5cf6 50%,
        #6366f1 80%,
        transparent 100%
    );
    border-radius: 4px;
    margin: 2rem 0;
}

/* Variante avec dégradé de couleurs chaudes */
.mol-sep.warm {
    border: none;
    height: 3px;
    background: linear-gradient(90deg, 
        rgba(251, 146, 60, 0.3) 0%, 
        rgba(251, 146, 60, 0.8) 50%,
        rgba(251, 146, 60, 0.3) 100%
    );
    border-radius: 4px;
    margin: 2rem 0;
}

/* Variante avec effet de brillance sur fond sombre */
.mol-sep.dark {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 20%, 
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.3) 80%,
        transparent 100%
    );
    border-radius: 4px;
    margin: 2rem 0;
}



    .mol-sep {
        border: none !important;
        height: 4px !important;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(99, 102, 241, 0.4) 20%, 
            rgba(99, 102, 241, 0.8) 50%,
            rgba(99, 102, 241, 0.4) 80%,
            transparent 100%
        ) !important;
        border-radius: 4px !important;
        margin: 2rem 0 !important;
        box-shadow: 0 0 40px rgba(99, 102, 241, 0.15) !important;
        position: relative !important;
    }
    
    /* =========================================================
   FIX : MENU MOBILE CLICKABLE SUR MOBILE
   L'overlay ne doit PAS bloquer le menu
========================================================= */

/* Overlay - en arrière-plan du menu */
.pm-overlay {
    z-index: 99998 !important;
}

/* Menu mobile - DOIT être au-dessus de l'overlay */
.pm-mobile-menu {
    z-index: 100000 !important;
    position: fixed !important;
}

/* Le bouton de fermeture DOIT être au-dessus de tout */
.pm-mobile-close {
    z-index: 100001 !important;
    position: relative !important;
    pointer-events: auto !important;
}

/* Tous les liens et boutons du menu mobile doivent être cliquables */
.pm-mobile-menu a,
.pm-mobile-menu button,
.pm-mobile-menu .pm-mobile-link,
.pm-mobile-menu .pm-btn {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 100001 !important;
}

/* La navbar ne doit pas interférer */
body.pm-menu-open .pm-navbar,
body.pm-menu-open .navbar {
    z-index: 99997 !important;
}

/* Le contenu du menu mobile doit passer au-dessus de l'overlay */
.pm-mobile-menu * {
    pointer-events: auto !important;
}

/* Si l'overlay capture les clics, on force le menu à les recevoir */
.pm-mobile-menu.open {
    pointer-events: auto !important;
}

.sub-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.sub-menu a i,
.sub-menu a .icon-wrapper i {
    width: 20px;
    text-align: center;
    font-size: 14px;
    color: var(--pm-primary);
}

.sub-menu a:hover i {
    color: var(--pm-primary);
}

/* Assurez-vous que l'overlay n'interfère pas avec le menu mobile */
.pm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    pointer-events: none; /* Important : ne pas bloquer les clics si masqué */
}

.pm-overlay.active {
    display: block;
    pointer-events: auto; /* Activer seulement quand l'overlay est visible */
}

/* Style du menu mobile */
.pm-mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 400px;
    height: 100%;
    background: #ffffff;
    z-index: 1000;
    transition: left 0.3s ease;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.pm-mobile-menu.active {
    left: 0;
}

/* S'assurer que les liens sont toujours cliquables */
.pm-mobile-menu a,
.pm-mobile-menu button,
.pm-mobile-menu .pm-mobile-link {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
    color: inherit !important;
}

/* Éviter que les éléments soient grisés */
.pm-mobile-menu .pm-mobile-nav li,
.pm-mobile-menu .pm-mobile-buttons {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Si un élément parent a un fond gris, le corriger */
.pm-mobile-menu .pm-mobile-nav a:hover {
    background: #f0f7ff;
    color: #0056b3 !important;
}


/* ===== MENU MOBILE - CORRECTION COMPLÈTE ===== */

/* Overlay */
.pm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.5);
    z-index: 999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

.pm-overlay.active {
    display: block !important;
    opacity: 1 !important;
}

/* Menu mobile */
.pm-mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 400px;
    height: 100%;
    background: #ffffff !important;
    z-index: 1000;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
    padding: 0;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none;
}

.pm-mobile-menu.active {
    left: 0 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Header du menu */
.pm-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eef2f6;
    background: #ffffff;
}

.pm-mobile-header img {
    height: 35px;
    width: auto;
}

.pm-mobile-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    padding: 4px 8px;
    transition: transform 0.2s ease;
}

.pm-mobile-close:hover {
    transform: rotate(90deg);
}

/* Navigation */
.pm-mobile-nav {
    list-style: none;
    padding: 10px 0;
    margin: 0;
}

.pm-mobile-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pm-mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    color: #1a202c !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 15px;
    transition: background 0.15s ease;
    background: transparent !important;
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.pm-mobile-link:hover {
    background: #f0f7ff !important;
    color: #2563eb !important;
}

.pm-mobile-link i {
    width: 22px;
    text-align: center;
    color: #64748b;
    margin-right: 12px;
    font-size: 16px;
}

.pm-mobile-link:hover i {
    color: #2563eb;
}

.pm-mobile-link span:not(.pm-submenu-caret) {
    display: flex;
    align-items: center;
}

.pm-submenu-caret {
    color: #94a3b8;
    font-size: 14px;
    transition: transform 0.25s ease;
}

.pm-mobile-submenu-toggle.active .pm-submenu-caret {
    transform: rotate(180deg);
}

/* Sous-menu */
.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #f8fafc;
}

.sub-menu.open {
    max-height: 500px;
}

.sub-menu li {
    list-style: none;
}

.sub-menu a {
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 54px;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s ease;
    background: transparent !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.sub-menu a:hover {
    background: #eef4ff !important;
    color: #2563eb !important;
}

.sub-menu a .icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    color: #64748b;
}

.sub-menu a:hover .icon-wrapper {
    color: #2563eb;
}

/* Boutons en bas */
.pm-mobile-buttons {
    padding: 16px 20px;
    border-top: 1px solid #eef2f6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
}

/* Style des boutons */
.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    width: 100%;
    gap: 8px;
}

.pm-btn-soft {
    background: #f1f5f9;
    color: #1a202c !important;
    border: 1px solid #e2e8f0;
}

.pm-btn-soft:hover {
    background: #e2e8f0;
    color: #1a202c !important;
}

.pm-btn-green {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #ffffff !important;
    border: none;
}

.pm-btn-green:hover {
    background: linear-gradient(135deg, #1d4ed8, #4338ca);
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Items du menu compte dans le mobile */
.pm-mobile-dd {
    width: 100%;
    margin: 0;
}

.pm-mobile-dd .mol-dd-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #1a202c !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    width: 100%;
}

.pm-mobile-dd .mol-dd-btn:hover {
    background: #e2e8f0;
}

.pm-mobile-link-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pm-mobile-link-left i {
    color: #64748b;
    font-size: 16px;
}

.mol-account-btn-caret {
    color: #94a3b8;
}

/* Menu déroulant du compte */
.pm-mobile-dd-menu {
    display: none;
    margin-top: 8px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.pm-mobile-dd-menu.open {
    display: block;
}

/* Head du compte */
.mol-account-head {
    padding: 16px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f6;
}

.mol-account-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mol-account-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    overflow: hidden;
    flex-shrink: 0;
}

.mol-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mol-account-meta {
    flex: 1;
    min-width: 0;
}

.mol-dd-title {
    font-weight: 700;
    color: #1a202c;
    font-size: 14px;
}

.mol-dd-sub {
    color: #64748b;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Liens du compte */
.mol-account-links {
    padding: 8px 0;
}

.mol-account-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: #334155 !important;
    text-decoration: none !important;
    transition: background 0.15s ease;
    background: transparent !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.mol-account-item:hover {
    background: #f0f7ff !important;
    color: #2563eb !important;
}

.mol-account-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.mol-account-item:hover .mol-account-item-icon {
    background: #e0edff;
    color: #2563eb;
}

.mol-account-item-content {
    flex: 1;
    min-width: 0;
}

.mol-account-item-title {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #1a202c;
}

.mol-account-item small {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 1px;
}

.mol-account-item:hover .mol-account-item-title {
    color: #2563eb;
}

.mol-account-item:hover small {
    color: #94a3b8;
}

/* Footer du compte - déconnexion */
.mol-account-footer {
    padding: 8px 0;
    border-top: 1px solid #eef2f6;
}

.mol-account-item-danger {
    color: #dc2626 !important;
}

.mol-account-item-danger .mol-account-item-icon {
    background: #fef2f2;
    color: #dc2626;
}

.mol-account-item-danger:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

.mol-account-item-danger:hover .mol-account-item-icon {
    background: #fee2e2;
    color: #dc2626;
}

.mol-account-item-danger .mol-account-item-title {
    color: #dc2626;
}

.mol-account-item-danger:hover .mol-account-item-title {
    color: #dc2626;
}

/* Langue */
.pm-mobile-lang-btn {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
}

.pm-mobile-lang-menu .mol-account-item {
    padding: 10px 16px;
}

.country {
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 576px) {
    .pm-mobile-menu {
        width: 92%;
        max-width: 320px;
    }
    
    .pm-mobile-link {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .sub-menu a {
        padding: 8px 16px 8px 46px;
        font-size: 13px;
    }
    
    .pm-mobile-buttons {
        padding: 12px 16px;
    }
    
    .pm-btn {
        font-size: 13px;
        padding: 8px 14px;
    }
}

/* Empêcher le scroll du body quand menu ouvert */
body.pm-mobile-open {
    overflow: hidden !important;
}




/* FORCER L'AFFICHAGE DU MENU MOBILE */
.pm-mobile-menu.active,
.pm-mobile-menu.active * {
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    backdrop-filter: none !important;
}

.pm-mobile-menu.active .pm-mobile-link,
.pm-mobile-menu.active .sub-menu a,
.pm-mobile-menu.active .mol-account-item {
    color: #1a202c !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.pm-mobile-menu.active .pm-mobile-link:hover,
.pm-mobile-menu.active .sub-menu a:hover,
.pm-mobile-menu.active .mol-account-item:hover {
    color: #2563eb !important;
}

/* Supprimer tout filtre gris */
.pm-mobile-menu.active {
    filter: none !important;
    -webkit-filter: none !important;
}



/* ============================================
   MENU MOBILE - STYLE COMPLET
   ============================================ */

/* Overlay */
.pm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.5);
    z-index: 999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pm-overlay.active {
    display: block !important;
    opacity: 1 !important;
}

/* Menu mobile */
.pm-mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 400px;
    height: 100%;
    background: #ffffff !important;
    z-index: 1000;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
    padding: 0;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none;
}

.pm-mobile-menu.active {
    left: 0 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Header du menu */
.pm-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eef2f6;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.pm-mobile-header img {
    height: 35px;
    width: auto;
}

.pm-mobile-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    padding: 4px 8px;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-mobile-close:hover {
    transform: rotate(90deg);
}

/* Navigation */
.pm-mobile-nav {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

.pm-mobile-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pm-mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    color: #1a202c !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.15s ease;
    background: transparent !important;
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    border: none;
    width: 100%;
    position: relative;
}

.pm-mobile-link:hover {
    background: #f0f7ff !important;
    color: #2563eb !important;
}

.pm-mobile-link i:first-child {
    width: 24px;
    text-align: center;
    color: #64748b;
    margin-right: 12px;
    font-size: 16px;
    flex-shrink: 0;
}

.pm-mobile-link:hover i:first-child {
    color: #2563eb;
}

.pm-mobile-link span:not(.pm-submenu-caret) {
    display: flex;
    align-items: center;
    flex: 1;
}

.pm-submenu-caret {
    color: #94a3b8;
    font-size: 14px;
    transition: transform 0.25s ease;
    margin-left: auto;
    flex-shrink: 0;
}

.pm-mobile-submenu-toggle.active .pm-submenu-caret {
    transform: rotate(180deg);
}

/* Sous-menu */
.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #f8fafc;
}

.sub-menu.open {
    max-height: 500px;
}

.sub-menu li {
    list-style: none;
}

.sub-menu a {
    display: flex;
    align-items: center;
    padding: 11px 20px 11px 56px;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    background: transparent !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.sub-menu a:hover {
    background: #eef4ff !important;
    color: #2563eb !important;
}

.sub-menu a .icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    color: #64748b;
    margin-right: 10px;
}

.sub-menu a:hover .icon-wrapper {
    color: #2563eb;
}

/* Boutons en bas */
.pm-mobile-buttons {
    padding: 16px 20px;
    border-top: 1px solid #eef2f6;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Style des boutons de connexion */
.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    width: 100%;
    gap: 10px;
}

.pm-btn-soft {
    background: #f1f5f9;
    color: #1a202c !important;
    border: 1px solid #e2e8f0;
}

.pm-btn-soft:hover {
    background: #e2e8f0;
    color: #1a202c !important;
}

.pm-btn-green {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #ffffff !important;
    border: none;
}

.pm-btn-green:hover {
    background: linear-gradient(135deg, #1d4ed8, #4338ca);
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ===== COMPTE UTILISATEUR ===== */
.pm-mobile-account-wrapper {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    background: #ffffff;
}

.pm-mobile-account-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    background: #f8fafc;
    transition: background 0.2s ease;
}

.pm-mobile-account-btn:hover {
    background: #f1f5f9;
}

.pm-mobile-account-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.pm-mobile-account-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

.pm-mobile-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-mobile-account-text {
    flex: 1;
    min-width: 0;
}

.pm-mobile-account-name {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #1a202c;
}

.pm-mobile-account-email {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-mobile-account-caret {
    color: #94a3b8;
    font-size: 13px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.pm-mobile-account-btn.open .pm-mobile-account-caret {
    transform: rotate(180deg);
}

/* Dropdown du compte */
.pm-mobile-account-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #ffffff;
}

.pm-mobile-account-dropdown.open {
    max-height: 600px;
}

.pm-mobile-account-dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px 11px 20px;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    border-top: 1px solid #f1f5f9;
}

.pm-mobile-account-dropdown a:hover {
    background: #f0f7ff !important;
    color: #2563eb !important;
}

.pm-mobile-account-dropdown a i {
    width: 20px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

.pm-mobile-account-dropdown a:hover i {
    color: #2563eb;
}

.pm-mobile-divider {
    height: 1px;
    background: #eef2f6;
    margin: 4px 0;
}

.pm-mobile-logout {
    color: #dc2626 !important;
}

.pm-mobile-logout i {
    color: #dc2626 !important;
}

.pm-mobile-logout:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

.pm-mobile-logout:hover i {
    color: #dc2626 !important;
}

/* ===== LANGUE ===== */
.pm-mobile-lang-wrapper {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    background: #ffffff;
}

.pm-mobile-lang-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    background: #f8fafc;
    transition: background 0.2s ease;
}

.pm-mobile-lang-btn:hover {
    background: #f1f5f9;
}

.pm-mobile-lang-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pm-mobile-lang-info .country {
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.pm-mobile-lang-info span {
    font-weight: 600;
    font-size: 14px;
    color: #1a202c;
}

.pm-mobile-lang-caret {
    color: #94a3b8;
    font-size: 13px;
    transition: transform 0.25s ease;
}

.pm-mobile-lang-btn.open .pm-mobile-lang-caret {
    transform: rotate(180deg);
}

/* Dropdown langue */
.pm-mobile-lang-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #ffffff;
}

.pm-mobile-lang-dropdown.open {
    max-height: 200px;
}

.pm-mobile-lang-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    border-top: 1px solid #f1f5f9;
}

.pm-mobile-lang-dropdown a:hover {
    background: #f0f7ff !important;
    color: #2563eb !important;
}

.pm-mobile-lang-dropdown a img {
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.pm-mobile-lang-dropdown a .fa-check {
    margin-left: auto;
    color: #2563eb;
}

.pm-mobile-lang-dropdown a.active {
    background: #f0f7ff;
    color: #2563eb !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 576px) {
    .pm-mobile-menu {
        width: 92%;
        max-width: 320px;
    }
    
    .pm-mobile-link {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .pm-mobile-link i:first-child {
        width: 20px;
        font-size: 14px;
    }
    
    .sub-menu a {
        padding: 10px 16px 10px 48px;
        font-size: 13px;
    }
    
    .pm-mobile-buttons {
        padding: 12px 16px;
        gap: 8px;
    }
    
    .pm-btn {
        font-size: 13px;
        padding: 10px 14px;
    }
    
    .pm-mobile-account-btn,
    .pm-mobile-lang-btn {
        padding: 10px 14px;
    }
}

/* Empêcher le scroll du body quand menu ouvert */
body.pm-mobile-open {
    overflow: hidden !important;
}


/* Bouton hamburger */
.pm-hamburger-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #1a202c;
    cursor: pointer;
    padding: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.pm-hamburger-btn:hover {
    color: #2563eb;
    background: #f1f5f9;
}

.pm-hamburger-btn.active {
    color: #2563eb;
}


/* ============================================
   MENU MOBILE - STYLE COMPLET CORRIGÉ
   ============================================ */

/* Overlay */
.pm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.5);
    z-index: 999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pm-overlay.active {
    display: block !important;
    opacity: 1 !important;
}

/* Menu mobile */
.pm-mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 400px;
    height: 100%;
    background: #ffffff !important;
    z-index: 1000;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
    padding: 0;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none;
}

.pm-mobile-menu.active {
    left: 0 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Header du menu */
.pm-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eef2f6;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.pm-mobile-header img {
    height: 35px;
    width: auto;
}

.pm-mobile-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    padding: 8px;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.pm-mobile-close:hover {
    transform: rotate(90deg);
    background: #f1f5f9;
}

/* Navigation */
.pm-mobile-nav {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

.pm-mobile-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* CORRECTION: Alignement à gauche */
.pm-mobile-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 20px;
    color: #1a202c !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.15s ease;
    background: transparent !important;
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    border: none;
    width: 100%;
    gap: 12px;
}

.pm-mobile-link:hover {
    background: #f0f7ff !important;
    color: #2563eb !important;
}

.pm-mobile-link i:first-child {
    width: 22px;
    text-align: center;
    color: #64748b;
    font-size: 16px;
    flex-shrink: 0;
}

.pm-mobile-link:hover i:first-child {
    color: #2563eb;
}

.pm-mobile-link span {
    display: flex;
    align-items: center;
    flex: 1;
}

.pm-mobile-link .pm-submenu-caret {
    margin-left: auto;
    flex-shrink: 0;
}

.pm-submenu-caret {
    color: #94a3b8;
    font-size: 14px;
    transition: transform 0.25s ease;
}

.pm-mobile-submenu-toggle.active .pm-submenu-caret {
    transform: rotate(180deg);
}

/* Sous-menu */
.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #f8fafc;
}

.sub-menu.open {
    max-height: 500px;
}

.sub-menu li {
    list-style: none;
}

.sub-menu a {
    display: flex;
    align-items: center;
    padding: 11px 20px 11px 54px;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    background: transparent !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    gap: 12px;
}

.sub-menu a:hover {
    background: #eef4ff !important;
    color: #2563eb !important;
}

.sub-menu a .icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    color: #64748b;
}

.sub-menu a:hover .icon-wrapper {
    color: #2563eb;
}

/* Boutons en bas */
.pm-mobile-buttons {
    padding: 16px 20px;
    border-top: 1px solid #eef2f6;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Style des boutons de connexion */
.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    width: 100%;
    gap: 10px;
}

.pm-btn-soft {
    background: #f1f5f9;
    color: #1a202c !important;
    border: 1px solid #e2e8f0;
}

.pm-btn-soft:hover {
    background: #e2e8f0;
    color: #1a202c !important;
}

.pm-btn-green {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #ffffff !important;
    border: none;
}

.pm-btn-green:hover {
    background: linear-gradient(135deg, #1d4ed8, #4338ca);
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ===== COMPTE UTILISATEUR ===== */
.pm-mobile-account-wrapper {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    background: #ffffff;
}

.pm-mobile-account-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    background: #f8fafc;
    transition: background 0.2s ease;
}

.pm-mobile-account-btn:hover {
    background: #f1f5f9;
}

.pm-mobile-account-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.pm-mobile-account-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

.pm-mobile-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-mobile-account-text {
    flex: 1;
    min-width: 0;
}

.pm-mobile-account-name {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #1a202c;
}

.pm-mobile-account-email {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-mobile-account-caret {
    color: #94a3b8;
    font-size: 13px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.pm-mobile-account-btn.open .pm-mobile-account-caret {
    transform: rotate(180deg);
}

/* Dropdown du compte */
.pm-mobile-account-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #ffffff;
}

.pm-mobile-account-dropdown.open {
    max-height: 600px;
}

.pm-mobile-account-dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px 11px 20px;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    border-top: 1px solid #f1f5f9;
}

.pm-mobile-account-dropdown a:hover {
    background: #f0f7ff !important;
    color: #2563eb !important;
}

.pm-mobile-account-dropdown a i {
    width: 20px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

.pm-mobile-account-dropdown a:hover i {
    color: #2563eb;
}

.pm-mobile-divider {
    height: 1px;
    background: #eef2f6;
    margin: 4px 0;
}

.pm-mobile-logout {
    color: #dc2626 !important;
}

.pm-mobile-logout i {
    color: #dc2626 !important;
}

.pm-mobile-logout:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

.pm-mobile-logout:hover i {
    color: #dc2626 !important;
}

/* ===== LANGUE ===== */
.pm-mobile-lang-wrapper {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    background: #ffffff;
}

.pm-mobile-lang-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    background: #f8fafc;
    transition: background 0.2s ease;
}

.pm-mobile-lang-btn:hover {
    background: #f1f5f9;
}

.pm-mobile-lang-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pm-mobile-lang-info .country {
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.pm-mobile-lang-info span {
    font-weight: 600;
    font-size: 14px;
    color: #1a202c;
}

.pm-mobile-lang-caret {
    color: #94a3b8;
    font-size: 13px;
    transition: transform 0.25s ease;
}

.pm-mobile-lang-btn.open .pm-mobile-lang-caret {
    transform: rotate(180deg);
}

/* Dropdown langue */
.pm-mobile-lang-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #ffffff;
}

.pm-mobile-lang-dropdown.open {
    max-height: 200px;
}

.pm-mobile-lang-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    border-top: 1px solid #f1f5f9;
}

.pm-mobile-lang-dropdown a:hover {
    background: #f0f7ff !important;
    color: #2563eb !important;
}

.pm-mobile-lang-dropdown a img {
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.pm-mobile-lang-dropdown a .fa-check {
    margin-left: auto;
    color: #2563eb;
}

.pm-mobile-lang-dropdown a.active {
    background: #f0f7ff;
    color: #2563eb !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 576px) {
    .pm-mobile-menu {
        width: 92%;
        max-width: 320px;
    }
    
    .pm-mobile-link {
        padding: 12px 16px;
        font-size: 14px;
        gap: 10px;
    }
    
    .pm-mobile-link i:first-child {
        width: 20px;
        font-size: 14px;
    }
    
    .sub-menu a {
        padding: 10px 16px 10px 46px;
        font-size: 13px;
        gap: 10px;
    }
    
    .pm-mobile-buttons {
        padding: 12px 16px;
        gap: 8px;
    }
    
    .pm-btn {
        font-size: 13px;
        padding: 10px 14px;
    }
    
    .pm-mobile-account-btn,
    .pm-mobile-lang-btn {
        padding: 10px 14px;
    }
}


/* ===== SOUS-MENU PROFILS - FLÈCHE DYNAMIQUE ===== */

/* Style de base de la flèche */
.pm-submenu-caret {
    color: #94a3b8;
    font-size: 14px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: auto;
    flex-shrink: 0;
}

/* Quand le sous-menu est ouvert, la flèche pointe vers le haut */
.pm-mobile-submenu-toggle.active .pm-submenu-caret {
    transform: rotate(180deg);
}

/* Optionnel : animation plus fluide au survol */
.pm-mobile-submenu-toggle:hover .pm-submenu-caret {
    color: #2563eb;
}

/* Empêcher le scroll du body quand menu ouvert */
body.pm-mobile-open {
    overflow: hidden !important;
}


/* ============================================
   MENU MOBILE - STYLE COMPLET CORRIGÉ
   ============================================ */

/* Overlay */
.pm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.5);
    z-index: 999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pm-overlay.active {
    display: block !important;
    opacity: 1 !important;
}

/* Menu mobile */
.pm-mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 400px;
    height: 100%;
    background: #ffffff !important;
    z-index: 1000;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
    padding: 0;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none;
}

.pm-mobile-menu.active {
    left: 0 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Header du menu */
.pm-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eef2f6;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.pm-mobile-header img {
    height: 35px;
    width: auto;
}

/* ===== BOUTON FERMETURE - CORRECTION ===== */
.pm-mobile-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer !important;
    padding: 8px;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    pointer-events: auto !important;
    z-index: 1001;
}

.pm-mobile-close:hover {
    transform: rotate(90deg);
    background: #f1f5f9;
}

.pm-mobile-close i {
    pointer-events: none;
}

/* Navigation */
.pm-mobile-nav {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

.pm-mobile-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pm-mobile-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 20px;
    color: #1a202c !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.15s ease;
    background: transparent !important;
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    border: none;
    width: 100%;
    gap: 12px;
}

.pm-mobile-link:hover {
    background: #f0f7ff !important;
    color: #2563eb !important;
}

.pm-mobile-link i:first-child {
    width: 22px;
    text-align: center;
    color: #64748b;
    font-size: 16px;
    flex-shrink: 0;
}

.pm-mobile-link:hover i:first-child {
    color: #2563eb;
}

.pm-mobile-link span {
    display: flex;
    align-items: center;
    flex: 1;
}

/* ===== FLÈCHES - STYLE UNIFIÉ ===== */
.pm-submenu-caret,
.pm-mobile-account-caret,
.pm-mobile-lang-caret {
    color: #94a3b8;
    font-size: 14px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin-left: auto;
}

/* Rotation pour Profils */
.pm-mobile-submenu-toggle.active .pm-submenu-caret {
    transform: rotate(180deg);
}

/* Rotation pour Mon compte */
.pm-mobile-account-btn.open .pm-mobile-account-caret {
    transform: rotate(180deg);
}

/* Rotation pour Langue */
.pm-mobile-lang-btn.open .pm-mobile-lang-caret {
    transform: rotate(180deg);
}

/* Survol des flèches */
.pm-mobile-submenu-toggle:hover .pm-submenu-caret,
.pm-mobile-account-btn:hover .pm-mobile-account-caret,
.pm-mobile-lang-btn:hover .pm-mobile-lang-caret {
    color: #2563eb;
}

/* Sous-menu */
.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #f8fafc;
}

.sub-menu.open {
    max-height: 500px;
}

.sub-menu li {
    list-style: none;
}

.sub-menu a {
    display: flex;
    align-items: center;
    padding: 11px 20px 11px 54px;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    background: transparent !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    gap: 12px;
}

.sub-menu a:hover {
    background: #eef4ff !important;
    color: #2563eb !important;
}

.sub-menu a .icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    color: #64748b;
}

.sub-menu a:hover .icon-wrapper {
    color: #2563eb;
}

/* Boutons en bas */
.pm-mobile-buttons {
    padding: 16px 20px;
    border-top: 1px solid #eef2f6;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Style des boutons de connexion */
.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    width: 100%;
    gap: 10px;
}

.pm-btn-soft {
    background: #f1f5f9;
    color: #1a202c !important;
    border: 1px solid #e2e8f0;
}

.pm-btn-soft:hover {
    background: #e2e8f0;
    color: #1a202c !important;
}

.pm-btn-green {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #ffffff !important;
    border: none;
}

.pm-btn-green:hover {
    background: linear-gradient(135deg, #1d4ed8, #4338ca);
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ===== COMPTE UTILISATEUR ===== */
.pm-mobile-account-wrapper {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    background: #ffffff;
}

.pm-mobile-account-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    background: #f8fafc;
    transition: background 0.2s ease;
}

.pm-mobile-account-btn:hover {
    background: #f1f5f9;
}

.pm-mobile-account-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.pm-mobile-account-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

.pm-mobile-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-mobile-account-text {
    flex: 1;
    min-width: 0;
}

.pm-mobile-account-name {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #1a202c;
}

.pm-mobile-account-email {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dropdown du compte */
.pm-mobile-account-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #ffffff;
}

.pm-mobile-account-dropdown.open {
    max-height: 600px;
}

.pm-mobile-account-dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px 11px 20px;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    border-top: 1px solid #f1f5f9;
}

.pm-mobile-account-dropdown a:hover {
    background: #f0f7ff !important;
    color: #2563eb !important;
}

.pm-mobile-account-dropdown a i {
    width: 20px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

.pm-mobile-account-dropdown a:hover i {
    color: #2563eb;
}

.pm-mobile-divider {
    height: 1px;
    background: #eef2f6;
    margin: 4px 0;
}

.pm-mobile-logout {
    color: #dc2626 !important;
}

.pm-mobile-logout i {
    color: #dc2626 !important;
}

.pm-mobile-logout:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

.pm-mobile-logout:hover i {
    color: #dc2626 !important;
}

/* ===== LANGUE ===== */
.pm-mobile-lang-wrapper {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    background: #ffffff;
}

.pm-mobile-lang-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    background: #f8fafc;
    transition: background 0.2s ease;
}

.pm-mobile-lang-btn:hover {
    background: #f1f5f9;
}

.pm-mobile-lang-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pm-mobile-lang-info .country {
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.pm-mobile-lang-info span {
    font-weight: 600;
    font-size: 14px;
    color: #1a202c;
}

/* Dropdown langue */
.pm-mobile-lang-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #ffffff;
}

.pm-mobile-lang-dropdown.open {
    max-height: 200px;
}

.pm-mobile-lang-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    border-top: 1px solid #f1f5f9;
}

.pm-mobile-lang-dropdown a:hover {
    background: #f0f7ff !important;
    color: #2563eb !important;
}

.pm-mobile-lang-dropdown a img {
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.pm-mobile-lang-dropdown a .fa-check {
    margin-left: auto;
    color: #2563eb;
}

.pm-mobile-lang-dropdown a.active {
    background: #f0f7ff;
    color: #2563eb !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 576px) {
    .pm-mobile-menu {
        width: 92%;
        max-width: 320px;
    }
    
    .pm-mobile-link {
        padding: 12px 16px;
        font-size: 14px;
        gap: 10px;
    }
    
    .pm-mobile-link i:first-child {
        width: 20px;
        font-size: 14px;
    }
    
    .sub-menu a {
        padding: 10px 16px 10px 46px;
        font-size: 13px;
        gap: 10px;
    }
    
    .pm-mobile-buttons {
        padding: 12px 16px;
        gap: 8px;
    }
    
    .pm-btn {
        font-size: 13px;
        padding: 10px 14px;
    }
    
    .pm-mobile-account-btn,
    .pm-mobile-lang-btn {
        padding: 10px 14px;
    }
}


/* ============================================
   ESPACE POUR LA NAVBAR - SOLUTION RECOMMANDÉE
   ============================================ */

/* Toutes les pages */
main, .main-content, .page-wrapper > section:first-child:not(.ph-hero-v4) {
    padding-top: 76px;
}

/* Page d'accueil - la navbar est transparente */
.page-accueil main, 
.page-accueil .main-content,
.page-accueil .page-wrapper > section:first-child {
    padding-top: 0;
}

/* Quand la navbar est scrollée sur l'accueil */
.page-accueil .pm-navbar-pro.scrolled ~ main,
.page-accueil .pm-navbar-pro.scrolled ~ .main-content {
    padding-top: 76px;
}

/* Mobile */
@media (max-width: 576px) {
    main, .main-content, .page-wrapper > section:first-child:not(.ph-hero-v4) {
        padding-top: 60px;
    }
    
    .page-accueil main, 
    .page-accueil .main-content {
        padding-top: 0;
    }
}

/* Hero sections - pas de padding en plus */
.ph-hero-v4,
.ph-hero-section,
section.hero {
    padding-top: 0 !important;
    margin-top: 0 !important;
}