/* ============================================================
   BâtiSwift — Design System Global
   Luxury Minimalist + Glassmorphism
   Fonts: Cormorant Garamond (titres) + DM Sans (corps)
   Palette : Violet profond & Or cuivré (version optimisée)
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

   /* ---- VARIABLES (Palette Violet & Or cuivré) ---- */
   :root {
     --beige:       #F5F0EB;
     --beige-dark:  #E8E0D4;
     --anthracite:  #2F1A3A;
     --anthracite2: #1A0F23;
     --blanc:       #FFFFFF;
     --or:          #C99A4C;
     --or-light:    #EDD88A;
     --success:     #10B981;
     --danger:      #EF4444;
     --warning:     #F59E0B;
     --gris:        #8B8B8B;
     --gris-light:  #D4D0CB;
     --gris-ultra:  #F8F6F3;
   
     --glass-bg:     rgba(255,255,255,0.72);
     --glass-border: rgba(255,255,255,0.5);
     --glass-shadow: 0 8px 32px rgba(43,43,43,0.10);
   
     --radius-sm:  8px;
     --radius:     14px;
     --radius-lg:  22px;
     --radius-xl:  32px;
   
     --space-xs:   6px;
     --space-sm:   12px;
     --space-md:   20px;
     --space-lg:   32px;
     --space-xl:   56px;
     --space-xxl:  88px;
   
     --font-display: 'Cormorant Garamond', Georgia, serif;
     --font-body:    'DM Sans', system-ui, sans-serif;
   
     --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
     --header-h:   72px;
   }
   
   /* ---- RESET ---- */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   html { scroll-behavior: smooth; font-size: 16px; }
   body {
     font-family: var(--font-body);
     background: var(--beige);
     color: var(--anthracite);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     min-height: 100vh;
   }
   img { max-width: 100%; display: block; }
   a { color: inherit; text-decoration: none; }
   button, input, select, textarea { font-family: inherit; }
   
   /* ---- TYPOGRAPHY ---- */
   h1, h2, h3, h4 {
     font-family: var(--font-display);
     line-height: 1.15;
     font-weight: 600;
   }
   h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -1px; }
   h2 { font-size: clamp(1.7rem, 3.5vw, 2.8rem); letter-spacing: -0.5px; }
   h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
   h4 { font-size: 1.1rem; font-weight: 600; }
   p  { font-size: 1rem; line-height: 1.7; color: var(--gris); }
   small { font-size: 0.82rem; color: var(--gris); }
   
   /* ---- LAYOUT ---- */
   .container       { max-width: 1180px; margin: 0 auto; padding: 0 5vw; }
   .container-sm    { max-width: 720px;  margin: 0 auto; padding: 0 5vw; }
   .container-xs    { max-width: 520px;  margin: 0 auto; padding: 0 5vw; }
   .section         { padding: var(--space-xxl) 0; }
   .section-sm      { padding: var(--space-xl) 0; }
   .text-center     { text-align: center; }
   .text-right      { text-align: right; }
   .mt-sm  { margin-top: var(--space-sm); }
   .mt-md  { margin-top: var(--space-md); }
   .mt-lg  { margin-top: var(--space-lg); }
   
   /* ---- GLASSMORPHISM CARD ---- */
   .glass-card {
     background:    var(--glass-bg);
     border:        1.5px solid var(--glass-border);
     border-radius: var(--radius-lg);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
     box-shadow:    var(--glass-shadow);
     padding:       var(--space-lg);
     transition:    transform var(--transition), box-shadow var(--transition);
   }
   .glass-card:hover {
     transform:  translateY(-3px);
     box-shadow: 0 16px 48px rgba(43,43,43,0.14);
   }
   .glass-card-dark {
     background: rgba(43,43,43,0.85);
     border:     1.5px solid rgba(255,255,255,0.10);
     color:      var(--blanc);
     backdrop-filter: blur(14px);
     border-radius: var(--radius-lg);
     padding: var(--space-lg);
   }
   
   /* ---- BUTTONS ---- */
   .btn {
     display: inline-flex; align-items: center; justify-content: center; gap: 8px;
     padding: 13px 28px;
     border-radius: 50px;
     font-family: var(--font-body);
     font-size: 0.95rem;
     font-weight: 500;
     cursor: pointer;
     border: none;
     transition: all var(--transition);
     white-space: nowrap;
     text-decoration: none;
   }
   .btn:disabled { opacity: 0.5; cursor: not-allowed; }
   .btn-primary {
     background: var(--anthracite);
     color: var(--blanc);
     box-shadow: 0 4px 18px rgba(43,43,43,0.22);
   }
   .btn-primary:hover:not(:disabled) {
     background: var(--anthracite2);
     box-shadow: 0 8px 28px rgba(43,43,43,0.30);
     transform: translateY(-1px);
   }
   .btn-secondary {
     background: transparent;
     color: var(--anthracite);
     border: 1.5px solid var(--gris-light);
   }
   .btn-secondary:hover:not(:disabled) {
     border-color: var(--anthracite);
     background: rgba(43,43,43,0.04);
   }
   .btn-gold {
     background: var(--or);
     color: var(--blanc);
     box-shadow: 0 4px 18px rgba(201,168,76,0.35);
   }
   .btn-gold:hover:not(:disabled) {
     background: #b8952e;
     box-shadow: 0 8px 28px rgba(201,168,76,0.45);
     transform: translateY(-1px);
   }
   .btn-danger {
     background: var(--danger);
     color: var(--blanc);
   }
   .btn-sm { padding: 8px 18px; font-size: 0.85rem; }
   .btn-lg { padding: 16px 38px; font-size: 1.05rem; }
   .btn-block { width: 100%; }
   
   /* ---- FORMS ---- */
   .form-group { margin-bottom: 18px; }
   .form-label {
     display: block;
     font-size: 0.85rem;
     font-weight: 500;
     color: var(--anthracite);
     margin-bottom: 7px;
   }
   .form-label span.req { color: var(--danger); margin-left: 2px; }
   .form-control {
     width: 100%;
     padding: 12px 16px;
     background: rgba(255,255,255,0.8);
     border: 1.5px solid var(--gris-light);
     border-radius: var(--radius);
     font-size: 0.95rem;
     color: var(--anthracite);
     transition: border-color var(--transition), box-shadow var(--transition);
     outline: none;
     appearance: none;
   }
   .form-control:focus {
     border-color: var(--anthracite);
     background: var(--blanc);
     box-shadow: 0 0 0 3px rgba(43,43,43,0.08);
   }
   .form-control::placeholder { color: var(--gris-light); }
   .form-control.error { border-color: var(--danger); }
   .form-control.success { border-color: var(--success); }
   .form-hint  { font-size: 0.78rem; color: var(--gris); margin-top: 5px; }
   .form-error { font-size: 0.82rem; color: var(--danger); margin-top: 5px; display: none; }
   .form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
   textarea.form-control { resize: vertical; min-height: 100px; }
   select.form-control {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B8B8B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 14px center;
     padding-right: 38px;
   }
   
   /* ---- ALERTS ---- */
   .alert {
     padding: 14px 18px;
     border-radius: var(--radius);
     font-size: 0.9rem;
     margin-bottom: 16px;
     display: flex; align-items: center; gap: 10px;
     border: 1px solid transparent;
   }
   .alert-success { background: rgba(16,185,129,0.08); color: #065f46; border-color: rgba(16,185,129,0.25); }
   .alert-danger  { background: rgba(239,68,68,0.08);  color: #7f1d1d; border-color: rgba(239,68,68,0.25); }
   .alert-warning { background: rgba(245,158,11,0.08); color: #78350f; border-color: rgba(245,158,11,0.25); }
   .alert-info    { background: rgba(43,43,43,0.06);   color: var(--anthracite); border-color: var(--gris-light); }
   .alert:empty, .alert.hidden { display: none; }
   
   /* ---- BADGE / CHIP ---- */
   .badge {
     display: inline-flex; align-items: center;
     padding: 3px 10px;
     border-radius: 50px;
     font-size: 0.75rem;
     font-weight: 500;
   }
   .badge-gold     { background: rgba(201,168,76,0.12); color: #7a5b1a; }
   .badge-success  { background: rgba(16,185,129,0.12); color: #065f46; }
   .badge-danger   { background: rgba(239,68,68,0.12);  color: #7f1d1d; }
   .badge-neutral  { background: rgba(43,43,43,0.08);   color: var(--anthracite); }
   .urgence-immediate { color: var(--danger);  font-weight: 600; }
   .urgence-normale   { color: var(--warning); font-weight: 500; }
   .urgence-faible    { color: var(--success); font-weight: 500; }

   /* ---- BADGE PRO ---- */
   .badge-pro {
     background: var(--or);
     color: var(--blanc);
     font-weight: 600;
     padding: 2px 12px;
     border-radius: 50px;
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
   }
   
   /* ---- DIVIDER ---- */
   .divider { height: 1px; background: var(--beige-dark); margin: var(--space-lg) 0; }
   
   /* ============================================================
      LOGO SVG — Gestion dynamique des couleurs
      ============================================================ */
   .logo-svg {
     width: 48px;
     height: auto;
     max-width: 100%;
     display: block;
     transition: filter 0.3s ease;
   }

   /* Version Or (footer, badges) */
   .logo-svg.logo-gold {
     filter: brightness(0) saturate(100%) sepia(100%) saturate(2000%) hue-rotate(5deg);
   }

   /* Version Or cuivré (plus chaud) */
   .logo-svg.logo-gold-copper {
     filter: brightness(0) saturate(100%) sepia(100%) saturate(2000%) hue-rotate(-10deg) brightness(1.1);
   }

   /* Version Dégradé (pages premium) */
   .logo-svg.logo-gradient {
     filter: brightness(0) saturate(100%) sepia(100%) saturate(2000%) hue-rotate(5deg);
     /* Pour un véritable dégradé, utilisez la version SVG avec dégradé intégré */
   }

   /* Version Blanche (fonds très sombres) */
   .logo-svg.logo-white {
     filter: brightness(0) invert(1);
   }

   /* Version interactive (survol) */
   .logo-svg.logo-hover:hover {
     filter: brightness(0) saturate(100%) sepia(100%) saturate(2000%) hue-rotate(5deg);
   }

   /* Version avec transition (hover doux) */
   .logo-svg.logo-transition {
     transition: filter 0.3s ease;
   }
   
   /* ---- HEADER ---- */
   header, .site-header {
     position: fixed; top: 0; left: 0; right: 0; z-index: 200;
     height: var(--header-h);
     display: flex; align-items: center;
     background: rgba(245,240,235,0.9);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border-bottom: 1px solid var(--beige-dark);
   }
   header .container, .site-header .container {
     display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%;
   }
   .nav-logo {
     display: flex; align-items: center; gap: 10px;
     font-family: var(--font-display);
     font-size: 1.4rem; font-weight: 700;
     color: var(--anthracite);
   }
   .nav-links {
     display: flex; align-items: center; gap: 24px;
     list-style: none;
   }
   .nav-links a {
     font-size: 0.9rem; font-weight: 500; color: var(--gris);
     transition: color var(--transition);
   }
   .nav-links a:hover, .nav-links a.active { color: var(--anthracite); }
   .nav-actions { display: flex; align-items: center; gap: 12px; }
   #nav-user-name {
     font-size: 0.88rem; font-weight: 500; color: var(--anthracite);
   }
   #btn-nav-logout { font-size: 0.85rem; padding: 8px 18px; }
   #btn-nav-login, #btn-nav-register { font-size: 0.85rem; padding: 8px 18px; }
   .nav-hamburger { display: none; background: none; border: none; cursor: pointer; }
   
   /* ============================================================
      SIDEBAR MOBILE
      ============================================================ */
   .sidebar-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0,0,0,0.4);
     z-index: 299;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
   }
   .sidebar-overlay.active {
     opacity: 1;
     pointer-events: auto;
   }

   .mobile-sidebar {
     position: fixed;
     top: 0;
     right: -320px;
     width: 300px;
     max-width: 80vw;
     height: 100vh;
     background: var(--blanc);
     z-index: 300;
     padding: 1.5rem;
     box-shadow: -4px 0 32px rgba(0,0,0,0.12);
     transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     overflow-y: auto;
   }
   .mobile-sidebar.active {
     right: 0;
   }
   .sidebar-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 1rem;
     border-bottom: 1px solid var(--beige-dark);
   }
   .sidebar-close {
     background: none;
     border: none;
     font-size: 1.6rem;
     color: var(--gris);
     cursor: pointer;
     padding: 0 0.5rem;
   }
   .sidebar-close:hover {
     color: var(--anthracite);
   }
   .sidebar-nav {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
   }
   .sidebar-nav a {
     padding: 0.8rem 1rem;
     border-radius: var(--radius);
     font-size: 1rem;
     font-weight: 500;
     color: var(--anthracite);
     transition: background 0.2s;
     text-decoration: none;
   }
   .sidebar-nav a:hover {
     background: var(--beige);
   }
   .sidebar-actions {
     margin-top: auto;
     display: flex;
     flex-direction: column;
     gap: 0.8rem;
     padding-top: 1rem;
     border-top: 1px solid var(--beige-dark);
   }
   .sidebar-actions .btn {
     text-align: center;
   }
   
   /* ---- MAIN CONTENT ---- */
   main, .main-content {
     padding-top: var(--header-h);
     min-height: 100vh;
   }
   
   /* ---- FOOTER ---- */
   footer, .site-footer {
     background: var(--anthracite2);
     color: rgba(255,255,255,0.65);
     padding: var(--space-xl) 0 var(--space-lg);
   }
   .footer-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: var(--space-xl);
     margin-bottom: var(--space-xl);
   }
   .footer-brand .nav-logo { color: var(--blanc); margin-bottom: var(--space-sm); }
   .footer-brand p { font-size: 0.88rem; color: rgba(255,255,255,0.5); }
   .footer-col h4 {
     font-family: var(--font-display);
     font-size: 1rem; font-weight: 600;
     color: var(--blanc); margin-bottom: var(--space-sm);
   }
   .footer-col a {
     display: block; font-size: 0.87rem;
     color: rgba(255,255,255,0.5);
     margin-bottom: 8px;
     transition: color var(--transition);
   }
   .footer-col a:hover { color: var(--blanc); }
   .footer-bottom {
     border-top: 1px solid rgba(255,255,255,0.08);
     padding-top: var(--space-md);
     display: flex; align-items: center; justify-content: space-between;
     flex-wrap: wrap; gap: 10px;
     font-size: 0.82rem;
   }
   .footer-bottom a { color: rgba(255,255,255,0.35); }
   .footer-bottom a:hover { color: var(--blanc); }
   
   /* ---- LOADING SPINNER ---- */
   .spinner {
     display: inline-block;
     width: 18px; height: 18px;
     border: 2.5px solid rgba(255,255,255,0.3);
     border-top-color: var(--blanc);
     border-radius: 50%;
     animation: spin 0.7s linear infinite;
   }
   @keyframes spin { to { transform: rotate(360deg); } }
   .spinner-dark {
     border: 2.5px solid rgba(43,43,43,0.15);
     border-top-color: var(--anthracite);
   }
   
   /* ---- PAGE LOADER ---- */
   .page-loader {
     position: fixed; inset: 0; z-index: 9999;
     background: var(--beige);
     display: flex; align-items: center; justify-content: center;
     transition: opacity 0.4s ease;
   }
   .page-loader.hidden { opacity: 0; pointer-events: none; }
   
   /* ---- ANIMATIONS ---- */
   .reveal {
     opacity: 0; transform: translateY(28px);
     transition: opacity 0.65s ease, transform 0.65s ease;
   }
   .reveal.visible { opacity: 1; transform: none; }
   .reveal-delay-1 { transition-delay: 0.1s; }
   .reveal-delay-2 { transition-delay: 0.2s; }
   .reveal-delay-3 { transition-delay: 0.3s; }
   
   @keyframes fadeIn {
     from { opacity: 0; transform: translateY(16px); }
     to   { opacity: 1; transform: none; }
   }
   .fade-in { animation: fadeIn 0.5s ease both; }
   
   /* ---- GRID UTILITIES ---- */
   .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
   .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
   .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
   .flex   { display: flex; }
   .flex-center { display: flex; align-items: center; justify-content: center; }
   .flex-between { display: flex; align-items: center; justify-content: space-between; }
   .gap-sm { gap: var(--space-sm); }
   .gap-md { gap: var(--space-md); }
   
   /* ---- LEAD CARD ---- */
   .lead-card {
     background: var(--blanc);
     border-radius: var(--radius-lg);
     padding: var(--space-md);
     border: 1.5px solid var(--beige-dark);
     transition: all var(--transition);
     position: relative;
   }
   .lead-card:hover {
     box-shadow: 0 8px 32px rgba(43,43,43,0.10);
     transform: translateY(-2px);
     border-color: var(--gris-light);
   }
   .lead-card-header {
     display: flex; align-items: flex-start; justify-content: space-between;
     margin-bottom: var(--space-sm);
   }
   .lead-card-title {
     font-family: var(--font-display);
     font-size: 1.15rem; font-weight: 600;
     text-transform: capitalize;
   }
   .lead-card-meta {
     display: flex; flex-wrap: wrap; gap: 8px;
     margin-bottom: var(--space-sm);
   }
   .lead-card-description {
     font-size: 0.9rem; color: var(--gris);
     line-height: 1.5;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     margin-bottom: var(--space-sm);
   }
   .lead-card-footer {
     display: flex; align-items: center; justify-content: space-between;
     padding-top: var(--space-sm);
     border-top: 1px solid var(--beige-dark);
   }
   .lead-price {
     font-family: var(--font-display);
     font-size: 1.4rem; font-weight: 700; color: var(--or);
   }

   /* ---- DISTANCE BADGE ---- */
   .distance-badge {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     background: rgba(43,43,43,0.06);
     padding: 2px 10px;
     border-radius: 50px;
     font-size: 0.75rem;
     color: var(--anthracite);
   }
   .distance-badge .km {
     font-weight: 600;
   }
   
   /* ---- MODAL ---- */
   .modal-overlay {
     position: fixed; inset: 0; z-index: 500;
     background: rgba(26,26,26,0.55);
     backdrop-filter: blur(4px);
     display: flex; align-items: center; justify-content: center;
     padding: 20px;
     opacity: 0; pointer-events: none;
     transition: opacity var(--transition);
   }
   .modal-overlay.open { opacity: 1; pointer-events: all; }
   .modal {
     background: var(--blanc);
     border-radius: var(--radius-xl);
     padding: var(--space-xl);
     max-width: 520px; width: 100%;
     box-shadow: 0 24px 80px rgba(43,43,43,0.2);
     transform: scale(0.96);
     transition: transform var(--transition);
   }
   .modal-overlay.open .modal { transform: scale(1); }
   .modal-header {
     display: flex; align-items: center; justify-content: space-between;
     margin-bottom: var(--space-lg);
   }
   .modal-close {
     background: none; border: none; cursor: pointer;
     color: var(--gris); font-size: 1.3rem;
     transition: color var(--transition);
   }
   .modal-close:hover { color: var(--anthracite); }
   
   /* ---- STATS CARD ---- */
   .stat-card {
     background: var(--blanc);
     border-radius: var(--radius-lg);
     padding: var(--space-lg);
     border: 1.5px solid var(--beige-dark);
     text-align: center;
   }
   .stat-number {
     font-family: var(--font-display);
     font-size: 2.8rem; font-weight: 700;
     color: var(--anthracite);
     line-height: 1;
   }
   .stat-label { font-size: 0.85rem; color: var(--gris); margin-top: 8px; }
   
   /* ---- SIDEBAR LAYOUT (pour dashboard) ---- */
   .sidebar-layout {
     display: grid;
     grid-template-columns: 240px 1fr;
     gap: 0;
     min-height: calc(100vh - var(--header-h));
   }
   .sidebar {
     background: var(--blanc);
     border-right: 1px solid var(--beige-dark);
     padding: var(--space-lg) 0;
     position: sticky; top: var(--header-h);
     height: calc(100vh - var(--header-h));
     overflow-y: auto;
   }
   .sidebar-nav { list-style: none; }
   .sidebar-nav li a {
     display: flex; align-items: center; gap: 12px;
     padding: 12px var(--space-lg);
     font-size: 0.9rem; font-weight: 500;
     color: var(--gris);
     transition: all var(--transition);
     border-left: 3px solid transparent;
   }
   .sidebar-nav li a:hover, .sidebar-nav li a.active {
     color: var(--anthracite);
     background: var(--beige);
     border-left-color: var(--anthracite);
   }
   .sidebar-nav li a .icon { font-size: 1.1rem; }
   .sidebar-content { padding: var(--space-xl); }

   /* ============================================================
      TOAST / NOTIFICATIONS
      ============================================================ */
   .toast-container {
     position: fixed;
     bottom: 24px;
     right: 24px;
     z-index: 9999;
     display: flex;
     flex-direction: column;
     gap: 12px;
     max-width: 360px;
     width: 100%;
   }
   .toast {
     background: var(--blanc);
     border-radius: var(--radius);
     padding: 14px 20px;
     box-shadow: 0 8px 32px rgba(43,43,43,0.16);
     border: 1px solid var(--beige-dark);
     display: flex;
     align-items: center;
     gap: 12px;
     animation: slideUp 0.35s ease both;
     font-size: 0.9rem;
   }
   .toast-success { border-left: 4px solid var(--success); }
   .toast-danger  { border-left: 4px solid var(--danger); }
   .toast-warning { border-left: 4px solid var(--warning); }
   .toast-info    { border-left: 4px solid var(--or); }
   .toast .toast-icon { font-size: 1.2rem; }
   .toast .toast-close {
     margin-left: auto;
     background: none;
     border: none;
     color: var(--gris);
     cursor: pointer;
     font-size: 1.2rem;
   }
   @keyframes slideUp {
     from { opacity: 0; transform: translateY(20px); }
     to   { opacity: 1; transform: translateY(0); }
   }

   /* ============================================================
      TARIFS (Pricing Cards)
      ============================================================ */
   .pricing-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: var(--space-lg);
     margin-top: var(--space-lg);
   }
   .pricing-card {
     background: var(--blanc);
     border-radius: var(--radius-xl);
     padding: var(--space-xl);
     border: 1.5px solid var(--beige-dark);
     text-align: center;
     transition: all var(--transition);
   }
   .pricing-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 48px rgba(43,43,43,0.10);
   }
   .pricing-card.featured {
     border-color: var(--or);
     background: linear-gradient(180deg, rgba(201,168,76,0.04) 0%, var(--blanc) 100%);
     position: relative;
   }
   .pricing-card.featured::before {
     content: '⭐ Populaire';
     position: absolute;
     top: -12px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--or);
     color: var(--blanc);
     padding: 2px 18px;
     border-radius: 50px;
     font-size: 0.75rem;
     font-weight: 600;
   }
   .pricing-card .price {
     font-family: var(--font-display);
     font-size: 3rem;
     font-weight: 700;
     color: var(--anthracite);
     margin: var(--space-md) 0;
   }
   .pricing-card .price span {
     font-size: 1rem;
     color: var(--gris);
     font-weight: 400;
   }
   .pricing-card ul {
     list-style: none;
     padding: 0;
     margin: var(--space-lg) 0;
     text-align: left;
   }
   .pricing-card ul li {
     padding: 6px 0;
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 0.9rem;
     color: var(--gris);
   }
   .pricing-card ul li::before {
     content: '✅';
     font-size: 0.8rem;
   }

   /* ============================================================
      CHAT / AGENT IA (bulles)
      ============================================================ */
   .chat-container {
     display: flex;
     flex-direction: column;
     gap: 12px;
     max-width: 600px;
     margin: 0 auto;
   }
   .chat-bubble {
     max-width: 80%;
     padding: 14px 20px;
     border-radius: var(--radius-lg);
     font-size: 0.95rem;
     line-height: 1.6;
     animation: fadeIn 0.3s ease;
   }
   .chat-bubble.user {
     align-self: flex-end;
     background: var(--anthracite);
     color: var(--blanc);
     border-bottom-right-radius: 4px;
   }
   .chat-bubble.assistant {
     align-self: flex-start;
     background: var(--blanc);
     border: 1.5px solid var(--beige-dark);
     color: var(--anthracite);
     border-bottom-left-radius: 4px;
   }
   .chat-bubble .timestamp {
     font-size: 0.7rem;
     color: var(--gris);
     margin-top: 4px;
     display: block;
   }
   .chat-input-area {
     display: flex;
     gap: 10px;
     margin-top: 12px;
   }
   .chat-input-area input {
     flex: 1;
   }

   /* ============================================================
      FILTRES DE RECHERCHE
      ============================================================ */
   .filters-bar {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     align-items: center;
     padding: var(--space-md) 0;
   }
   .filters-bar .filter-group {
     display: flex;
     align-items: center;
     gap: 8px;
     background: var(--blanc);
     border: 1.5px solid var(--beige-dark);
     border-radius: 50px;
     padding: 4px 12px 4px 16px;
   }
   .filters-bar .filter-group select,
   .filters-bar .filter-group input {
     border: none;
     background: transparent;
     padding: 6px 0;
     font-size: 0.85rem;
     outline: none;
     color: var(--anthracite);
   }
   .filters-bar .filter-group select {
     padding-right: 8px;
   }
   .filters-bar .filter-clear {
     background: none;
     border: none;
     color: var(--gris);
     cursor: pointer;
     font-size: 0.8rem;
     padding: 4px 8px;
   }
   .filters-bar .filter-clear:hover {
     color: var(--danger);
   }

   /* ============================================================
      AVIS / ÉTOILES
      ============================================================ */
   .stars {
     display: flex;
     gap: 2px;
     color: var(--or);
     font-size: 1.2rem;
     letter-spacing: 2px;
   }
   .stars .empty {
     color: var(--gris-light);
   }
   .review-item {
     background: var(--blanc);
     border-radius: var(--radius);
     padding: var(--space-md);
     border: 1px solid var(--beige-dark);
     margin-bottom: var(--space-sm);
   }
   .review-item .review-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 6px;
   }
   .review-item .review-author {
     font-weight: 600;
     color: var(--anthracite);
   }
   .review-item .review-date {
     font-size: 0.8rem;
     color: var(--gris);
   }
   .review-item .review-text {
     font-size: 0.9rem;
     color: var(--gris);
     line-height: 1.6;
   }

   /* ============================================================
      TABLEAUX (factures, historique)
      ============================================================ */
   .table-wrap {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     border-radius: var(--radius);
     border: 1.5px solid var(--beige-dark);
     background: var(--blanc);
   }
   .table-wrap table {
     width: 100%;
     border-collapse: collapse;
     font-size: 0.9rem;
     min-width: 500px;
   }
   .table-wrap th {
     background: var(--beige);
     color: var(--anthracite);
     font-weight: 600;
     padding: 12px 16px;
     text-align: left;
   }
   .table-wrap td {
     padding: 10px 16px;
     border-top: 1px solid var(--beige-dark);
     color: var(--gris);
   }
   .table-wrap tr:hover td {
     background: var(--gris-ultra);
   }

   /* ============================================================
      RESPONSIVE — TOUS LES ÉCRANS
      ============================================================ */
   
   /* ---- Tablettes (max 1024px) ---- */
   @media (max-width: 1024px) {
     .footer-grid {
       grid-template-columns: 1fr 1fr;
       gap: var(--space-lg);
     }
     .sidebar-layout {
       grid-template-columns: 1fr;
     }
     .sidebar {
       position: relative;
       height: auto;
       border-right: none;
       border-bottom: 1px solid var(--beige-dark);
       padding: var(--space-md) 0;
     }
     .sidebar-content {
       padding: var(--space-lg);
     }
     .grid-4 {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   
   /* ---- Mobiles (max 768px) ---- */
   @media (max-width: 768px) {
     /* Typographie */
     h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
     h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); }
     h3 { font-size: 1.2rem; }
     
     /* Conteneurs */
     .container {
       padding: 0 4vw;
     }
     .section {
       padding: var(--space-xl) 0;
     }
     .section-sm {
       padding: var(--space-lg) 0;
     }
   
     /* Grilles */
     .grid-2, .grid-3, .grid-4 {
       grid-template-columns: 1fr !important;
       gap: var(--space-md);
     }
     .form-row {
       grid-template-columns: 1fr;
       gap: 0;
     }
   
     /* Header */
     .nav-links {
       display: none;
       flex-direction: column;
       position: absolute;
       top: var(--header-h);
       left: 0;
       right: 0;
       background: var(--blanc);
       padding: var(--space-lg);
       border-bottom: 1px solid var(--beige-dark);
       box-shadow: 0 8px 32px rgba(0,0,0,0.08);
       gap: 12px;
     }
     .nav-links.open {
       display: flex;
     }
     .nav-links a {
       padding: 10px 16px;
       width: 100%;
       text-align: center;
       font-size: 1rem;
     }
     .nav-hamburger {
       display: flex;
       flex-direction: column;
       gap: 4px;
       padding: 8px;
       background: none;
       border: none;
       cursor: pointer;
     }
     .nav-hamburger .bar {
       width: 26px;
       height: 2.5px;
       background: var(--anthracite);
       border-radius: 4px;
       transition: all 0.3s ease;
     }
     .nav-hamburger.open .bar:nth-child(1) {
       transform: rotate(45deg) translate(5px, 5px);
     }
     .nav-hamburger.open .bar:nth-child(2) {
       opacity: 0;
     }
     .nav-hamburger.open .bar:nth-child(3) {
       transform: rotate(-45deg) translate(5px, -5px);
     }

     /* ── SIDEBAR MOBILE : déjà géré par les styles dédiés ── */
     /* Le overlay et la sidebar sont gérés par les classes .sidebar-overlay et .mobile-sidebar */
   
     /* ── BOUTONS CONNEXION / INSCRIPTION : RESTENT VISIBLES ── */
     .nav-actions .nav-guest {
       display: flex !important;
       gap: 4px;
       align-items: center;
     }
     .nav-actions .nav-guest .btn {
       font-size: 0.65rem;
       padding: 4px 8px;
       white-space: nowrap;
     }
     .nav-actions .nav-user {
       display: flex !important;
       gap: 4px;
       align-items: center;
     }
     .nav-actions .nav-user .btn {
       font-size: 0.6rem;
       padding: 3px 6px;
       white-space: nowrap;
     }
     #nav-user-greeting {
       font-size: 0.7rem;
       white-space: nowrap;
     }
     
     /* Footer */
     .footer-grid {
       grid-template-columns: 1fr !important;
       gap: var(--space-lg);
     }
     .footer-bottom {
       flex-direction: column;
       text-align: center;
     }
     .footer-col a {
       font-size: 0.85rem;
     }
   
     /* Boutons */
     .btn-lg {
       padding: 14px 28px;
       font-size: 1rem;
     }
     .btn-block-mobile {
       width: 100%;
       justify-content: center;
     }
   
     /* Cards */
     .glass-card {
       padding: var(--space-md);
     }
   
     /* Modal */
     .modal {
       padding: var(--space-lg);
       margin: 10px;
     }
   
     /* Sidebar (dashboard) */
     .sidebar-content {
       padding: var(--space-md);
     }
   
     /* Logo */
     .logo-svg {
       width: 32px;
     }
     .nav-logo {
       font-size: 1.2rem;
     }
   
     /* Lead card */
     .lead-card {
       padding: var(--space-sm);
     }
     .lead-card-title {
       font-size: 1rem;
     }
     .lead-price {
       font-size: 1.2rem;
     }

     /* Pricing */
     .pricing-grid {
       grid-template-columns: 1fr;
       max-width: 400px;
       margin-left: auto;
       margin-right: auto;
     }

     /* Chat */
     .chat-bubble {
       max-width: 90%;
     }

     /* Filtres */
     .filters-bar {
       flex-direction: column;
       align-items: stretch;
     }
     .filters-bar .filter-group {
       border-radius: var(--radius);
       padding: 8px 16px;
     }

     /* Toasts */
     .toast-container {
       left: 16px;
       right: 16px;
       bottom: 16px;
       max-width: 100%;
     }
   }
   
   /* ---- Très petits mobiles (max 480px) ---- */
   @media (max-width: 480px) {
     /* Typographie */
     h1 { font-size: 1.6rem; }
     h2 { font-size: 1.3rem; }
     h3 { font-size: 1.1rem; }
     p { font-size: 0.9rem; }
     
     /* Conteneurs */
     .container {
       padding: 0 3vw;
     }
     
     /* Boutons */
     .btn {
       padding: 10px 18px;
       font-size: 0.85rem;
     }
     .btn-sm {
       padding: 6px 14px;
       font-size: 0.75rem;
     }
     .btn-lg {
       padding: 12px 24px;
       font-size: 0.9rem;
     }
   
     /* Formulaires */
     .form-control {
       padding: 10px 14px;
       font-size: 0.9rem;
     }
     .form-label {
       font-size: 0.8rem;
     }
   
     /* Espacements */
     :root {
       --space-lg: 24px;
       --space-xl: 32px;
       --space-xxl: 48px;
     }
   
     /* Header */
     .nav-logo {
       font-size: 1rem;
     }
     .nav-hamburger .bar {
       width: 22px;
       height: 2px;
     }
     .nav-links a {
       font-size: 0.9rem;
       padding: 8px 12px;
     }
   
     /* Badges */
     .badge {
       font-size: 0.65rem;
       padding: 2px 8px;
     }
   
     /* Lead card */
     .lead-card-meta {
       gap: 4px;
     }
     .lead-card-description {
       font-size: 0.8rem;
       -webkit-line-clamp: 2;
     }
     .lead-price {
       font-size: 1rem;
     }
   
     /* Stats */
     .stat-number {
       font-size: 2rem;
     }
     .stat-label {
       font-size: 0.75rem;
     }
   
     /* Modal */
     .modal {
       padding: var(--space-md);
       border-radius: var(--radius-lg);
     }
     .modal-header {
       margin-bottom: var(--space-md);
     }

     /* Pricing */
     .pricing-card {
       padding: var(--space-lg);
     }
     .pricing-card .price {
       font-size: 2.4rem;
     }
   }
   
   /* ---- Très grands écrans (optionnel) ---- */
   @media (min-width: 1400px) {
     .container {
       max-width: 1300px;
       padding: 0 2rem;
     }
     h1 {
       font-size: 4.2rem;
     }
     h2 {
       font-size: 3rem;
     }
   }