/* ============================
   MXBZH - CSS RESPONSIVE
   Nouvelle DA Mobile 2024
   ============================ */

/* ========== TABLETTE (max 1024px) ========== */
@media (max-width: 1024px) {
  .browse-layout {
    grid-template-columns: 1fr 1fr;
  }

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

  .about-visual {
    order: -1;
  }

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

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

  .manage-modal-content {
    max-width: 95vw !important;
    max-height: 95vh !important;
  }
}

/* ========== TABLETTE PETITE (max 950px) ========== */
@media (max-width: 950px) {

  .hero-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 5rem;
  }

  .hero-card {
    order: -1;
  }
}

/* ========== PRE-MOBILE (max 900px) ========== */
@media (max-width: 900px) {
  .browse-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .browse-map {
    height: 350px;
    order: -1;
  }

  .terrain-detail-layout,
  .manage-field-row {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   MOBILE - NOUVELLE DA APP NATIVE
   ======================================== */
@media (max-width: 768px) {

  /* ===== VARIABLES MOBILE ===== */
  :root {
    --mobile-padding: 20px;
    --mobile-radius: 16px;
    --mobile-radius-lg: 24px;
  }

  /* FIX ANTI-ZOOM SAFARI IOS */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* ===== NAVBAR - Style flottant mobile ===== */
  .floating-navbar {
    position: fixed;
    /* Safe area pour iPhone avec encoche/Dynamic Island */
    top: 12px;
    top: max(12px, env(safe-area-inset-top, 12px));
    left: 12px;
    right: 12px;
    -webkit-transform: none !important;
    transform: none !important;
    width: auto;
    min-width: auto;
    padding: 0 16px;
    height: 56px;
    gap: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    perspective: none !important;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    justify-content: space-between;
    align-items: center;
    overflow: visible !important;
    contain: none !important;
    z-index: 10002 !important;
    /* Forcer le rendu GPU sur Safari iOS */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .floating-navbar:hover {
    transform: none;
  }

  .floating-navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12);
  }

  /* Logo mobile - TAILLE OPTIMALE */
  .floating-navbar-logo {
    display: flex;
    align-items: center;
  }

  .floating-navbar-logo img,
  .navbar-logo-img {
    height: 12px !important;
    margin: 0;
  }
  
  .logo-text {
    font-size: 1.3rem !important;
  }

  /* Menu hamburger */
  .floating-nav-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    z-index: 9999999 !important;
    position: relative;
  }

  .floating-nav-toggle:active {
    background: rgba(0, 0, 0, 0.05);
  }

  .floating-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #1a1a1a;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
  }

  .floating-nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .floating-nav-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .floating-nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* ===== SIDEBAR MOBILE PREMIUM ===== */

  /* Container de la sidebar - Wrapper avec espace en haut */
  .floating-nav-links {
    position: fixed !important;
    top: 88px !important;
    right: 20px !important;
    bottom: 20px !important;
    left: 20px !important;
    width: auto !important;
    max-width: calc(100vw - 40px) !important;
    min-width: auto !important;
    height: auto !important;
    max-height: calc(100dvh - 108px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s;
    z-index: 1000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
  }

  .floating-nav-links.open {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  /* Dashboard - forcer l'affichage du menu ouvert */
  .dashboard-page .floating-nav-links.open {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 88px !important;
    left: 20px !important;
    right: 20px !important;
    z-index: 999998 !important;
  }

  /* Backdrop transparent - Pas de filtre bleu */
  body.nav-open::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: transparent !important;
    z-index: 999 !important;
    pointer-events: none !important;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  /* Cacher la croix sur la carte */
  .floating-nav-links::before {
    display: none !important;
  }

  /* Wrapper pour les liens - UNE SEULE carte comme GDR */
  .floating-nav-link {
    display: block !important;
    width: 100% !important;
    padding: 20px 32px !important;
    margin: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-align: left !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Premier lien - coins arrondis en haut */
  .floating-nav-link:first-of-type {
    border-radius: 32px 32px 0 0 !important;
    padding-top: 28px !important;
  }

  /* Dernier lien - coins arrondis en bas */
  .floating-nav-link:last-of-type {
    border-radius: 0 0 32px 32px !important;
    padding-bottom: 28px !important;
  }

  /* Si un seul lien */
  .floating-nav-link:only-of-type {
    border-radius: 32px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* Enlever le gap entre les liens pour qu'ils soient collés */
  .floating-nav-link+.floating-nav-link {
    margin-top: -1px !important;
    box-shadow: none !important;
  }

  .floating-nav-link:hover,
  .floating-nav-link:active {
    color: rgba(255, 255, 255, 0.95) !important;
    transform: none !important;
  }

  .floating-nav-link.active {
    color: #ffffff !important;
    font-weight: 600 !important;
  }

  /* Bouton compte connecté - Carte séparée en bas */
  .floating-nav-account {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 60px !important;
    margin: 16px 0 0 0 !important;
    padding: 0 24px !important;
    border-radius: 32px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
  }

  .floating-nav-account .account-name {
    color: #10b981 !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
  }

  .floating-nav-account .account-status-dot {
    width: 8px !important;
    height: 8px !important;
    background: #10b981 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6) !important;
  }

  /* Groupe boutons auth - Cartes séparées en bas */
  .floating-nav-auth-group {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
  }

  .floating-nav-auth {
    width: 100% !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    border-radius: 32px !important;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4) !important;
    transition: all 0.2s ease !important;
    z-index: 1 !important;
    position: relative !important;
  }

  .floating-nav-auth:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 10px 28px rgba(59, 130, 246, 0.5) !important;
    transform: translateY(-2px) !important;
  }

  .floating-nav-auth svg {
    width: 20px !important;
    height: 20px !important;
    color: #ffffff !important;
  }

  /* Cacher le bouton "Voir les terrains" sur mobile (sauf dashboard) */
  .floating-nav-auth-cta {
    display: none !important;
  }
  
  /* Afficher le bouton dans le dashboard */
  .dashboard-page .floating-nav-auth-cta {
    display: flex !important;
  }

  /* ===== HERO - Immersif ===== */
  .hero {
    min-height: 100dvh;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-grid.hero-centered {
    width: 100%;
    padding: 0 var(--mobile-padding);
  }

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

  .hero-content h1 {
    font-family: 'Clash Display', 'Sora', sans-serif;
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
  }

  .hero-highlight {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hero-description {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 24px;
    max-width: 100%;
  }

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

  .btn-hero-primary {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50px;
    justify-content: center;
  }

  .btn-hero-primary svg {
    width: 16px;
    height: 16px;
  }

  .btn-hero-secondary {
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 50px;
  }

  .btn-typewriter {
    min-width: auto;
    width: 100%;
  }

  /* ===== SECTIONS ===== */
  .section,
  section {
    padding: 56px 0;
  }

  .container {
    width: 100%;
    padding: 0 var(--mobile-padding);
  }

  .section-header {
    margin-bottom: 28px;
    text-align: center;
    padding: 0;
  }

  .section-header h2 {
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
  }

  .section-text,
  .section-subtitle {
    font-size: 0.95rem;
    text-align: center;
  }

  /* Section Dispos */
  #dispos {
    padding: 40px 0 56px;
    background: #f8fafc;
  }

  #dispos .section-header h2 {
    font-size: 1.5rem;
  }

  /* ===== CARTES TERRAIN - Style App ===== */
  .terrains-grid,
  .cards-grid {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    padding: 0;
  }

  .tc-card,
  .terrain-card {
    display: flex !important;
    flex-direction: column;
    border-radius: var(--mobile-radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    border: none;
    min-height: auto;
    transition: transform 0.2s ease;
  }

  .tc-card:active,
  .terrain-card:active {
    transform: scale(0.98);
  }

  .tc-card:hover,
  .terrain-card:hover {
    transform: none;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  }

  .tc-card-media,
  .terrain-card-carousel {
    aspect-ratio: 16/10;
    border-radius: 0;
  }

  .tc-card-body,
  .terrain-card-body {
    padding: 16px 20px 20px;
    gap: 8px;
  }

  .tc-card-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }

  .tc-card-title,
  .terrain-card-name {
    font-size: 1.1rem;
    font-weight: 600;
  }

  .tc-card-tag,
  .terrain-card-tag {
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 100px;
  }

  .tc-card-subtitle,
  .terrain-card-location {
    font-size: 0.9rem;
    color: #64748b;
  }

  .tc-card-cta,
  .terrain-card-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, #0f4aa3 0%, #1a67e3 100%);
    color: #fff;
    overflow-x: hidden !important;
  }

  .success-icon-wrapper {
    width: 60px !important;
    height: 60px !important;
  }

  .success-icon {
    width: 60px !important;
    height: 60px !important;
  }

  .success-title {
    font-size: 1.5rem !important;
  }

  .success-message {
    font-size: 0.95rem !important;
  }

  /* ===== BROWSE - Liste + Carte ===== */
  .browse-section {
    padding: 0;
    background: #f8fafc;
  }

  .browse-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    height: auto;
    max-height: none;
  }

  .browse-sidebar {
    order: 2;
    border-radius: 0;
    border: none;
    background: #fff;
    max-height: none;
    height: auto;
  }

  .browse-header {
    padding: 20px var(--mobile-padding) 12px;
  }

  .browse-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
  }

  .browse-filters {
    padding: 0 var(--mobile-padding) 16px;
    border-bottom: none;
  }

  .search-box {
    width: 100%;
    border-radius: 14px;
    background: #f1f5f9;
    border: none;
    box-shadow: none;
  }

  .search-box input {
    padding: 14px 16px;
    font-size: 16px;
    background: transparent;
  }

  .search-toggle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin: 4px;
    border-radius: 10px;
  }

  .filter-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: 12px;
  }

  .filter-row::-webkit-scrollbar {
    display: none;
  }

  .filter-select,
  .filter-chip {
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 100px;
    border: 1px solid #e2e8f0;
    background: #fff;
    white-space: nowrap;
  }

  .filter-chip.active {
    background: #0f4aa3;
    border-color: #0f4aa3;
    color: #fff;
  }

  .browse-count {
    padding: 12px var(--mobile-padding);
    font-size: 0.85rem;
    border-bottom: 1px solid #f1f5f9;
  }

  .browse-list {
    padding: var(--mobile-padding);
    gap: 12px;
    max-height: none;
    overflow: visible;
  }

  /* Carte map */
  .browse-map {
    order: 1;
    height: 280px;
    border-radius: 0;
    margin: 0;
  }

  .browse-map #osm-map,
  #osm-map {
    height: 280px;
    border-radius: 0;
  }

  /* Terrain item dans liste */
  .terrain-item {
    padding: 14px;
    border-radius: var(--mobile-radius);
    gap: 14px;
  }

  .terrain-item-img {
    width: 90px;
    height: 70px;
    border-radius: 10px;
  }

  .terrain-item-name {
    font-size: 1rem;
  }

  /* ===== ABOUT ===== */
  .about-section {
    padding: 56px 0;
  }

  .about-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .about-visual {
    order: -1;
    padding: 0 var(--mobile-padding);
  }

  .about-video-wrapper {
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 3/4;
    max-height: 400px;
  }

  .about-content {
    padding: 0 var(--mobile-padding);
  }

  .about-badge {
    font-size: 0.8rem;
    padding: 6px 14px;
  }

  .about-title {
    font-size: 1.75rem;
    line-height: 1.15;
    margin-bottom: 12px;
  }

  .about-description {
    font-size: 1rem;
    margin-bottom: 24px;
  }

  .about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 24px 0;
    padding: 20px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

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

  .about-stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f4aa3;
  }

  .about-stat-label {
    font-size: 0.8rem;
    color: #64748b;
  }

  .about-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .about-feature {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--mobile-radius);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
  }

  .about-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  }

  .about-feature-icon svg {
    width: 22px;
    height: 22px;
    color: white !important;
  }

  .about-feature-text h4 {
    font-size: 0.95rem;
    margin-bottom: 2px;
  }

  .about-feature-text p {
    font-size: 0.85rem;
  }

  /* ===== CONTACT ===== */
  .contact-section {
    padding: 56px 0;
  }

  .contact-header {
    text-align: center;
    padding: 0 var(--mobile-padding);
    margin-bottom: 32px;
  }

  .contact-title {
    font-size: 1.75rem;
  }

  .contact-subtitle {
    text-align: center;
    max-width: 100%;
  }

  .contact-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 var(--mobile-padding);
    align-items: center;
  }

  .contact-form {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .contact-form>* {
    width: 100%;
    max-width: 400px;
  }

  .contact-input-group {
    border-bottom: none;
    margin-bottom: 12px;
  }

  .contact-input-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #e2e8f0 !important;
    margin-bottom: 0.5rem;
  }

  .contact-form input,
  .contact-form textarea {
    width: 100%;
    padding: 14px 16px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(30, 41, 59, 0.6) !important;
    color: #f1f5f9 !important;
  }

  .contact-form input::placeholder,
  .contact-form textarea::placeholder {
    color: #64748b !important;
  }

  .contact-form input:focus,
  .contact-form textarea:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    background: rgba(30, 41, 59, 0.8) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
  }

  .contact-btn-dark {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 14px;
    margin-top: 16px;
  }

  .contact-info {
    padding: 0;
    text-align: center;
  }

  .contact-info-block {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .contact-info-block h4 {
    color: #ffffff !important;
  }

  .contact-info-block p {
    color: rgba(255, 255, 255, 0.7) !important;
  }

  .contact-socials {
    justify-content: center;
  }

  /* ===== MODALS ===== */
  .modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 88px !important;
    overflow: hidden !important;
  }

  .modal-backdrop {
    display: none !important;
  }

  .modal-content {
    width: calc(100% - 40px) !important;
    max-width: 520px !important;
    height: auto !important;
    max-height: calc(100vh - 108px) !important;
    margin: 0 !important;
    border-radius: 24px !important;
    padding: 0 !important;
    position: fixed !important;
    top: 88px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    overflow-y: auto !important;
  }

  /* Exception pour modal profil */
  #profileModal .modal-content {
    width: 70vw !important;
    max-width: 70vw !important;
    padding: 0.75rem 0.75rem !important;
    max-height: 50vh !important;
  }

  /* Forcer le positionnement pour tous les modals auth */
  #modalLogin,
  #modalRegister,
  .modal-compte,
  #compteModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 88px !important;
    overflow: hidden !important;
  }

  #modalLogin .modal-content,
  #modalRegister .modal-content,
  .modal-compte .modal-content,
  #compteModal .modal-content {
    width: calc(100% - 40px) !important;
    max-width: 480px !important;
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
    margin: 0 !important;
    border-radius: 20px !important;
    padding: 0 !important;
    position: fixed !important;
    top: 88px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    overflow-y: auto !important;
  }

  /* Optimiser le formulaire d'inscription sur mobile */
  .auth-card-dark {
    padding: 20px 18px !important;
  }

  .auth-card-dark h2 {
    font-size: 1.4rem !important;
    margin-bottom: 6px !important;
  }

  .auth-card-dark .auth-subtitle {
    font-size: 0.85rem !important;
    margin-bottom: 16px !important;
  }

  .auth-toggle-switcher {
    margin-bottom: 16px !important;
    padding: 3px !important;
    border-radius: 12px !important;
  }

  .auth-toggle-btn {
    padding: 9px 18px !important;
    font-size: 0.85rem !important;
    border-radius: 9px !important;
  }

  .auth-form-dark {
    gap: 12px !important;
  }

  .auth-field label {
    font-size: 0.8rem !important;
    margin-bottom: 4px !important;
  }

  .auth-field input,
  .auth-field select {
    padding: 10px 12px !important;
    font-size: 16px !important;
    /* FIX iOS: empêche le zoom auto */
    border-radius: 10px !important;
  }

  .auth-form-row {
    gap: 10px !important;
  }

  .btn-auth-submit {
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
    margin-top: 8px !important;
  }

  /* Pas de backdrop pour les modals auth sur mobile */
  #modalLogin .modal-backdrop,
  #modalRegister .modal-backdrop,
  .modal-compte .modal-backdrop,
  #compteModal .modal-backdrop {
    display: none !important;
  }

  /* Auth card dark doit être centré */
  .modal-compte .auth-card-dark {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .modal-close {
    display: none !important;
  }

  /* Close button pour modal compte dark - CACHÉ sur mobile */
  .modal-compte .modal-close,
  #compteModal .modal-close {
    display: none !important;
  }

  /* Modal profil - Bottom sheet BLEU NUIT */
  .modal-profile {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    height: auto !important;
    max-height: 42vh !important;
    border-radius: var(--mobile-radius-lg) var(--mobile-radius-lg) 0 0;
    padding: 10px 16px 18px;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    background: linear-gradient(145deg,
        rgba(15, 23, 42, 0.98) 0%,
        rgba(20, 30, 50, 0.98) 100%) !important;
  }

  .modal-profile::before {
    display: none !important;
    /* Cacher la barre de drag */
  }

  .profile-modal-content h2 {
    font-family: 'Sora', sans-serif !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    margin-bottom: 2px !important;
    text-align: center !important;
    font-weight: 600 !important;
  }

  .profile-email {
    font-family: 'Sora', sans-serif !important;
    color: #ffffff !important;
    opacity: 0.6 !important;
    font-size: 0.68rem !important;
    margin-bottom: 0.4rem !important;
    text-align: center !important;
    word-break: break-word !important;
  }

  .profile-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    margin: 0 auto 0.4rem !important;
    display: block !important;
  }

  .profile-main-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .profile-divider {
    background: rgba(255, 255, 255, 0.1) !important;
    margin: 0.4rem 0 !important;
  }

  .profile-menu {
    gap: 5px !important;
    padding: 0 14px !important;
  }

  .profile-menu-item {
    padding: 8px 18px !important;
    border-radius: 10px !important;
    background: rgba(30, 41, 59, 0.4) !important;
    border: 2px solid rgba(59, 130, 246, 0.3) !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Carte bleue pour Mon Compte */
  .profile-menu-item:has(.profile-menu-icon.blue) {
    background: rgba(59, 130, 246, 0.08) !important;
    border: 2px solid rgba(59, 130, 246, 0.4) !important;
  }

  .profile-menu-item:has(.profile-menu-icon.blue):hover,
  .profile-menu-item:has(.profile-menu-icon.blue):active {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2) !important;
  }

  /* Carte orange pour Dashboard */
  .profile-menu-item:has(.profile-menu-icon.orange) {
    background: rgba(249, 115, 22, 0.08) !important;
    border: 2px solid rgba(249, 115, 22, 0.4) !important;
  }

  .profile-menu-item:has(.profile-menu-icon.orange):hover,
  .profile-menu-item:has(.profile-menu-icon.orange):active {
    background: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(249, 115, 22, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.2) !important;
  }

  /* Carte rouge pour Déconnexion */
  .profile-menu-item:has(.profile-menu-icon.red) {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 2px solid rgba(239, 68, 68, 0.4) !important;
  }

  .profile-menu-item:has(.profile-menu-icon.red):hover,
  .profile-menu-item:has(.profile-menu-icon.red):active {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2) !important;
  }

  /* Carte violette pour Admin */
  .profile-menu-item:has(.profile-menu-icon[style*="7c3aed"]) {
    background: rgba(124, 58, 237, 0.08) !important;
    border: 2px solid rgba(124, 58, 237, 0.4) !important;
  }

  .profile-menu-item:has(.profile-menu-icon[style*="7c3aed"]):hover,
  .profile-menu-item:has(.profile-menu-icon[style*="7c3aed"]):active {
    background: rgba(124, 58, 237, 0.12) !important;
    border-color: rgba(124, 58, 237, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.2) !important;
  }

  .profile-menu-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
  }

  .profile-menu-icon svg {
    width: 15px !important;
    height: 15px !important;
    color: white !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .profile-menu-title {
    font-family: 'Sora', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-bottom: 1px !important;
  }

  .profile-menu-subtitle {
    font-family: 'Sora', sans-serif !important;
    font-size: 0.62rem !important;
    color: #94a3b8 !important;
    line-height: 1.1 !important;
  }

  .profile-menu-icon.blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow:
      0 4px 16px rgba(59, 130, 246, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }

  .profile-menu-item:hover .profile-menu-icon.blue {
    box-shadow:
      0 6px 20px rgba(59, 130, 246, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05) !important;
  }

  .profile-menu-icon.orange {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    box-shadow:
      0 4px 16px rgba(249, 115, 22, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }

  .profile-menu-item:hover .profile-menu-icon.orange {
    box-shadow:
      0 6px 20px rgba(249, 115, 22, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05) !important;
  }

  .profile-menu-icon.red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow:
      0 4px 16px rgba(239, 68, 68, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }

  .profile-menu-item:hover .profile-menu-icon.red {
    box-shadow:
      0 6px 20px rgba(239, 68, 68, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05) !important;
  }

  .profile-menu-title {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }

  .profile-menu-subtitle {
    color: #94a3b8 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* Close button pour modal profil */
  #profileModal .modal-close {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  #profileModal .modal-close:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
  }

  /* Manage modal */
  .terrain-detail-modal .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    max-height: 100%;
    border-radius: 0 !important;
  }

  .terrain-detail-layout {
    grid-template-columns: 1fr !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  .terrain-detail-close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .terrain-detail-sidebar {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    padding: 60px 20px 100px;
    background: #f8fafc;
  }

  .terrain-detail-sidebar.mobile-open {
    display: block;
    overflow-y: auto;
  }

  .terrain-detail-main {
    padding: 20px;
    padding-bottom: 100px;
  }

  .terrain-detail-header input[name="name"] {
    font-size: 1.5rem !important;
    padding: 6px 8px !important;
  }

  .terrain-detail-section {
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 16px;
  }

  .terrain-detail-section-title {
    font-size: 0.95rem;
  }

  /* Horaires mobile */
  .hours-section-manage {
    padding: 16px;
  }

  .hours-mode-toggle {
    flex-direction: column;
    gap: 4px;
  }

  .hours-mode-btn {
    padding: 12px;
  }

  .days-selector-manage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .day-btn-manage {
    padding: 10px 8px;
    font-size: 0.8rem;
  }

  .period-row-manage {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hours-inputs-manage {
    width: 100%;
    justify-content: space-between;
  }

  .hours-inputs-manage input[type="time"] {
    flex: 1;
  }

  /* Courses mobile */
  .race-item-manage {
    padding: 12px;
    gap: 12px;
  }

  .race-date-box {
    width: 48px;
    height: 48px;
  }

  .race-day {
    font-size: 1.1rem;
  }

  .race-name {
    font-size: 0.9rem;
  }

  /* Bouton flottant pour ouvrir sidebar sur mobile */
  .mobile-sidebar-toggle {
    display: flex;
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #0f4aa3 0%, #1a67e3 100%);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 150;
    box-shadow: 0 8px 24px rgba(15, 74, 163, 0.3);
  }

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

  /* ===== FILTERS ===== */
  .filters-bar {
    margin: 0 0 24px;
  }

  .filters-inner {
    flex-direction: column;
    gap: 12px;
    padding: 16px var(--mobile-padding);
    background: transparent;
    border: none;
    border-radius: 0;
  }

  .filter-group {
    width: 100%;
  }

  .filter-group select {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    border-radius: 12px;
    background: #f8fafc;
    border: none;
  }

  .filter-reset {
    width: 100%;
    padding: 14px 20px;
    border-radius: 12px;
  }

  /* ===== FOOTER ===== */
  .footer {
    padding: 32px 0;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }

  .footer-flex {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 0 var(--mobile-padding);
  }

  /* ===== DASHBOARD MOBILE CORRIGÉ ===== */
  /* Padding pour que le contenu ne soit pas caché par la navbar */
  .dashboard-page .dash-main {
    padding-top: 80px !important;
  }

  .dash-sidebar {
    display: none !important;
  }

  .dash-content {
    margin: 0 !important;
    padding: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header mobile */
  .dash-header {
    text-align: left !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.25rem;
    margin-bottom: 1.25rem !important;
    padding: 0 !important;
  }

  .dash-header h1 {
    font-size: 1.35rem !important;
    margin: 0 !important;
  }

  .dash-header p {
    font-size: 0.85rem !important;
    margin: 0 !important;
  }

  /* Grid principal - tout en colonne */
  .dash-main-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Sections */
  .dash-section {
    padding: 0.875rem !important;
    border-radius: 14px !important;
    margin: 0 auto 1.25rem auto !important;
    width: calc(100% - 1rem) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Section terrains avec plus d'espace en bas */
  .dash-section#terrains {
    margin-bottom: 1.5rem !important;
  }

  .dash-section-header {
    padding-bottom: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }

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

  .dash-badge {
    font-size: 0.7rem !important;
    padding: 0.15rem 0.5rem !important;
  }

  /* Carte terrain mobile - CENTRÉ */
  .dash-terrain-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.875rem !important;
    width: 100% !important;
  }

  .dash-terrain-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .dash-terrain-thumb {
    width: 100% !important;
    height: 140px !important;
    border-radius: 0 !important;
  }

  .dash-terrain-info {
    padding: 0.875rem !important;
  }

  .dash-terrain-info h4 {
    font-size: 1rem !important;
    margin-bottom: 0.25rem !important;
  }

  .dash-terrain-location {
    font-size: 0.8rem !important;
    margin-bottom: 0.5rem !important;
  }

  .dash-terrain-stats {
    font-size: 0.75rem !important;
    gap: 0.75rem !important;
  }

  .dash-terrain-actions {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    gap: 0.375rem !important;
  }

  .dash-btn-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
  }

  .dash-btn-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* ===== STATS SECTION MOBILE ===== */
  .dash-stats-section {
    margin-top: 0 !important;
  }

  .dash-stats-overview {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .dash-stat-overview-card {
    padding: 1rem !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dash-stat-overview-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }

  .dash-stat-overview-title {
    font-size: 0.8rem !important;
  }

  .dash-stat-overview-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .dash-stat-overview-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .dash-stat-overview-value {
    font-size: 1.75rem !important;
    margin-bottom: 0.25rem !important;
  }

  .dash-stat-overview-change,
  .dash-stat-overview-subtext {
    font-size: 0.7rem !important;
  }

  /* Aside - courses et activité */
  .dash-aside {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .dash-aside .dash-section {
    padding: 0.875rem !important;
  }

  /* Cacher le mini graphique doublon */
  .dash-analytics-card {
    display: none !important;
  }

  /* Main chart mobile */
  .dash-main-chart {
    padding: 0.875rem !important;
  }

  .dash-main-chart .dash-section-header h2 {
    font-size: 0.9rem !important;
  }

  .dash-chart-legend {
    display: none !important;
  }

  .dash-line-chart {
    margin-top: 0.75rem;
  }

  .dash-chart-wrapper {
    height: 140px !important;
  }

  .dash-chart-y-axis {
    display: none !important;
  }

  .dash-chart-x-axis span {
    font-size: 0.65rem !important;
  }

  /* Performance section */
  .dash-performance-section {
    padding: 0.875rem !important;
  }

  .dash-performance-section .dash-section-header h2 {
    font-size: 0.9rem !important;
  }

  .dash-performance-list {
    gap: 0.5rem !important;
  }

  .dash-performance-item {
    padding: 0.5rem 0 !important;
  }

  .dash-performance-name {
    font-size: 0.85rem !important;
  }

  .dash-perf-stat {
    font-size: 0.7rem !important;
  }

  .dash-performance-bar {
    height: 6px !important;
    border-radius: 3px !important;
  }

  /* Empty state */
  .dash-empty {
    padding: 1.5rem 1rem !important;
  }

  .dash-empty-icon {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 0.75rem !important;
  }

  .dash-empty-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  .dash-empty h3 {
    font-size: 0.95rem !important;
    margin-bottom: 0.25rem !important;
  }

  .dash-empty p {
    font-size: 0.8rem !important;
    margin-bottom: 1rem !important;
  }

  .dash-btn-primary {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.85rem !important;
  }

  /* Activity list */
  .dash-activity-list {
    gap: 0.5rem !important;
  }

  .dash-activity-item {
    padding: 0.5rem 0 !important;
  }

  .dash-activity-date {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
  }

  .dash-activity-date .day {
    font-size: 1rem !important;
  }

  .dash-activity-date .month {
    font-size: 0.55rem !important;
  }

  .dash-activity-info h5 {
    font-size: 0.85rem !important;
  }

  .dash-activity-info p {
    font-size: 0.75rem !important;
  }

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

  /* ===== PHOTOS TERRAIN MOBILE ===== */
  .photo-upload-zone {
    padding: 24px 16px;
    border-radius: 14px;
    margin-bottom: 16px;
  }

  .photo-upload-zone svg {
    width: 28px;
    height: 28px;
  }

  .photo-upload-zone span {
    font-size: 0.85rem;
  }

  .photos-grid-manage {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .photo-item-edit {
    border-radius: 12px;
  }

  .photo-badge-main {
    bottom: 6px;
    left: 6px;
    padding: 3px 8px;
    font-size: 0.6rem;
    border-radius: 6px;
  }

  .photo-actions {
    top: 6px;
    right: 6px;
    gap: 4px;
    opacity: 1;
  }

  .photo-delete-btn,
  .photo-set-main-btn {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }

  .photo-delete-btn svg,
  .photo-set-main-btn svg {
    width: 12px;
    height: 12px;
  }

  /* ===== ADMIN DASHBOARD MOBILE ===== */
  .admin-container {
    padding: 16px;
    max-width: 100%;
    overflow-x: hidden;
  }

  .admin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }

  .admin-header h1 {
    font-size: 1.5rem;
  }

  .admin-header-actions {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }

  .admin-header-actions a {
    text-align: center;
    padding: 12px 16px;
  }

  /* Stats grid mobile */
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
  }

  .stat-card {
    padding: 16px;
    border-radius: 14px;
    min-width: 0;
  }

  .stat-card-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    margin-bottom: 12px;
  }

  .stat-card-value {
    font-size: 1.5rem;
  }

  .stat-card-label {
    font-size: 0.8rem;
  }

  .stat-card-sub {
    font-size: 0.75rem;
  }

  /* Tabs mobile */
  .admin-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 12px;
  }

  .admin-tabs::-webkit-scrollbar {
    display: none;
  }

  .admin-tab {
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  /* Admin grid mobile */
  .admin-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .admin-section {
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 16px;
  }

  .admin-section h2 {
    font-size: 1.1rem;
    margin-bottom: 16px;
  }

  /* Chart mobile */
  .chart-container {
    height: 220px;
  }

  /* Tables mobile */
  .table-scroll {
    max-height: 400px;
    overflow-x: auto;
  }

  .admin-table {
    min-width: 500px;
  }

  .admin-table th,
  .admin-table td {
    padding: 10px 12px;
    font-size: 0.8rem;
  }

  .admin-table .page {
    max-width: 150px;
  }

  .admin-table .ip {
    font-size: 0.75rem;
    padding: 2px 6px;
  }

  /* ===== SAFE AREAS ===== */
  .floating-navbar {
    padding-top: max(0px, env(safe-area-inset-top));
    height: calc(56px + env(safe-area-inset-top));
  }

  .floating-nav-links {
    padding-top: 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }


  /* ========== PETIT MOBILE (max 480px) ========== */
  @media (max-width: 480px) {
    .hero-content h1 {
      font-size: 2rem;
    }

    .floating-nav-link {
      font-size: 1.05rem !important;
    }

    .floating-nav-links::after {
      height: 90px !important;
    }

    .section-header h2 {
      font-size: 1.5rem;
    }

    .about-title,
    .contact-title {
      font-size: 1.5rem;
    }

    .about-stat-number {
      font-size: 1.25rem;
    }

    .about-video-wrapper {
      max-height: 350px;
    }

    .dash-stats-grid,
    .dash-stats-overview {
      grid-template-columns: 1fr;
    }

    .modal-profile {
      padding: 20px 24px 32px;
      padding-bottom: max(32px, env(safe-area-inset-bottom));
    }

    /* ===== MODAL AJOUT TERRAIN - RESPONSIVE ===== */

    /* Forcer le centrage du modal */
    #addTerrainModal {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
    }

    #addTerrainModal .modal-content {
      width: calc(100vw - 24px) !important;
      max-width: 400px !important;
      max-height: calc(100vh - 40px) !important;
      border-radius: 14px !important;
      margin: 0 !important;
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
    }

    #addTerrainModal.active .modal-content {
      transform: translate(-50%, -50%) !important;
    }

    .add-terrain-header {
      padding: 0.5rem 0.75rem !important;
    }

    #addTerrainModal .add-terrain-header h2 {
      font-size: 0.85rem !important;
    }

    .add-terrain-header .modal-close {
      width: 26px !important;
      height: 26px !important;
      font-size: 0.8rem !important;
    }

    .wizard-progress {
      padding: 0.4rem 0.5rem !important;
      gap: 0.15rem !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }

    .wizard-step {
      padding: 0.2rem 0.35rem !important;
      flex-shrink: 0 !important;
    }

    .wizard-step-num {
      width: 15px !important;
      height: 15px !important;
      font-size: 0.5rem !important;
    }

    .wizard-step-label {
      font-size: 0.55rem !important;
      display: none !important;
    }

    .wizard-step.active .wizard-step-label {
      display: block !important;
    }

    .add-terrain-body {
      padding: 0.5rem 0.75rem !important;
      max-height: calc(100vh - 180px) !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }

    .wizard-panel-title {
      font-size: 0.75rem !important;
      margin-bottom: 0.5rem !important;
    }

    .form-row {
      grid-template-columns: 1fr !important;
      gap: 0.4rem !important;
    }

    .contact-row {
      grid-template-columns: 1fr !important;
      gap: 0.4rem !important;
    }

    #addTerrainModal .add-terrain-form label {
      font-size: 0.65rem !important;
      margin-bottom: 0.25rem !important;
    }

    #addTerrainModal .add-terrain-form input,
    #addTerrainModal .add-terrain-form textarea,
    #addTerrainModal .add-terrain-form select {
      padding: 7px 9px !important;
      font-size: 0.7rem !important;
    }

    #addTerrainModal .add-terrain-form {
      gap: 0.4rem !important;
    }

    /* STEP 3: Schedule - Mobile optimized */
    .schedule-container {
      gap: 0 !important;
    }

    .schedule-day {
      padding: 10px 12px !important;
      gap: 8px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
    }

    .schedule-toggle {
      min-width: 65px !important;
      max-width: 65px !important;
      flex-shrink: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 4px !important;
    }

    .toggle-label {
      width: 32px !important;
      height: 18px !important;
    }

    .toggle-label::before {
      width: 14px !important;
      height: 14px !important;
    }

    .toggle-input:checked+.toggle-label::before {
      transform: translateX(14px) !important;
    }

    .schedule-day-name {
      font-size: 0.6rem !important;
    }

    .schedule-times {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      flex: 1 !important;
      justify-content: flex-start !important;
      flex-wrap: nowrap !important;
      min-width: 0 !important;
    }

    .schedule-time-input {
      padding: 8px 10px !important;
      font-size: 0.75rem !important;
      min-width: 85px !important;
      max-width: 85px !important;
      flex-shrink: 0 !important;
      text-align: center !important;
    }

    .schedule-arrow {
      font-size: 0.75rem !important;
      flex-shrink: 0 !important;
      margin: 0 !important;
    }

    .schedule-closed {
      flex-shrink: 0 !important;
      text-align: center !important;
      padding: 5px 14px !important;
      font-size: 0.7rem !important;
      min-width: 50px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    /* STEP 4: Pricing sliders */
    .pricing-sliders {
      gap: 1rem !important;
    }

    .pricing-row {
      grid-template-columns: 1fr !important;
      gap: 0.4rem !important;
    }

    .pricing-input-group {
      width: 100% !important;
    }

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

    .slider-value {
      font-size: 0.75rem !important;
    }

    .price-slider {
      height: 6px !important;
    }

    .price-slider::-webkit-slider-thumb {
      width: 18px !important;
      height: 18px !important;
    }

    .price-slider::-moz-range-thumb {
      width: 18px !important;
      height: 18px !important;
    }

    /* Navigation buttons - Stack on mobile */
    .wizard-nav {
      flex-direction: column-reverse !important;
      gap: 0.4rem !important;
      margin-top: 0.6rem !important;
      padding-top: 0.6rem !important;
    }

    .wizard-nav .btn-secondary,
    .wizard-nav .btn-primary {
      width: 100% !important;
      justify-content: center !important;
      margin-left: 0 !important;
      padding: 10px 16px !important;
      font-size: 0.8rem !important;
    }

    /* ===== FIX SCROLL HORIZONTAL (ULTIME) ===== */
    html,
    body {
      overflow-x: hidden !important;
      width: 100% !important;
      max-width: 100vw !important;
      position: relative !important;
      touch-action: pan-y !important;
    }

    /* Conteneur principal */
    #app,
    main,
    .main-container {
      width: 100% !important;
      overflow-x: hidden !important;
    }

    /* ===== MODAL SUCCÈS - CENTRAGE MOBILE ABSOLU (METHODE EPROUVEE) ===== */
    #successModal,
    .modal[id*="delete"] {
      display: block !important;
      /* Pas de flex/grid sur le container pour éviter les bugs iOS */
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      height: 100dvh !important;
      z-index: 10000 !important;
      background: rgba(0, 0, 0, 0.5);
      /* Backdrop */
      pointer-events: auto !important;
    }

    /* Modal parent doit aussi avoir overflow visible */
    .modal.active#successModal {
      overflow: visible !important;
    }

    /* L'enfant modal centré absolument */
    .success-modal-content,
    .delete-success-modal-content,
    #deleteTerrainModal .modal-content {
      position: fixed !important;
      /* Position fixe par rapport à l'écran */
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      /* Centrage parfait */
      margin: 0 !important;

      width: 85vw !important;
      max-width: 320px !important;
      max-height: 80vh !important;
      padding: 2rem 1.5rem !important;
      border-radius: 24px !important;
      z-index: 10001 !important;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;

      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      animation: none !important;
      overflow: visible !important;
    }

    /* Star border pour success modal en responsive - bordure plus épaisse et visible */
    .success-modal-content.star-border-card::before {
      content: '' !important;
      display: block !important;
      position: absolute !important;
      top: -4px !important;
      left: -4px !important;
      right: -4px !important;
      bottom: -4px !important;
      border-radius: 28px !important;
      padding: 3px !important;
      background: conic-gradient(from var(--star-angle, 0deg),
          transparent 0%,
          transparent 50%,
          #3b82f6 60%,
          #6366f1 68%,
          #8b5cf6 76%,
          #a855f7 84%,
          #c084fc 92%,
          transparent 100%) !important;
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
      mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
      -webkit-mask-composite: xor !important;
      mask-composite: exclude !important;
      animation: star-rotate 4s linear infinite !important;
      z-index: -1 !important;
      pointer-events: none !important;
    }

    /* Backdrop */
    .modal-backdrop {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: -1 !important;
    }

    input,
    textarea,
    select {
      font-size: 16px !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .add-terrain-submit {
      width: 100% !important;
      padding: 10px 16px !important;
      font-size: 0.85rem !important;
    }

    /* Autocomplete suggestions */
    .suggestions-list {
      width: calc(100vw - 80px) !important;
      max-width: calc(100vw - 80px) !important;
      max-height: 140px !important;
    }

    /* Custom day rows */
    #addTerrainModal .custom-day-row {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 8px !important;
      padding: 10px !important;
    }

    #addTerrainModal .custom-day-toggle {
      width: 100% !important;
      min-width: auto !important;
    }

    #addTerrainModal .custom-day-hours {
      width: 100% !important;
      justify-content: flex-start !important;
      gap: 6px !important;
      flex-wrap: wrap !important;
    }

    #addTerrainModal .custom-day-hours input[type="time"] {
      min-width: 85px !important;
      flex: 1 !important;
    }

    /* Period rows */
    .period-row {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 8px !important;
      padding: 10px !important;
    }

    .period-times {
      width: 100% !important;
      gap: 8px !important;
    }

    .period-times input[type="time"] {
      flex: 1 !important;
      min-width: 0 !important;
      padding: 7px 9px !important;
    }

    .period-delete-btn {
      position: absolute !important;
      top: 10px !important;
      right: 10px !important;
      opacity: 1 !important;
    }

    /* Section blocks */
    .section-block {
      padding: 14px !important;
    }

    .section-header {
      gap: 8px !important;
      margin-bottom: 10px !important;
    }

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

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

    .hours-info-text {
      font-size: 0.75rem !important;
      margin-bottom: 10px !important;
    }

    /* Croix de fermeture - Visible et stylée sur mobile */
    .add-terrain-header .modal-close {
      display: flex !important;
      width: 36px !important;
      height: 36px !important;
      font-size: 1.5rem !important;
      background: rgba(255, 255, 255, 0.08) !important;
      color: #94a3b8 !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 50% !important;
      align-items: center !important;
      justify-content: center !important;
      opacity: 1 !important;
      transition: all 0.2s ease !important;
    }

    .add-terrain-header .modal-close:hover,
    .add-terrain-header .modal-close:active {
      background: rgba(255, 255, 255, 0.12) !important;
      color: #e2e8f0 !important;
      transform: none !important;
    }
  }

  /* ========== PETIT MOBILE (max 480px) ========== */
  @media (max-width: 480px) {

    /* ===== MODAL AJOUT TERRAIN - PETIT MOBILE ===== */
    #addTerrainModal {
      padding: 8px !important;
    }

    #addTerrainModal .modal-content {
      width: 100% !important;
      max-width: calc(100vw - 16px) !important;
      max-height: calc(100vh - 16px) !important;
      border-radius: 12px !important;
    }

    .add-terrain-header {
      padding: 0.4rem 0.6rem !important;
    }

    #addTerrainModal .add-terrain-header h2 {
      font-size: 0.8rem !important;
    }

    .add-terrain-body {
      padding: 0.4rem 0.6rem !important;
      max-height: calc(100vh - 160px) !important;
    }

    .wizard-progress {
      padding: 0.35rem 0.4rem !important;
    }

    .wizard-step-num {
      width: 14px !important;
      height: 14px !important;
      font-size: 0.45rem !important;
    }

    .wizard-panel-title {
      font-size: 0.7rem !important;
      margin-bottom: 0.4rem !important;
    }

    #addTerrainModal .add-terrain-form label {
      font-size: 0.6rem !important;
      margin-bottom: 0.2rem !important;
    }

    #addTerrainModal .add-terrain-form input,
    #addTerrainModal .add-terrain-form textarea,
    #addTerrainModal .add-terrain-form select {
      padding: 6px 8px !important;
      font-size: 0.65rem !important;
    }

    #addTerrainModal .add-terrain-form {
      gap: 0.35rem !important;
    }

    .wizard-nav {
      gap: 0.3rem !important;
      margin-top: 0.4rem !important;
      padding-top: 0.4rem !important;
    }

    .wizard-nav .btn-primary,
    .wizard-nav .btn-secondary {
      padding: 7px 12px !important;
      font-size: 0.7rem !important;
      border-radius: 10px !important;
    }

    .add-terrain-submit {
      padding: 7px 12px !important;
      font-size: 0.75rem !important;
      border-radius: 10px !important;
    }

    .schedule-day {
      padding: 5px 4px !important;
    }

    .schedule-time-input {
      min-width: 50px !important;
      font-size: 0.6rem !important;
      padding: 4px 4px !important;
    }

    .slider-group label {
      font-size: 0.65rem !important;
    }

    .slider-value {
      font-size: 0.65rem !important;
      padding: 2px 6px !important;
    }

    .section-block {
      padding: 8px !important;
    }
  }

  /* ========== TRÈS PETIT MOBILE (max 375px) ========== */
  @media (max-width: 375px) {
    :root {
      --mobile-padding: 16px;
    }

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

    .floating-nav-link {
      font-size: 1rem !important;
    }

    .floating-nav-links::after {
      height: 80px !important;
    }

    .btn-hero-primary {
      padding: 16px 24px;
      font-size: 16px;
    }
  }

  /* ========== ACCESSIBILITÉ ========== */
  @media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    .hero-card {
      animation: none;
    }

    .about-video-wrapper {
      animation: none;
    }

    .about-video-wrapper::before,
    .about-video-wrapper::after {
      animation: none;
    }
  }

  /* ========== MODE SOMBRE (optionnel) ========== */
  @media (prefers-color-scheme: dark) {
    /* Préparé pour un futur mode sombre */
  }


  /* ============================
   FIX CENTRAGE INDEX MOBILE
   ============================ */
  @media (max-width: 768px) {

    /* Force le centrage de tous les éléments */
    body,
    html,
    #app {
      margin: 0 auto !important;
      padding: 0 !important;
      box-sizing: border-box !important;
    }

    /* Empêche tout débordement */
    * {
      max-width: 100vw !important;
      box-sizing: border-box !important;
    }

    /* Centre les sections principales */
    .hero,
    .about-section,
    .contact-section,
    .browse-section {
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: var(--mobile-padding) !important;
      padding-right: var(--mobile-padding) !important;
    }

    /* Container centré */
    .container {
      margin: 0 auto !important;
      padding-left: var(--mobile-padding) !important;
      padding-right: var(--mobile-padding) !important;
    }
  }


  /* ============================
   FIX SCROLL MODAL iOS
   Empêche le scroll du body quand modal ouvert
   ============================ */
  @media (max-width: 768px) {

    /* Quand un modal est actif, bloquer le scroll du body */
    body:has(.modal.active) {
      overflow: hidden !important;
      position: fixed !important;
      width: 100% !important;
      height: 100% !important;
    }

    /* Le modal-content doit être scrollable */
    .modal.active .modal-content {
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      touch-action: pan-y !important;
      overscroll-behavior: contain !important;
    }

    /* Exception pour le success modal - pas de scroll */
    .modal.active#successModal,
    .modal.active#successModal .modal-content,
    .modal.active#successModal .success-modal-content {
      overflow: visible !important;
    }

    /* Spécifique pour les modaux auth */
    #modalLogin.active .modal-content,
    #modalRegister.active .modal-content,
    .modal-compte.active .modal-content,
    #compteModal.active .modal-content {
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      touch-action: pan-y !important;
      overscroll-behavior: contain !important;
    }

    /* Modal profil - scrollable */
    #profileModal.active .modal-content {
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      touch-action: pan-y !important;
      overscroll-behavior: contain !important;
    }

    /* Modal add-terrain - scrollable */
    #addTerrainModal.active .modal-content {
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      touch-action: pan-y !important;
      overscroll-behavior: contain !important;
    }

    #addTerrainModal.active .add-terrain-body {
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      touch-action: pan-y !important;
      overscroll-behavior: contain !important;
    }

    /* =========================================
     DASHBOARD PAGE - MENU MOBILE FIX
     Navbar est hors de #app pour iOS Safari
     ========================================= */

    /* Navbar fixe visible sur dashboard mobile */
    .dashboard-page>.floating-navbar {
      position: fixed !important;
      top: 12px !important;
      top: max(12px, env(safe-area-inset-top, 12px)) !important;
      left: 12px !important;
      right: 12px !important;
      z-index: 999999 !important;
      background: rgba(255, 255, 255, 0.98) !important;
      border-radius: 20px !important;
      box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15) !important;
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    /* Menu links - état fermé */
    .dashboard-page>.floating-navbar>.floating-nav-links {
      position: fixed !important;
      top: 88px !important;
      right: 20px !important;
      bottom: 20px !important;
      left: 20px !important;
      width: auto !important;
      height: auto !important;
      max-height: calc(100dvh - 108px) !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 0 !important;
      visibility: hidden;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease, visibility 0.3s !important;
      z-index: 999998 !important;
      overflow-y: auto !important;
    }

    /* Menu links - état ouvert - HAUTE PRIORITÉ */
    body.dashboard-page>.floating-navbar>.floating-nav-links.open {
      display: flex !important;
      visibility: visible !important;
      pointer-events: auto !important;
      opacity: 1 !important;
      position: fixed !important;
      flex-direction: column !important;
    }
    
    /* Force l'affichage des liens dans le menu ouvert */
    .dashboard-page .floating-nav-links.open {
      display: flex !important;
      visibility: visible !important;
      pointer-events: auto !important;
      opacity: 1 !important;
    }
    
    .dashboard-page .floating-nav-links.open > * {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    /* Style des liens du menu */
    .dashboard-page>.floating-navbar>.floating-nav-links>.floating-nav-link {
      display: block !important;
      width: 100% !important;
      padding: 20px 32px !important;
      margin: 0 !important;
      font-size: 1.1rem !important;
      font-weight: 500 !important;
      color: rgba(255, 255, 255, 0.95) !important;
      text-align: left !important;
      text-decoration: none !important;
      border: none !important;
      border-radius: 0 !important;
      background: rgba(15, 23, 42, 0.95) !important;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    }

    .dashboard-page>.floating-navbar>.floating-nav-links>.floating-nav-link:first-of-type {
      border-radius: 32px 32px 0 0 !important;
      padding-top: 28px !important;
    }

    .dashboard-page>.floating-navbar>.floating-nav-links>.floating-nav-link:nth-of-type(4) {
      border-radius: 0 0 32px 32px !important;
      padding-bottom: 28px !important;
    }

    /* Bouton compte */
    .dashboard-page>.floating-navbar>.floating-nav-links>.floating-nav-account {
      width: 100% !important;
      height: 60px !important;
      margin: 16px 0 0 0 !important;
      padding: 0 24px !important;
      border-radius: 32px !important;
      background: rgba(15, 23, 42, 0.95) !important;
      border: 1px solid rgba(16, 185, 129, 0.3) !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 10px !important;
    }

    .dashboard-page>.floating-navbar>.floating-nav-links>.floating-nav-account .account-name {
      color: #10b981 !important;
    }

    /* Bouton Ajouter terrain */
    .dashboard-page>.floating-navbar>.floating-nav-links>.floating-nav-auth-cta {
      width: 100% !important;
      height: 60px !important;
      margin: 12px 0 0 0 !important;
      padding: 0 24px !important;
      border-radius: 32px !important;
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
      border: none !important;
      color: #ffffff !important;
      font-size: 1.05rem !important;
      font-weight: 600 !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 10px !important;
    }

    /* Hamburger toggle visible */
    .dashboard-page>.floating-navbar>.floating-nav-toggle {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 1000000 !important;
    }

    .dashboard-page>.floating-navbar>.floating-nav-toggle span {
      background: #1a1a1a !important;
      display: block !important;
      width: 22px !important;
      height: 2px !important;
    }

    /* Logo visible avec texte sombre */
    .dashboard-page>.floating-navbar>.floating-navbar-logo {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    .dashboard-page>.floating-navbar>.floating-navbar-logo .logo-mx,
    .dashboard-page>.floating-navbar>.floating-navbar-logo .logo-bzh {
      color: #111827 !important;
    }

    /* ===== FIX: Supprimer le cadre bleu nuit derrière la navbar ===== */
    /* Le body doit être transparent sur le dashboard pour que la navbar flotte proprement */
    body.dashboard-page {
      background: transparent !important;
      background-color: transparent !important;
    }

    /* Le #app contient le fond, pas le body */
    .dashboard-page #app {
      background: linear-gradient(180deg, #0f0f19 0%, #1a1a2e 50%, #16213e 100%) !important;
      min-height: 100dvh !important;
      margin-top: 0 !important;
      padding-top: 0 !important;
    }
  }
}