/* ============================================================
   VILLERAY ECO-AI — PREMIUM CSS
   Style: Montreal Urban • Eco • Modern SaaS
   Font: Poppins
   ============================================================ */

/* ---------- TOKENS ---------- */
/* Custom Modern Cursor */
.custom-cursor {
  width: 20px;
  height: 20px;
  border: 2px solid var(--green-500);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 10001;
  transition: transform 0.1s ease-out, background 0.2s ease;
  transform: translate(-50%, -50%);
}
.custom-cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--green-500);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 10001;
  transform: translate(-50%, -50%);
}
body, a, button, input, select, textarea, label {
  cursor: none !important;
}
a:hover ~ .custom-cursor, button:hover ~ .custom-cursor {
  transform: translate(-50%, -50%) scale(2);
  background: rgba(34, 197, 94, 0.1);
}
@media (max-width: 1024px) {
  .custom-cursor, .custom-cursor-dot { display: none; }
  body, a, button { cursor: auto !important; }
}

:root {
    --green-400: #34d399;
    --green-500: #10b981;
    --green-600: #059669;
    --green-700: #047857;
    --green-900: #064e3b;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --teal-400: #2dd4bf;
    --dark-950: #030712;
    --dark-900: #0a0f1a;
    --dark-800: #111827;
    --dark-700: #1f2937;
    --dark-600: #374151;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-500: #6b7280;
    --neutral-700: #374151;
    --white: #ffffff;
    --cream: #f8fafc;
    --forest: #0f172a;
    --leaf: #10b981;
    --moss: #059669;
    --sage: #34d399;
    --mint: #6ee7b7;
    --muted: #64748b;
    --font-display: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;

    --grad-green: linear-gradient(135deg, var(--green-400) 0%, var(--green-600) 100%);
    --grad-hero: linear-gradient(170deg, rgba(0,0,0,.25) 0%, rgba(4,30,10,.62) 100%);
    --grad-dark: linear-gradient(180deg, var(--dark-900) 0%, var(--dark-800) 100%);

    --radius-sm: 16px;
    --radius-md: 24px;
    --radius-lg: 40px;
    --radius-xl: 60px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
    --shadow-md: 0 10px 25px rgba(0,0,0,.15);
    --shadow-lg: 0 25px 50px rgba(0,0,0,.25);
    --shadow-glow: 0 0 40px rgba(74, 222, 128, .25);

    --font: 'Poppins', sans-serif;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background: var(--white);
    color: var(--dark-800);
    line-height: 1.65;
    overflow-x: hidden;
    cursor: none;
}

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
h1 { font-size: clamp(42px, 7vw, 72px); font-weight: 800; }
h2 { font-size: clamp(34px, 5vw, 52px); }
h3 { font-size: clamp(22px, 3vw, 30px); }
h4 { font-size: 20px; font-weight: 600; }
h5 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
p { font-size: 17px; line-height: 1.75; color: var(--neutral-500); }

em { font-style: normal; color: var(--green-500); }

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; width: 100%; }

/* ---------- LAYOUT ---------- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.section-pad { padding: 8rem 0; }
.dark-section { background: var(--dark-900); color: var(--white); }
.dark-section p { color: #9ca3af; }
.dark-section h2 { color: var(--white); }

/* ---------- CURSOR ---------- */
.cursor-dot, .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition-property: transform;
    transition-timing-function: var(--ease-out);
}
.cursor-dot {
    width: 8px; height: 8px;
    background: var(--green-400);
    border-radius: 50%;
    transition-duration: 0s;
}
.cursor-ring {
    width: 36px; height: 36px;
    border: 2px solid rgba(74,222,128,.5);
    border-radius: 50%;
    transition-duration: .15s;
}
.cursor-ring.large {
    width: 64px; height: 64px;
    background: rgba(74,222,128,.06);
    transition-duration: .25s;
}

/* ---------- NAVBAR ---------- */
.navbar {
    position: fixed;
    width: 100%; top: 0; z-index: 1000;
    padding: 1.25rem 0;
    background: var(--white);
    transition: all .4s var(--ease-out);
}
.navbar.scrolled {
    padding: 1rem 0;
    box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
/* nav revised: brand left, links right */
.nav-inner {
    max-width: 1536px; margin: 0 auto; padding: 0 2.5rem;
    display: flex; align-items: center; justify-content: space-between;
}
.nav-brand {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: 1.25rem; font-weight: 700; color: var(--green-800);
    transition: all 0.3s var(--ease-out);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.nav-brand:hover { transform: scale(1.02); }
.nav-brand strong { color: var(--green-600); font-weight: 900; }

.nav-links {
    display: flex; align-items: center; gap: 2.5rem; list-style: none;
}
.nav-links a { font-size: .95rem; font-weight: 600; color: var(--dark-700); transition: color .3s; }
.nav-links a:hover { color: var(--green-600); }

/* Nav Login Link */
.nav-login-link {
    padding: 0.45rem 1.25rem !important;
    border: 1px solid var(--green-500) !important;
    color: var(--green-600) !important;
    border-radius: 100px !important;
    transition: all 0.3s !important;
}
.nav-login-link:hover {
    background: var(--green-50) !important;
}

/* Hero Sponsor Strip */
.hero-sponsors {
    margin-top: 3.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.75rem;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    max-width: fit-content;
}

.sponsors-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.sponsors-logos {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.sponsor-item {
    display: flex;
    align-items: center;
}

.sponsor-logo-img {
    height: 42px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: opacity 0.3s;
}

.sponsor-logo-img:hover {
    opacity: 1;
}

.sponsor-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.12);
}

.sponsor-placeholder {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    transition: all 0.3s;
}

.sponsor-placeholder:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 991px) {
    .hero-sponsors {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .sponsors-logos { flex-wrap: wrap; gap: 0.75rem; }
    .sponsor-divider { display: none; }
}

.features-section {
    background-color: #f0fdf4; /* Ultra light mint */
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
}

.features-tabs {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 5rem;
    padding: 0 1rem;
    flex-wrap: wrap;
}

.f-tab {
    padding: 0.8rem 2rem;
    border-radius: 99px;
    background: transparent;
    color: var(--neutral-500);
    font-weight: 700;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.f-tab:hover {
    color: var(--green-600);
}

.f-tab.active {
    background: #5eead4; /* Mint/Cyan accent like screenshot */
    background: var(--green-400); 
    color: var(--white);
    box-shadow: 0 10px 25px rgba(34, 197, 94, 0.2);
}

.features-content-split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 8rem;
    align-items: center;
}

.f-content-pane {
    display: none;
    animation: fadeInSlideUp 0.6s var(--ease-out) forwards;
}

.f-content-pane.active {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

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

.f-text-block h2 {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--dark-900);
    margin-bottom: 2rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.f-text-block p {
    font-size: 1.25rem;
    color: var(--neutral-600);
    line-height: 1.7;
    margin-bottom: 3rem;
}

.f-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.f-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    font-weight: 500;
    color: var(--dark-800);
}

.f-list-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.f-visual-block {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 50px 100px rgba(0,0,0,0.12);
}

.f-mockup-img {
    width: 100%;
    display: block;
    border-radius: 24px;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .f-content-pane.active {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .features-content-split {
        grid-template-columns: 1fr;
    }
    .f-text-block h2 { font-size: 2.5rem; }
}

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .75rem;
    justify-content: center;
    text-align: center;
    padding: 1.1rem 2.4rem;
    border-radius: 14px;
    font-family: var(--font); font-size: 1rem; font-weight: 600;
    border: none; cursor: pointer;
    transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
}
.btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: var(--white);
    padding: 1.25rem 3.5rem;
    font-size: 1.15rem;
    box-shadow: 0 20px 40px rgba(16,185,129,0.3);
    position: relative;
    overflow: hidden;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(16,185,129,0.4);
}
.btn-hero-lg {
    padding: 1.4rem 4rem;
    font-size: 1.2rem;
    min-width: 320px;
}
.btn-ghost {
    background: rgba(16, 185, 129, 0.04);
    border: 1px solid rgba(16, 185, 129, 0.1);
    color: var(--green-700);
}
.btn-ghost:hover {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.2);
    transform: translateY(-5px);
}
.btn-full { width: 100%; justify-content: center; }

/* Shimmer effect on primary btn */
.btn-primary::after {
    content: '';
    position: absolute; top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    transition: left .6s;
}
.btn-primary:hover::after { left: 130%; }

/* ---------- HERO V4 (Flowrix Style) ---------- */
.hero-v4-wrapper {
    /* Accounts for the 80px navbar, plus 1rem top margin, 1.5rem L/R/B margins */
    padding: 100px 1.5rem 1.5rem 1.5rem;
    background: var(--white);
    min-height: 100vh;
}

.hero-v4 {
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    min-height: calc(100vh - 110px); /* Fill most of the screen */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3.5rem 4.5rem;
    box-shadow: 0 40px 80px rgba(0,0,0,0.1);
}

.hero-v4-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-v4-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(8, 14, 25, 0.96) 0%, rgba(10, 18, 30, 0.9) 60%, rgba(16, 185, 129, 0.25) 100%);
    z-index: 1;
}

/* Ensure text is above background */
.hero-v4 > div {
    position: relative;
    z-index: 2;
}

/* Top Row */
.hero-v4-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.hero-v4-status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    font-weight: 500;
}

.hv4-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green-400);
    box-shadow: 0 0 12px var(--green-400);
}

.hero-v4-desc {
    max-width: 380px;
    color: rgba(255,255,255,0.7);
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: right;
    margin: 0;
}

.hero-v4-desc strong {
    color: var(--white);
    font-weight: 600;
}

/* Bottom Row */
.hero-v4-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.hero-v4-title-block {
    max-width: 65%;
}

.hv4-tagline {
    color: rgba(255,255,255,0.7);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.hv4-tagline strong { color: var(--green-400); font-weight: 700; }
.hv4-tagline em { color: var(--white); font-style: normal; font-weight: 700; }

.hv4-title {
    font-size: 8rem;
    font-weight: 900;
    line-height: 0.9;
    color: var(--white);
    letter-spacing: -3px;
    margin: 0;
}

.hv4-title em {
    color: var(--green-400);
    font-style: normal;
}

/* Bottom Right: CTA & Services (Flowrix Style List) */
.hero-v4-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 320px;
}

.hv4-cta {
    background: var(--green-500);
    color: var(--white);
    padding: 1.4rem;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 600;
    border-radius: 16px 16px 0 0;
    text-decoration: none;
    transition: background 0.3s;
}

.hv4-cta:hover {
    background: var(--green-600);
}

.hv4-services {
    background: var(--white);
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}

.hv4-service-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.5rem;
    color: var(--dark-800);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 1px solid var(--gray-100);
    transition: all 0.3s;
}

.hv4-service-row:last-child {
    border-bottom: none;
}

.hv4-service-row:hover {
    background: var(--green-50);
    color: var(--green-600);
    padding-left: 1.7rem;
}

/* Responsive V4 */
@media (max-width: 1199px) {
    .hv4-title { font-size: 6rem; }
    .hero-v4 { padding: 3rem; }
}

@media (max-width: 991px) {
    .hero-v4-top {
        flex-direction: column;
        gap: 2rem;
    }
    .hero-v4-desc {
        text-align: left;
    }
    .hero-v4-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 4rem;
        margin-top: 4rem;
    }
    .hero-v4-title-block, .hero-v4-right {
        max-width: 100%;
        width: 100%;
    }
    .hv4-title { font-size: 5rem; }
}

@media (max-width: 767px) {
    .hero-v4-wrapper { padding: 80px 0.5rem 0.5rem 0.5rem; }
    .hero-v4 { border-radius: 24px; padding: 2rem; min-height: calc(100vh - 90px); }
    .hv4-title { font-size: 3.5rem; }
}

/* Old hero compat */
.hero-scroll-hint {
    position: absolute; bottom: 2.5rem; left: 50%;
    transform: translateX(-50%); z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
    color: var(--neutral-500);
}
.scroll-line {
    width: 1px; height: 50px;
    background: linear-gradient(to bottom, var(--green-500), transparent);
    animation: scrollDrop 2s ease-in-out infinite;
}

.d1 { transition-delay: .1s; }
.d2 { transition-delay: .25s; }
.d3 { transition-delay: .4s; }
.d4 { transition-delay: .55s; }
.d5 { transition-delay: .7s; }

/* ---------- SCROLL REVEAL ---------- */
.reveal {
    opacity: 0; transform: translateY(36px);
    transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
    transition-delay: var(--delay, 0s);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- PARTNERS SECTION - PREMIUM DESIGN ---------- */
.partners-section {
    background: #fafafa;
    padding: 6rem 0;
    border-top: 1px solid var(--neutral-100);
}
.partners-premium-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #059669;
    background: rgba(16, 185, 129, 0.08);
    padding: 0.5rem 1rem;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2rem;
    border: 1px solid rgba(16, 185, 129, 0.1);
}
.partners-label {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--neutral-500);
    position: relative;
    padding-bottom: 1rem;
}
.partners-label::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 30px; height: 2px; background: var(--green-500);
}
.partners-grid-premium {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}
.partner-chip-premium {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--white);
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
    transition: all 0.4s var(--ease-out);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.partner-chip-premium:hover {
    border-color: var(--green-400);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}
.p-chip-icon {
    width: 36px; height: 36px;
    background: #f0fdf4;
    color: var(--green-600);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
}
.partner-chip-premium:hover .p-chip-icon {
    background: var(--green-500);
    color: var(--white);
}
.partner-chip-premium span {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark-800);
}

/* ---------- LOGO BAR — Premium animated marquee ---------- */
.logo-bar {
    background: var(--white);
    padding: 0;
    overflow: hidden;
    position: relative;
    margin-top: -2px; /* Pull up to overlap the hero gap */
}

.logo-bar-inner {
    max-width: 100%;
    display: flex; align-items: center;
    height: 60px;
}
.partner-label {
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--neutral-500); white-space: nowrap;
    padding: 0 2rem;
    border-right: 1px solid var(--neutral-200);
    height: 100%; display: flex; align-items: center;
    background: var(--white);
    z-index: 2; flex-shrink: 0;
}

/* Marquee track */
.marquee-track-outer {
    flex: 1; overflow: hidden; position: relative;
    height: 100%; display: flex; align-items: center;
}
/* Fade edges */
.marquee-track-outer::before,
.marquee-track-outer::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none;
}
.marquee-track-outer::before { left: 0; background: linear-gradient(to right, var(--white), transparent); }
.marquee-track-outer::after  { right: 0; background: linear-gradient(to left,  var(--white), transparent); }

.marquee-track {
    display: flex; align-items: center;
    animation: marqueeScroll 28s linear infinite;
    width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.marquee-group {
    display: flex; align-items: center; gap: 0; flex-shrink: 0;
}

.partner-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .875rem; font-weight: 600;
    color: var(--dark-700);
    padding: .45rem 1.25rem;
    white-space: nowrap;
    transition: color .2s;
}
.partner-chip:hover { color: var(--green-600); }

.partner-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--neutral-200); flex-shrink: 0; margin: 0 .25rem;
}



/* ---------- SECTION EYEBROW ---------- */
.section-eyebrow {
    display: inline-block;
    font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--green-600);
    background: #dcfce7;
    padding: .35rem .9rem;
    border-radius: var(--radius-full);
    margin-bottom: 1.25rem;
}
.section-eyebrow.light {
    color: var(--green-400);
    background: rgba(74,222,128,.1);
}
.section-header.center { text-align: center; margin-bottom: 5rem; }
.section-header.center p { max-width: 600px; margin: 1rem auto 0; }

/* ---------- WHAT SECTION ---------- */
.what-section { background: var(--white); }
.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.split-text h2 { margin-bottom: 1.5rem; }
.split-text > p { margin-bottom: 2.5rem; }

.check-list { display: flex; flex-direction: column; gap: .85rem; }
.check-list li { display: flex; align-items: flex-start; gap: .85rem; font-size: 16px; color: var(--dark-700); font-weight: 500; }
.check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; min-width: 22px;
    background: var(--green-500); color: white;
    border-radius: 50%; font-size: 12px; font-weight: 700; margin-top: 1px;
}

/* Phone mockup */
.split-visual { display: flex; justify-content: center; }
.phone-mockup { position: relative; }
.phone-frame {
    width: 280px; height: 560px;
    background: var(--dark-950);
    border-radius: 44px;
    border: 3px solid rgba(255,255,255,.1);
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 0 12px rgba(0,0,0,.04);
    position: relative; z-index: 1;
}
.phone-screen { height: 100%; display: flex; flex-direction: column; background: var(--dark-900); }
.app-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 1.25rem .75rem;
    font-size: .8rem; font-weight: 600; color: var(--white);
}
.status-dot { width: 8px; height: 8px; background: var(--green-400); border-radius: 50%; }

.app-scan { padding: .5rem 1rem; flex: 1; display: flex; align-items: center; justify-content: center; }
.scan-area {
    position: relative; width: 160px; height: 160px;
    border-radius: 16px; background: rgba(255,255,255,.03);
    display: flex; align-items: center; justify-content: center;
}
.scan-line {
    position: absolute; width: 80%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--green-400), transparent);
    animation: scanMove 2s ease-in-out infinite;
}
@keyframes scanMove {
    0%, 100% { top: 20%; }
    50% { top: 80%; }
}
.scan-corner {
    position: absolute; width: 16px; height: 16px;
    border-color: var(--green-400); border-style: solid;
}
.scan-corner.tl { top: 0; left: 0; border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.scan-corner.tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 4px 0 0; }
.scan-corner.bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; }
.scan-corner.br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }
.scan-label { color: rgba(255,255,255,.4); font-size: .7rem; margin-top: 1rem; position: absolute; bottom: -1.5rem; }

.app-results { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.result-item {
    display: flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.04);
    border-radius: 10px; padding: .6rem;
    font-size: .68rem; color: rgba(255,255,255,.7);
    animation: resultAppear .5s var(--ease-out) both;
}
.result-item:nth-child(1) { animation-delay: .2s; }
.result-item:nth-child(2) { animation-delay: .5s; }
.result-item:nth-child(3) { animation-delay: .8s; }
@keyframes resultAppear {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}
.result-text { flex: 1; }
.result-match { color: var(--green-400); font-weight: 700; }

.phone-glow {
    position: absolute;
    bottom: -60px; left: 50%; transform: translateX(-50%);
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(34,197,94,.3) 0%, transparent 70%);
    filter: blur(20px); z-index: 0;
}

/* ---------- FONCTIONS SECTION (UML 3) ---------- */
.fonctions-section { background: var(--white); }
.fonctions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.fonction-card {
    background: var(--neutral-100);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    padding: 2.75rem 2.25rem;
    transition: all .4s var(--ease-out);
    position: relative; overflow: hidden;
}
.fonction-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease-out);
}
.fonction-card:nth-child(1)::before { background: var(--grad-green); }
.fonction-card:nth-child(2)::before { background: linear-gradient(90deg, var(--blue-400), var(--blue-500)); }
.fonction-card:nth-child(3)::before { background: linear-gradient(90deg, var(--teal-400), #0d9488); }
.fonction-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.fonction-card:hover::before { transform: scaleX(1); }

.fonction-num {
    font-size: 3.5rem; font-weight: 800; opacity: .06;
    line-height: 1; color: var(--dark-800); margin-bottom: .25rem;
}
.fonction-icon-wrap {
    width: 52px; height: 52px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.5rem;
}
.fonction-icon-wrap.green { background: #dcfce7; stroke: var(--green-700); }
.fonction-icon-wrap.blue  { background: #dbeafe; stroke: #1d4ed8; }
.fonction-icon-wrap.teal  { background: #ccfbf1; stroke: #0f766e; }

.fonction-card h3 { font-size: 1.25rem; color: var(--dark-800); margin-bottom: 1rem; }
.fonction-card > p { font-size: 15px; color: var(--neutral-500); line-height: 1.7; margin-bottom: 2rem; }

.fonction-flow {
    display: flex; flex-direction: column; gap: .5rem;
    border-top: 1px solid var(--neutral-200); padding-top: 1.5rem;
}
.flow-step {
    font-size: 13px; font-weight: 500; color: var(--neutral-700);
    background: var(--white); border-radius: 8px;
    padding: .55rem .85rem;
}
.flow-step.accent { background: var(--dark-800); color: var(--green-400); }
.flow-arrow { font-size: 12px; color: var(--neutral-500); text-align: center; line-height: 1; }

/* BANQUE ALIMENTAIRE SECTION REMOVED */

/* ---------- EMPLOI SECTION ---------- */
.emploi-section {
    background: var(--neutral-100);
    position: relative;
    padding: 8rem 0;
    margin-top: 0;
    z-index: 1;
}
.emploi-timeline { display: flex; flex-direction: column; gap: 0; max-width: 900px; margin: 0 auto 4rem; }

.etape {
    display: grid; grid-template-columns: 80px 1fr;
    align-items: stretch; gap: 0;
    position: relative;
}
.etape:not(:last-child) .etape-num::after {
    content: ''; position: absolute;
    left: 50%; top: 100%; transform: translateX(-50%);
    width: 2px; height: 100%; min-height: 40px;
    background: linear-gradient(to bottom, var(--green-500), transparent);
}
.etape-num {
    position: relative;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: .15rem;
}
.etape-num-inner {
    width: 44px; height: 44px;
    background: var(--white); border: 2px solid var(--green-500);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700; color: var(--green-700);
    flex-shrink: 0; z-index: 1;
    box-shadow: 0 0 0 6px rgba(34,197,94,.08);
}
/* ---------- AUTH PAGE PRO (Split Layout) ---------- */
.auth-page-pro {
    background: var(--white);
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    color: var(--dark-900);
}
.auth-split-container {
    display: flex;
    min-height: 100vh;
}

/* Left Side - Visual */
.auth-visual-side {
    position: relative;
    flex: 1.2; /* Larger than form side */
    display: flex;
    flex-direction: column;
    padding: 4rem;
    color: var(--white);
    overflow: hidden;
}
.auth-visual-bg {
    position: absolute; inset: 0; z-index: -1;
}
.auth-visual-bg img {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.65);
}
.auth-visual-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(21, 128, 61, 0.4) 0%, rgba(3, 7, 18, 0.8) 100%);
}
.auth-visual-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.auth-back-home {
    display: flex; align-items: center; gap: 0.75rem;
    color: var(--white); font-weight: 600;
    transition: transform 0.3s ease;
}
.auth-back-home:hover { transform: translateX(-5px); }

.auth-mission { max-width: 500px; margin-bottom: 4rem; }
.auth-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 99px;
    font-size: 0.85rem; font-weight: 700;
    margin-bottom: 2rem;
}
.auth-mission h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 1.5rem; }
.auth-mission p { font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,0.8); }

/* Right Side - Form */
.auth-form-side {
    flex: 1;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}
.auth-form-container {
    width: 100%;
    max-width: 420px;
}
.auth-logo-pro { font-size: 1.4rem; font-weight: 700; color: var(--green-600); margin-bottom: 2rem; }
.auth-form-header h2 { font-size: 1.85rem; color: var(--dark-900); margin-bottom: 0.5rem; font-family: 'Poppins', sans-serif; }
.auth-form-header p { color: var(--neutral-500); margin-bottom: 2.5rem; font-size: 1rem; }

/* Social buttons */
.auth-social { margin-bottom: 1.5rem; }
.btn-social {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    padding: 0.85rem;
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
    font-weight: 600; font-family: inherit;
    transition: all 0.3s;
}
.btn-social:hover { background: #f9fafb; border-color: var(--neutral-300); }

.auth-divider {
    position: relative;
    text-align: center;
    margin: 1.5rem 0;
}
.auth-divider::before {
    content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--neutral-100);
}
.auth-divider span {
    position: relative; background: var(--white); padding: 0 1rem;
    color: var(--neutral-400); font-size: 0.85rem; font-weight: 500;
}

/* Tabs Toggle */
.auth-tabs-pro {
    display: flex;
    gap: 0.5rem;
    background: #f3f4f6;
    padding: 0.35rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}
.auth-tabs-pro .auth-tab {
    flex: 1; border: none; padding: 0.6rem; border-radius: 8px;
    font-weight: 600; font-size: 0.9rem; cursor: pointer;
    transition: all 0.3s; background: transparent; color: var(--neutral-500);
}
.auth-tabs-pro .auth-tab.active { background: var(--white); color: var(--dark-900); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

/* Forms Stack */
.auth-form-pro { display: none; }
.auth-form-pro.active { display: block; animation: slideUp 0.5s var(--ease-out); }
@keyframes slideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.label-row { display: flex; justify-content: space-between; align-items: center; }
.forgot-link { font-size: 0.85rem; color: var(--green-600); font-weight: 600; }
.form-terms { font-size: 0.85rem; color: var(--neutral-400); margin: 1rem 0; line-height: 1.4; }
.form-terms a { color: var(--dark-800); text-decoration: underline; }

.auth-footer-pro { margin-top: 2rem; text-align: center; border-top: 1px solid var(--neutral-100); padding-top: 1.5rem; }
.auth-footer-pro p { display: none; font-size: 0.95rem; color: var(--neutral-500); }
.auth-form-pro#login-form.active ~ .auth-footer-pro p:last-child { display: block; }
.auth-form-pro#signup-form.active ~ .auth-footer-pro p:first-child { display: block; }
.auth-footer-pro a { color: var(--green-600); font-weight: 700; text-decoration: none; }

/* Responsive */
@media (max-width: 1024px) {
    .auth-visual-side { flex: 1; padding: 3rem; }
    .auth-mission h1 { font-size: 2.5rem; }
}
@media (max-width: 850px) {
    .auth-split-container { flex-direction: column; }
    .auth-visual-side { min-height: 40vh; padding: 2rem; justify-content: center; }
    .auth-form-side { padding: 3rem 1.5rem; }
    .auth-mission { margin-bottom: 0; }
    .auth-mission h1 { font-size: 2rem; }
    .auth-visual-overlay { background: linear-gradient(to bottom, rgba(3,7,18,0.2), rgba(3,7,18,0.8)); }
}
/* ---------- STAT CARDS REFINEMENT ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.stat-card {
    background: var(--white);
    padding: 3rem 2rem;
    border: 1px solid var(--neutral-100);
    transition: all 0.5s var(--ease-out);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}
.stat-card:hover {
    transform: translateY(-10px);
    border-color: var(--green-200);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
.stat-icon-wrap {
    width: 64px; height: 64px;
    background: #f0fdf4;
    color: var(--green-600);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 2rem;
    transition: all 0.5s var(--ease-out);
}
.stat-card:hover .stat-icon-wrap {
    background: var(--green-500);
    color: var(--white);
    transform: rotate(10deg);
}
.stat-number-wrap { display: flex; align-items: baseline; gap: 0.1rem; margin-bottom: 0.5rem; }
.stat-number { font-size: 3rem; font-weight: 800; color: var(--dark-900); }
.stat-plus { font-size: 1.5rem; font-weight: 700; color: var(--green-500); }
.stat-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--dark-800); margin-bottom: 1rem; }
.stat-card p { font-size: 0.95rem; line-height: 1.6; }
.etape-body {
    display: flex; gap: 1.5rem; align-items: flex-start;
    background: var(--white); border-radius: var(--radius-md);
    padding: 2rem; margin: 0 0 1.5rem 1.5rem;
    border: 1px solid var(--neutral-200);
    transition: box-shadow .3s, border-color .3s;
}
.etape-body:hover { box-shadow: var(--shadow-md); border-color: var(--green-400); }
.etape-icon {
    width: 44px; height: 44px; min-width: 44px;
    background: #dcfce7; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    stroke: var(--green-700);
}
.etape-content h4 { font-size: 1.05rem; color: var(--dark-800); margin-bottom: .5rem; }
.etape-content > p { font-size: 15px; color: var(--neutral-500); margin: 0 0 1rem; }
.etape-tags { display: flex; gap: .5rem; flex-wrap: wrap; }
.etape-tags span {
    font-size: .72rem; font-weight: 600; color: var(--green-700);
    background: #dcfce7; border: 1px solid #bbf7d0;
    padding: .25rem .65rem; border-radius: var(--radius-full);
}

.emploi-cta {
    text-align: center;
    background: var(--dark-800); border-radius: var(--radius-lg);
    padding: 3.5rem 2rem;
}
.emploi-cta > p {
    font-size: 1.15rem; font-weight: 500;
    color: rgba(255,255,255,.7); margin-bottom: 1.75rem;
}

/* Old diagram styles removed for new tabbed features section */





.uml-diagram {
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    padding: 3rem;
    box-shadow: var(--shadow-md);
    overflow-x: auto;
}

/* Column headers */
.uml-headers {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem; margin-bottom: 2.5rem;
}
.uml-col-head {
    display: flex; flex-direction: column; align-items: center;
    gap: .5rem; text-align: center;
    padding: 1.5rem 1rem;
    border-radius: var(--radius-md);
    border-top: 3px solid;
}
.uml-col-head.green { background: #f0fdf4; border-color: var(--green-500); }
.uml-col-head.blue  { background: #eff6ff; border-color: var(--blue-500); }
.uml-col-head.teal  { background: #f0fdfa; border-color: var(--teal-400); }
.uml-col-icon {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .25rem;
}
.uml-col-head.green .uml-col-icon { background: #dcfce7; stroke: var(--green-700); }
.uml-col-head.blue  .uml-col-icon { background: #dbeafe; stroke: #1d4ed8; }
.uml-col-head.teal  .uml-col-icon { background: #ccfbf1; stroke: #0f766e; }
.uml-col-head span { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--neutral-500); }
.uml-col-head strong { font-size: 1rem; font-weight: 700; color: var(--dark-800); }

/* UML body grid */
.uml-body { display: flex; flex-direction: column; gap: 1.25rem; }
.uml-row, .uml-step-row, .uml-final-row {
    display: grid; grid-template-columns: 1fr 60px 1fr;
    align-items: center; gap: 0;
    min-height: 80px;
}

/* Actor row */
.uml-actor-row { min-height: 48px; }
.uml-actor {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: .8rem; font-weight: 600; color: var(--neutral-500);
    background: var(--neutral-100); border-radius: var(--radius-sm);
    padding: .5rem .9rem;
}
.uml-actor-icon { stroke: var(--neutral-500); }

/* UML nodes */
.uml-node {
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: .8rem; font-weight: 500; line-height: 1.4;
    border-left: 3px solid;
    opacity: 0; transform: translateY(12px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
    transition-delay: var(--nd, 0s);
}
.uml-diagram.visible .uml-node { opacity: 1; transform: translateY(0); }
.uml-node svg { flex-shrink: 0; stroke: inherit; }
.uml-node em { font-style: normal; opacity: .65; font-size: .75rem; display: block; }

.node-action  { background: #f0fdf4; border-color: var(--green-500); color: var(--green-700); stroke: var(--green-600); }
.node-ai      { background: #1e293b; border-color: var(--green-400); color: var(--white); stroke: var(--green-400); position: relative; overflow: hidden; }
.node-result  { background: #eff6ff; border-color: var(--blue-500); color: #1d4ed8; stroke: #1d4ed8; }
.node-final   { background: #f0fdfa; border-color: var(--teal-400); color: #0f766e; stroke: #0f766e; font-weight: 700; }

/* AI pulse effect */
.ai-pulse {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(74,222,128,.12) 0%, transparent 70%);
    animation: aiGlow 2s ease-in-out infinite;
}
/* --- Animations --- */
.reveal, .animate-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.visible, .animate-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fail-safe: show elements if JS is disabled or after timeout */
.no-js .reveal, .js-timeout .reveal {
  opacity: 1 !important;
  transform: none !important;
}

.d1 { transition-delay: 0.1s !important; }
.d2 { transition-delay: 0.2s !important; }
.d3 { transition-delay: 0.3s !important; }
.d4 { transition-delay: 0.4s !important; }
.d5 { transition-delay: 0.5s !important; }


@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes aiGlow {
    0%, 100% { opacity: .5; transform: scale(.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Vertical arrows */
.uml-arrow-down {
    height: 32px; width: 2px;
    background: linear-gradient(to bottom, var(--green-400), transparent);
    margin: .25rem auto 0;
    position: relative;
    opacity: 0; transform: scaleY(0); transform-origin: top;
    transition: opacity .4s, transform .4s var(--ease-out);
    transition-delay: var(--nd, 0s);
}
.uml-arrow-down::after {
    content: '';
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--green-400);
}
.uml-diagram.visible .uml-arrow-down { opacity: 1; transform: scaleY(1); }

/* Horizontal arrows */
.uml-arrow-right-wrap { display: flex; align-items: center; justify-content: center; min-height: 80px; }
.uml-arrow-h {
    width: 100%; height: 2px;
    background: linear-gradient(to right, var(--green-300), var(--blue-400));
    position: relative;
    opacity: 0; transform: scaleX(0); transform-origin: left;
    transition: opacity .4s, transform .5s var(--ease-out);
    transition-delay: var(--nd, 0s);
}
.uml-arrow-h.final { background: linear-gradient(to right, var(--blue-400), var(--teal-400)); }
.uml-arrow-h::after {
    content: '';
    position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--blue-400);
}
.uml-arrow-h.final::after { border-left-color: var(--teal-400); }
.uml-diagram.visible .uml-arrow-h { opacity: 1; transform: scaleX(1); }

/* Legend */
.uml-legend {
    display: flex; gap: 2rem; flex-wrap: wrap;
    margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid var(--neutral-200);
    justify-content: center;
}
.legend-item { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--neutral-500); }
.leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.leg-dot.green { background: var(--green-500); }
.leg-dot.blue  { background: var(--blue-500); }
.leg-dot.teal  { background: var(--teal-400); }
.leg-dot.gold  { background: #f59e0b; }

/* BANQUE PHOTO REMOVED */


.axis-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-lg); padding: 3.5rem 3rem;
    transition: all .4s var(--ease-out);
    position: relative; overflow: hidden;
}
.axis-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad-green);
    transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease-out);
}
.axis-card:hover { background: rgba(255,255,255,.06); transform: translateY(-8px); border-color: rgba(74,222,128,.2); }
.axis-card:hover::before { transform: scaleX(1); }
.axis-num { font-size: 4rem; font-weight: 800; opacity: .06; line-height: 1; margin-bottom: .5rem; color: var(--white); }
.axis-icon-svg {
    width: 56px; height: 56px;
    background: rgba(74,222,128,.1);
    border: 1px solid rgba(74,222,128,.15);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 2rem;
    stroke: var(--green-400);
}
.axis-card h3 { color: var(--white); margin-bottom: 1rem; font-size: 1.5rem; }
.axis-card p { font-size: 16px; }
.axis-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2rem; }
.axis-tags span {
    background: rgba(74,222,128,.1); color: var(--green-400);
    border: 1px solid rgba(74,222,128,.2);
    padding: .3rem .8rem; border-radius: var(--radius-full);
    font-size: .75rem; font-weight: 600;
}

/* ---------- IMPACTS SECTION ---------- */
.impacts-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
    margin-bottom: 5rem;
}
.impact-card {
    border-radius: var(--radius-lg); padding: 3rem 2.5rem;
    transition: transform .4s var(--ease-out);
}
.impact-card:hover { transform: translateY(-10px); }
.impact-card.green { background: #f0fdf4; border: 1px solid #bbf7d0; }
.impact-card.blue  { background: #eff6ff; border: 1px solid #bfdbfe; }
.impact-card.teal  { background: #f0fdfa; border: 1px solid #99f6e4; }
.impact-icon-svg {
    width: 48px; height: 48px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.75rem;
}
.impact-card.green .impact-icon-svg { background: #dcfce7; stroke: var(--green-700); }
.impact-card.blue  .impact-icon-svg { background: #dbeafe; stroke: #1d4ed8; }
.impact-card.teal  .impact-icon-svg { background: #ccfbf1; stroke: #0f766e; }
.impact-card h4 { font-size: 1.25rem; margin-bottom: 1.5rem; }
.impact-card.green h4 { color: var(--green-700); }
.impact-card.blue  h4 { color: #1d4ed8; }
.impact-card.teal  h4 { color: #0f766e; }
.impact-card ul { display: flex; flex-direction: column; gap: .6rem; }
.impact-card li { font-size: 15px; color: var(--neutral-700); display: flex; gap: .5rem; }
.impact-card li::before { content: '—'; opacity: .4; flex-shrink: 0; }

/* ---------- IMPACTS ---------- */
.impacts-section {
    background: var(--dark-900); color: var(--white);
    padding: 8rem 0;
    margin-top: 0;
    z-index: 1;
    position: relative;
}
.impacts-section h2 { color: var(--white); }
.impact-card.green { background: rgba(255,255,255,.03); border: 1px solid rgba(74,222,128,.15); }
.impact-card.blue  { background: rgba(255,255,255,.03); border: 1px solid rgba(96,165,250,.15); }
.impact-card.teal  { background: rgba(255,255,255,.03); border: 1px solid rgba(45,212,191,.15); }
.impacts-section .impact-card.green .impact-icon-svg { background: rgba(74,222,128,.1); stroke: var(--green-400); }
.impacts-section .impact-card.blue  .impact-icon-svg { background: rgba(96,165,250,.1); stroke: var(--blue-400); }
.impacts-section .impact-card.teal  .impact-icon-svg { background: rgba(45,212,191,.1); stroke: var(--teal-400); }
.impacts-section .impact-card.green h4 { color: var(--green-400); }
.impacts-section .impact-card.blue  h4 { color: var(--blue-400); }
.impacts-section .impact-card.teal  h4 { color: var(--teal-400); }
.impacts-section .impact-card li { color: rgba(255,255,255,.55); }

/* Stats bar */
.stats-bar {
    display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    background: var(--dark-900); border-radius: var(--radius-lg);
    padding: 3rem 4rem;
    box-shadow: var(--shadow-lg);
}
.stat-item { text-align: center; }
.stat-num {
    display: block; font-size: clamp(36px, 5vw, 52px);
    font-weight: 800; color: var(--green-400);
    line-height: 1; margin-bottom: .5rem;
}
.stat-label { font-size: .875rem; color: #9ca3af; }
.stat-divider { width: 1px; height: 60px; background: rgba(255,255,255,.08); }

/* ---------- REGISTER SECTION ---------- */
/* Text-centric Features Redesign */
.features-section {
    background: var(--white);
    padding: 10rem 0;
}

.features-content-split {
    display: block; /* Change from grid/flex to block for Centered layout */
}

.f-content-pane {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.f-content-pane.active {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.f-text-block {
    width: 100%;
}

.f-content-pane h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.f-content-pane > p {
    font-size: 1.25rem;
    color: var(--neutral-500);
    max-width: 700px;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

.f-grid-concrete {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
    text-align: left;
    width: 100%;
}

.f-item-concrete {
    background: #f8fafc;
    padding: 2.5rem;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.f-item-concrete:hover {
    transform: translateY(-8px);
    border-color: var(--green-400);
    box-shadow: var(--shadow-md);
}

.f-item-icon-lg {
    width: 56px;
    height: 56px;
    background: #dcfce7;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    stroke: var(--green-700);
}

.f-item-concrete h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--dark-900);
}

.f-item-concrete p {
    font-size: 0.95rem;
    color: var(--neutral-500);
    line-height: 1.5;
}

.mistral-privacy-notice {
    margin-top: 4rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: var(--dark-900);
    color: var(--white);
    padding: 1rem 2rem;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
}

.mistral-logo-mini {
    height: 20px;
    filter: brightness(0) invert(1);
}

.privacy-tag {
    color: var(--green-400);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

@media (max-width: 991px) {
    .f-grid-concrete { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
    .f-grid-concrete { grid-template-columns: 1fr; }
    .f-content-pane h2 { font-size: 2.25rem; }
}
/* ---------- MISTRAL AI SECTION ---------- */
.mistral-section {
    background: var(--dark-900);
    position: relative;
    padding: 8rem 0;
}

.mistral-header {
    text-align: center;
    margin-bottom: 4rem;
}

.mistral-header h2 {
    color: var(--white);
    font-size: 2.75rem;
    margin-bottom: 1.5rem;
}

.mistral-header h2 em {
    font-style: normal;
    color: var(--green-400);
}

.mistral-intro {
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.1rem;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}

.mistral-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.mistral-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 2.5rem;
    transition: all 0.35s ease;
}

.mistral-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(74, 222, 128, 0.25);
    transform: translateY(-6px);
}

.mc-icon {
    width: 56px;
    height: 56px;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-400);
    margin-bottom: 1.5rem;
}

.mistral-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.75rem;
}

.mistral-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
}

.mistral-card p strong {
    color: var(--green-400);
    font-weight: 700;
}

.mistral-footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    max-width: fit-content;
    margin: 0 auto;
}

.mf-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--green-400);
    white-space: nowrap;
}

.mf-dot {
    width: 8px;
    height: 8px;
    background: var(--green-400);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.mf-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

@media (max-width: 767px) {
    .mistral-grid { grid-template-columns: 1fr; }
    .mistral-header h2 { font-size: 2rem; }
    .mistral-footer { flex-direction: column; text-align: center; border-radius: 20px; }
}

/* ---------- REGISTER / FORM ---------- */
.register-section {
    background: var(--white);
    padding: 8rem 0;
    margin-top: 0;
    z-index: 1;
    position: relative;
}
.register-section .register-left h2 { color: var(--dark-800); }
.register-section .register-left > p { color: var(--neutral-500); }
.register-section .section-eyebrow { color: var(--green-600); background: #dcfce7; }
.register-section .perk { color: var(--dark-700); }
.register-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6rem; align-items: start; }
.register-left h2 { margin-bottom: 1.25rem; }
.register-left > p { margin-bottom: 2.5rem; }
.register-perks { display: flex; flex-direction: column; gap: 1rem; }
.perk {
    display: flex; align-items: center; gap: .85rem;
    font-size: 15px; font-weight: 500; color: rgba(255,255,255,.8);
}
.perk-icon {
    width: 42px; height: 42px;
    background: rgba(74,222,128,.12);
    border: 1px solid rgba(74,222,128,.2);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    stroke: var(--green-400);
}

/* Register form */
.reg-form {
    background: var(--neutral-100);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    padding: 3rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-group { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .25rem; }
.form-group label { font-size: .875rem; font-weight: 600; color: var(--dark-700); }
.form-group input,
.form-group select,
.form-group textarea {
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    font-family: var(--font); font-size: .95rem;
    color: var(--dark-800);
    outline: none;
    transition: border-color .25s, background .25s;
}
.form-group select option { background: var(--white); color: var(--dark-800); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--green-500);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--neutral-500); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-group + .btn { margin-top: 1.25rem; }
.form-note { font-size: .8rem; color: var(--neutral-500); text-align: center; margin-top: 1rem; }
.hidden { display: none !important; }
.form-success {
    text-align: center; padding: 4rem 2rem;
}
.success-check {
    width: 72px; height: 72px;
    background: #dcfce7;
    border: 2px solid var(--green-400);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 2rem;
    stroke: var(--green-600);
}
.form-success h3 { color: var(--dark-800); font-size: 1.75rem; margin-bottom: 1rem; }
.form-success p { font-size: 1rem; color: var(--neutral-500); }
.success-contact { margin-top: 2rem; font-size: .9rem; color: rgba(255,255,255,.4); line-height: 1.8; }

.banque-actions {
    margin-top: 3rem;
}
.btn-locator {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 2.25rem;
    background: linear-gradient(135deg, var(--green-600) 0%, var(--green-700) 100%);
    color: var(--white);
    font-weight: 700;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(22, 101, 52, 0.25);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-locator svg {
    transition: transform 0.4s ease;
}
.btn-locator:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(22, 101, 52, 0.4);
    background: linear-gradient(135deg, var(--green-500) 0%, var(--green-600) 100%);
}
.btn-locator:hover svg {
    transform: scale(1.2) rotate(-10deg);
}
.btn-locator span {
    font-size: 1.05rem;
}
.btn-text-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}
.btn-label {
    font-size: 1.05rem;
}
.btn-sublabel {
    font-size: 0.8rem;
    opacity: 0.8;
    font-weight: 500;
}

@media (max-width: 768px) {
    .banque-actions { text-align: center; }
    .btn-locator { width: 100%; justify-content: center; padding: 1.15rem 1.5rem; }
    .btn-locator span { font-size: 0.95rem; }
}

/* ---------- FOOTER ---------- */
.footer {
    background: var(--dark-950);
    color: var(--white); 
    padding: 8rem 0 4rem;
    margin-top: 0;
    position: relative;
}
.footer-top {
    display: grid; grid-template-columns: 2fr 1fr 1fr;
    gap: 4rem; margin-bottom: 4rem;
}
.footer-brand .logo { font-size: 1.25rem; margin-bottom: 1rem; }
.footer-brand p { font-size: .9rem; color: #6b7280; max-width: 340px; }
.footer-contact h5,
.footer-links h5 { color: rgba(255,255,255,.5); margin-bottom: 1.25rem; }
.footer-contact p { font-size: .9rem; color: #6b7280; line-height: 1.9; }
.footer-contact a { color: var(--green-400); }
.footer-links { display: flex; flex-direction: column; gap: .6rem; }
.footer-links a { font-size: .9rem; color: #6b7280; transition: color .2s; }
.footer-links a:hover { color: var(--green-400); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: 2rem; text-align: center;
}
.footer-bottom p { font-size: .85rem; color: #4b5563; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .split-layout { grid-template-columns: 1fr; gap: 4rem; }
    .split-visual { order: -1; }
    .phone-frame { width: 240px; height: 480px; }
    .axes-grid { grid-template-columns: 1fr; }
    .fonctions-grid { grid-template-columns: 1fr; }
    .register-layout { grid-template-columns: 1fr; gap: 4rem; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .container { padding: 0 1.25rem; }
    .section-pad { padding: 4.5rem 0; }
    
    h1 { font-size: 2.25rem; text-align: center; line-height: 1.2; }
    h2 { font-size: 2rem; text-align: center; line-height: 1.25; }
    .section-header.center p { text-align: center; margin-top: 1rem; font-size: 1rem; }
    
    .hero { border-radius: 0; }
    .hero-bg, .hero-overlay, .hero-img, .hero::after { border-radius: 0; }

    .hero-content { padding: 0 1rem; }
    .eyebrow { justify-content: center; width: 100%; text-align: center; }
    .hero-sub { font-size: 1.05rem; }
    .hero-actions { flex-direction: column; width: 100%; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    
    .uml-section,
    .villeray-stats-section,
    .banque-section,
    .emploi-section,
    .impacts-section,
    .register-section,
    .partners-section,
    .footer { 
        border-radius: 0; 
        margin-top: 0; 
        padding: 4.5rem 0;
    }
    
    .partners-list { gap: 1rem 1.5rem; }
    .partners-label { font-size: 0.9rem; }
    
    .navbar { padding: 1rem 0; }
    .nav-inner { padding: 0 1rem; }
    .nav-links { 
        gap: 0.75rem 1rem; 
        flex-wrap: wrap; 
        justify-content: center; 
    }
    .nav-links a { font-size: 0.9rem; }
    .nav-cta { padding: 0.35rem 0.9rem; }
    
    .logo-bar-inner { height: 50px; }
    .partner-label { padding: 0 1rem; font-size: 0.65rem; }
    .partner-chip { padding: 0.35rem 1rem; font-size: 0.8rem; }
    
    .split-layout { gap: 3rem; }
    .banque-photo { height: 320px; }
    
    .cd-wrapper { 
        flex-direction: column; 
        gap: 0; 
        padding: 1rem 0; 
    }
    .cd-box {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }
    .cd-arrow-h {
        width: 2px !important;
        height: 50px !important;
        margin: 1rem auto;
        transform: none !important;
    }
    .cd-arrow-line {
        width: 2px;
        height: 100%;
        background: linear-gradient(to bottom, transparent, var(--green-400), transparent);
    }
    .cd-arrow-line::before, .cd-arrow-line::after { display: none; }

    .stats-grid { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.5rem; }
    .stat-card { padding: 2rem 1.5rem; flex-direction: column; align-items: center; text-align: center; }
    .stat-icon-wrap { margin-bottom: 0.5rem; }
    .stat-number-wrap { justify-content: center; width: 100%; }
    .stat-number { font-size: 2.5rem; }

    .banque-steps { gap: 1.75rem; display: none; }
    .bstep-num { margin-bottom: 0px; }
    
    .emploi-timeline { margin-bottom: 2rem; }
    .etape { grid-template-columns: 40px 1fr; }
    .etape-num-inner { width: 32px; height: 32px; font-size: 0.75rem; box-shadow: 0 0 0 3px rgba(34,197,94,.08); }
    .etape-body { 
        padding: 1.5rem 1.25rem; 
        margin: 0 0 2rem 1rem; 
        flex-direction: column; 
        gap: 1rem; 
        align-items: center;
        text-align: center;
    }
    .etape-tags { justify-content: center; }
    
    .impacts-grid { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
    .impact-card { padding: 2.5rem 1.75rem; text-align: center; align-items: center; display: flex; flex-direction: column; }
    .impact-card ul { align-items: flex-start; text-align: left; width: 100%; }
    
    .stats-bar { grid-template-columns: 1fr; padding: 2rem 1.5rem; gap: 2rem; }
    .stat-num { font-size: 2.75rem; }
    .stat-divider { display: none; }
    
    .register-layout { grid-template-columns: 1fr; gap: 3rem; }
    .reg-form { padding: 1.75rem 1.25rem; }
    .form-row { grid-template-columns: 1fr; }
    .form-group input, .form-group select, .form-group textarea { padding: 0.75rem 1rem; }
    .register-left h2 { text-align: center; }
    .register-left > p { text-align: center; }
    .register-perks { align-items: center; text-align: center; padding: 0 1rem; }
    
    .footer { padding: 3rem 0 1.5rem; }
    .footer-top { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
    .footer-brand p { margin: 0 auto; }
    .footer-links { align-items: center; }

    .cursor-dot, .cursor-ring { display: none; }
    body { cursor: auto; }
    .btn { cursor: pointer; }
}

/* ---------- CUSTOM SCROLLBAR ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--dark-950); }
::-webkit-scrollbar-thumb { background: var(--green-700); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-500); }

/* ---------- MODAL SYSTEM ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-out);
    padding: 1.5rem;
}
.modal.active {
    opacity: 1;
    pointer-events: auto;
}
.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 18, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.modal-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.5s var(--ease-out);
}
.modal.active .modal-container {
    transform: scale(1) translateY(0);
}
.modal-close {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    width: 40px; height: 40px;
    background: var(--neutral-100);
    border: none;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--dark-700);
    transition: all 0.3s;
    z-index: 10;
}
.modal-close:hover { background: var(--green-100); color: var(--green-700); transform: rotate(90deg); }

.modal-content { padding: 4rem 3.5rem; }
.modal-header { text-align: center; margin-bottom: 2.5rem; }
.modal-header h2 { margin-bottom: 0.75rem; color: var(--dark-900); }
.modal-header p { font-size: 1rem; color: var(--neutral-500); }

.modal-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Form Success Inside Modal */
.modal .form-success {
    text-align: center;
    padding: 2rem 0;
}

@media (max-width: 600px) {
    .modal-form .form-grid { grid-template-columns: 1fr; }
    .modal-content { padding: 3rem 1.5rem; }
    .modal-header h2 { font-size: 1.75rem; }
}

/* ---------- DASHBOARD SYSTEM ---------- */
.dashboard-page {
    background: #f8fafc;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
}
.dash-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.dash-sidebar {
    width: 280px;
    background: var(--dark-950);
    color: var(--white);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
}
.sidebar-header { padding: 2.5rem 2rem; }
.sidebar-nav { flex: 1; padding: 0 1rem; }
.sidebar-nav ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-nav a {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.85rem 1rem;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s;
}
.sidebar-nav li.active a,
.sidebar-nav a:hover {
    background: rgba(255,255,255,0.05);
    color: var(--white);
}
.sidebar-nav li.active a { color: var(--green-400); background: rgba(34,197,94,0.1); }

.sidebar-footer { padding: 2rem; border-top: 1px solid rgba(255,255,255,0.05); }
.logout-link { display: flex; align-items: center; gap: 1rem; color: #ef4444; font-weight: 600; }

/* Main Area */
.dash-main {
    flex: 1;
    margin-left: 280px;
    display: flex;
    flex-direction: column;
}
.dash-header {
    height: 80px;
    background: var(--white);
    border-bottom: 1px solid var(--neutral-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    position: sticky; top: 0; z-index: 90;
}
.header-left h1 { font-size: 1.5rem; font-weight: 700; color: var(--dark-900); }

.header-right { display: flex; align-items: center; gap: 2.5rem; }
.header-search {
    position: relative;
    display: flex; align-items: center;
    background: #f1f5f9;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    width: 260px;
}
.header-search input {
    background: transparent; border: none; padding: 0 0.75rem;
    font-size: 0.9rem; width: 100%; color: var(--dark-800);
}
.header-actions { display: flex; align-items: center; gap: 1.5rem; }
.profile-mini { display: flex; align-items: center; gap: 1rem; }
.profile-name { font-weight: 600; font-size: 0.9rem; }
.profile-avatar {
    width: 36px; height: 36px;
    background: var(--green-100); color: var(--green-700);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
}

/* Content */
.dash-content { padding: 3rem; }
.content-section { display: none; }
.content-section.active { display: block; animation: fadeIn 0.5s ease-out; }

/* Stats Cards */
.stats-grid-pro {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.stat-card-dash {
    background: var(--white);
    padding: 1.5rem 2rem;
    border-radius: 20px;
    border: 1px solid var(--neutral-100);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.stat-info span { font-size: 0.85rem; color: var(--neutral-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-info h3 { font-size: 2rem; font-weight: 800; margin: 0.5rem 0; color: var(--dark-900); }
.trend { font-size: 0.85rem; font-weight: 600; color: var(--neutral-400); }
.trend.up { color: #10b981; }

.stat-icon-pro {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.stat-icon-pro.green { background: #f0fdf4; color: #166534; }
.stat-icon-pro.blue { background: #eff6ff; color: #1e40af; }
.stat-icon-pro.orange { background: #fff7ed; color: #9a3412; }

/* Dashboard Cards */
.dash-grid-two {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
}
.dash-card {
    background: var(--white);
    border-radius: 20px;
    border: 1px solid var(--neutral-100);
    padding: 2rem;
}
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 2rem;
}
.card-header h4 { font-size: 1.1rem; color: var(--dark-900); }

/* AI Insights Content */
.ai-insight-content { display: flex; flex-direction: column; gap: 1.25rem; }
.insight-item { display: flex; gap: 1rem; align-items: flex-start; }
.insight-dot { width: 10px; height: 10px; min-width: 10px; border-radius: 50%; background: var(--green-500); margin-top: 6px; }
.insight-dot.warning { background: #f59e0b; }
.insight-item p { font-size: 0.95rem; line-height: 1.6; color: var(--dark-700); }

/* Activity List */
.activity-list { display: flex; flex-direction: column; gap: 1.5rem; }
.activity-item { position: relative; padding-left: 1.5rem; border-left: 2px solid var(--neutral-100); }
.activity-time { font-size: 0.8rem; color: var(--neutral-400); font-weight: 600; display: block; margin-bottom: 0.25rem; }
.activity-item p { font-size: 0.9rem; color: var(--dark-800); }

/* Dashboard Table */
.dash-table { width: 100%; border-collapse: collapse; text-align: left; }
.dash-table th { padding: 1rem 0; font-size: 0.85rem; color: var(--neutral-400); font-weight: 700; text-transform: uppercase; border-bottom: 1px solid var(--neutral-100); }
.dash-table td { padding: 1.25rem 0; border-bottom: 1px solid var(--neutral-50); font-size: 0.95rem; font-weight: 500; }
.badge { padding: 0.35rem 0.75rem; border-radius: 6px; font-size: 0.8rem; font-weight: 700; }
.badge-green { background: #f0fdf4; color: #166534; }
.badge-blue { background: #eff6ff; color: #1e40af; }

/* Responsive Dashboard */
@media (max-width: 1200px) {
    .stats-grid-pro { grid-template-columns: repeat(2, 1fr); }
    .dash-grid-two { grid-template-columns: 1fr; }
}
@media (max-width: 850px) {
    .dash-sidebar { transform: translateX(-100%); transition: transform 0.3s; }
    .dash-main { margin-left: 0; }
    .dash-header { padding: 0 1.5rem; }
    .stats-grid-pro { grid-template-columns: 1fr; }
    .dash-content { padding: 1.5rem; }
}

/* ---------- ECOVILLERAY DASHBOARD THEME (REFINED GREEN) ---------- */
.dashboard-eco {
    background: #f8f9fe;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    color: #3d4465;
    overflow-x: hidden;
}
.fillow-wrapper { display: flex; min-height: 100vh; }

/* Sidebar EcoVilleray */
.fillow-sidebar {
    width: 280px;
    background: var(--white);
    height: 100vh;
    position: fixed;
    border-right: 1px solid #f0f1f5;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}
.sidebar-brand { padding: 2.5rem 2.5rem; }
.f-logo { display: flex; align-items: center; gap: 0.75rem; font-weight: 800; font-size: 1.35rem; color: #1e293b; }
.f-logo-icon { width: 40px; height: 40px; background: var(--green-600); color: var(--white); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.f-sublogo { font-size: 0.75rem; color: #94a3b8; font-weight: 500; margin-top: 2px; }

.f-nav { flex: 1; padding: 1rem 0; overflow-y: auto; }
.nav-list { list-style: none; }
.nav-item a {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.9rem 2.5rem;
    color: #888ea8; font-weight: 500; text-decoration: none;
    transition: all 0.3s;
}
.nav-item.active a { color: var(--green-700); background: rgba(22, 101, 52, 0.05); border-right: 4px solid var(--green-600); font-weight: 600; }
.nav-item a:hover { color: var(--green-600); }

.sidebar-user { padding: 2rem 2.5rem; border-top: 1px solid #f0f1f5; }
.user-info { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.user-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.u-name { font-size: 0.85rem; font-weight: 700; color: #1e293b; }
.u-email { font-size: 0.75rem; color: #94a3b8; }
.up-text { display: flex; justify-content: space-between; font-size: 0.7rem; font-weight: 600; margin-bottom: 0.5rem; }
.up-bar { height: 6px; background: #f0f1f5; border-radius: 3px; }
.up-fill { height: 100%; background: var(--green-600); border-radius: 3px; }
.f-copyright { font-size: 0.65rem; color: #cbd5e1; margin-top: 1.5rem; }

/* EcoVilleray Header */
.fillow-header {
    height: 80px;
    background: var(--green-600);
    position: fixed; top: 0; left: 280px; right: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    color: var(--white);
}
.h-left { display: flex; align-items: center; gap: 1.5rem; }
.h-left h2 { font-size: 1.4rem; font-weight: 700; }
.sidebar-toggle { background: transparent; border: none; color: var(--white); cursor: pointer; }

.h-right { display: flex; align-items: center; gap: 2rem; }
.h-search {
    position: relative;
    background: rgba(255,255,255,0.15);
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    display: flex; align-items: center;
}
.h-search input { background: transparent; border: none; color: var(--white); font-family: inherit; font-size: 0.9rem; width: 180px; outline: none; }
.h-search input::placeholder { color: rgba(255,255,255,0.7); }
.h-icons { display: flex; align-items: center; gap: 0.75rem; }
.h-icon-btn {
    position: relative; width: 40px; height: 40px;
    background: rgba(255,255,255,0.15);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    transition: background 0.3s; cursor: pointer;
}
.h-icon-btn:hover { background: rgba(255,255,255,0.25); }
.h-icon-btn .badge {
    position: absolute; top: -5px; right: -5px;
    background: #4caf50; color: #fff; font-size: 10px; font-weight: 800;
    padding: 2px 5px; border-radius: 4px;
}
.h-icon-btn .badge.green { background: #166534; color: #fff; }
.header-avatar-mini { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid var(--white); }
.header-avatar-mini img { width: 100%; height: 100%; object-fit: cover; }

/* Dashboard Content */
.fillow-content { flex: 1; margin-left: 280px; padding-top: 80px; }
.fillow-inner { padding: 2.5rem; }
.f-section { display: none; }
.f-section.active { display: block; animation: fFadeIn 0.5s ease; }
@keyframes fFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Grid Layout */
.f-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(min-content, auto);
    gap: 1.5rem;
}

.f-card { background: var(--white); border-radius: 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); padding: 2rem; border: 1px solid rgba(0,0,0,0.05); }

/* Hero Card */
.hero-gradient-card {
    grid-column: span 2;
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 50%, #f97316 100%) !important;
    color: var(--white);
    padding: 3rem;
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 25px 50px rgba(234,88,12,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-gradient-inner-box {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    width: 100%;
    border: 1px solid rgba(255,255,255,0.2);
}

.hero-gradient-card h1 { 
    font-size: 2.2rem; font-weight: 800; margin-bottom: 1rem; 
    line-height: 1.2; color: #ffffff; letter-spacing: -0.02em; 
}
.hero-gradient-card p { 
    opacity: 0.95; margin-bottom: 2rem; font-size: 1rem; 
    color: rgba(255,255,255,0.9); line-height: 1.5; 
}
.hero-actions { 
    display: flex; gap: 1rem; justify-content: center;
}
.hero-actions .btn {
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-orange { 
    background: #f97316; color: #ffffff; border: none; 
}
.btn-orange:hover { background: #ea580c; transform: translateY(-2px); }

.btn-outline-white { 
    background: transparent; border: 1px solid rgba(255,255,255,0.4); color: #ffffff; 
}
.btn-outline-white:hover { border-color: #ffffff; background: rgba(255,255,255,0.1); transform: translateY(-2px); }

/* Metric Cards (1 column width) */
.metric-card {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.metric-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: #f8fafc;
    display: flex; align-items: center; justify-content: center;
    color: #0f172a;
}
.metric-icon.dark { background: #0f172a; color: #ffffff; }

.metric-link {
    font-size: 0.75rem; font-weight: 700;
    color: #64748b; background: #f1f5f9;
    padding: 0.4rem 0.8rem; border-radius: 20px;
    text-decoration: none; display: flex; align-items: center; gap: 0.3rem;
}

.metric-title { font-size: 0.9rem; font-weight: 700; color: #1e293b; margin-bottom: 0.2rem; }
.metric-value { font-size: 2.2rem; font-weight: 800; color: #0f172a; margin-bottom: 0.5rem; line-height: 1; }
.metric-desc { font-size: 0.8rem; font-weight: 600; color: #94a3b8; }
.metric-desc.red { color: #ef4444; }
.metric-desc.green { color: #10b981; }

.metric-chart { margin-top: auto; }
.metric-chart-legend { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; color: #64748b; margin-bottom: 0.5rem; }
.metric-chart-legend .dot { width: 6px; height: 6px; border-radius: 50%; background: #ea580c; display: inline-block; }

/* Activity Heatmap */
.heatmap-card {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}
.heatmap-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;
}
.heatmap-title { font-size: 1.1rem; font-weight: 800; color: #1e293b; display: flex; align-items: center; gap: 0.5rem; }
.heatmap-refresh { background: #f1f5f9; border: none; padding: 0.5rem 1rem; border-radius: 12px; font-size: 0.8rem; font-weight: 700; color: #64748b; cursor: pointer; }

.heatmap-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.heatmap-legend { display: flex; gap: 0.8rem; font-size: 0.75rem; font-weight: 600; color: #94a3b8; }
.heatmap-legend span { display: flex; align-items: center; gap: 0.3rem; }
.heatmap-legend .dot { width: 6px; height: 6px; border-radius: 50%; }
.heatmap-legend .d1 { background: #fef08a; } /* Faible */
.heatmap-legend .d2 { background: #fcd34d; } /* Moyen */
.heatmap-legend .d3 { background: #f97316; } /* Élevé */
.heatmap-legend .d4 { background: #dc2626; } /* Intense */

.heatmap-tabs { display: flex; background: #f1f5f9; padding: 0.25rem; border-radius: 12px; }
.heatmap-tabs button { background: transparent; border: none; padding: 0.4rem 1rem; font-size: 0.8rem; font-weight: 700; color: #64748b; border-radius: 8px; cursor: pointer; }
.heatmap-tabs button.active { background: #0f172a; color: #ffffff; }

.heatmap-grid {
    display: grid;
    grid-template-columns: 40px repeat(7, 1fr);
    gap: 4px;
    flex: 1;
}
.heatmap-row-label { font-size: 0.65rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; }
.heatmap-cell { background: #f1f5f9; border-radius: 4px; min-height: 24px; }
.heatmap-cell.level-1 { background: #ffedd5; }
.heatmap-cell.level-2 { background: #fed7aa; }
.heatmap-cell.level-3 { background: #f97316; }
.heatmap-cell.level-4 { background: #ea580c; }
.heatmap-col-label { font-size: 0.7rem; font-weight: 700; color: #64748b; text-align: center; margin-top: 8px; }
.heatmap-empty { }

/* Progress Card */
.f-progress-card { grid-column: span 1; display: flex; flex-direction: column; }
.f-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.f-progress-header h4 { font-size: 1rem; font-weight: 800; color: #1e293b; }
.f-progress-header .nav-arrow { color: #94a3b8; cursor: pointer; }
.f-progress-body { text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.progress-circle-wrap { position: relative; width: 140px; height: 140px; margin: 0 auto 1.5rem; }
.circle-bg { width: 100%; height: 100%; border-radius: 50%; border: 8px solid #f1f5f9; position: relative; }
.circle-progress { position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; border-radius: 50%; border: 8px solid transparent; border-top-color: #ea580c; border-right-color: #ea580c; transform: rotate(45deg); }
.circle-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.circle-text h3 { font-size: 1.8rem; font-weight: 800; color: #1e293b; margin: 0; }
.circle-text span { font-size: 0.65rem; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.f-progress-desc { font-size: 0.8rem; color: #64748b; margin-bottom: 1.5rem; line-height: 1.5; }
.btn-black { background: #0f172a; color: #ffffff; border: none; padding: 0.8rem 1rem; border-radius: 12px; font-weight: 700; font-size: 0.85rem; width: 100%; cursor: pointer; }


/* Table styles */
.f-table-wrap { overflow-x: auto; }
.f-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.f-table th { text-align: left; font-size: 0.8rem; color: #888ea8; text-transform: uppercase; padding: 1rem; border-bottom: 1px solid #f0f1f5; }
.f-table td { padding: 1.25rem 1rem; font-size: 0.9rem; border-bottom: 1px solid #f0f1f5; }
.badge-success-eco { background: #f0fdf4; color: #166534; padding: 0.35rem 0.75rem; border-radius: 6px; font-weight: 700; font-size: 0.8rem; }
.badge-danger-eco { background: #fef2f2; color: #991b1b; padding: 0.35rem 0.75rem; border-radius: 6px; font-weight: 700; font-size: 0.8rem; }
.badge-pending-eco { background: #fffbeb; color: #92400e; padding: 0.35rem 0.75rem; border-radius: 6px; font-weight: 700; font-size: 0.8rem; }

/* Premium Recruitment Options */
.recruitment-options-box {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

.opt-group { flex: 1; min-width: 200px; }
.opt-label { 
    display: block; 
    font-size: 0.85rem; 
    font-weight: 700; 
    color: var(--dark-800); 
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.radio-chips {
    display: flex;
    gap: 0.75rem;
}

.radio-chips label {
    flex: 1;
    text-align: center;
    padding: 0.6rem 1rem;
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-chips input { display: none; }
.radio-chips input:checked + span {
    color: var(--white);
}
.radio-chips label:has(input:checked) {
    background: var(--green-600);
    border-color: var(--green-600);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
}

.opt-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--green-600);
    text-decoration: none;
    transition: opacity 0.2s;
}
.opt-link:hover { opacity: 0.8; text-decoration: underline; }

.urgent-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    border: 1px solid #fee2e2;
    cursor: pointer;
    transition: all 0.2s;
}
.urgent-toggle-wrap:hover { border-color: #fca5a5; background: #fffafb; }
.urgent-toggle-wrap input { width: 18px; height: 18px; accent-color: #ef4444; cursor: pointer; }
.urgent-toggle-wrap span { font-weight: 700; color: #ef4444; font-size: 0.9rem; }
.btn-primary-eco { 
    background: linear-gradient(135deg, #10b981 0%, #059669 100%); 
    color: var(--white); font-weight: 600; padding: 0.75rem 1.5rem; 
    border-radius: 12px; border: none; cursor: pointer; transition: all 0.3s ease; 
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); 
}
.btn-primary-eco:hover { 
    background: linear-gradient(135deg, #059669 0%, #047857 100%); 
    transform: translateY(-2px); 
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3); 
}
.btn-sm { padding: 0.5rem 1rem !important; font-size: 0.8rem !important; border-radius: 10px !important; }

/* Modal Fillow */
.f-modal { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; }
.f-modal.show { display: flex; }
.f-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.f-modal-content { position: relative; background: var(--white); width: 90%; max-width: 600px; border-radius: 32px; padding: 3rem; z-index: 10; transform: translateY(-30px); animation: modalUp 0.3s forwards; box-shadow: 0 30px 60px rgba(0,0,0,0.4); }
@keyframes modalUp { to { transform: translateY(0); } }

.f-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.btn-close, .btn-close-recruit, .btn-close-order { 
    background: #f1f5f9; border: none; width: 36px; height: 36px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; cursor: pointer; 
    color: #64748b; transition: 0.3s; 
}
.btn-close:hover, .btn-close-recruit:hover, .btn-close-order:hover { background: #e2e8f0; color: #0f172a; transform: rotate(90deg); }

.f-tag-hints { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.f-tag-pill { 
    font-size: 0.75rem; font-weight: 600; background: #f0fdf4; color: var(--green-700); 
    padding: 0.25rem 0.75rem; border-radius: 20px; border: 1px solid rgba(22, 163, 74, 0.1); 
    cursor: pointer; transition: 0.2s; 
}
.f-tag-pill:hover { background: var(--green-600); color: white; transform: translateY(-2px); }
.f-form-group { margin-bottom: 1.5rem; }
.f-form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: #1e293b; margin-bottom: 0.5rem; }
.f-form-group input, .f-form-group select, .f-form-group textarea { width: 100%; padding: 0.85rem; border: 1px solid #e2e8f0; border-radius: 10px; font-family: inherit; }
.f-upload-box-mini { 
    border: 2px dashed #e2e8f0; padding: 1.5rem 0.5rem; text-align: center; border-radius: 8px; cursor: pointer; font-size: 0.85rem; 
    transition: all 0.3s ease;
}
.f-upload-box-mini.dragging {
    border-color: var(--green-500);
    background: rgba(34, 197, 148, 0.05);
    transform: scale(1.02);
}
.f-upload-box-mini label { cursor: pointer; color: var(--green-600); font-weight: 500; }
.f-upload-box { border: 2px dashed #e2e8f0; padding: 2rem; text-align: center; border-radius: 12px; cursor: pointer; }
.f-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.f-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; font-weight: 500; color: #1e293b; margin: 10px 0; }
.f-checkbox input { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--green-600); }

/* Responsive Dashboard */
@media (max-width: 1200px) {
    .f-grid-container { grid-template-columns: 1fr !important; }
    /* !important nécessaire : les gridColumn/gridRow inline écrasent les classes CSS */
    .hero-gradient-card, .metric-card, .heatmap-card, .f-progress-card {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    /* Cibler directement les éléments avec gridColumn/gridRow inline */
    .f-grid-container > [style*="grid-column"] {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
}
@media (max-width: 991px) {
    .fillow-sidebar { transform: translateX(-100%); transition: 0.3s; }
    .fillow-sidebar.show { transform: translateX(0); }
    .fillow-header, .fillow-content { left: 0; margin-left: 0; }
    .h-search { display: none; }
    /* RevelactionDashboard : fillow-main doit perdre son margin-left dès 991px */
    .fillow-main { margin-left: 0 !important; }
}
/* Cacher le toggle sidebar sur desktop (fillow-content = Dashboard commerçant) */
@media (min-width: 992px) {
    .fillow-content .sidebar-toggle { display: none !important; }
}
@media (max-width: 768px) {
    .hero-gradient-inner-box { padding: 2rem 1.5rem; }
    .heatmap-grid { overflow-x: auto; }
}

/* ---------- AUTH SPLIT RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .auth-split-wrapper {
    flex-direction: column !important;
  }
  .auth-split-left {
    padding: 4rem 2rem !important;
    flex: none !important;
  }
  .auth-split-left h1 {
    font-size: 3rem !important;
  }
  .auth-split-right {
    flex: none !important;
    width: 100% !important;
    padding: 4rem 2rem !important;
  }
  .auth-split-right h2 {
    font-size: 2.5rem !important;
  }
}

/* ---------- REVELACTION DASHBOARD CLASSES ---------- */
/* Main content area */
.fillow-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}

/* Mobile header */
.f-header-mobile {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--white);
  border-bottom: 1px solid #e2e8f0;
}

.f-menu-btn {
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.f-header-user {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 900;
  font-size: 0.9rem;
}

/* Desktop header */
.f-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  background: var(--white);
  border-bottom: 1px solid #e2e8f0;
}

.f-header-left h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e1b4b;
  margin: 0;
}

.f-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Content wrapper */
.f-content {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Hero section */
.f-hero {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  color: var(--white);
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.f-hero h2 {
  font-size: 2rem;
  margin: 0 0 0.5rem;
}

.f-hero p {
  opacity: 0.9;
  font-size: 1rem;
  margin-bottom: 2rem;
}

.f-hero-actions {
  display: flex;
  gap: 1rem;
}

/* Stats grid */
.f-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.f-stat-card {
  background: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.f-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.f-stat-info {
  flex: 1;
}

.f-stat-label {
  margin: 0;
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
}

.f-stat-value {
  margin: 0.2rem 0 0;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

/* Cards */
.f-card {
  background: var(--white);
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid #e2e8f0;
}

.f-card h3 {
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
  font-weight: 800;
}

/* Grid layouts */
.f-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.f-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* List items */
.f-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

.f-avatar-sm {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
}

.f-list-content {
  flex: 1;
}

.f-list-content p {
  margin: 0;
  font-size: 0.9rem;
}

.f-list-content p:first-child {
  font-weight: 700;
}

.f-list-content p:last-child {
  font-size: 0.8rem;
  color: #64748b;
}

/* Badges */
.f-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-weight: 700;
}

.f-badge.success {
  background: #f0fdf4;
  color: #059669;
}

.f-badge.warning {
  background: #fffbeb;
  color: #d97706;
}

.f-badge.danger {
  background: #fef2f2;
  color: #dc2626;
}

.f-badge.info {
  background: #f0f9ff;
  color: #0ea5e9;
}

/* Search bar */
.f-search-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.f-search-input-wrapper {
  flex: 1;
  min-width: 220px;
  position: relative;
}

.f-search-input-wrapper svg {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
}

.f-search-input {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.5rem;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  font-size: 0.9rem;
  outline: none;
  box-sizing: border-box;
  background: var(--white);
}

.f-filter-buttons {
  display: flex;
  gap: 0.5rem;
}

.f-filter-btn {
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: var(--white);
  color: #64748b;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
}

.f-filter-btn.active {
  border-color: #7c3aed;
  background: #7c3aed;
  color: var(--white);
}

/* Empty state */
.f-empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #94a3b8;
}

.f-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.f-empty-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.f-empty-text {
  font-size: 0.9rem;
  margin: 0;
}

/* Table */
.f-table-wrap {
  overflow-x: auto;
}

.f-table {
  width: 100%;
  border-collapse: collapse;
}

.f-table th {
  padding: 1rem;
  text-align: left;
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid #e2e8f0;
}

.f-table td {
  padding: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

/* Progress bar */
.f-progress-bar {
  flex: 1;
  height: 12px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 2rem;
}

.f-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #059669, #10b981);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.f-progress-info {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.f-progress-percent {
  font-weight: 800;
  color: #059669;
  font-size: 1.2rem;
}

.f-progress-text {
  color: #64748b;
  font-size: 0.9rem;
  margin: 0;
}

/* Settings */
.f-settings-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.f-settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 12px;
}

.f-settings-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: #64748b;
}

.f-settings-value {
  font-weight: 800;
  font-size: 0.9rem;
  color: #1e1b4b;
}

/* Button variants */
.btn-sm {
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.btn-success {
  background: #059669;
  color: var(--white);
}

.btn-danger {
  background: #dc2626;
  color: var(--white);
}

.btn-info {
  background: #0ea5e9;
  color: var(--white);
}

/* Badge */
.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ef4444;
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.4rem;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

/* Tab navigation */
.f-tab {
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.f-tab:hover {
  color: var(--green-600);
}

.f-tab.active {
  background: var(--green-500);
  color: var(--white);
}

.f-btn-group {
  display: flex;
  gap: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  .f-header-mobile {
    display: flex;
  }
  
  .f-header {
    display: none;
  }
  
  .f-grid-2 {
    grid-template-columns: 1fr;
  }
  
  .f-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .f-hero-actions {
    flex-direction: column;
  }
  
  .f-search-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .f-filter-buttons {
    flex-wrap: wrap;
  }
}

@media (min-width: 769px) {
  .fillow-sidebar {
    transform: translateX(0) !important;
  }
}

/* ---------- MOBILE RESPONSIVE STYLES ---------- */
@media (max-width: 768px) {
  /* Sidebar mobile */
  .fillow-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .fillow-sidebar.show {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
  }

  .sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  /* Header mobile — fond blanc, texte/icônes sombres */
  .fillow-header {
    padding: 1rem;
    background: #ffffff !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    color: #1e293b !important;
    border-bottom: 1px solid #f0f1f5;
  }

  /* Titre du header */
  .h-left h2,
  .fillow-header h2 {
    font-size: 1.2rem;
    color: #1e293b !important;
  }

  /* Bouton hamburger */
  .sidebar-toggle,
  .dashboard-eco .sidebar-toggle {
    color: #475569 !important;
    display: flex !important;
  }
  .sidebar-toggle svg,
  .dashboard-eco .sidebar-toggle svg {
    stroke: #475569 !important;
  }

  /* Icônes de droite (notification, etc.) */
  .h-icon-btn {
    background: #f1f5f9 !important;
    color: #475569 !important;
  }
  .h-icon-btn svg {
    stroke: #475569 !important;
    color: #475569 !important;
  }

  .h-right {
    gap: 0.5rem;
  }

  .h-search {
    display: none;
  }

  .h-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f8fafc;
    transition: all 0.2s ease;
  }

  .h-icon-btn:active {
    transform: scale(0.95);
    background: #e2e8f0;
  }

  .badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }

  /* Notification dropdown mobile — ancré à droite de l'écran */
  .notification-dropdown {
    position: fixed !important;
    width: calc(100vw - 2rem) !important;
    max-width: 360px !important;
    right: 1rem !important;
    top: 72px !important;
    left: auto !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18) !important;
    z-index: 9999 !important;
  }

  .notification-dropdown .notif-list {
    max-height: 55vh;
    overflow-y: auto;
  }

  /* Content area */
  .fillow-content {
    padding: 1rem;
    margin-left: 0;
    background: #f8fafc;
  }

  /* Grid layouts */
  .f-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .f-grid-2 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .f-grid-3 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Cards */
  .f-card {
    padding: 1.25rem;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
  }

  .f-card:active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  /* Mini stats */
  .f-mini-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .mini-stat {
    padding: 1.25rem;
    border-radius: 16px;
  }

  /* Analytics */
  .f-analytics-body {
    padding: 1rem;
  }

  .analytics-legend {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Charts */
  .f-chart-large {
    height: 250px;
  }

  /* Progress bars */
  .f-progress-body {
    padding: 1rem;
  }

  /* Tables */
  .f-table {
    font-size: 0.85rem;
    border-radius: 12px;
    overflow: hidden;
  }

  .f-table th,
  .f-table td {
    padding: 0.75rem 0.5rem;
  }

  .f-table tr:active {
    background: #f1f5f9;
  }

  /* Forms */
  .f-search-bar {
    flex-direction: column;
    gap: 0.75rem;
  }

  .f-search-input-wrapper {
    width: 100%;
  }

  .f-filter-buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .f-filter-buttons button {
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
    border-radius: 12px;
    transition: all 0.2s ease;
  }

  .f-filter-buttons button:active {
    transform: scale(0.95);
  }

  /* Buttons */
  .btn {
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    transition: all 0.2s ease;
  }

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

  .btn-sm {
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
  }

  /* Hero sections */
  .f-hero {
    padding: 2rem 1rem;
  }

  .f-hero h1 {
    font-size: 1.8rem;
  }

  .f-hero p {
    font-size: 0.95rem;
  }

  /* Stats cards */
  .f-stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .f-stat-card {
    padding: 1.25rem;
    border-radius: 16px;
  }

  /* Empty states */
  .f-empty-state {
    padding: 2rem 1rem;
    border-radius: 16px;
  }

  .f-empty-state h3 {
    font-size: 1.2rem;
  }

  .f-empty-state p {
    font-size: 0.9rem;
  }

  /* Modals */
  .modal-overlay {
    padding: 1rem;
  }

  .modal-content {
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 20px;
  }

  /* Toast notifications */
  .toast {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    border-radius: 16px;
  }

  /* Tabs */
  .f-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .f-tabs button {
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
    white-space: nowrap;
    border-radius: 12px;
    transition: all 0.2s ease;
  }

  .f-tabs button:active {
    transform: scale(0.95);
  }

  /* Badge adjustments */
  .f-badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
  }

  /* Spacing adjustments */
  .fillow-wrapper {
    gap: 0;
  }

  /* Scrollbar improvements for mobile */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
  }

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

  /* Touch-friendly targets */
  button,
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  button span,
  a span {
    min-height: auto;
  }

  /* Improved tap targets for icons */
  .h-icon-btn,
  .sidebar-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Better focus states for accessibility */
  button:focus,
  a:focus,
  input:focus,
  select:focus,
  textarea:focus {
    outline: 2px solid var(--green-500);
    outline-offset: 2px;
  }

  /* Improved text selection */
  ::selection {
    background: var(--green-500);
    color: white;
  }

  /* Safe area for notch devices */
  .fillow-header {
    padding-top: max(1rem, env(safe-area-inset-top));
  }

  .fillow-content {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .fillow-header {
    padding: 0.75rem;
  }

  .h-left h2 {
    font-size: 1rem;
  }

  .notification-dropdown {
    width: 280px !important;
    right: 5px !important;
  }

  .f-card {
    padding: 0.75rem;
  }

  .btn {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }

  .f-hero h1 {
    font-size: 1.5rem;
  }

  .f-hero p {
    font-size: 0.85rem;
  }

  /* Make notification items more compact */
  .notification-dropdown .notif-list > div {
    padding: 0.75rem 1rem;
  }

  .notification-dropdown .notif-list > div > div > div:first-child {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  .surplus-grid {
    grid-template-columns: 1fr !important;
  }

  .community-grid {
    grid-template-columns: 1fr !important;
  }

  .messages-section > .f-card:first-child {
    max-height: 250px !important;
  }
}

/* Messages section responsive */
.messages-section {
  display: flex;
  gap: 2rem;
}

@media (max-width: 768px) {
  .messages-section {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
  }

  .messages-section > .f-card:first-child {
    width: 100% !important;
    max-height: 300px !important;
  }

  .messages-section > .f-card:last-child {
    min-height: 400px !important;
  }

  .messages-section div[style*="max-width: 70%"] {
    max-width: 85% !important;
  }

  .impact-hero {
    flex-direction: column !important;
    text-align: center !important;
    padding: 2rem 1.5rem !important;
  }

  .impact-hero-stats {
    flex-direction: column !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
    width: 100% !important;
  }

  .impact-hero-stat {
    min-width: auto !important;
    width: 100% !important;
  }

  .impact-hero-content h2 {
    font-size: 1.8rem !important;
  }

  .impact-chart-card div[style*="height: 240px"] {
    height: 160px !important;
    gap: 0.75rem !important;
  }

  .premium-menu-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .premium-menu-header .btn-premium-action {
    width: 100% !important;
    justify-content: center !important;
  }

  .premium-menu-title {
    flex-direction: column !important;
    text-align: center !important;
  }

  .premium-menu-icon {
    margin: 0 auto !important;
  }

  .premium-menu-title h2 {
    font-size: 1.5rem !important;
  }

  .premium-menu-title p {
    font-size: 0.85rem !important;
  }

  .premium-content-body {
    padding: 1rem !important;
  }

  .fillow-inner {
    padding: 1rem !important;
  }

  .hero-gradient-card {
    padding: 2rem 1rem !important;
  }

  .hero-gradient-card h1 {
    font-size: 1.5rem !important;
  }

  .hero-gradient-inner-box {
    padding: 1.5rem 1rem !important;
  }

  .hero-actions {
    flex-direction: column !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

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

  .f-section.active form .f-form-group[style*="max-width"] {
    max-width: 100% !important;
  }

  .f-section.active .f-card[style*="max-width: 800px"] {
    max-width: 100% !important;
    padding: 1.5rem !important;
  }

  .f-section.active .f-card[style*="border: 1px solid #fecaca"] {
    padding: 1.5rem !important;
  }

  .f-section.active div[style*="display: grid"][style*="grid-template-columns: repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }

  .f-section.active div[style*="height: calc(100vh"] {
    height: auto !important;
    min-height: auto !important;
    flex-direction: column !important;
  }

  .f-section.active div[style*="height: calc(100vh"] > div {
    width: 100% !important;
  }

  .impact-section-title {
    font-size: 1rem !important;
  }

  .impact-card-metric {
    padding: 1rem !important;
  }

  .impact-card-metric .val {
    font-size: 1.5rem !important;
  }

  .f-progress-card .progress-circle-wrap {
    transform: scale(0.85) !important;
  }

  .dashboard-eco .sidebar-toggle {
    display: flex !important;
  }

  .h-left h2 {
    font-size: 1rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  .h-right {
    gap: 0.5rem !important;
  }

  .header-avatar-mini {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ---------- LANDING PAGE RESPONSIVE — SECTION OVERRIDES ---------- */

/* Navbar */
@media (max-width: 768px) {
  nav[id="navbar"] > div {
    padding: 0 1.25rem !important;
  }
}

/* Hero — current component (inline styles, no CSS classes) */
@media (max-width: 900px) {
  section[id="hero"] > div {
    padding: 100px 24px 60px !important;
    gap: 48px !important;
  }
  section[id="hero"] div[style*="border-top: 1px solid"] {
    flex-direction: column !important;
    gap: 12px !important;
  }
  section[id="hero"] div[style*="border-top: 1px solid"] > div {
    border-right: none !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid rgba(74,140,92,0.12) !important;
  }
  section[id="hero"] div[style*="border-top: 1px solid"] > div:first-child {
    border-top: none !important;
  }
}

@media (max-width: 600px) {
  section[id="hero"] > div {
    padding: 80px 20px 40px !important;
    gap: 32px !important;
  }
  section[id="hero"] div[style*="min-height: 520px"] {
    min-height: 340px !important;
  }
  section[id="hero"] div[style*="border-radius: 50%"][style*="440px"] {
    width: 280px !important;
    height: 280px !important;
  }
  section[id="hero"] div[style*="border-radius: 50%"][style*="330px"] {
    width: 210px !important;
    height: 210px !important;
  }
  section[id="hero"] div[style*="border-radius: 50%"][style*="190px"] {
    width: 130px !important;
    height: 130px !important;
  }
  section[id="hero"] div[style*="border-radius: 50%"][style*="190px"] svg {
    width: 56px !important;
    height: 56px !important;
  }
  section[id="hero"] div[style*="top: 10px"][style*="right: -10px"] {
    top: 0 !important;
    right: 0 !important;
    min-width: 120px !important;
    padding: 12px 16px !important;
  }
  section[id="hero"] div[style*="top: 10px"][style*="right: -10px"] div[style*="font-size: 28px"] {
    font-size: 22px !important;
  }
  section[id="hero"] div[style*="bottom: 30px"][style*="left: -10px"] {
    bottom: 10px !important;
    left: 0 !important;
    min-width: 120px !important;
    padding: 12px 16px !important;
  }
  section[id="hero"] div[style*="bottom: 30px"][style*="left: -10px"] div[style*="font-size: 28px"] {
    font-size: 22px !important;
  }
  section[id="hero"] div[style*="top: 110px"][style*="left: 0px"] {
    top: 60px !important;
  }
  section[id="hero"] div[style*="bottom: 140px"][style*="right: 0px"] {
    bottom: 100px !important;
  }
  section[id="hero"] div[style*="right: -30px"][style*="bottom: 0px"][style*="grid-template-columns"] {
    display: none !important;
  }
  section[id="hero"] h1 {
    font-size: clamp(32px, 8vw, 46px) !important;
  }
  section[id="hero"] div[style*="display: flex"][style*="gap: 14px"][style*="flexWrap"] {
    flex-direction: column !important;
  }
  section[id="hero"] div[style*="display: flex"][style*="gap: 14px"][style*="flexWrap"] button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* PourquoiSection — grid & padding */
@media (max-width: 768px) {
  section[id="fonctions"] {
    padding: 64px 24px !important;
  }
  section[id="fonctions"] .pourquoi-header-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  section[id="fonctions"] .pourquoi-card-grid {
    grid-template-columns: 1fr !important;
  }
  section[id="fonctions"] .pourquoi-card-grid > div {
    border-radius: 24px !important;
    padding: 32px 24px !important;
  }
  section[id="fonctions"] div[style*="font-size: 80px"] {
    font-size: 56px !important;
    right: 20px !important;
  }
  section[id="fonctions"] h2[style*="clamp(2rem, 3.5vw, 3.2rem)"] {
    font-size: clamp(1.5rem, 4.5vw, 2rem) !important;
  }
}

@media (max-width: 480px) {
  section[id="fonctions"] div[style*="font-size: 80px"] {
    font-size: 40px !important;
  }
}

/* SdcSection — stats grid */
@media (max-width: 768px) {
  section[id="quartier"] {
    padding: 64px 24px !important;
  }
  section[id="quartier"] .sdc-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  section[id="quartier"] .sdc-stats-grid > div {
    padding: 28px 20px !important;
  }
  section[id="quartier"] .sdc-stats-grid > div div[style*="font-size: clamp"] {
    font-size: 36px !important;
  }
  section[id="quartier"] h2[style*="clamp(2.2rem, 4vw, 3.4rem)"] {
    font-size: clamp(1.6rem, 4.5vw, 2.2rem) !important;
  }
}

@media (max-width: 480px) {
  section[id="quartier"] .sdc-stats-grid {
    grid-template-columns: 1fr !important;
  }
  section[id="quartier"] {
    padding: 48px 16px !important;
  }
  section[id="quartier"] .sdc-stats-grid > div div[style*="font-size: clamp"] {
    font-size: 28px !important;
  }
}

/* StepsSection */
@media (max-width: 768px) {
  section[id="etapes"] {
    padding: 64px 24px !important;
  }
  section[id="etapes"] > div > div:first-child > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  section[id="etapes"] div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  section[id="etapes"] div[style*="grid-template-columns: repeat(4, 1fr)"] > div {
    padding: 24px 16px 16px !important;
  }
  section[id="etapes"] div[style*="grid-template-columns: repeat(4, 1fr)"] div[style*="position: absolute"][style*="top: 0"] {
    display: none !important;
  }
  section[id="etapes"] div[style*="margin-top: 72px"] {
    margin-top: 40px !important;
    flex-direction: column !important;
    text-align: center !important;
  }
  section[id="etapes"] h2[style*="clamp(1.8rem, 3vw, 3rem)"] {
    font-size: clamp(1.3rem, 4vw, 1.8rem) !important;
  }
}

@media (max-width: 480px) {
  section[id="etapes"] h2[style*="clamp(1.8rem, 3vw, 3rem)"] {
    font-size: clamp(1.1rem, 5vw, 1.4rem) !important;
  }
}
  section[id="etapes"] > div > div:first-child > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  section[id="etapes"] div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  section[id="etapes"] div[style*="grid-template-columns: repeat(4, 1fr)"] > div {
    padding: 24px 16px 16px !important;
  }
  section[id="etapes"] div[style*="grid-template-columns: repeat(4, 1fr)"] div[style*="position: absolute"][style*="top: 0"] {
    display: none !important;
  }
  section[id="etapes"] div[style*="margin-top: 72px"] {
    margin-top: 40px !important;
    flex-direction: column !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  section[id="etapes"] div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  section[id="etapes"] {
    padding: 48px 16px !important;
  }
}

/* ---------- IMPACTS SECTION MOBILE-FRIENDLY ---------- */
/* 4-tier progressive enhancement: 1024 → 768 → 600 → 480 */

@media (max-width: 1024px) {
  /* Grid → 2 columns */
  section[id="impacts"] {
    padding: 64px 24px !important;
  }
  section[id="impacts"] > div > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* [A] Title full width */
  section[id="impacts"] div[style*="grid-column: 1 / 3"][style*="grid-row: 1"] {
    grid-column: 1 / -1 !important;
  }
  /* [B] [C] keep side-by-side */
  section[id="impacts"] div[style*="grid-column: 3"] { grid-column: span 1 !important; }
  section[id="impacts"] div[style*="grid-column: 4"] { grid-column: span 1 !important; }
  /* [D] full width */
  section[id="impacts"] div[style*="grid-column: 1 / 3"][style*="grid-row: 2"] {
    grid-column: 1 / -1 !important;
  }
  /* [E] left, [F] right */
  section[id="impacts"] div[style*="grid-column: 3"][style*="grid-row: 2"] {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  section[id="impacts"] div[style*="grid-column: 4"][style*="grid-row: 2"] {
    grid-column: 2 !important;
    grid-row: auto !important;
  }
  /* [G] Zéro Déchet — full width, inner → 1 column */
  section[id="impacts"] div[style*="grid-column: 1 / 4"][style*="grid-row: 3"] {
    grid-column: 1 / -1 !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px !important;
  }
  /* [H] CTA — fix: push below [G] to avoid overlap */
  section[id="impacts"] div[style*="grid-column: 4"][style*="grid-row: 3"] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 28px !important;
  }
}

@media (max-width: 768px) {
  /* ── Card padding ── */
  section[id="impacts"] div[style*="padding: 40px 36px"] {
    padding: 28px 24px !important;
  }
  section[id="impacts"] div[style*="padding: 48px 48px 44px"] {
    padding: 32px 24px !important;
  }
  section[id="impacts"] div[style*="grid-row: 2"][style*="padding: 48px"][style*="position: relative"] {
    padding: 28px 24px !important;
  }
  section[id="impacts"] div[style*="grid-column: 1 / 4"][style*="grid-row: 3"] {
    padding: 28px 24px !important;
    gap: 20px !important;
  }
  /* ── Heading sizes ── */
  section[id="impacts"] h3[style*="font-size: 22px"] { font-size: 17px !important; }
  section[id="impacts"] h3[style*="font-size: 24px"] { font-size: 19px !important; }
  /* ── Body & labels ── */
  section[id="impacts"] p[style*="font-size: 15px"] { font-size: 13px !important; }
  section[id="impacts"] div[style*="font-size: 13px"][style*="color: rgba"] { font-size: 12px !important; }
  /* ── CTA ── */
  section[id="impacts"] div[style*="font-size: 20px"][style*="color: #fff"] {
    font-size: 17px !important;
  }
  /* ── Progress margins ── */
  section[id="impacts"] div[style*="margin-bottom: 32px"] { margin-bottom: 20px !important; }
  section[id="impacts"] div[style*="margin-bottom: 28px"] { margin-bottom: 18px !important; }
}

@media (max-width: 600px) {
  /* Grid → 1 column */
  section[id="impacts"] > div > div:first-child {
    grid-template-columns: 1fr !important;
  }
  /* All cards full width */
  section[id="impacts"] div[style*="grid-column: 1 / 3"][style*="grid-row: 1"],
  section[id="impacts"] div[style*="grid-column: 3"],
  section[id="impacts"] div[style*="grid-column: 4"],
  section[id="impacts"] div[style*="grid-column: 1 / 3"][style*="grid-row: 2"],
  section[id="impacts"] div[style*="grid-column: 3"][style*="grid-row: 2"],
  section[id="impacts"] div[style*="grid-column: 4"][style*="grid-row: 2"],
  section[id="impacts"] div[style*="grid-column: 1 / 4"][style*="grid-row: 3"],
  section[id="impacts"] div[style*="grid-column: 4"][style*="grid-row: 3"] {
    grid-column: 1 / -1 !important;
  }
  /* [H] push below [G] */
  section[id="impacts"] div[style*="grid-column: 4"][style*="grid-row: 3"] {
    grid-row: auto !important;
  }
  /* Stat numbers */
  section[id="impacts"] div[style*="font-size: 88px"] { font-size: 48px !important; }
  section[id="impacts"] div[style*="font-size: 72px"] { font-size: 40px !important; }
  section[id="impacts"] div[style*="font-size: 62px"] { font-size: 36px !important; }
  section[id="impacts"] div[style*="font-size: 64px"] { font-size: 38px !important; }
  section[id="impacts"] div[style*="font-size: 56px"] { font-size: 30px !important; }
  /* Card padding */
  section[id="impacts"] div[style*="padding: 40px 36px"] { padding: 24px 20px !important; }
  section[id="impacts"] div[style*="padding: 48px 48px 44px"] { padding: 28px 20px !important; }
  section[id="impacts"] div[style*="grid-row: 2"][style*="padding: 48px"][style*="position: relative"] {
    padding: 24px 20px !important;
  }
  /* h3 */
  section[id="impacts"] h3[style*="font-size: 22px"] { font-size: 16px !important; }
  section[id="impacts"] h3[style*="font-size: 24px"] { font-size: 17px !important; }
  /* body */
  section[id="impacts"] p[style*="font-size: 15px"] { font-size: 13px !important; }
  /* Section */
  section[id="impacts"] { padding: 40px 16px !important; }
  /* CTA text */
  section[id="impacts"] div[style*="font-size: 20px"][style*="color: #fff"] {
    font-size: 16px !important;
  }
  /* Badges */
  section[id="impacts"] span[style*="letter-spacing: 0.08em"][style*="border-radius: 100px"] {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }
  /* [G] inner gap */
  section[id="impacts"] div[style*="grid-column: 1 / 4"][style*="grid-row: 3"] {
    gap: 18px !important;
  }
}

@media (max-width: 480px) {
  /* ── Card padding tight ── */
  section[id="impacts"] div[style*="padding: 40px 36px"] { padding: 20px 16px !important; }
  section[id="impacts"] div[style*="padding: 48px 48px 44px"] { padding: 24px 16px !important; }
  section[id="impacts"] div[style*="grid-row: 2"][style*="padding: 48px"][style*="position: relative"] {
    padding: 20px 16px !important;
  }
  section[id="impacts"] div[style*="grid-column: 1 / 4"][style*="grid-row: 3"] {
    padding: 20px 16px !important;
    gap: 14px !important;
  }
  /* ── Stat numbers compact ── */
  section[id="impacts"] div[style*="font-size: 88px"] { font-size: 32px !important; }
  section[id="impacts"] div[style*="font-size: 72px"] { font-size: 28px !important; }
  section[id="impacts"] div[style*="font-size: 62px"] { font-size: 26px !important; }
  section[id="impacts"] div[style*="font-size: 64px"] { font-size: 28px !important; }
  section[id="impacts"] div[style*="font-size: 56px"] { font-size: 24px !important; }
  /* ── h3 ── */
  section[id="impacts"] h3[style*="font-size: 22px"] { font-size: 14px !important; }
  section[id="impacts"] h3[style*="font-size: 24px"] { font-size: 15px !important; }
  /* ── body ── */
  section[id="impacts"] p[style*="font-size: 15px"] { font-size: 12px !important; }
  /* ── CTA ── */
  section[id="impacts"] div[style*="grid-column: 4"][style*="grid-row: 3"] {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
  }
  section[id="impacts"] div[style*="font-size: 20px"][style*="color: #fff"] {
    font-size: 15px !important;
  }
  section[id="impacts"] div[style*="font-size: 13px"][style*="color: rgba(255,255,255"] {
    font-size: 11px !important;
  }
  section[id="impacts"] div[style*="width: 48px"][style*="height: 48px"] {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }
  /* ── Section ── */
  section[id="impacts"] { padding: 32px 12px !important; }
  /* ── Progress margins ── */
  section[id="impacts"] div[style*="margin-bottom: 32px"] { margin-bottom: 16px !important; }
  section[id="impacts"] div[style*="margin-bottom: 28px"] { margin-bottom: 14px !important; }
}

/* MistralSection */
@media (max-width: 768px) {
  .mistral-section {
    padding: 64px 24px !important;
  }
  .mistral-section > div {
    text-align: center !important;
  }
  section[id="mistral"] h2[style*="clamp(2rem, 3.5vw, 3rem)"] {
    font-size: clamp(1.4rem, 4vw, 1.8rem) !important;
  }
}

@media (max-width: 480px) {
  .mistral-section {
    padding: 48px 16px !important;
  }
  section[id="mistral"] h2[style*="clamp(2rem, 3.5vw, 3rem)"] {
    font-size: clamp(1.1rem, 5vw, 1.4rem) !important;
  }
}

/* Footer */
@media (max-width: 768px) {
  footer > div > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  footer > div {
    padding: 48px 24px 32px !important;
  }
}

@media (max-width: 480px) {
  footer > div > div:first-child {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  footer > div > div:first-child div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  footer > div {
    padding: 32px 16px 24px !important;
  }
}

/* InsertionSection */
@media (max-width: 768px) {
  .insertion-section {
    padding: 64px 0 !important;
  }
  .insertion-section .container > div:first-child h2 {
    font-size: 2.2rem !important;
  }
  .insertion-section div[style*="grid-template-columns: 1fr auto 1.2fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .insertion-section div[style*="grid-template-columns: 1fr auto 1.2fr auto 1fr"] > div[style*="color: #e2e8f0"] {
    display: none !important;
  }
  .insertion-section div[style*="grid-template-columns: 1.2fr 0.8fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .insertion-section div[style*="grid-template-columns: 1.2fr 0.8fr"] > div:last-child {
    text-align: center !important;
  }
  .insertion-section div[style*="grid-template-columns: 1.2fr 0.8fr"] h3 {
    font-size: 1.6rem !important;
  }
  .insertion-section div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 2rem"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .insertion-section div[style*="padding: 4rem"] {
    padding: 2rem 1.5rem !important;
    border-radius: 24px !important;
  }
  .insertion-section div[style*="padding: 2.5rem 1.5rem"] {
    padding: 1.5rem 1rem !important;
  }
  .insertion-section div[style*="padding: 3rem"] {
    padding: 1.5rem !important;
  }
  .insertion-section {
    padding: 48px 0 !important;
  }
  .insertion-section .container > div:first-child h2 {
    font-size: 1.8rem !important;
  }
  .insertion-section p[style*="text-align: justify"] {
    text-align: left !important;
  }
}

/* RegisterSection */
@media (max-width: 768px) {
  .register-section {
    padding: 64px 0 !important;
  }
  .register-section button[style*="padding: 1.5rem 5rem"] {
    padding: 1.2rem 2rem !important;
    font-size: 1.1rem !important;
    width: 100% !important;
    max-width: 400px !important;
  }
  .register-section div[style*="grid-template-columns: 0.8fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .register-section div[style*="grid-template-columns: 0.8fr 1.2fr"] > div:first-child {
    text-align: center !important;
  }
  .register-section div[style*="grid-template-columns: 0.8fr 1.2fr"] > div:first-child h3 {
    font-size: 1.8rem !important;
  }
  .register-section form[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .register-section form[style*="grid-template-columns: 1fr 1fr"] div[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }
  .register-section form div[style*="padding: 3rem"] {
    padding: 2rem !important;
  }
  .register-section h2[style*="font-size: 2.2rem"] {
    font-size: 1.8rem !important;
  }
}

@media (max-width: 480px) {
  .register-section {
    padding: 48px 0 !important;
  }
  .register-section div[style*="padding: 3rem"] {
    padding: 1.5rem !important;
    border-radius: 20px !important;
  }
  .register-section div[style*="display: flex"][style*="gap: 1rem"][style*="margin-bottom: 2rem"][style*="background: #f8fafc"] {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .register-section form div[style*="background: #f8fafc"] button {
    padding: 0.7rem !important;
  }
}

/* PartnersSection */
@media (max-width: 768px) {
  .partners-section {
    padding: 3rem 1rem !important;
  }
}

/* ReviewsSection inline overrides */
@media (max-width: 768px) {
  .reviews-section {
    padding: 64px 24px !important;
  }
}

/* Reviews section default (desktop) */
.reviews-section {
  padding: 130px 64px;
}

/* ---------- LANDING PAGE MOBILE RESPONSIVE ---------- */
@media (max-width: 768px) {
  /* Navbar mobile */
  .navbar {
    padding: 1rem 1.5rem;
  }

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

  .mobile-menu-btn {
    display: block !important;
  }

  /* Mobile menu overlay */
  .mobile-menu-overlay {
    opacity: 0;
    visibility: hidden;
  }

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

  /* Hero section mobile */
  .hero-v4-wrapper {
    padding: 80px 1rem 1rem 1rem;
  }

  .hero-v4 {
    padding: 2rem;
    border-radius: 20px;
  }

  .hero-v4-top {
    flex-direction: column;
    gap: 1rem;
  }

  .hero-v4-desc {
    max-width: 100%;
    text-align: left;
    font-size: 0.95rem;
  }

  .hero-v4-bottom {
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
  }

  .hero-v4-title-block {
    max-width: 100%;
  }

  .hv4-title {
    font-size: 3rem;
    letter-spacing: -2px;
  }

  .hv4-tagline {
    font-size: 1rem;
  }

  .hero-v4-right {
    width: 100%;
  }

  .hv4-cta {
    padding: 1rem;
    font-size: 1rem;
  }

  /* Partners section mobile */
  .partners-section {
    padding: 4rem 0;
  }

  .sponsors-logos {
    flex-direction: column;
    gap: 1rem;
  }

  .hero-sponsors {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Features section mobile */
  .features-section {
    padding: 4rem 0;
  }

  .features-tabs {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
  }

  .f-tab {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }

  .f-content-pane h2 {
    font-size: 2rem;
  }

  .f-content-pane p {
    font-size: 0.95rem;
  }

  /* Mistral section mobile */
  .mistral-section {
    padding: 4rem 0;
  }

  .mistral-header h2 {
    font-size: 2rem;
  }

  .mistral-header p {
    font-size: 0.95rem;
  }

  /* Steps section mobile */
  .steps-section {
    padding: 4rem 0;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .step-card {
    padding: 1.5rem;
  }

  /* Reviews section mobile */
  .reviews-section {
    padding: 4rem 1.5rem !important;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .review-card {
    padding: 1.5rem;
  }

  /* Register section mobile */
  .register-section {
    padding: 4rem 0;
  }

  .register-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .register-left h2 {
    font-size: 2rem;
  }

  .register-left > p {
    font-size: 0.95rem;
  }

  .register-perks {
    gap: 0.75rem;
  }

  .perk {
    font-size: 0.9rem;
  }

  .reg-form {
    padding: 1.5rem;
  }

  .reg-form input,
  .reg-form select {
    padding: 0.75rem;
    font-size: 0.95rem;
  }

  /* Footer mobile */
  .footer {
    padding: 3rem 0;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-brand h3 {
    font-size: 1.5rem;
  }

  .footer-links {
    gap: 1.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  /* Buttons mobile */
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
  }

  .btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
  }

  /* Modal mobile */
  .modal-overlay {
    padding: 1rem;
  }

  .modal-content {
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
  }

  /* Custom cursor hidden on mobile */
  .custom-cursor,
  .custom-cursor-dot {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */

  /* Hero extra small */
  .hero-v4-wrapper {
    padding: 70px 0.75rem 0.75rem 0.75rem;
  }

  .hero-v4 {
    padding: 1.5rem;
    border-radius: 16px;
  }

  .hv4-title {
    font-size: 2.25rem;
    letter-spacing: -1px;
  }

  .hv4-tagline {
    font-size: 0.9rem;
  }

  .hero-v4-desc {
    font-size: 0.85rem;
  }

  /* Partners extra small */
  .partners-section {
    padding: 3rem 0;
  }

  /* Features extra small */
  .features-section {
    padding: 3rem 0;
  }

  .f-tab {
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
  }

  .f-content-pane h2 {
    font-size: 1.75rem;
  }

  /* Mistral extra small */
  .mistral-section {
    padding: 3rem 0;
  }

  .mistral-header h2 {
    font-size: 1.75rem;
  }

  /* Register extra small */
  .register-section {
    padding: 3rem 0;
  }

  .register-layout {
    gap: 2rem;
  }

  .register-left h2 {
    font-size: 1.75rem;
  }

  .reg-form {
    padding: 1rem;
  }

  .reg-form input,
  .reg-form select {
    padding: 0.6rem;
    font-size: 0.9rem;
  }

  /* Footer extra small */
  .footer {
    padding: 2rem 0;
  }

  .footer-brand h3 {
    font-size: 1.25rem;
  }

  /* Hide custom cursor on touch devices */
  .custom-cursor {
    display: none !important;
  }
}

/* ---------- AUTH PAGE MOBILE RESPONSIVE ---------- */
@media (max-width: 768px) {
  .auth-split-wrapper {
    flex-direction: column !important;
  }

  .auth-split-left {
    flex: none !important;
    padding: 4rem 2rem !important;
    min-height: auto;
  }

  .auth-split-left h1 {
    font-size: 2rem !important;
  }

  .auth-split-left p {
    font-size: 0.95rem !important;
  }

  .auth-split-left a {
    top: 2rem !important;
    left: 2rem !important;
    font-size: 0.95rem !important;
  }

  .auth-split-left div[style*="bottom"] {
    bottom: 2rem !important;
    left: 2rem !important;
    right: 2rem !important;
    text-align: center;
    font-size: 0.8rem !important;
  }

  .auth-split-right {
    flex: none !important;
    width: 100% !important;
    padding: 4rem 2rem !important;
  }

  .auth-split-right h2 {
    font-size: 1.5rem !important;
  }

  .auth-split-right form {
    gap: 1.5rem !important;
  }

  .auth-split-right input {
    padding: 0.8rem 0 !important;
    font-size: 1rem !important;
  }

  .auth-split-right button {
    padding: 1.2rem !important;
    font-size: 0.95rem !important;
  }

  /* Signup form grid */
  .auth-split-right form[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .auth-split-right form[style*="grid"] > div[style*="span"] {
    grid-column: span 1 !important;
  }

  /* Role buttons */
  .auth-split-right div[style*="background: #f8fafc"] {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .auth-split-right div[style*="background: #f8fafc"] button {
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  .auth-split-left {
    padding: 3rem 1.5rem !important;
  }

  .auth-split-left h1 {
    font-size: 1.75rem !important;
  }

  .auth-split-left p {
    font-size: 0.85rem !important;
  }

  .auth-split-left div[style*="fontSize: 3rem"] {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
  }

  .auth-split-right {
    padding: 3rem 1.5rem !important;
  }

  .auth-split-right h2 {
    font-size: 1.25rem !important;
  }

  .auth-split-right h3 {
    font-size: 1rem !important;
  }

  .auth-split-right input {
    padding: 0.6rem 0 !important;
    font-size: 0.9rem !important;
  }

  .auth-split-right button {
    padding: 1rem !important;
    font-size: 0.85rem !important;
  }

  .auth-split-right label {
    font-size: 0.7rem !important;
  }

  .auth-split-right p[style*="text-align: center"] {
    font-size: 0.7rem !important;
  }
}

/* ---------- DASHBOARD SECTIONS MOBILE RESPONSIVE ---------- */
@media (max-width: 768px) {
  /* Gestion Surplus section */
  .f-section.active .f-card {
    padding: 1.5rem !important;
  }

  .f-section.active .f-card-header {
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
  }

  .f-section.active .f-card-header h4 {
    font-size: 1.25rem !important;
  }

  .f-section.active .f-card-actions {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .f-section.active .f-card-actions span {
    font-size: 0.85rem !important;
    padding: 0.5rem 1rem !important;
  }

  .f-section.active .f-card-header button {
    width: 100% !important;
  }

  /* Tables in surplus section */
  .f-table-wrap {
    overflow-x: auto !important;
  }

  .f-table {
    font-size: 0.85rem !important;
  }

  .f-table th,
  .f-table td {
    padding: 0.75rem 0.5rem !important;
  }

  /* Recrutement IA section */
  .f-section.active div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .f-section.active .f-card[style*="padding: 1.5rem"] {
    padding: 1.25rem !important;
  }

  .f-section.active .f-card[style*="padding: 1.5rem"] h4 {
    font-size: 1rem !important;
  }

  /* Empty states */
  .f-section.active div[style*="text-align: center"] {
    padding: 2rem 1rem !important;
    font-size: 0.9rem !important;
  }

  /* Forms in modals */
  .f-section.active form {
    gap: 1rem !important;
  }

  .f-section.active form input,
  .f-section.active form select,
  .f-section.active form textarea {
    padding: 0.75rem !important;
    font-size: 0.95rem !important;
  }

  /* Tabs */
  .f-section.active .f-card-actions {
    background: #f8fafc !important;
    padding: 0.5rem !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 480px) {
  /* Gestion Surplus section - extra small */
  .f-section.active .f-card {
    padding: 1rem !important;
  }

  .f-section.active .f-card-header h4 {
    font-size: 1.1rem !important;
  }

  .f-section.active .f-card-actions span {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.8rem !important;
  }

  /* Tables - extra small */
  .f-table {
    font-size: 0.8rem !important;
  }

  .f-table th,
  .f-table td {
    padding: 0.5rem 0.3rem !important;
  }

  /* Recrutement IA - extra small */
  .f-section.active .f-card[style*="padding: 1.5rem"] {
    padding: 1rem !important;
  }

  .f-section.active .f-card[style*="padding: 1.5rem"] h4 {
    font-size: 0.95rem !important;
  }

  /* Buttons - extra small */
  .f-section.active .f-card-header button {
    font-size: 0.9rem !important;
    padding: 0.75rem 1rem !important;
  }
}

/* ---------- PREMIUM DASHBOARD MENUS ---------- */
.premium-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.premium-menu-title {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.premium-menu-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--green-100), #ccfbf1);
    color: var(--green-600);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(22, 163, 74, 0.15);
}

.premium-menu-icon.talent {
    background: linear-gradient(135deg, #fef3c7, #fff7ed);
    color: #d97706;
    box-shadow: 0 10px 25px rgba(217, 119, 6, 0.15);
}

.premium-menu-icon.community {
    background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
    color: #0284c7;
    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.15);
}

.premium-menu-title h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--neutral-900);
}

.premium-menu-title p {
    margin: 0;
    color: var(--neutral-500);
    font-weight: 500;
    font-size: 1rem;
    margin-top: 0.25rem;
}

.btn-orange {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.25) !important;
}
.btn-orange:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
    box-shadow: 0 12px 25px rgba(234, 88, 12, 0.35) !important;
}

.btn-black {
    background: #1e293b !important;
    color: white !important;
    border: none !important;
    padding: 0.85rem 1.75rem;
    border-radius: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.btn-black:hover {
    background: #0f172a !important;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.btn-premium-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.85rem 1.75rem;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 16px rgba(16, 185, 129, 0.25);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-premium-action:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 24px rgba(16, 185, 129, 0.35);
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
}

.btn-premium-action:active {
    transform: translateY(0) scale(0.98);
}

.btn-premium-action::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn-premium-action:hover::before {
    left: 100%;
}

.premium-tabs-container {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
}

.premium-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.premium-tab:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #1e293b;
    transform: translateY(-1px);
}

.premium-tab.active {
    background: #1e293b;
    color: white;
    border-color: #1e293b;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.premium-tab.active {
    background: var(--green-600);
    border-color: var(--green-600);
    color: white;
    box-shadow: 0 8px 15px rgba(22, 163, 74, 0.2);
}

.premium-content-body {
    padding: 2rem;
    border-radius: 24px;
    border: 1px solid var(--neutral-200);
    background: var(--white);
    box-shadow: 0 20px 40px rgba(0,0,0,0.03);
}

/* ── Surplus section responsive ── */
@media (max-width: 768px) {
    /* Wrapper principal : réduire le padding */
    .surplus-section-card {
        padding: 1rem !important;
    }

    /* Header : empiler titre + bouton */
    .premium-menu-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
        margin-bottom: 1.25rem !important;
    }
    .premium-menu-header .btn-premium-action {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Titre : réduire la taille */
    .premium-menu-title {
        gap: 1rem !important;
    }
    .premium-menu-title h2 {
        font-size: 1.35rem !important;
    }
    .premium-menu-title p {
        font-size: 0.875rem !important;
    }
    .premium-menu-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
    }

    /* Onglets : plus compacts, scrollables */
    .premium-tabs-container {
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    .premium-tab {
        padding: 0.6rem 1rem !important;
        font-size: 0.82rem !important;
        border-radius: 10px !important;
    }
    .premium-tab svg {
        display: none !important;
    }

    /* Corps du contenu */
    .premium-content-body {
        padding: 0.75rem !important;
        border-radius: 16px !important;
    }
}

/* ---------- IMPACT DASHBOARD ---------- */
.impact-hero {
    grid-column: span 4;
    background: linear-gradient(135deg, #0f172a 0%, #064e3b 100%);
    color: white;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.impact-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.impact-hero-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: white;
}

.impact-hero-content p {
    font-size: 1.1rem;
    opacity: 0.8;
    max-width: 600px;
}

.impact-hero-stats {
    display: flex;
    gap: 2rem;
}

.impact-hero-stat {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 20px;
    min-width: 160px;
    text-align: center;
}

.impact-hero-stat .val {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #10b981;
}

.impact-hero-stat .label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.6;
    letter-spacing: 1px;
}

.impact-section-title {
    grid-column: span 4;
    margin: 2rem 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.impact-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.impact-card-metric {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.impact-card-metric:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-color: #10b981;
}

.impact-card-metric .icon {
    width: 40px;
    height: 40px;
    background: #f0fdf4;
    color: #10b981;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.impact-card-metric .val {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    display: block;
}

.impact-card-metric .label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.impact-progress-container {
    grid-column: span 2;
    background: white;
    padding: 2rem;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
}

.impact-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.impact-progress-bar-bg {
    width: 100%;
    height: 12px;
    background: #f1f5f9;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.impact-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 6px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.impact-table-card {
    grid-column: span 2;
    background: white;
    padding: 2rem;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
}

.impact-chart-card {
    grid-column: span 4;
    background: white;
    padding: 2rem;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
}

@media (max-width: 1200px) {
    .impact-hero { padding: 2rem; flex-direction: column; text-align: center; }
    .impact-hero-stats { margin-top: 2rem; flex-wrap: wrap; justify-content: center; }
    .impact-progress-container, .impact-table-card { grid-column: span 4; }
}

@media (max-width: 768px) {
    .impact-hero-content h2 { font-size: 1.75rem; }
    .impact-card-metric { grid-column: span 4; }
}

/* ---------- E-COMMERCE SURPLUS CARDS ---------- */
.surplus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2rem;
    padding: 1rem 0;
}

.surplus-card {
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.surplus-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: var(--green-400);
}

.surplus-card-img-wrap {
    width: 100%;
    aspect-ratio: 4/5;
    background: var(--neutral-100);
    position: relative;
    overflow: hidden;
}

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

.surplus-card:hover .surplus-card-img {
    transform: scale(1.05);
}

.surplus-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-500);
    font-size: 0.85rem;
    background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
}

.surplus-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--white);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 2;
}

.surplus-card-badge.transport {
    background: #fef2f2;
    color: #ef4444;
}

.surplus-card-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.surplus-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-800);
    margin: 0 0 0.25rem 0;
}

.surplus-card-org {
    font-size: 0.85rem;
    color: var(--neutral-500);
    margin: 0 0 1rem 0;
}

.surplus-card-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--green-600);
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.surplus-card-qty {
    font-size: 0.8rem;
    color: var(--neutral-500);
    background: var(--neutral-100);
    padding: 4px 8px;
    border-radius: 6px;
}

/* Modal details */
.product-modal-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

@media (max-width: 768px) {
    .product-modal-split {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.product-modal-img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 12px;
    background: var(--neutral-100);
}

.product-modal-img-placeholder {
    width: 100%;
    aspect-ratio: 4/5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
    color: var(--neutral-500);
    border-radius: 12px;
    font-size: 2rem;
}

.product-modal-info {
    display: flex;
    flex-direction: column;
}

.product-modal-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    color: var(--dark-900);
}

.product-modal-org {
    font-size: 1.1rem;
    color: var(--neutral-500);
    margin: 0 0 2rem 0;
}

.product-modal-meta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--neutral-200);
}

.pm-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.pm-meta-label {
    color: var(--neutral-500);
    font-weight: 500;
}

.pm-meta-value {
    color: var(--dark-800);
    font-weight: 700;
}

.btn-black {
    background: var(--dark-900);
    color: var(--white);
    padding: 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    width: 100%;
    transition: background 0.3s;
    cursor: pointer;
    border: none;
    font-size: 1.05rem;
}

.btn-black:hover {
    background: var(--dark-700);
}

.btn-black:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-shop-pay {
    background: #5a31f4;
    color: var(--white);
    padding: 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    width: 100%;
    transition: background 0.3s;
    cursor: pointer;
    border: none;
    font-size: 1.05rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-shop-pay:hover {
    background: #4625cc;
}

.btn-shop-pay:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- PUBLIC PROFILE MODAL ---------- */
.profile-modal-split {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}

.pm-avatar-wrap {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--neutral-100);
    border: 4px solid var(--white);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    margin-top: -60px; /* Pull it up out of the modal content */
    margin-bottom: 1rem;
}

.pm-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--neutral-400);
    background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
}

.profile-modal-content {
    background: var(--white);
    border-radius: 24px;
    padding: 3rem 2rem 2rem 2rem;
    position: relative;
    max-width: 500px;
    width: 100%;
    margin-top: 60px; /* Space for avatar */
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.pm-business-name {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dark-900);
    margin: 0 0 0.25rem 0;
}

.pm-org-name {
    font-size: 1.1rem;
    color: var(--green-600);
    font-weight: 600;
    margin: 0 0 1.5rem 0;
}

.pm-bio {
    font-size: 1rem;
    color: var(--neutral-600);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 400px;
}

.pm-website {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--blue-500);
    font-weight: 600;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 100px;
    background: rgba(59, 130, 246, 0.05);
    transition: all 0.3s;
}

.pm-website:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

/* ---------- COMMUNITY SECTION ---------- */
.community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    padding: 1.5rem 0;
}

.community-card {
    background: var(--white);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--neutral-200);
    transition: all 0.4s var(--ease-out);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.community-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: var(--green-400);
}

.community-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(135deg, var(--green-50), var(--green-100));
    z-index: 0;
}

.cc-avatar-wrap {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--white);
    border: 4px solid var(--white);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.cc-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
    color: var(--neutral-500);
    font-size: 2.5rem;
    font-weight: 700;
}

.cc-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--dark-900);
    margin-bottom: 0.5rem;
}

.cc-bio {
    font-size: 0.9rem;
    color: var(--neutral-500);
    line-height: 1.5;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cc-btn {
    margin-top: auto;
    background: var(--neutral-100);
    color: var(--dark-700);
    padding: 0.6rem 1.25rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.3s;
}

.community-card:hover .cc-btn {
    background: var(--green-600);
    color: var(--white);
}

/* Social links in modal */
.pm-socials {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.pm-social-link {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: var(--neutral-600);
    transition: all 0.3s;
    border: 1px solid #e2e8f0;
}

.pm-social-link:hover {
    transform: translateY(-3px);
    background: var(--white);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.pm-social-link.fb:hover {
    color: #1877f2;
    border-color: #1877f2;
}

.pm-social-link.ig:hover {
    color: #e4405f;
    border-color: #e4405f;
}

.btn-pm-action {
    background: var(--green-600);
    color: var(--white);
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 700;
    text-align: center;
    width: 100%;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.2);
}

.btn-pm-action:hover {
    background: var(--green-700);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.25);
}

/* Navigation Badges */
.nav-badge {
  background: #ef4444;
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.4rem;
  border-radius: 8px;
  margin-left: auto;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

.messages-section {
  animation: fadeInMessages 0.4s ease-out;
}

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

/* ============================================================
   REVELACTION DASHBOARD — STYLES COMPLÉMENTAIRES
   ============================================================ */

/* Zone principale : fillow-main encapsule le header + contenu */
.fillow-main {
  flex: 1;
  margin-left: 280px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f8f9fe;
}

/* Le header est sticky à l'intérieur de fillow-main */
.fillow-main .fillow-header {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  height: 72px;
  background: #ffffff;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  padding: 0 2rem;
  z-index: 90;
}

/* Bouton sidebar (visible seulement sur mobile) */
.fillow-main .sidebar-toggle {
  color: #475569;
  display: none;
}

/* Côté gauche du header */
.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.header-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}

/* ── Notifications ── */
.header-notif-wrap {
  position: relative;
}

.header-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: #f1f5f9;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: background 0.2s, color 0.2s;
  min-height: auto;
}
.header-icon-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

/* Point rouge sur la cloche */
.notif-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid #fff;
  pointer-events: none;
}

/* Panneau de notifications */
.header-notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 380px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  border: 1px solid #f1f5f9;
  z-index: 9999;
  overflow: hidden;
  animation: rv-dropIn 0.2s ease;
}
@keyframes rv-dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.notif-header h4 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}
.notif-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}
.notif-list {
  max-height: 420px;
  overflow-y: auto;
}
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  border-bottom: 1px solid #f8fafc;
  cursor: pointer;
  transition: background 0.15s;
  min-height: auto;
}
.notif-item:hover { background: #f8fafc; }
.notif-item.unread {
  background: #f0fdf4;
  border-left: 3px solid #10b981;
  padding-left: calc(1.5rem - 3px);
}
.notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  flex-shrink: 0;
  min-height: auto;
}
.notif-content { flex: 1; min-width: 0; }
.notif-text {
  margin: 0 0 0.2rem;
  font-size: 0.875rem;
  color: #1e293b;
  font-weight: 500;
  line-height: 1.4;
}
.notif-time {
  font-size: 0.75rem;
  color: #94a3b8;
}
.notif-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.875rem;
}

/* ── Avatar RevelAction dans le header ── */
.rv-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  min-height: auto;
}

/* ── Onglets (Candidats / Surplus) ── */
.rv-tab {
  font-family: inherit;
  transition: color 0.2s, border-color 0.2s;
  min-height: auto !important;
}
.rv-tab:hover { color: #10b981 !important; }

/* ── Spinner de chargement ── */
.spinner-eco {
  width: 40px;
  height: 40px;
  border: 3px solid #f1f5f9;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spinEco 0.8s linear infinite;
}
@keyframes spinEco {
  to { transform: rotate(360deg); }
}

/* ── Détails utilisateur (sidebar) ── */
.user-details {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.user-details .u-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Responsive mobile ── */
@media (max-width: 768px) {
  .fillow-main {
    margin-left: 0;
  }
  .fillow-main .sidebar-toggle {
    display: flex;
    min-height: auto;
  }
  .fillow-main .header-search {
    display: none;
  }
  .header-notif-dropdown {
    position: fixed !important;
    width: calc(100vw - 2rem) !important;
    max-width: 340px !important;
    right: 1rem !important;
    left: auto !important;
    top: 72px !important;
    z-index: 99999 !important;
  }
  .fillow-main .fillow-inner {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .header-notif-dropdown {
    max-width: calc(100vw - 2rem) !important;
    right: 1rem !important;
  }
}

/* ---------- COOKIE CONSENT MOBILE (fix flexDirection bug) ---------- */
@media (max-width: 600px) {
  div[style*="z-index: 10000"][style*="position: fixed"][style*="bottom: 0"] {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
  }
  div[style*="z-index: 10000"] div[style*="min-width: 300px"] {
    min-width: 0 !important;
  }
  div[style*="z-index: 10000"] div[style*="gap: 0.75rem"][style*="flex-shrink: 0"] {
    width: 100% !important;
    justify-content: center !important;
  }
  div[style*="z-index: 10000"] div[style*="gap: 0.75rem"] button {
    flex: 1 !important;
    text-align: center !important;
  }
}

/* ---------- REGISTER MODAL MOBILE RESPONSIVE ---------- */
@media (max-width: 768px) {
  /* Overlay padding reduction */
  div[style*="z-index: 9999"][style*="position: fixed"][style*="backdrop-filter: blur(8px)"] {
    padding: 1rem !important;
  }
  /* Modal card padding reduction */
  div[style*="padding: 3.5rem"][style*="border-radius: 32px"][style*="max-width: 650px"] {
    padding: 2rem !important;
    border-radius: 24px !important;
  }
  /* Role selector stack */
  div[style*="z-index: 9999"] div[style*="border-radius: 18px"][style*="background: #f8fafc"] {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  /* Form grid collapse */
  div[style*="z-index: 9999"] form[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Reset span 2 children */
  div[style*="z-index: 9999"] form div[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }
  /* Submit button span fix */
  div[style*="z-index: 9999"] form button[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }
  /* Error message span fix */
  div[style*="z-index: 9999"] form p[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }
  /* Terms modal padding */
  div[style*="padding: 2.5rem"][style*="max-width: 560px"] {
    padding: 1.5rem !important;
  }
}

@media (max-width: 480px) {
  /* Modal card - extra small */
  div[style*="padding: 3.5rem"][style*="border-radius: 32px"][style*="max-width: 650px"] {
    padding: 1.25rem !important;
    border-radius: 20px !important;
  }
  /* Modal title */
  div[style*="z-index: 9999"] h2[style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
  }
  /* Terms modal - extra small */
  div[style*="padding: 2.5rem"][style*="max-width: 560px"] {
    padding: 1rem !important;
  }
}

/* ---------- REVIEWS SECTION MOBILE CLAMP ---------- */
@media (max-width: 768px) {
  section[id="avis"] div[style*="max-width: 1280px"][style*="margin: 0px auto"] {
    max-width: 100% !important;
  }
}

/* ============================================================
   AUTH PAGE — RESPONSIVE
   ============================================================ */

/* Tablet: réduire paddings */
@media (max-width: 1024px) {
  .auth-split-left  { padding: 4rem !important; }
  .auth-split-right { flex: 1 !important; padding: 4rem !important; }
}

/* Mobile: masquer le panneau gauche décoratif, formulaire plein écran */
@media (max-width: 768px) {
  .auth-split-wrapper { flex-direction: column !important; }
  .auth-split-left    { display: none !important; }
  .auth-split-right   {
    flex: 1 !important;
    padding: 2.5rem 1.75rem !important;
    min-height: 100vh;
  }

  /* Formulaire inscription : 2 col → 1 col */
  .auth-signup-form {
    grid-template-columns: 1fr !important;
  }
  .auth-signup-form div[style*="grid-column: span 2"],
  .auth-signup-form label[style*="grid-column: span 2"],
  .auth-signup-form button[style*="grid-column: span 2"],
  .auth-signup-form p[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }

  /* Sélecteur de rôle : empiler les boutons */
  .auth-role-selector { flex-direction: column !important; }
}

@media (max-width: 480px) {
  .auth-split-right { padding: 2rem 1.25rem !important; }
}

/* ============================================================
   REGISTER MODAL — CORRECTIFS RESPONSIVE MANQUANTS
   ============================================================ */

/* Label avec grid-column: span 2 non couvert par les règles existantes */
@media (max-width: 768px) {
  div[style*="z-index: 9999"] form label[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }
  /* Sélecteur de rôle dans le modal */
  div[style*="z-index: 9999"] > div > div[style*="border-radius: 18px"] {
    flex-direction: column !important;
  }
  /* Réduire le padding externe du modal sur petit écran */
  div[style*="z-index: 9999"][style*="padding: 2rem"] {
    padding: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  /* Titre du modal */
  div[style*="z-index: 9999"] h2[style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
  }
  /* Badge "Projet Pilote" */
  div[style*="z-index: 9999"] span[style*="font-size: 0.75rem"] {
    font-size: 0.7rem !important;
  }
  /* Réduire padding du card */
  div[style*="padding: 3.5rem"][style*="border-radius: 32px"] {
    padding: 1.5rem 1.25rem !important;
    border-radius: 20px !important;
  }
}

/* ============================================================
   LANDING PAGE — RESPONSIVE FIXES
   ============================================================ */

/* — Navbar toggle + fond solide sur mobile — */
@media (max-width: 768px) {
  .nav-desktop { display: none !important; }
  .mobile-menu-btn { display: flex !important; }

  /* Fond navbar opaque sur mobile (évite l'effet "invisible") */
  nav[id="navbar"] {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  }
}

/* — Reviews section padding — */
.reviews-section {
  padding: 120px 64px;
}
@media (max-width: 900px) {
  .reviews-section { padding: 80px 32px; }
}
@media (max-width: 600px) {
  .reviews-section { padding: 60px 20px; }
}

/* — Steps section — */
@media (max-width: 900px) {
  #etapes { padding: 80px 32px !important; }
  .steps-header-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .steps-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .steps-connecting-line { display: none !important; }
}
@media (max-width: 600px) {
  #etapes { padding: 60px 20px !important; }
  .steps-grid { grid-template-columns: 1fr !important; }
}

/* — Impacts bento grid — */
@media (max-width: 1024px) {
  #impacts { padding: 80px 32px !important; }
  .bento-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  .bento-a { grid-column: 1 / 3 !important; grid-row: auto !important; }
  .bento-b { grid-column: 1 !important;     grid-row: auto !important; }
  .bento-c { grid-column: 2 !important;     grid-row: auto !important; }
  .bento-d { grid-column: 1 / 3 !important; grid-row: auto !important; }
  .bento-e { grid-column: 1 !important;     grid-row: auto !important; }
  .bento-f { grid-column: 2 !important;     grid-row: auto !important; }
  .bento-g {
    grid-column: 1 / 3 !important;
    grid-row: auto !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .bento-h { grid-column: 1 / 3 !important; grid-row: auto !important; }
}
@media (max-width: 600px) {
  #impacts { padding: 60px 20px !important; }
  .bento-grid { grid-template-columns: 1fr !important; }
  .bento-a, .bento-b, .bento-c,
  .bento-d, .bento-e, .bento-f,
  .bento-g, .bento-h {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* ============================================================
   DASHBOARDS — RESPONSIVE FIXES COMPLÉMENTAIRES
   ============================================================ */

/* ── Header RevelactionDashboard sur mobile ── */
@media (max-width: 991px) {
  .fillow-main .fillow-header {
    padding: 0 1rem !important;
    height: 60px !important;
  }
  .fillow-main .fillow-inner {
    padding: 1rem !important;
  }
}

/* ── Grilles inline "1fr 1fr" dans RevelactionDashboard ── */
@media (max-width: 768px) {
  /* Overview section : candidats récents + demandes de placement */
  .fillow-main div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Formulaire candidat dans modal */
  .fillow-main form div[style*="grid-template-columns: 1fr 1fr"],
  .fillow-main > * div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Hero RevelactionDashboard : boutons CTA */
  .fillow-main div[style*="display: flex"][style*="gap: 1rem"] .btn {
    flex: 1 !important;
    min-width: 0 !important;
  }
  /* Titre header raccourci sur petit écran */
  .fillow-main .header-title {
    font-size: 1rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px !important;
  }
}

/* ── Dashboard commerçant (fillow-content) ── */
@media (max-width: 768px) {
  /* fillow-content padding-top doit correspondre à la hauteur du header réduit */
  .fillow-content {
    padding-top: 80px !important;
  }
  /* fillow-inner padding */
  .fillow-inner {
    padding: 1rem !important;
  }
  /* hero actions dans la grille dashboard */
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  /* Réduire encore la hero card */
  .hero-gradient-card h1 {
    font-size: 1.3rem !important;
  }
  .hero-gradient-inner-box {
    padding: 1.25rem 0.75rem !important;
  }
  /* Heatmap scrollable sur très petit écran */
  .heatmap-grid {
    font-size: 0.6rem !important;
    gap: 2px !important;
  }
  /* Grilles dans les sections settings RevelactionDashboard */
  .fillow-main div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   TABLE RESPONSIVE → CARDS (surplus section)
   ============================================================ */
@media (max-width: 768px) {
  /* Masquer les en-têtes de colonne */
  .f-table-responsive thead {
    display: none;
  }

  /* Chaque ligne devient une carte */
  .f-table-responsive,
  .f-table-responsive tbody,
  .f-table-responsive tr,
  .f-table-responsive td {
    display: block;
    width: 100%;
  }

  .f-table-responsive tr {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  /* Chaque cellule sur une ligne avec label à gauche */
  .f-table-responsive td {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
    border-radius: 0;
    box-shadow: none;
  }

  .f-table-responsive td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* Label auto via data-label */
  .f-table-responsive td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #94a3b8;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width: 85px;
    flex-shrink: 0;
    padding-top: 3px;
    line-height: 1.3;
  }

  /* Cellule photo : pas de label, image centrée */
  .f-table-responsive td.td-photo {
    justify-content: flex-start;
    padding-top: 0;
    padding-bottom: 0.75rem;
  }
  .f-table-responsive td.td-photo::before {
    display: none;
  }
  .f-table-responsive td.td-photo img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 14px !important;
  }

  /* Cellule colSpan (état vide) */
  .f-table-responsive td[colspan] {
    border-bottom: none;
    padding: 1.5rem 0.5rem;
  }
  .f-table-responsive td[colspan]::before {
    display: none;
  }

  /* Boutons d'action : pleine largeur */
  .f-table-responsive td[data-label="Actions"] > div,
  .f-table-responsive td[data-label="Actions"] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .f-table-responsive td[data-label="Actions"] button,
  .f-table-responsive td[data-label="Actions"] .btn-premium-action,
  .f-table-responsive td[data-label="Actions"] .premium-tab {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ============================================================
   FAB CAMÉRA — MOBILE UNIQUEMENT
   ============================================================ */

/* Caché sur desktop */
.mobile-camera-fab {
  display: none;
}

@media (max-width: 768px) {
  .mobile-camera-fab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 950;
    box-shadow:
      0 6px 20px rgba(16, 185, 129, 0.5),
      0 2px 6px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease;
    /* Évite le min-height: 44px global */
    min-height: auto !important;
  }

  .mobile-camera-fab:active {
    transform: scale(0.90) !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.4) !important;
  }

  /* Label "Surplus" sous l'icône */
  .fab-label {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    min-height: auto !important;
    line-height: 1;
  }

  /* Anneau de pulsation */
  .fab-pulse-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(16, 185, 129, 0.55);
    animation: fabRingPulse 2.2s ease-out infinite;
    pointer-events: none;
  }

  @keyframes fabRingPulse {
    0%   { transform: scale(1);    opacity: 0.7; }
    70%  { transform: scale(1.25); opacity: 0;   }
    100% { transform: scale(1.25); opacity: 0;   }
  }
}

@media (max-width: 480px) {
  .mobile-camera-fab {
    width: 62px;
    height: 62px;
    bottom: 80px;
    right: 16px;
  }
}