/* Google Maps Integration Styles */

/* Fix pour éviter le débordement horizontal sur les pages de détails */
.place-details-content * {
    max-width: 100%;
    box-sizing: border-box;
}

.place-details-content img {
    max-width: 100%;
    height: auto;
}

.place-details-content .place-content-grid,
.place-details-content .place-overview,
.place-details-content section {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Force Sync Button Styles */
.btn-warning {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: white;
    border: none;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
}

.btn-warning:active {
    transform: translateY(0);
}

.force-sync-place-btn {
    font-weight: 600;
}

/* Inline Editing Styles */
.editable-field {
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Hover effects only when editing mode is active */
.editing-mode-active .editable-field:hover {
    background-color: rgba(52, 152, 219, 0.1);
    border-radius: 4px;
}

.editable-field.editing {
    background-color: rgba(52, 152, 219, 0.15);
    border-radius: 4px;
    padding: 4px;
}

.editable-display {
    display: block;
    min-height: 1.2em;
    padding: 2px 4px;
    border-radius: 3px;
}

.editable-display.text-muted {
    color: #6c757d;
    font-style: italic;
}

.editable-input {
    width: 100%;
    padding: 6px 8px;
    border: 2px solid #3498db;
    border-radius: 4px;
    font-size: inherit;
    font-family: inherit;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.editable-input:focus {
    outline: none;
    border-color: #2980b9;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.editable-input.hidden {
    display: none;
}

/* Field change indicators */
.editable-field.field-changed .editable-display {
    border-left: 3px solid #3b82f6;
    padding-left: 8px;
    background-color: rgba(59, 130, 246, 0.05);
}

.editable-field.field-changed .editable-input {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Tags editing styles */
.tags-edit-container {
    margin-top: 8px;
}

.tag-input {
    width: 100%;
    padding: 6px 8px;
    border: 2px solid #3498db;
    border-radius: 4px;
    margin-bottom: 8px;
}

.tag-remove {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: none;
}

.editable-field.editing .tag-remove {
    display: inline-block;
}

.tag-remove:hover {
    background: rgba(255, 255, 255, 1);
    color: #e74c3c;
}

/* Edit mode indicator */
.edit-mode-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #3498db;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Sticky bottom toolbar for save/cancel */
.edit-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 2px solid #3b82f6;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 16px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.edit-toolbar.show {
    transform: translateY(0);
}

.edit-toolbar-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.changes-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3b82f6;
    font-weight: 500;
}

.changes-indicator.hidden {
    display: none;
}

.edit-actions {
    display: flex;
    gap: 12px;
}

.edit-toolbar .btn {
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-toolbar .btn-primary {
    background: #28a745;
    color: white;
}

.edit-toolbar .btn-primary:hover {
    background: #218838;
}

.edit-toolbar .btn-secondary {
    background: #6c757d;
    color: white;
}

.edit-toolbar .btn-secondary:hover {
    background: #545b62;
}

/* Legacy edit actions (keep for compatibility) */
.edit-actions {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    gap: 10px;
    z-index: 1000;
}

.edit-actions.show {
    display: flex;
}

.edit-actions .btn {
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Edit Sidebar for Place Modification */
.edit-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    pointer-events: none;
    /* Remove transition delay to avoid interfering with animation visibility */
    transition: pointer-events 0s 0.35s;
    /* Start invisible but positioned (better for animation) */
    opacity: 0;
    visibility: hidden;
}

.edit-sidebar.active {
    pointer-events: all;
    transition: pointer-events 0s 0s;
    opacity: 1;
    visibility: visible;
}

/* Override hidden class for sidebar to use opacity instead of display */
.edit-sidebar.hidden {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.edit-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.35s ease-out;
    cursor: pointer;
}

.edit-sidebar.active .edit-sidebar-overlay {
    opacity: 1;
}

.edit-sidebar-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    /* Sophisticated multi-layered box shadows for depth */
    box-shadow:
        -2px 0 20px rgba(0, 0, 0, 0.1),
        -4px 0 40px rgba(0, 0, 0, 0.08),
        -6px 0 60px rgba(0, 0, 0, 0.05);
    /* Subtle border for definition */
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Start completely off-screen to the right */
    transform: translateX(100%);
    /* Smooth sliding animation with better easing */
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Ensure panel is above all content */
    z-index: 2001;
    /* Ensure hardware acceleration for smoother animation */
    will-change: transform;
}

.edit-sidebar.active .edit-sidebar-panel {
    /* Slide in from right to final position */
    transform: translateX(0);
}

.edit-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 24px);
    background-color: #ffffff;
    /* Ensure content area maintains solid background */
    position: relative;
    z-index: 5;
}

/* Sidebar Header */
.edit-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg, 24px);
    border-bottom: 1px solid var(--gray-200, #e9ecef);
    background-color: #ffffff;
    /* Add subtle shadow for depth */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    /* Ensure header stays above content */
    z-index: 10;
    position: relative;
}

.edit-sidebar-title {
    margin: 0;
    font-size: var(--font-size-xl, 20px);
    font-weight: 600;
    color: var(--gray-800, #1a1a1a);
}

.edit-sidebar-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600, #6c757d);
    transition: all 0.2s ease;
}

.edit-sidebar-close:hover {
    background: var(--gray-100, #f8f9fa);
    color: var(--gray-800, #1a1a1a);
}

.edit-sidebar-close:focus {
    outline: 2px solid var(--primary-color, #3498db);
    outline-offset: 2px;
}

/* Sidebar Footer */
.edit-sidebar-footer {
    padding: var(--spacing-lg, 24px);
    border-top: 1px solid var(--gray-200, #e9ecef);
    background-color: #ffffff;
    /* Add subtle shadow for depth */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 16px);
    justify-content: flex-start;
    /* Ensure footer stays above content */
    z-index: 10;
    position: relative;
}

/* Force correct button order */
.edit-sidebar-footer #save-sidebar-btn {
    order: 1;
}

.edit-sidebar-footer #delete-sidebar-place-btn {
    order: 2;
}

/* Hide any potential cancel button */
.edit-sidebar-footer #cancel-sidebar-btn,
.edit-sidebar-footer .btn-cancel,
.edit-sidebar-footer [data-action="cancel"] {
    display: none !important;
}

.edit-sidebar-footer .btn {
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-sidebar-footer .btn-primary {
    background: var(--success-color, #28a745);
    color: white;
}

.edit-sidebar-footer .btn-primary:hover {
    background: #218838;
}

.edit-sidebar-footer .btn-secondary {
    background: var(--gray-500, #6c757d);
    color: white;
}

.edit-sidebar-footer .btn-secondary:hover {
    background: #545b62;
}

/* Form Sections in Sidebar */
.edit-sidebar-section {
    background: var(--white, #ffffff);
    border: 1px solid var(--gray-300, #dee2e6);
    border-radius: var(--border-radius-lg, 8px);
    padding: var(--spacing-lg, 24px);
    box-shadow: var(--shadow, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.edit-sidebar-section h3 {
    margin: 0 0 var(--spacing-md, 16px) 0;
    font-size: var(--font-size-lg, 18px);
    color: var(--gray-800, #1a1a1a);
    border-bottom: 1px solid var(--gray-200, #e9ecef);
    padding-bottom: var(--spacing-sm, 12px);
}

.edit-sidebar-form-group {
    margin-bottom: var(--spacing-md, 16px);
}

.edit-sidebar-form-group label {
    display: block;
    margin-bottom: var(--spacing-xs, 8px);
    font-weight: 500;
    color: var(--gray-700, #495057);
    font-size: var(--font-size-sm, 14px);
}

.edit-sidebar-form-group input,
.edit-sidebar-form-group textarea,
.edit-sidebar-form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--gray-300, #dee2e6);
    border-radius: var(--border-radius, 4px);
    font-size: var(--font-size-base, 16px);
    font-family: inherit;
    background-color: var(--white, #ffffff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.edit-sidebar-form-group input:focus,
.edit-sidebar-form-group textarea:focus,
.edit-sidebar-form-group select:focus {
    outline: none;
    border-color: var(--primary-color, #3498db);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.edit-sidebar-form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Responsive Design */
@media (min-width: 768px) {
    /* Fix the main container width - this was the issue! */
    .edit-sidebar {
        width: 30% !important;
        max-width: 500px !important;
        min-width: 400px !important;
    }
    
    .edit-sidebar-panel {
        width: 100% !important;
    }
    
    .edit-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 30%;
        width: 70% !important;
        height: 100%;
    }
    
    /* Ensure desktop overlay only covers the left portion */
    .edit-sidebar.active .edit-sidebar-overlay {
        opacity: 0.7;
    }
}

/* Tablet breakpoint for better responsiveness */
@media (min-width: 768px) and (max-width: 1023px) {
    .edit-sidebar {
        width: 40% !important;
        max-width: 450px !important;
        min-width: 350px !important;
    }
    
    .edit-sidebar-panel {
        width: 100% !important;
    }
    
    .edit-sidebar-overlay {
        right: 40%;
        width: 60% !important;
    }
}

/* Large desktop - more generous sidebar */
@media (min-width: 1200px) {
    .edit-sidebar {
        width: 25% !important;
        max-width: 600px !important;
        min-width: 450px !important;
    }
    
    .edit-sidebar-panel {
        width: 100% !important;
    }
    
    .edit-sidebar-overlay {
        right: 25%;
        width: 75% !important;
    }
}

@media (max-width: 767px) {
    .edit-sidebar-panel {
        width: 100%;
    }
    
    .edit-sidebar-overlay {
        display: none; /* No overlay on mobile */
    }
    
    .edit-sidebar-content {
        padding: var(--spacing-md, 16px);
    }
    
    .edit-sidebar-header,
    .edit-sidebar-footer {
        padding: var(--spacing-md, 16px);
    }
    
    .edit-sidebar-footer {
        flex-direction: column;
    }
    
    .edit-sidebar-footer .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Maintain button order on mobile */
    .edit-sidebar-footer #save-sidebar-btn {
        order: 1;
    }
    
    .edit-sidebar-footer #delete-sidebar-place-btn {
        order: 2;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .edit-sidebar,
    .edit-sidebar-overlay,
    .edit-sidebar-panel {
        transition: none !important;
    }
    
    .edit-sidebar-panel {
        will-change: auto;
    }
}

/* Focus trap styles for accessibility */
.edit-sidebar.active {
    isolation: isolate;
}

.edit-sidebar.active .edit-sidebar-panel {
    contain: layout style;
}

/* Animation performance optimizations */
.edit-sidebar-panel {
    /* Force GPU acceleration for better performance */
    transform: translateZ(0) translateX(100%);
    backface-visibility: hidden;
    perspective: 1000px;
}

.edit-sidebar.active .edit-sidebar-panel {
    transform: translateZ(0) translateX(0);
}

/* Ensure smooth transitions on all devices */
.edit-sidebar-panel,
.edit-sidebar-overlay {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
}

/* Debug styles for development (can be removed in production) */
@media (min-width: 768px) {
    .edit-sidebar-panel {
        /* Visual indicator for desktop width constraint */
        border-left: 2px solid rgba(52, 152, 219, 0.3);
    }
}

/* Ensure overlay click area is correct on desktop */
@media (min-width: 768px) {
    .edit-sidebar-overlay {
        /* Ensure overlay doesn't cover the sidebar panel */
        pointer-events: all;
        cursor: pointer;
    }
    
    .edit-sidebar-panel {
        /* Prevent panel from being clickable through overlay */
        pointer-events: all;
    }
}

/* Cover Photo Banner */
.place-cover-banner {
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cover-photo-container {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.cover-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.cover-photo:hover {
    transform: scale(1.05);
}

.cover-photo-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cover-photo-container:hover .cover-photo-overlay {
    opacity: 1;
}

.cover-photo-expand {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.cover-photo-expand:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* Responsive cover photo */
@media (min-width: 768px) {
    .cover-photo-container {
        height: 300px;
    }
}

@media (min-width: 1024px) {
    .cover-photo-container {
        height: 350px;
    }
}

/* Opening Hours Compact Display */
.opening-hours-compact {
    font-size: 0.9rem;
}

.opening-hours-compact .day {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
}

.opening-hours-compact .day:last-child {
    border-bottom: none;
}

.opening-hours-compact .day.today {
    background-color: #e8f5e8;
    padding: 6px 8px;
    border-radius: 4px;
    font-weight: 600;
    color: #2d5a2d;
}

.opening-hours-compact .day-name {
    font-weight: 500;
    min-width: 80px;
}

.opening-hours-compact .day-hours {
    color: #666;
    text-align: right;
}

.opening-hours-compact .day-hours.closed {
    color: #d32f2f;
    font-weight: 500;
}

.opening-hours-compact .day.today .day-hours {
    color: #2d5a2d;
}

/* Phone Link Styling */
.phone-link {
    color: #3498db;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.phone-link:hover {
    color: #2980b9;
    text-decoration: underline;
}

/* Popup Opening Hours */
.popup-opening-hours {
    margin: 8px 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.popup-opening-hours .tomorrow-hours {
    color: #666;
    font-size: 0.85rem;
}

/* Place List Compact Opening Hours */
.place-opening-hours-compact {
    margin: 8px 0;
    font-size: 0.9rem;
}

.place-opening-hours-compact .hours-today {
    display: flex;
    align-items: center;
    gap: 8px;
}

.place-opening-hours-compact .status-indicator {
    font-size: 0.8rem;
    font-weight: 600;
}

.place-opening-hours-compact .status-indicator.open {
    color: #2e7d32;
}

.place-opening-hours-compact .status-indicator.closed {
    color: #d32f2f;
}

/* Sync Management Page */
.sync-management-content {
    padding: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
    overflow-y: auto;
    height: calc(100vh - 60px);
}

/* Header adjustments */
.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.header-left h1 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--primary-color);
}

/* Overview Cards */
.sync-overview {
    margin-bottom: var(--spacing-2xl);
}

.overview-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.overview-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-300);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.overview-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.overview-card .card-icon {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: var(--border-radius);
}

.overview-card .card-content {
    flex: 1;
}

.overview-card .card-title {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.overview-card .card-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-800);
}

/* Sync Actions */
.sync-actions {
    margin-bottom: var(--spacing-2xl);
}

.actions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.actions-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    color: var(--gray-800);
}

.google-api-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--gray-100);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
}

.google-api-status .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-400);
    animation: pulse 2s infinite;
}

.google-api-status.online .status-indicator {
    background: var(--success-color);
}

.google-api-status.offline .status-indicator {
    background: var(--danger-color);
}

.google-api-status.limited .status-indicator {
    background: var(--warning-color);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.action-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-300);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.action-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.action-card .action-icon {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--white);
    border-radius: var(--border-radius);
    flex-shrink: 0;
}

.action-card .action-content {
    flex: 1;
}

.action-card .action-content h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-lg);
    color: var(--gray-800);
}

.action-card .action-content p {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

/* Places Sync List */
.places-sync-list {
    margin-bottom: var(--spacing-2xl);
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.list-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    color: var(--gray-800);
}

.list-controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.list-controls-row {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.list-controls select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background: var(--white);
    height: 38px; /* Hauteur fixe pour alignement */
}

/* Ajuster le bouton d'actualisation pour qu'il s'aligne avec les selects */
.list-controls .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    height: 38px; /* Même hauteur que les selects */
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    background: var(--white);
    color: var(--gray-700);
    transition: all 0.2s ease;
}

.list-controls .btn:hover {
    background: var(--gray-50);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.list-controls .btn .icon {
    font-size: 14px;
}

/* Layout mobile pour le bouton d'actualisation */
@media (max-width: 768px) {
    .list-controls {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: stretch;
    }
    
    .list-controls-row {
        display: flex;
        gap: var(--spacing-sm);
        align-items: center;
    }
    
    .list-controls select {
        flex: 1;
    }
    
    .list-controls .btn {
        width: 100%;
        justify-content: center;
    }
}

.places-list-container {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-300);
    min-height: 400px;
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    color: var(--gray-600);
}

.loading-state .loading-spinner {
    margin-bottom: var(--spacing-md);
}

/* Place Item with Sync Status */
.place-sync-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--gray-200);
    transition: background-color 0.2s ease;
}

.place-sync-item:hover {
    background: var(--gray-50);
}

.place-sync-item:last-child {
    border-bottom: none;
}

.place-sync-info {
    flex: 1;
    margin-right: var(--spacing-md);
}

.place-sync-title {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--gray-800);
    margin-bottom: var(--spacing-xs);
}

.place-sync-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.place-sync-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-right: var(--spacing-md);
}

.sync-status-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.place-title-section .sync-status-badge {
    padding-left: 0;
}

.place-title-section .sync-status-badge .status-indicator {
    display: none;
}

.sync-status-badge.synced {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.sync-status-badge.pending {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.sync-status-badge.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.sync-status-badge.never {
    background: var(--gray-200);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.sync-status-badge .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.sync-status-badge.synced .status-indicator {
    background: var(--success-color);
}

.sync-status-badge.pending .status-indicator {
    background: var(--warning-color);
}

.sync-status-badge.error .status-indicator {
    background: var(--danger-color);
}

.sync-status-badge.never .status-indicator {
    background: var(--gray-500);
}

.sync-status-badge.no-match {
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

.sync-status-badge.no-match .status-indicator {
    background: #6366f1;
}

.place-sync-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.place-sync-actions .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* Progress Modal */
.sync-progress-content {
    max-width: 600px;
    width: 100%;
}

.progress-content {
    padding: var(--spacing-lg);
}

.progress-overview {
    margin-bottom: var(--spacing-lg);
}

.progress-bar-container {
    margin-bottom: var(--spacing-md);
}

.progress-bar {
    width: 100%;
    height: 20px;
    background: var(--gray-200);
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    border-radius: var(--border-radius);
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    text-align: center;
    margin-top: var(--spacing-sm);
    font-weight: 500;
    color: var(--gray-700);
}

.progress-details {
    margin-bottom: var(--spacing-lg);
}

.current-operation {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--gray-800);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.progress-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.progress-stats .stat {
    text-align: center;
    padding: var(--spacing-sm);
    background: var(--gray-100);
    border-radius: var(--border-radius);
}

.progress-stats .stat-label {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    display: block;
    margin-bottom: var(--spacing-xs);
}

.progress-stats .stat-value {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-800);
}

.progress-log {
    max-height: 200px;
    overflow-y: auto;
    background: var(--gray-100);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
}

.progress-log-entry {
    margin-bottom: var(--spacing-xs);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
}

.progress-log-entry.success {
    background: #d4edda;
    color: #155724;
}

.progress-log-entry.error {
    background: #f8d7da;
    color: #721c24;
}

.progress-log-entry.info {
    background: #d1ecf1;
    color: #0c5460;
}

.progress-actions {
    text-align: center;
}

/* Nearby Search Modal */
.nearby-search-content {
    padding: var(--spacing-lg);
}

.nearby-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.nearby-type-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.nearby-type-option:hover {
    background: var(--gray-100);
    border-color: var(--primary-color);
}

.nearby-type-option input[type="checkbox"] {
    margin: 0;
}

/* Statistics Modal */
.stats-modal-content {
    max-width: 800px;
    width: 100%;
}

.stats-content {
    padding: var(--spacing-lg);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.stat-card {
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: var(--shadow);
}

.stat-card .stat-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
}

.stat-card .stat-title {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
}

.stat-card .stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--gray-800);
}

.recent-logs h3 {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
    color: var(--gray-800);
}

.logs-container {
    max-height: 300px;
    overflow-y: auto;
    background: var(--gray-100);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

.log-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    background: var(--white);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
}

.log-entry:last-child {
    margin-bottom: 0;
}

.log-entry .log-message {
    flex: 1;
    margin-right: var(--spacing-md);
}

.log-entry .log-time {
    color: var(--gray-500);
    font-size: var(--font-size-sm);
}

.log-entry.success {
    border-left: 3px solid var(--success-color);
}

.log-entry.error {
    border-left: 3px solid var(--danger-color);
}

.log-entry.warning {
    border-left: 3px solid var(--warning-color);
}

/* Place Details Page */
.place-details-content {
    padding: var(--spacing-lg);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 60px);
    box-sizing: border-box;
}

.place-overview {
    margin-bottom: var(--spacing-2xl);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Style pour la barre d'actions déplacée sous les tags */
.place-overview .place-actions-section {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: var(--spacing-md) 0;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.place-overview .place-actions-section .actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-sm);
}

.place-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-lg);
}

.place-title-section h1 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-2xl);
    color: var(--gray-800);
}

.place-title-section .sync-status-badge {
    margin-left: 0;
}

/* Description container avec toggle */
.place-description-container {
    margin-bottom: var(--spacing-md);
}

.place-description {
    color: var(--gray-600);
    font-size: var(--font-size-base);
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.place-description .description-preview,
.place-description .description-full {
    display: inline;
}

.place-description .description-full.hidden {
    display: none;
}

.place-description .description-preview.hidden {
    display: none;
}

.description-toggle {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    padding: var(--spacing-xs) 0;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.description-toggle:hover {
    color: var(--primary-dark, #2980b9);
    text-decoration: underline;
}

.description-toggle:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 2px;
}

.description-toggle .toggle-show,
.description-toggle .toggle-hide {
    display: inline;
}

.description-toggle .toggle-hide.hidden {
    display: none;
}

.description-toggle .toggle-show.hidden {
    display: none;
}

.ratings-section {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md);
    width: 100%;
}

.user-rating,
.google-rating {
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    text-align: center;
    flex: 1;
}

.rating-label {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.rating-stars {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
}

.user-stars {
    color: var(--primary-color);
}

.google-stars {
    color: var(--warning-color);
}

.rating-value {
    font-weight: 600;
    color: var(--gray-800);
}

.rating-count {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    font-weight: normal;
}

.place-content-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

.place-left-column,
.place-right-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    min-width: 0;
    max-width: 100%;
}

.place-left-column section,
.place-right-column section {
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow);
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.place-left-column h2,
.place-right-column h2 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-lg);
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: var(--spacing-sm);
}

/* Map Section */
.place-map {
    width: 100%;
    height: 300px;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.map-coordinates {
    text-align: center;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    font-family: 'Courier New', monospace;
}

/* Map Error Styles */
.map-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border: 2px dashed var(--gray-300);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    text-align: center;
}

.map-error-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.7;
}

.map-error-message {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--spacing-sm);
}

.map-error-coordinates {
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--border-radius-sm);
}

.map-error-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.map-error-actions .btn {
    text-decoration: none;
    display: inline-block;
}

/* Photos Gallery */
.photos-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-sm);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.photo-item:hover {
    transform: scale(1.05);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.photo-item:hover .photo-overlay {
    opacity: 1;
}

.photo-expand-btn {
    background: none;
    border: none;
    color: var(--white);
    font-size: var(--font-size-xl);
    cursor: pointer;
}

/* Contact Information */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.contact-icon {
    font-size: var(--font-size-lg);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-content {
    flex: 1;
}

.contact-label {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.contact-value {
    color: var(--gray-800);
    margin-bottom: var(--spacing-xs);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.contact-value a {
    color: var(--primary-color);
    text-decoration: none;
}

.contact-value a:hover {
    text-decoration: underline;
}

.contact-link {
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    text-decoration: none;
}

.contact-link:hover {
    text-decoration: underline;
}

/* Opening Hours */
.opening-hours {
    font-size: var(--font-size-sm);
}

.opening-hours .day {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--gray-200);
}

.opening-hours .day:last-child {
    border-bottom: none;
}

.opening-hours .day.today {
    font-weight: 600;
    color: var(--primary-color);
    background: var(--gray-100);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    margin: var(--spacing-xs) 0;
}

.opening-hours .day-name {
    font-weight: 500;
}

.opening-hours .day-hours {
    color: var(--gray-600);
}

.opening-hours .day.closed .day-hours {
    color: var(--danger-color);
    font-style: italic;
}

/* Visit Information */
.visit-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.visit-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.visit-icon {
    font-size: var(--font-size-lg);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.visit-content {
    flex: 1;
}

.visit-label {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.visit-value {
    color: var(--gray-800);
    font-weight: 500;
}

/* Reviews Section */
.reviews-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.review-item {
    padding: var(--spacing-md);
    background: var(--gray-100);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--primary-color);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.review-author {
    font-weight: 600;
    color: var(--gray-800);
}

.review-rating {
    color: var(--warning-color);
    font-size: var(--font-size-sm);
}

.review-text {
    color: var(--gray-700);
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
}

.review-date {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

/* Actions Section */
.place-actions-section {
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow);
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Photo Lightbox */
.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: var(--white);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: var(--font-size-xl);
    cursor: pointer;
    z-index: 9999;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.lightbox-close:active {
    transform: scale(0.95);
}

#lightbox-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--border-radius);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    width: 100%;
    pointer-events: none;
}

.lightbox-nav-btn {
    background: rgba(0, 0, 0, 0.7);
    color: var(--white);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: var(--font-size-2xl);
    cursor: pointer;
    pointer-events: all;
    transition: background-color 0.2s ease;
}

.lightbox-nav-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

.lightbox-nav-btn:first-child {
    margin-left: -60px;
}

.lightbox-nav-btn:last-child {
    margin-right: -60px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .place-content-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .place-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ratings-section {
        flex-direction: row;
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .sync-management-content,
    .place-details-content {
        padding: var(--spacing-md);
    }
    
    .overview-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .actions-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Force les boutons de place-actions-section à être empilés verticalement sur mobile */
    .place-actions-section .actions-grid {
        grid-template-columns: 1fr !important;
    }
    
    .action-card {
        flex-direction: column;
        text-align: center;
    }
    
    .action-card .action-icon {
        align-self: center;
    }
    
    .list-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .place-sync-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .place-sync-actions {
        align-self: stretch;
        justify-content: space-between;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .progress-stats {
        grid-template-columns: 1fr;
    }
    
    .nearby-types-grid {
        grid-template-columns: 1fr;
    }
    
    .photos-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ratings-section {
        flex-direction: column;
    }
    
    .lightbox-nav-btn:first-child {
        margin-left: 10px;
    }
    
    .lightbox-nav-btn:last-child {
        margin-right: 10px;
    }
}

@media (max-width: 480px) {
    .overview-cards {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}
/* Popup enhancements for Google Maps data with hero images */
.popup-content {
    max-width: 320px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Hero image styles */
.popup-hero-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
    position: relative;
}

.popup-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.popup-body {
    padding: 0 15px 15px 15px;
}

.popup-title {
    margin: 10px 20px 8px 0px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1a1a1a;
    line-height: 1.3;
}

.popup-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.4;
}

.popup-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.popup-tags .tag-item {
    font-size: 12px;
    padding: 3px 5px;
    border-radius: 12px;
    color: white;
    font-weight: 500;
}

.popup-practical-info {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
    font-size: 13px;
}

.popup-section-title {
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}

.popup-address,
.popup-phone,
.popup-website {
    margin-bottom: 4px;
    line-height: 1.3;
}

.popup-phone a,
.popup-website a {
    color: #007bff;
    text-decoration: none;
}

.popup-phone a:hover,
.popup-website a:hover {
    text-decoration: underline;
}

.popup-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12px;
    color: #666;
}

.popup-actions {
    display: flex;
    gap: 8px;
}

.popup-actions .btn {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.popup-actions .btn-primary {
    background-color: #007bff;
    color: white;
}

.popup-actions .btn-primary:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
}

.popup-actions .btn-secondary {
    background-color: #6c757d;
    color: white;
}

.popup-actions .btn-secondary:hover {
    background-color: #545b62;
    transform: translateY(-1px);
}

/* Description preview in popup */
.popup-description-preview {
    font-size: 13px;
    color: #555;
    line-height: 1.4;
    margin-bottom: 10px;
}

.popup-voir-plus {
    color: #007bff;
    text-decoration: none;
    font-size: 12px;
    margin-left: 4px;
    white-space: nowrap;
}

.popup-voir-plus:hover {
    text-decoration: underline;
}

/* Google Maps button in popup */
.popup-google-maps-btn {
    display: block;
    text-align: center;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    text-decoration: none;
    transition: all 0.2s ease;
}

.popup-google-maps-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}
}

/* Responsive adjustments for mobile */
@media (max-width: 480px) {
    .popup-content {
        max-width: 280px;
    }
    
    .popup-hero-image {
        height: 140px;
    }
    
    .popup-title {
        font-size: 16px;
    }
    
    .popup-actions .btn {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* ========================================
   OPTIMISATIONS UX MOBILE
   Amélioration ergonomie tactile mobile
   ======================================== */

/* Détails de lieu en position sticky mobile */
@media (max-width: 768px) {
    /* Masquer complètement le contrôle bottom-right sur mobile pour éviter tout chevauchement */
    .maplibregl-ctrl-bottom-right {
        display: none !important;
    }
    
    /* Alternative: repositionner vers le coin supérieur droit si on veut le garder */
    /*
    .maplibregl-ctrl-bottom-right {
        bottom: auto !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 1 !important;
        font-size: 10px !important;
        opacity: 0.7 !important;
    }
    */
    
    /* Contrôles MapLibre sous le panel mobile */
    .maplibregl-ctrl-bottom-left,
    .maplibregl-ctrl-bottom-center,
    .maplibregl-ctrl-top-right,
    .maplibregl-ctrl-top-left,
    .maplibregl-ctrl-top-center {
        z-index: 1 !important;
    }
    
    /* S'assurer que tous les autres contrôles de carte passent sous le panel */
    .maplibregl-control-container .maplibregl-ctrl {
        z-index: 1 !important;
    }
    
    /* Masquer les popups desktop sur mobile - utiliser mobile-place-details-panel uniquement */
    .maplibregl-popup {
        display: none !important;
    }
    
    /* Container principal pour détails mobile sticky */
    .mobile-place-details-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-index-modale);
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .mobile-place-details-container.active {
        pointer-events: all;
        opacity: 1;
        visibility: visible;
    }
    
    /* Backdrop supprimé - pas besoin */
    .mobile-place-details-backdrop {
        display: none;
    }
    
    /* Panel principal sticky - hauteur adaptative basée sur le contenu */
    .mobile-place-details-panel {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-height: 45vh; /* Hauteur minimum pour petits contenus */
        max-height: 80vh; /* Hauteur maximum pour éviter de couvrir toute la carte */
        height: auto; /* Hauteur adaptative basée sur le contenu */
        background: #ffffff !important;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    .mobile-place-details-container.active .mobile-place-details-panel {
        transform: translateY(0);
    }
    
    /* Contenu sans header - s'adapte au contenu */
    .mobile-place-details-content {
        height: auto; /* Hauteur adaptative */
        min-height: 45vh; /* Minimum pour petits contenus */
        max-height: 80vh; /* Maximum pour grands contenus */
        overflow: hidden; /* Pas de scroll */
        padding: 0;
        background: #ffffff !important;
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1; /* Prend l'espace disponible dans le panel */
    }
    
    /* Bouton fermer intégré dans le contenu */
    .mobile-place-details-close {
        position: absolute;
        top: 12px;
        right: 12px;
        background: rgba(0, 0, 0, 0.1);
        border: none;
        font-size: 16px;
        padding: 0;
        border-radius: 50%;
        color: #6c757d;
        cursor: pointer;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-place-details-close:hover {
        background: rgba(0, 0, 0, 0.2);
        color: #333;
    }
    
    /* Container pour le contenu popup */
    .mobile-popup-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
/* POPUP CONTENT STRUCTURE dans le container mobile */
    .mobile-popup-container .popup-content {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    /* Header popup - masqué pour économiser l'espace */
    .mobile-popup-container .popup-header {
        display: none !important;
    }
    
    /* Body popup - layout optimisé pour visibilité complète */
    .mobile-popup-container .popup-body {
        width: 100% !important;
        height: 100% !important;
        padding: 8px 16px 16px 16px !important;
        margin: 0 !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        overflow: hidden !important;
    }
    
    /* Design popup mobile optimisé - 100% largeur */
    .mobile-place-details-content .popup-content {
        background: #ffffff !important;
        height: 100%;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        max-width: none !important;
    }
    
    .mobile-place-details-content .popup-header {
        display: none; /* Pas d'image hero pour économiser l'espace */
    }
    
    .mobile-place-details-content .popup-body {
        background: #ffffff !important;
        padding: 8px 16px 16px 16px !important;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    /* Section titre et tags */
    .mobile-popup-container .popup-title {
        color: #1a1a1a !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        margin: 0 0 4px 0 !important;
        line-height: 1.2 !important;
    }
    
    .mobile-popup-container .popup-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin-bottom: 6px !important;
    }
    
    .mobile-popup-container .popup-tags .tag-item {
        font-size: 12px !important;
        padding: 4px 8px !important;
        border-radius: 12px !important;
        font-weight: 500 !important;
    }
    
    /* Section informations principales - layout optimisé */
    .mobile-popup-container .contact-info {
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important; /* Réduit pour économiser l'espace */
        flex: 0 1 auto !important; /* Permet la compression si nécessaire */
        margin-bottom: 4px !important; /* Réduit */
        width: 100% !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    
    .mobile-popup-container .contact-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 4px !important; /* Réduit */
        padding: 3px 5px !important; /* Réduit */
        background: transparent !important; /* Fond transparent pour uniformité */
        border-radius: 0 !important; /* Pas de bordure arrondie */
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: auto !important;
    }
    
    .mobile-popup-container .contact-icon {
        font-size: 14px !important;
        width: 16px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        margin-top: 1px !important;
        line-height: 1 !important;
    }
    
    .mobile-popup-container .contact-content {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .mobile-popup-container .contact-label {
        font-size: 10px !important;
        color: #666 !important;
        font-weight: 600 !important;
        margin: 0 0 1px 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        line-height: 1.2 !important;
    }
    
    .mobile-popup-container .contact-value {
        font-size: 13px !important;
        color: #1a1a1a !important;
        margin: 0 !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }
    
    .mobile-popup-container .contact-value a {
        color: #007bff !important;
        text-decoration: none !important;
    }
    
    .mobile-popup-container .contact-value a:hover {
        text-decoration: underline !important;
    }
    
    /* Style épuré mobile - emoji + texte direct */
    .mobile-popup-container .mobile-info-item {
        font-size: 14px !important;
        color: #1a1a1a !important;
        margin: 4px 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        line-height: 1.4 !important;
        display: block !important;
        text-align: left !important;
    }

    /* Description tronquée à 2 lignes dans la popup mobile */
    .mobile-popup-container .mobile-info-item.mobile-desc-line {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: #666 !important;
        font-style: italic !important;
        line-height: 1.3 !important;
    }
    
    /* Section ratings harmonisée avec le style adresse - alignement gauche */
    .mobile-popup-container .ratings-section {
        display: flex !important;
        align-items: flex-start !important; /* Alignement haut comme contact-item */
        gap: 4px !important; /* Même gap que contact-item */
        margin: 0 !important; /* Pas de marge spéciale */
        flex-shrink: 0 !important; /* Empêche absolument la compression */
        min-height: 50px !important; /* Espace garanti */
        padding: 3px 5px !important; /* Même padding que contact-item */
        background: #f8f9fa !important; /* FOND GRIS comme adresse */
        border-radius: 4px !important; /* Même style que contact-item */
        margin-bottom: 4px !important; /* Cohérence avec contact-info */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Icône étoile à gauche comme l'icône adresse */
    .mobile-popup-container .ratings-section .rating-icon {
        font-size: 14px !important;
        width: 16px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        margin-top: 1px !important;
        line-height: 1 !important;
    }
    
    /* Contenu de la note aligné à gauche */
    .mobile-popup-container .ratings-section .rating-content {
        flex: 1 !important;
        min-width: 0 !important;
        text-align: left !important; /* Alignement à gauche */
    }
    
    /* Label "Note Google" harmonisé avec contact-label */
    .mobile-popup-container .ratings-section .rating-label {
        font-size: 10px !important;
        color: #666 !important;
        font-weight: 600 !important;
        margin: 0 0 2px 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        line-height: 1.2 !important;
        text-align: left !important; /* Aligné à gauche */
    }
    
    /* Valeur de la note harmonisée avec contact-value */
    .mobile-popup-container .ratings-section .rating-value {
        font-size: 13px !important;
        color: #1a1a1a !important;
        margin: 0 !important;
        line-height: 1.25 !important;
        text-align: left !important; /* Aligné à gauche */
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    
    /* Étoiles dans la ligne de la note */
    .mobile-popup-container .ratings-section .rating-stars {
        font-size: 12px !important;
        color: #ffc107 !important;
    }
    
    /* Actions collées en bas du panel avec marge */
    .mobile-popup-container .popup-actions {
        position: absolute !important;
        bottom: 16px !important; /* Marge du bas */
        left: 16px !important;
        right: 16px !important;
        width: calc(100% - 32px) !important; /* Largeur avec marges latérales */
        display: flex !important;
        gap: 6px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        border-top: none !important;
        min-height: 48px !important;
        z-index: 10 !important; /* Au-dessus du contenu */
    }
    
    .mobile-popup-container .popup-actions .btn {
        flex: 1 !important;
        text-align: center !important;
        padding: 12px 16px !important; /* Padding généreux */
        border-radius: 8px !important; /* Plus arrondi */
        font-size: 14px !important; /* Taille normale */
        font-weight: 600 !important;
        border: none !important;
        cursor: pointer !important;
        text-decoration: none !important;
        min-height: 44px !important; /* Touch target réglementaire */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
    }
    
    .mobile-place-details-content .contact-content {
        flex: 1 !important;
    }
    
    .mobile-place-details-content .contact-label {
        font-size: 12px !important;
        color: #666666 !important;
        font-weight: 500 !important;
        margin-bottom: 3px !important;
    }
    
    .mobile-place-details-content .contact-value {
        color: #1a1a1a !important;
        font-size: 14px !important;
    }
    
    .mobile-place-details-content .contact-value a {
        color: #007bff !important;
        text-decoration: none !important;
    }
    
    .mobile-place-details-content .contact-value a:hover {
        text-decoration: underline !important;
    }
    
    .mobile-place-details-content .popup-actions {
        margin-top: 15px !important;
        display: flex !important;
        gap: 8px !important;
    }
    
    .mobile-place-details-content .popup-actions .btn {
        flex: 1 !important;
        text-align: center !important;
        padding: 10px 15px !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        border: none !important;
        cursor: pointer !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .mobile-place-details-content .popup-actions .btn-primary {
        background-color: #007bff !important;
        color: white !important;
    }
    
    .mobile-place-details-content .popup-actions .btn-primary:hover {
        background-color: #0056b3 !important;
    }
    
    .mobile-place-details-content .popup-actions .btn-secondary {
        background-color: #6c757d !important;
        color: white !important;
    }
    
    .mobile-place-details-content .popup-actions .btn-secondary:hover {
        background-color: #545b62 !important;
    }
    
    .mobile-place-details-content::-webkit-scrollbar {
        display: none;
    }
    
    /* Sections du contenu mobile */
    .mobile-place-section {
        margin-bottom: var(--espacement-lg);
        padding-bottom: var(--espacement-lg);
        border-bottom: 1px solid var(--gris-200);
    }
    
    .mobile-place-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .mobile-place-section-title {
        font-size: var(--taille-police-base);
        font-weight: var(--poids-police-gras);
        color: var(--gris-800);
        margin: 0 0 var(--espacement-sm) 0;
        display: flex;
        align-items: center;
        gap: var(--espacement-sm);
    }
    
    /* Description */
    .mobile-place-description {
        color: var(--gris-600);
        line-height: 1.5;
        margin-bottom: var(--espacement-md);
    }
    
    /* Tags */
    .mobile-place-tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--espacement-xs);
        margin-bottom: var(--espacement-md);
    }
    
    .mobile-place-tags .tag-item {
        font-size: var(--taille-police-sm);
        padding: var(--espacement-xs) var(--espacement-sm);
        border-radius: var(--rayon-bordure-grand);
        color: var(--couleur-blanche);
        font-weight: var(--pois-police-moyen);
    }
    
    /* Informations pratiques */
    .mobile-contact-item {
        display: flex;
        align-items: flex-start;
        gap: var(--espacement-sm);
        margin-bottom: var(--espacement-md);
        padding: var(--espacement-sm);
        background: var(--gris-100);
        border-radius: var(--rayon-bordure);
    }
    
    .mobile-contact-icon {
        font-size: var(--taille-police-lg);
        width: 24px;
        text-align: center;
        flex-shrink: 0;
        margin-top: 2px;
    }
    
    .mobile-contact-content {
        flex: 1;
        min-width: 0; /* Permet ellipsis */
    }
    
    .mobile-contact-label {
        font-size: var(--taille-police-sm);
        color: var(--gris-600);
        font-weight: var(--poids-police-moyen);
        margin-bottom: 2px;
    }
    
    .mobile-contact-value {
        color: var(--gris-800);
        word-break: break-word;
    }
    
    .mobile-contact-value a {
        color: var(--couleur-primaire);
        text-decoration: none;
        /* Touch target approprié */
        padding: var(--espacement-xs) 0;
        display: inline-block;
    }
    
    .mobile-contact-value a:hover,
    .mobile-contact-value a:focus {
        text-decoration: underline;
    }
    
    /* Notes et évaluations */
    .mobile-ratings-container {
        display: flex;
        gap: var(--espacement-md);
        margin-bottom: var(--espacement-md);
    }
    
    .mobile-rating-card {
        flex: 1;
        background: var(--gris-100);
        border-radius: var(--rayon-bordure);
        padding: var(--espacement-md);
        text-align: center;
    }
    
    .mobile-rating-label {
        font-size: var(--taille-police-sm);
        color: var(--gris-600);
        margin-bottom: var(--espacement-xs);
        font-weight: var(--poids-police-moyen);
    }
    
    .mobile-rating-stars {
        font-size: var(--taille-police-lg);
        margin-bottom: var(--espacement-xs);
    }
    
    .mobile-rating-value {
        font-weight: var(--poids-police-gras);
        color: var(--gris-800);
    }
    
    /* Actions rapides */
    .mobile-place-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--espacement-sm);
        margin-top: var(--espacement-lg);
        padding-top: var(--espacement-lg);
        border-top: 1px solid var(--gris-200);
    }
    
    .mobile-place-actions .btn {
        padding: var(--espacement-md);
        border-radius: var(--rayon-bordure);
        font-weight: var(--poids-police-moyen);
        font-size: var(--taille-police-sm);
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--espacement-xs);
        /* Touch target minimum */
        min-height: 44px;
        text-decoration: none;
    }
    
    .mobile-place-actions .btn-primary {
        background: var(--couleur-primaire);
        color: var(--couleur-blanche);
    }
    
    .mobile-place-actions .btn-primary:hover,
    .mobile-place-actions .btn-primary:focus {
        background: var(--couleur-primaire-sombre);
        transform: translateY(-1px);
    }
    
    .mobile-place-actions .btn-secondary {
        background: var(--gris-500);
        color: var(--couleur-blanche);
    }
    
    .mobile-place-actions .btn-secondary:hover,
    .mobile-place-actions .btn-secondary:focus {
        background: var(--gris-600);
        transform: translateY(-1px);
    }
    
    .mobile-place-actions .btn:focus {
        outline: 2px solid var(--couleur-focus);
        outline-offset: 2px;
    }
    
    /* Animation de swipe down pour fermer */
    .mobile-place-details-panel.swiping-down {
        transition: transform 0.1s linear;
    }
    
    /* États de chargement mobile */
    .mobile-place-details-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--espacement-2xl);
        color: var(--gris-600);
    }
    
    .mobile-place-details-loading .loading-spinner {
        margin-bottom: var(--espacement-md);
        width: 32px;
        height: 32px;
        border: 3px solid var(--gris-300);
        border-top: 3px solid var(--couleur-primaire);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* Gestion des erreurs */
    .mobile-place-details-error {
        text-align: center;
        padding: var(--espacement-xl);
        color: var(--couleur-danger);
    }
    
    /* Accessibilité - réduction mouvement */
    @media (prefers-reduced-motion: reduce) {
        .mobile-place-details-container,
        .mobile-place-details-panel,
        .mobile-place-details-backdrop {
            transition: none !important;
        }
        
        .mobile-place-details-loading .loading-spinner {
            animation: none !important;
        }
    }
    
    /* Gestion du contraste élevé */
    @media (prefers-contrast: high) {
        .mobile-place-details-panel {
            border: 2px solid var(--gris-800);
        }
        
        .mobile-place-details-backdrop {
            background: rgba(0, 0, 0, 0.6);
        }
        
        .mobile-contact-item {
            border: 1px solid var(--gris-400);
        }
    }
    
    /* Support dark mode */
    @media (prefers-color-scheme: dark) {
        .mobile-place-details-panel {
            background: var(--couleur-surface-sombre, #2d2d2d);
            color: var(--couleur-texte-sombre, #ffffff);
        }
        
        .mobile-place-details-title {
            color: var(--couleur-texte-sombre, #ffffff);
        }
        
        .mobile-contact-item {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .mobile-rating-card {
            background: rgba(255, 255, 255, 0.1);
        }
    }
}

/* Bouton flottant d'ajout de lieu (FAB) - Mobile uniquement */
@media (max-width: 768px) {
    /* Masquer les boutons du header sur mobile */
    .app-header #add-place-btn {
        display: none !important;
    }
    
    /* Masquer le bouton de synchronisation sur mobile */
    .app-header #sync-btn,
    .app-header .sync-btn,
    .app-header #sync-button,
    .app-header .sync-button,
    .app-header [data-action="sync"],
    .app-header button[title*="sync"],
    .app-header button[title*="Sync"],
    .app-header button[title*="synchronis"],
    .app-header button[title*="Synchronis"] {
        display: none !important;
    }
    
    /* Container du FAB - centré horizontalement avec safe-area */
    .mobile-fab-container {
        position: fixed;
        bottom: calc(80px + env(safe-area-inset-bottom));
        left: 50%;
        transform: translateX(-50%) scale(0.8);
        z-index: var(--z-index-toast);
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    .mobile-fab-container.visible {
        pointer-events: all;
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) scale(1);
    }
    
    /* FAB principal avec fond blanc - 100x100px */
    .mobile-fab-button {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #ffffff;
        color: var(--couleur-primaire);
        border: 2px solid var(--couleur-primaire);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        box-shadow:
            0 6px 20px rgba(0, 0, 0, 0.15),
            0 4px 12px rgba(0, 0, 0, 0.1),
            0 2px 6px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
        /* Assurer accessibilité tactile */
        min-width: 100px;
        min-height: 100px;
    }
    
    .mobile-fab-button:hover,
    .mobile-fab-button:focus {
        background: var(--couleur-primaire);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow:
            0 8px 24px rgba(52, 152, 219, 0.3),
            0 6px 16px rgba(0, 0, 0, 0.2),
            0 3px 8px rgba(0, 0, 0, 0.15);
    }
    
    .mobile-fab-button:focus {
        outline: 2px solid var(--couleur-focus);
        outline-offset: 2px;
    }
    
    .mobile-fab-button:active {
        transform: translateY(0);
        background: var(--couleur-primaire);
        color: #ffffff;
        box-shadow:
            0 4px 12px rgba(52, 152, 219, 0.3),
            0 2px 6px rgba(0, 0, 0, 0.1);
    }
    
    /* Animation de pulsation pour attirer l'attention */
    .mobile-fab-button.pulse {
        animation: fabPulse 2s infinite;
    }
    
    @keyframes fabPulse {
        0% {
            box-shadow:
                0 6px 20px rgba(52, 152, 219, 0.3),
                0 4px 12px rgba(0, 0, 0, 0.15),
                0 0 0 0 rgba(52, 152, 219, 0.4);
        }
        70% {
            box-shadow:
                0 6px 20px rgba(52, 152, 219, 0.3),
                0 4px 12px rgba(0, 0, 0, 0.15),
                0 0 0 8px rgba(52, 152, 219, 0);
        }
        100% {
            box-shadow:
                0 6px 20px rgba(52, 152, 219, 0.3),
                0 4px 12px rgba(0, 0, 0, 0.15),
                0 0 0 0 rgba(52, 152, 219, 0);
        }
    }
    
    /* Tooltip du FAB - repositionné pour bouton centré */
    .mobile-fab-tooltip {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: var(--couleur-blanche);
        padding: var(--espacement-xs) var(--espacement-sm);
        border-radius: var(--rayon-bordure);
        font-size: var(--taille-police-sm);
        white-space: nowrap;
        margin-bottom: var(--espacement-sm);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(8px);
        transition: all 0.2s ease;
        pointer-events: none;
    }
    
    .mobile-fab-container:hover .mobile-fab-tooltip,
    .mobile-fab-button:focus + .mobile-fab-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
    
    /* Flèche du tooltip - repositionnée en bas */
    .mobile-fab-tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: rgba(0, 0, 0, 0.8);
    }
    
    /* Masquer FAB quand détails sont visibles */
    .mobile-place-details-container.active ~ .mobile-fab-container {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) scale(0.8);
        pointer-events: none;
    }
    
    /* Accessibilité - réduction mouvement pour FAB */
    @media (prefers-reduced-motion: reduce) {
        .mobile-fab-container,
        .mobile-fab-button,
        .mobile-fab-tooltip {
            transition: none !important;
        }
        
        .mobile-fab-button.pulse {
            animation: none !important;
        }
    }
    
    /* Support dark mode pour FAB */
    @media (prefers-color-scheme: dark) {
        .mobile-fab-tooltip {
            background: rgba(255, 255, 255, 0.9);
            color: var(--couleur-sombre, #2c3e50);
        }
        
        .mobile-fab-tooltip::after {
            border-left-color: rgba(255, 255, 255, 0.9);
        }
    }
    
    /* Gestion des zones d'encoche (notch) sur iPhone X+ - déjà intégré dans bottom */
    .mobile-place-details-container {
        bottom: env(safe-area-inset-bottom);
    }
    
    /* ========================================
       SLIDER D'IMAGES MOBILE
       ======================================== */
    
    /* Container du slider - hauteur fixe optimale */
    .mobile-image-slider {
        position: relative;
        width: 100%;
        height: 180px; /* Hauteur fixe optimale pour toutes tailles d'écran */
        background: #f8f9fa;
        border-radius: 12px 12px 0 0;
        overflow: hidden;
        flex-shrink: 0;
    }
    
    /* Track du slider */
    .mobile-image-slider-track {
        display: flex;
        height: 100%;
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
    }
    
    /* Images individuelles */
    .mobile-image-slider-item {
        position: relative;
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        background: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    
    .mobile-image-slider-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    
    /* État de chargement pour les images */
    .mobile-image-slider-item.loading::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        border: 2px solid #ddd;
        border-top-color: #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        z-index: 1;
    }
    
    /* Pagination dots - positionnés au bas du slider */
    .mobile-image-slider-pagination {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 6px;
        z-index: 10;
    }
    
    .mobile-image-slider-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .mobile-image-slider-dot.active {
        background: rgba(255, 255, 255, 0.9);
        transform: scale(1.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    /* Container du contenu popup - prend le reste de l'espace */
    .mobile-popup-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }
    
    /* Ajuster le popup-content pour occuper l'espace restant */
    .mobile-popup-container .popup-content {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Ajuster le popup-body */
    .mobile-popup-container .popup-body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        padding: 16px !important;
        padding-bottom: 80px !important; /* Espace pour les boutons en position absolue */
    }
    
    /* Animation de swipe */
    .mobile-image-slider-track.swiping {
        transition: none !important;
    }
    
    /* Gestion du state empty pour le slider */
    .mobile-image-slider.empty {
        display: none;
    }
    
    /* Ajustement du contenu quand pas d'images */
    .mobile-place-details-content.no-images {
        height: auto;
        min-height: 45vh;
    }

    .mobile-place-details-content.no-images .mobile-popup-container {
        height: auto;
        flex: 1;
    }
    
    /* Media queries spécifiques pour différentes tailles d'écrans */
    @media (max-width: 768px) and (max-height: 600px) {
        /* Petits écrans (iPhone SE, etc.) */
        .mobile-place-details-panel {
            min-height: 50vh;
            max-height: 85vh;
        }
        
        .mobile-place-details-content {
            min-height: 50vh;
        }
        
        .mobile-image-slider {
            height: 150px; /* Plus petit sur petits écrans */
        }
    }
    
    @media (max-width: 768px) and (min-height: 800px) {
        /* Grands écrans mobiles (iPhone Pro Max, etc.) */
        .mobile-place-details-panel {
            min-height: 40vh; /* Plus petit minimum sur grands écrans */
            max-height: 70vh; /* Maximum plus conservateur */
        }
        
        .mobile-place-details-content {
            min-height: 40vh;
        }
        
        .mobile-image-slider {
            height: 200px; /* Plus grand sur grands écrans */
        }
    }
}

/* =================================================================
   SYSTÈME DE LABELS INTELLIGENTS
   Styles pour la gestion intelligente des labels de marqueurs
   ================================================================= */

/* Label de marqueur - style de base */
.marker-label {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    color: var(--gray-800, #1a1a1a);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 50;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Label visible */
.marker-label.label-visible {
    opacity: 1;
    visibility: visible;
}

/* Label caché (collision détectée) */
.marker-label.label-cache {
    opacity: 0;
    visibility: hidden;
}

/* Label prioritaire (toujours affiché si possible) */
.marker-label.label-prioritaire {
    background: rgba(52, 152, 219, 0.95);
    color: var(--white, #ffffff);
    font-weight: 600;
    border-color: rgba(52, 152, 219, 0.3);
    z-index: 100;
}

/* Label au hover du marqueur */
.marker-label.hover {
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(52, 152, 219, 0.95);
    color: var(--white, #ffffff);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 200;
}

/* Label avec icône */
.marker-label-with-icon {
    display: flex;
    align-items: center;
    gap: 6px;
}

.marker-label-icon {
    font-size: 14px;
    flex-shrink: 0;
}

/* Variantes de labels selon le contenu */
.marker-label.has-image {
    border-left: 3px solid #3498db;
}

.marker-label.has-tags {
    border-left: 3px solid #2ecc71;
}

.marker-label.has-description {
    border-left: 3px solid #9b59b6;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .marker-label {
        font-size: 12px;
        padding: 5px 8px;
    }
    
    .marker-label-icon {
        font-size: 12px;
    }
}

/* Mode contraste élevé */
@media (prefers-contrast: high) {
    .marker-label {
        border-width: 2px;
        font-weight: 600;
    }
    
    .marker-label.label-prioritaire {
        border-width: 3px;
    }
}

/* Mode mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .marker-label,
    .marker-label.hover {
        transition: none;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .marker-label {
        background: rgba(45, 45, 45, 0.95);
        color: var(--white, #ffffff);
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .marker-label.label-prioritaire {
        background: rgba(52, 152, 219, 0.95);
    }
}

/* ========================================
   SPINNER DE CHARGEMENT
   Spinner pour indiquer le chargement lors de l'ajout de lieu
   ======================================== */

/* Overlay de chargement */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Container du spinner */
.loading-spinner-container {
    background: white;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Spinner animation */
.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--gray-200, #e9ecef);
    border-top: 4px solid var(--primary-color, #3498db);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Message de chargement */
.loading-message {
    color: var(--gray-800, #1a1a1a);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

.loading-submessage {
    color: var(--gray-600, #6c757d);
    font-size: 14px;
    text-align: center;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .loading-spinner-container {
        padding: 24px 32px;
    }
    
    .loading-spinner {
        width: 40px;
        height: 40px;
    }
    
    .loading-message {
        font-size: 15px;
    }
    
    .loading-submessage {
        font-size: 13px;
    }
}

/* Mode réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner {
        animation: none;
        border-top-color: var(--primary-color, #3498db);
        border-right-color: var(--primary-color, #3498db);
    }
}

/* Metro Section Styles */
.place-details-content .place-metro-section {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.2);
}

.place-details-content .place-metro-section h2 {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: white;
}

.place-details-content .metro-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.place-details-content .metro-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.place-details-content .metro-distance {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 4px;
}

.place-details-content .metro-source {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
}

.metro-station-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.metro-station-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.metro-station-distance {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

.metro-station-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.metro-line {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

/* Couleurs spécifiques pour les lignes de métro parisien */
.metro-line-1 { background-color: #FFCC00; color: #000; }
.metro-line-2 { background-color: #003DA5; color: white; }
.metro-line-3 { background-color: #837902; color: white; }
.metro-line-4 { background-color: #CE1126; color: white; }
.metro-line-5 { background-color: #FF7E2E; color: white; }
.metro-line-6 { background-color: #02B7E4; color: white; }
.metro-line-7 { background-color: #F3A4BA; color: #000; }
.metro-line-8 { background-color: #E094C7; color: white; }
.metro-line-9 { background-color: #CDDC39; color: #000; }
.metro-line-10 { background-color: #C1A971; color: white; }
.metro-line-11 { background-color: #704D23; color: white; }
.metro-line-12 { background-color: #008B4E; color: white; }
.metro-line-13 { background-color: #91C3D0; color: #000; }
.metro-line-14 { background-color: #662D91; color: white; }
.metro-line-RER-A { background-color: #E3051B; color: white; }
.metro-line-RER-B { background-color: #4E9FD8; color: white; }
.metro-line-RER-C { background-color: #F4A900; color: white; }
.metro-line-RER-D { background-color: #00A651; color: white; }
.metro-line-RER-E { background-color: #B90845; color: white; }

/* Responsive */
@media (max-width: 768px) {
    .place-metro-section {
        padding: 12px;
        margin: 12px 0;
    }

    .place-metro-section h2 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .metro-name {
        font-size: 15px;
    }

    .metro-distance {
        font-size: 13px;
    }
}