/* =============================================
   WE BRICOL — Responsive (Mobile-First)
   ============================================= */

/* ---- Tablette large (max 1024px) ---- */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }

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

/* ---- Tablette (max 768px) ---- */
@media (max-width: 768px) {
  /* Overlay sombre derrière le menu mobile */
  .nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    z-index: 999;
    pointer-events: none;
    backdrop-filter: blur(2px);
  }

  .nav-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Navigation - Menu latéral droit */
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 90px var(--space-3) 60px;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links.open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px var(--space-3);
    width: 100%;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
    transition: all var(--transition);
    margin-bottom: 4px;
  }

  .nav-links a:hover {
    background: rgba(255, 107, 53, 0.08);
    color: var(--color-primary);
    transform: translateX(-4px);
  }

  .nav-links a.active {
    background: rgba(255, 107, 53, 0.12);
    color: var(--color-primary);
    font-weight: 600;
  }

  .nav-links a::after {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Client connecté sur mobile : cacher le hamburger (bottom nav le remplace) */
  .client-logged-in .nav-toggle,
  .client-logged-in .nav-links {
    display: none !important;
  }

  /* Menu utilisateur mobile - Amélioration visuelle */
  .nav-actions {
    gap: var(--space-2);
  }

  .nav-actions .btn {
    display: none;
  }

  /* Bouton Connexion toujours visible sur mobile */
  .nav-actions #loginBtn {
    display: inline-flex !important;
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  .nav-actions .user-greeting {
    display: flex;
    padding: 10px 14px;
    font-size: 0.85rem;
    max-width: 160px;
  }

  .nav-actions .user-greeting span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-actions .user-greeting i {
    flex-shrink: 0;
  }

  /* Bouton déconnexion visible sur mobile */
  .nav-actions #logoutBtn {
    display: inline-flex !important;
    padding: 10px 14px;
    gap: 6px;
  }

  .nav-actions #logoutBtn .btn-text {
    display: none;
  }

  .nav-actions #logoutBtn i {
    margin: 0;
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding: 100px 0 60px;
  }

  .hero h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

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

  .hero-search {
    flex-direction: column;
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .hero-search-field {
    width: 100%;
  }

  .hero-search-field input,
  .hero-search-field select {
    padding: 14px 18px;
    font-size: 1rem;
  }

  .hero-search-divider {
    display: none;
  }

  .hero-search-btn {
    width: 100%;
    justify-content: center;
    padding: 16px;
    font-size: 1.05rem;
    min-height: 52px;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  /* Boutons et inputs - Taille minimale tactile 44px */
  .btn,
  button {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 1rem;
  }

  .btn-sm {
    min-height: 40px;
    padding: 10px 16px;
    font-size: 0.95rem;
  }

  .btn-lg {
    min-height: 52px;
    padding: 16px 32px;
    font-size: 1.1rem;
  }

  .form-control,
  input,
  select,
  textarea {
    padding: 12px 16px;
    font-size: 1rem;
    min-height: 44px;
  }

  /* Grids */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Cards */
  .card {
    padding: var(--space-4);
  }

  .service-card {
    padding: var(--space-4);
  }

  .artisan-card {
    padding: var(--space-3);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }

  .footer-links {
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
  }

  /* Sections */
  .section {
    padding: var(--space-6) 0;
  }

  .section-header {
    text-align: center;
    margin-bottom: var(--space-4);
  }

  /* Form Row */
  .form-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* CTA Banner */
  .cta-banner {
    padding: var(--space-5) var(--space-3);
    text-align: center;
  }

  .cta-banner h2 {
    font-size: 1.6rem;
  }

  .cta-banner .btn {
    width: 100%;
    max-width: 300px;
  }

  /* Step cards connector */
  .steps-connector {
    display: none;
  }

  /* Modales */
  .modal {
    padding: var(--space-3);
  }

  .modal-content {
    max-width: 100%;
    margin: 0;
    border-radius: 16px;
  }

  /* Stats */
  .stat-card {
    padding: var(--space-3);
  }

  /* Images */
  img {
    max-width: 100%;
    height: auto;
  }

  /* ---- DASHBOARDS ---- */
  /* Layout global - Passer en mode mobile */
  .dashboard-layout {
    grid-template-columns: 1fr !important;
    margin-top: 60px !important;
    min-height: calc(100vh - 60px) !important;
  }

  /* Sidebar desktop - Masquer complètement sur mobile */
  .dashboard-sidebar {
    display: none !important;
  }

  /* Bottom Navigation Mobile - Afficher uniquement sur mobile */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    padding: 8px 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    border-top: 2px solid rgba(255,107,53,0.3);
    z-index: 100;
    justify-content: space-around;
    align-items: center;
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.2s;
    position: relative;
    min-width: 70px;
    text-align: center;
  }

  .mobile-nav-item i {
    font-size: 1.3rem;
  }

  .mobile-nav-item span {
    font-size: 0.7rem;
    font-weight: 600;
  }

  .mobile-nav-item.active {
    background: rgba(255,107,53,0.15);
    color: #FF6B35;
  }

  .mobile-nav-item:active {
    background: rgba(255,107,53,0.2);
    transform: scale(0.95);
  }

  /* Badge notification sur bottom nav */
  #unreadBadgeMobile {
    position: absolute;
    top: 6px;
    right: 20px;
    background: #FF6B35;
    color: white;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 0.7rem;
    min-width: 18px;
    text-align: center;
  }

  /* Badge notification global (toutes pages) */
  .global-badge {
    position: absolute;
    top: 4px;
    right: 12px;
    background: #FF6B35;
    color: white;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 2px 6px rgba(255,107,53,0.4);
  }

  .dashboard-content {
    margin-left: 0 !important;
    padding: 16px 12px 90px !important; /* Espace pour la nav en bas */
    max-width: 100% !important;
  }

  /* Dashboard header mobile */
  .dash-header {
    padding: 12px 0 !important;
    margin-bottom: 16px !important;
  }

  .dash-header h2 {
    font-size: 1.4rem !important;
    margin-bottom: 4px !important;
  }

  .dash-header p {
    font-size: 0.85rem !important;
    opacity: 0.8 !important;
  }

  /* Dashboard cards - Design optimisé mobile */
  .dashboard-stats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .stat-card {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .stat-card i,
  .stat-icon {
    font-size: 1.8rem !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,107,53,0.1) !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
  }

  .stat-card-content {
    flex: 1 !important;
  }

  .stat-value {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
  }

  .stat-label {
    font-size: 0.8rem !important;
    opacity: 0.7 !important;
  }

  /* User info mobile - En haut sticky */
  .sidebar-user {
    display: none !important;
  }

  /* Navbar mobile sticky */
  .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99 !important;
  }

  /* ---- MESSAGERIE MOBILE ---- */
  /* Grid messagerie: Passer en colonne sur mobile */
  #section-messaging > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    height: calc(100vh - 180px) !important; /* Hauteur viewport - header - nav */
  }

  /* Par défaut sur mobile: afficher la liste */
  #section-messaging > div > div:first-child {
    display: flex !important;
  }

  #section-messaging > div > div:last-child {
    display: none !important;
  }

  /* Quand conversation ouverte: masquer liste, afficher thread */
  #section-messaging.show-conversation > div > div:first-child {
    display: none !important;
  }

  #section-messaging.show-conversation > div > div:last-child {
    display: flex !important;
  }

  /* Thread messages: Plein écran sur mobile */
  #messageThread {
    height: calc(100vh - 180px) !important;
  }

  /* Bouton retour mobile visible */
  .mobile-back-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Ajuster le header conversation */
  #messageThread > div:first-child {
    padding: 16px 12px !important;
  }

  /* Ajuster le formulaire messagerie sur mobile */
  #messageThread form {
    padding: 10px 12px !important;
  }

  #messageThread textarea {
    font-size: 16px !important; /* Évite le zoom iOS */
  }

  /* Messages plus compacts */
  #messagesContainer {
    padding: 16px 12px !important;
  }

  /* Avatar conversations plus petit */
  .conversation-item div[style*="width:48px"] {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.9rem !important;
  }

  /* ---- SECTIONS DASHBOARD ---- */
  .dashboard-section {
    margin-bottom: 20px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* Tables responsive */
  .dashboard-table,
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }

  table th,
  table td {
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
  }

  /* Boutons d'action empilés */
  .action-buttons,
  .btn-group {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .action-buttons .btn,
  .btn-group .btn {
    width: 100% !important;
  }

  /* Cards listes (réservations, etc.) */
  .booking-card,
  .request-card,
  .list-card {
    padding: 12px !important;
    margin-bottom: 10px !important;
  }

  .booking-card h4,
  .request-card h4,
  .list-card h4 {
    font-size: 1rem !important;
  }

  /* Status badges plus petits */
  .badge,
  .status-badge {
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
  }

  /* Calendrier mobile */
  .calendar,
  .availability-calendar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Formulaires dans dashboard */
  .dashboard-form .form-row {
    grid-template-columns: 1fr !important;
  }

  .dashboard-form input,
  .dashboard-form select,
  .dashboard-form textarea {
    font-size: 16px !important; /* Évite zoom iOS */
  }

  /* Profil edition mobile */
  .profile-edit-grid {
    grid-template-columns: 1fr !important;
  }

  .profile-photo-upload {
    max-width: 100% !important;
    margin: 0 auto 20px !important;
  }

  /* Stats en grille compacte si plusieurs */
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Empty states */
  .empty-state {
    padding: 30px 20px !important;
  }

  .empty-state svg,
  .empty-state img {
    max-width: 150px !important;
  }

  .empty-state h3 {
    font-size: 1.1rem !important;
  }

  .empty-state p {
    font-size: 0.85rem !important;
  }

  /* QR Code section : passe en 1 colonne */
  .qr-grid {
    grid-template-columns: 1fr !important;
  }

  /* Devis : parties artisan/client en 1 colonne */
  .devis-parties-grid {
    grid-template-columns: 1fr !important;
  }

  /* Devis : en-tête tableau masqué sur mobile */
  .devis-table-header {
    display: none !important;
  }

  /* Chaque ligne de prestation devient une carte sur mobile */
  #devisLines > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    background: #F9FAFB;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #E5E7EB;
  }

  /* Désignation : pleine largeur */
  #devisLines > div > *:first-child {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Qté */
  #devisLines > div > *:nth-child(2) { flex: 0 0 64px !important; }

  /* PU HT */
  #devisLines > div > *:nth-child(3) { flex: 1 1 90px !important; }

  /* TVA */
  #devisLines > div > *:nth-child(4) { flex: 0 0 72px !important; }

  /* Total TTC (readonly) */
  #devisLines > div > *:nth-child(5) { flex: 1 1 90px !important; }

  /* Bouton supprimer */
  #devisLines > div > *:last-child { flex: 0 0 32px !important; }

  /* Stats dashboard artisan : 2 colonnes au lieu de 3 */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Booking cards footer : empile les boutons sur mobile */
  .booking-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .booking-actions-primary,
  .booking-actions > div {
    width: 100% !important;
  }

  .booking-actions button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ---- Mobile (max 480px) ---- */
@media (max-width: 480px) {
  :root {
    --space-6: 48px;
    --space-7: 60px;
  }

  /* Section partage/referral responsive */
  .referral-box {
    padding: var(--space-3) !important;
  }
  .referral-link-row {
    flex-direction: column !important;
  }
  .referral-link-row input {
    font-size: 0.8rem !important;
  }
  .referral-link-row button {
    width: 100% !important;
    min-width: unset !important;
  }

  .container {
    padding: 0 var(--space-3);
  }

  /* Typographie */
  h1 {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.4rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.15rem;
  }

  p, li {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Navigation mobile */
  .nav-logo {
    font-size: 1.3rem;
  }

  .nav-logo-icon {
    width: 36px;
    height: 36px;
  }

  /* Menu latéral - ajustement petits écrans */
  .nav-links {
    width: 260px;
    padding: 80px var(--space-3) 50px;
  }

  .nav-links a {
    padding: 14px var(--space-2);
    font-size: 0.95rem;
  }

  /* Menu utilisateur - ajustements petits écrans */
  .nav-actions .user-greeting {
    padding: 8px 12px;
    font-size: 0.8rem;
    max-width: 130px;
    gap: 6px;
  }

  .nav-actions .user-greeting i {
    font-size: 1rem;
  }

  .nav-actions #logoutBtn {
    padding: 8px 12px;
  }

  /* Hero */
  .hero {
    padding: 90px 0 50px;
  }

  .hero h1 {
    font-size: 1.75rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero-search {
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .hero-stats {
    gap: var(--space-2);
    justify-content: center;
  }

  .hero-stat {
    min-width: 140px;
  }

  .hero-stat strong {
    font-size: 1.3rem;
  }

  /* Boutons */
  .btn {
    font-size: 0.95rem;
    padding: 12px 18px;
  }

  .btn-lg {
    padding: 14px 24px;
    font-size: 1.05rem;
  }

  /* Cards */
  .service-card {
    padding: var(--space-3);
  }

  .service-card-icon {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }

  .service-card h3 {
    font-size: 1.1rem;
  }

  .artisan-card {
    padding: var(--space-3);
  }

  .artisan-avatar {
    width: 70px;
    height: 70px;
    font-size: 1.6rem;
  }

  /* Stats */
  .stat-block .stat-value {
    font-size: 2rem;
  }

  /* Forms */
  .form-control,
  input,
  select,
  textarea {
    font-size: 16px; /* Évite le zoom automatique sur iOS */
  }

  /* Sections */
  .section {
    padding: var(--space-5) 0;
  }

  /* CTA */
  .cta-banner {
    padding: var(--space-4) var(--space-3);
  }

  .cta-banner h2 {
    font-size: 1.4rem;
  }

  .cta-banner .btn {
    width: 100%;
  }

  /* Footer */
  .footer {
    padding: var(--space-5) 0 var(--space-4);
  }

  .footer-grid {
    gap: var(--space-3);
  }

  /* Grilles */
  .grid-2,
  .grid-3,
  .grid-4 {
    gap: var(--space-2);
  }

  /* Nav toggle animation */
  .nav-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Espacement réduit */
  .section-header {
    margin-bottom: var(--space-3);
  }

  /* Amélioration du scroll */
  html {
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }

  /* Éviter les débordements */
  * {
    max-width: 100%;
  }

  img,
  video,
  iframe {
    width: 100%;
    height: auto;
  }

  /* Bottom nav encore plus compact */
  .mobile-nav-item {
    min-width: 60px !important;
    padding: 6px 6px !important;
  }

  .mobile-nav-item span {
    font-size: 0.65rem !important;
  }

  .mobile-nav-item i {
    font-size: 1.15rem !important;
  }

  /* Stats cards ultra-compact */
  .stat-card {
    padding: 12px 14px !important;
    gap: 12px !important;
  }

  .stat-card i,
  .stat-icon {
    font-size: 1.5rem !important;
    width: 42px !important;
    height: 42px !important;
  }

  .stat-value {
    font-size: 1.4rem !important;
  }

  .stat-label {
    font-size: 0.75rem !important;
  }

  /* Dashboard content encore plus serré */
  .dashboard-content {
    padding: 12px 10px 90px !important;
  }

  .dash-header h2 {
    font-size: 1.25rem !important;
  }

  .dash-header p {
    font-size: 0.8rem !important;
  }

  /* Stats en grille 1 col sur très petit écran */
  .stats-row {
    grid-template-columns: 1fr !important;
  }

  /* Formulaires messagerie */
  #messageThread form button {
    width: 42px !important;
    height: 42px !important;
    font-size: 0.95rem !important;
  }

  /* Profil artisan - Galerie responsive */
  .portfolio-grid,
  div[id*="portfolio"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Tables responsive */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Login/Register forms */
  .auth-container,
  .login-container,
  .register-container {
    padding: 20px 16px !important;
    margin: 20px 12px !important;
  }

  /* ---- PROFIL ARTISAN ---- */
  .profile-hero {
    padding: 100px 0 50px !important;
  }

  .profile-hero-layout {
    flex-direction: column !important;
    text-align: center !important;
    gap: 24px !important;
  }

  .profile-avatar {
    width: 100px !important;
    height: 100px !important;
    font-size: 2.5rem !important;
  }

  .profile-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .profile-stat {
    padding: 12px !important;
  }

  .profile-content {
    flex-direction: column !important;
  }

  .profile-sidebar {
    width: 100% !important;
  }

  .profile-main {
    width: 100% !important;
  }

  /* Portfolio/Galerie */
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Boutons CTA profil */
  .profile-cta-buttons {
    flex-direction: column !important;
  }

  .profile-cta-buttons .btn {
    width: 100% !important;
  }

  /* ---- FORMULAIRES ---- */
  .form-container {
    max-width: 100% !important;
    padding: 20px 16px !important;
  }

  .auth-tabs {
    flex-direction: column !important;
  }

  .auth-tabs button {
    width: 100% !important;
    border-radius: 8px !important;
  }

  /* ---- SERVICES PAGE ---- */
  .services-grid {
    grid-template-columns: 1fr !important;
  }

  .service-card-large {
    padding: 20px !important;
  }

  /* ---- CONTACT PAGE ---- */
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  .contact-info-card {
    text-align: center !important;
  }

  /* ---- NAVIGATION FIXED ---- */
  .navbar {
    padding: 12px 0 !important;
  }

  .nav-logo {
    font-size: 1.2rem !important;
  }
}

/* ---- Très petit mobile (max 375px) ---- */
@media (max-width: 375px) {
  .container {
    padding: 0 var(--space-2);
  }

  h1 {
    font-size: 1.6rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  .hero h1 {
    font-size: 1.6rem;
  }

  .btn-lg {
    font-size: 1rem;
    padding: 13px 20px;
  }

  .service-card-icon {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
  }

  .hero-stat {
    min-width: 120px;
  }
}

/* ---- Desktop (min 769px) - Masquer bottom nav ---- */
@media (min-width: 769px) {
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* ---- Desktop large (min 1200px) ---- */
@media (min-width: 1200px) {
  .hero-content {
    max-width: 750px;
  }
}

/* ===== AMÉLIORATIONS TACTILES GLOBALES ===== */
@media (max-width: 768px) {
  /* Feedback tactile sur tous les éléments cliquables */
  a, button, .btn, .card, .clickable {
    -webkit-tap-highlight-color: rgba(255,107,53,0.2);
    user-select: none;
    -webkit-user-select: none;
  }

  /* Active state visuel */
  a:active, button:active, .btn:active {
    opacity: 0.8;
    transform: scale(0.98);
  }

  /* Amélioration du scroll */
  * {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Éviter le zoom accidentel sur double-tap */
  * {
    touch-action: manipulation;
  }

  /* Pull-to-refresh désactivé (évite conflit) */
  body {
    overscroll-behavior-y: contain;
    padding-bottom: 80px;
  }

  /* Inputs - Style iOS-friendly */
  input, select, textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 8px;
  }

  /* Hide scrollbar mais garde fonctionnalité */
  .dashboard-nav::-webkit-scrollbar,
  .sidebar-nav::-webkit-scrollbar {
    height: 2px;
  }

  .dashboard-nav::-webkit-scrollbar-thumb,
  .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,107,53,0.3);
    border-radius: 10px;
  }

  /* Focus visible pour accessibilité */
  *:focus-visible {
    outline: 2px solid #FF6B35;
    outline-offset: 2px;
  }

  /* Cards - Effet press */
  .stat-card:active,
  .service-card:active,
  .artisan-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Boutons flottants */
  .floating-action-btn {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35, #F77F00);
    box-shadow: 0 4px 20px rgba(255,107,53,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    z-index: 98;
    border: none;
    cursor: pointer;
  }

  .floating-action-btn:active {
    transform: scale(0.95);
  }
}