/**
 * ================================================================
 * Carte Interactive - Géolocalisation (Mobile-First v3.18.0)
 * ================================================================
 *
 * Activité de géolocalisation avec carte interactive Leaflet
 * Architecture mobile-first avec breakpoints progressifs
 *
 * @version 3.18.0
 * @since Sprint 4 - v1.9.0
 */

/* ================================================================
   1. CSS VARIABLES
   ================================================================ */
:root {
    /* System colors */
    --cal-primary: #667eea; /* v3.9.4 - Fallback simplifié */
    --cal-secondary: #764ba2; /* v3.9.4 - Fallback simplifié */
    --cal-danger: #ff4757; /* v3.9.4 - Fallback simplifié */
    --cal-white: #FFFFFF;
    --cal-text: #2B3674;
    --cal-text-muted: #64748b;

    /* Map-specific colors */
    --map-primary: var(--cal-primary);
    --map-secondary: var(--cal-secondary);
    --map-gradient: linear-gradient(135deg, var(--map-primary) 0%, var(--map-secondary) 100%);
    --map-success: #22c55e;
    --map-success-dark: #16a34a;
    --map-warning: #f59e0b;
    --map-error: #ef4444;
    --map-bg-light: #f8f9ff;
    --map-bg-clues: #f8f9ff;
    --map-bg-selection: #f0fdf4;
    --map-border: #e2e8f0;
    --map-border-clues: #e0e7ff;
    --map-border-success: #22c55e;
    --map-text-clues: #4c1d95;
    --map-text-success: #166534;
    --map-text-instruction: #7c2d12;

    /* Marker colors */
    --marker-perfect: rgba(34, 197, 94, 0.8);
    --marker-good: rgba(59, 130, 246, 0.8);
    --marker-medium: rgba(234, 179, 8, 0.8);
    --marker-far: rgba(239, 68, 68, 0.8);
    --marker-user: rgba(168, 85, 247, 0.9);
    --marker-target: rgba(255, 0, 0, 0.5);

    /* Badge gradients */
    --badge-distance: linear-gradient(135deg, #f093fb 0%, var(--cal-danger) 100%);
    --badge-points: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --badge-view-map: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --badge-instruction: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);

    /* Typography */
    --cal-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cal-font-size-xs: 11px;
    --cal-font-size-sm: 14px;
    --cal-font-size-base: 16px;
    --cal-font-size-lg: 18px;
    --cal-font-size-xl: 20px;
    --cal-font-size-2xl: 24px;
    --cal-font-size-3xl: 28px;
    --cal-font-size-4xl: 32px;
    --cal-font-size-5xl: 60px;
    --cal-font-size-6xl: 80px;
    --cal-font-size-7xl: 100px;

    /* Spacing */
    --cal-spacing-xs: 8px;
    --cal-spacing-sm: 12px;
    --cal-spacing-md: 16px;
    --cal-spacing-lg: 24px;
    --cal-spacing-xl: 32px;
    --cal-spacing-2xl: 40px;
    --cal-spacing-3xl: 60px;

    /* Shadows */
    --cal-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --cal-shadow-md: 0 2px 10px rgba(102, 126, 234, 0.1);
    --cal-shadow-lg: 0 5px 20px rgba(0, 0, 0, 0.15);
    --cal-shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.1);
    --cal-shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.3);
    --cal-shadow-button: 0 6px 20px rgba(250, 112, 154, 0.4);
    --cal-shadow-button-hover: 0 10px 30px rgba(250, 112, 154, 0.6);
    --cal-shadow-success: 0 6px 20px rgba(102, 126, 234, 0.4);
    --cal-shadow-success-hover: 0 10px 30px rgba(102, 126, 234, 0.6);
    --cal-shadow-submit: 0 5px 15px rgba(34, 197, 94, 0.3);
    --cal-shadow-submit-hover: 0 8px 25px rgba(34, 197, 94, 0.5);
    --cal-shadow-card: 0 5px 15px rgba(102, 126, 234, 0.3);
    --cal-shadow-hover: 0 4px 15px rgba(102, 126, 234, 0.2);

    /* Border Radius */
    --cal-radius-sm: 8px;
    --cal-radius-md: 12px;
    --cal-radius-lg: 15px;
    --cal-radius-xl: 20px;
    --cal-radius-2xl: 25px;
    --cal-radius-3xl: 30px;
    --cal-radius-full: 9999px;

    /* Transitions */
    --cal-transition-fast: 0.15s ease;
    --cal-transition-base: 0.3s ease;
    --cal-transition-slow: 0.5s ease;

    /* Z-Index */
    --cal-z-overlay: 10000;
    --cal-z-success: 10001;

    /* Map dimensions */
    --map-height-mobile: 400px;
    --map-height-desktop: 500px;
}

/* ================================================================
   2. CONTAINER PRINCIPAL
   ================================================================ */
.map-activity-container {
    max-width: 100%;
    padding: var(--cal-spacing-md);
    margin: 0 auto;
    font-family: var(--cal-font-family);
}

@media (min-width: 768px) {
    .map-activity-container {
        max-width: 1200px;
        padding: var(--cal-spacing-lg);
    }
}

/* ================================================================
   3. ÉTAT COMPLÉTÉ
   ================================================================ */
.map-completed-state {
    background: var(--map-gradient);
    border-radius: var(--cal-radius-xl);
    padding: var(--cal-spacing-lg);
    color: var(--cal-white);
    text-align: center;
    transform: translate3d(0, 0, 0);
}

@media (min-width: 768px) {
    .map-completed-state {
        padding: var(--cal-spacing-2xl);
    }
}

.completion-header {
    margin-bottom: var(--cal-spacing-xl);
}

.completion-icon {
    font-size: var(--cal-font-size-6xl);
    margin-bottom: var(--cal-spacing-md);
    animation: bounceIn 0.6s ease;
    transform: translate3d(0, 0, 0);
}

.completion-header h3 {
    font-size: var(--cal-font-size-2xl);
    margin: 0;
    font-weight: 700;
}

@media (min-width: 768px) {
    .completion-header h3 {
        font-size: var(--cal-font-size-3xl);
    }
}

.guess-summary {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: var(--cal-radius-lg);
    padding: var(--cal-spacing-lg);
    margin: var(--cal-spacing-lg) 0;
}

@media (min-width: 768px) {
    .guess-summary {
        padding: var(--cal-spacing-xl);
        margin: var(--cal-spacing-xl) 0;
    }
}

.guess-info {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--cal-spacing-md) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: var(--cal-font-size-sm);
}

@media (min-width: 480px) {
    .info-row {
        font-size: var(--cal-font-size-base);
    }
}

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

.info-label {
    font-weight: 500;
    opacity: 0.9;
}

.info-value {
    font-weight: 700;
}

.distance-badge {
    background: var(--badge-distance);
    padding: var(--cal-spacing-xs) var(--cal-spacing-md);
    border-radius: var(--cal-radius-xl);
    font-size: var(--cal-font-size-base);
}

@media (min-width: 480px) {
    .distance-badge {
        font-size: var(--cal-font-size-lg);
    }
}

.points-badge {
    background: var(--badge-points);
    padding: var(--cal-spacing-xs) var(--cal-spacing-md);
    border-radius: var(--cal-radius-xl);
    font-size: var(--cal-font-size-base);
}

@media (min-width: 480px) {
    .points-badge {
        font-size: var(--cal-font-size-lg);
    }
}

.view-map-btn {
    background: var(--badge-view-map);
    color: var(--cal-white);
    border: none;
    padding: var(--cal-spacing-md) var(--cal-spacing-xl);
    border-radius: var(--cal-radius-full);
    font-size: var(--cal-font-size-base);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cal-spacing-sm);
    margin-top: var(--cal-spacing-lg);
    transition: all var(--cal-transition-base);
    box-shadow: var(--cal-shadow-button);
    min-height: 56px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.view-map-btn:hover {
    transform: translateY(-3px) translate3d(0, 0, 0);
    box-shadow: var(--cal-shadow-button-hover);
}

@media (hover: none) {
    .view-map-btn:active {
        opacity: 0.85;
        transform: scale(0.98) translate3d(0, 0, 0);
    }
}

@media (min-width: 480px) {
    .view-map-btn {
        font-size: var(--cal-font-size-lg);
        padding: var(--cal-spacing-lg) var(--cal-spacing-2xl);
    }
}

.view-map-btn .btn-badge {
    background: rgba(255, 255, 255, 0.3);
    padding: 4px var(--cal-spacing-sm);
    border-radius: var(--cal-radius-lg);
    font-size: var(--cal-font-size-sm);
}

@media (min-width: 480px) {
    .view-map-btn .btn-badge {
        font-size: var(--cal-font-size-base);
    }
}

/* ================================================================
   4. ÉTAT DE JEU
   ================================================================ */
.map-game-state {
    background: var(--cal-white);
    border-radius: var(--cal-radius-xl);
    box-shadow: var(--cal-shadow-xl);
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}

/* ================================================================
   5. THÈME
   ================================================================ */
.map-theme {
    background: var(--map-gradient);
    padding: var(--cal-spacing-lg);
    text-align: center;
    color: var(--cal-white);
}

@media (min-width: 768px) {
    .map-theme {
        padding: var(--cal-spacing-xl);
    }
}

.theme-icon {
    font-size: var(--cal-font-size-5xl);
    margin-bottom: var(--cal-spacing-md);
    animation: rotate 3s ease-in-out infinite;
    transform: translate3d(0, 0, 0);
}

@media (min-width: 768px) {
    .theme-icon {
        font-size: var(--cal-font-size-5xl);
    }
}

.theme-text {
    font-size: var(--cal-font-size-xl);
    font-weight: 700;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .theme-text {
        font-size: var(--cal-font-size-2xl);
    }
}

@keyframes rotate {
    0%, 100% {
        transform: rotate(0deg) translate3d(0, 0, 0);
    }
    25% {
        transform: rotate(-5deg) translate3d(0, 0, 0);
    }
    75% {
        transform: rotate(5deg) translate3d(0, 0, 0);
    }
}

/* ================================================================
   6. SYSTÈME D'INDICES
   ================================================================ */
.clues-container {
    padding: var(--cal-spacing-lg);
    background: var(--map-bg-clues);
    border-bottom: 2px solid var(--map-border-clues);
}

@media (min-width: 768px) {
    .clues-container {
        padding: var(--cal-spacing-xl);
    }
}

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

.clues-title {
    font-size: var(--cal-font-size-lg);
    font-weight: 700;
    color: var(--map-text-clues);
}

@media (min-width: 480px) {
    .clues-title {
        font-size: var(--cal-font-size-xl);
    }
}

.clues-counter {
    background: var(--map-gradient);
    color: var(--cal-white);
    padding: var(--cal-spacing-xs) var(--cal-spacing-md);
    border-radius: var(--cal-radius-xl);
    font-weight: 700;
    font-size: var(--cal-font-size-sm);
}

@media (min-width: 480px) {
    .clues-counter {
        font-size: var(--cal-font-size-base);
    }
}

.clues-list {
    margin-bottom: var(--cal-spacing-lg);
}

.clue-item {
    background: var(--cal-white);
    padding: var(--cal-spacing-md);
    border-radius: var(--cal-radius-md);
    margin-bottom: var(--cal-spacing-sm);
    box-shadow: var(--cal-shadow-md);
    display: flex;
    gap: var(--cal-spacing-md);
    align-items: start;
    animation: slideIn 0.4s ease;
    transform: translate3d(0, 0, 0);
}

@media (min-width: 480px) {
    .clue-item {
        padding: var(--cal-spacing-lg);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) translate3d(0, 0, 0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translate3d(0, 0, 0);
    }
}

.clue-number {
    background: var(--map-gradient);
    color: var(--cal-white);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    transform: translate3d(0, 0, 0);
}

.clue-text {
    flex: 1;
    font-size: var(--cal-font-size-sm);
    line-height: 1.6;
    color: var(--cal-text);
}

@media (min-width: 480px) {
    .clue-text {
        font-size: var(--cal-font-size-base);
    }
}

.reveal-clue-btn {
    background: var(--map-gradient);
    color: var(--cal-white);
    border: none;
    padding: var(--cal-spacing-sm) var(--cal-spacing-lg);
    border-radius: var(--cal-radius-2xl);
    font-size: var(--cal-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    /* display: inline-flex; */
    align-items: center;
    gap: var(--cal-spacing-sm);
    transition: all var(--cal-transition-base);
    min-height: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    width: 100%;
    text-align: center;
}

@media (min-width: 480px) {
    .reveal-clue-btn {
        font-size: var(--cal-font-size-base);
        padding: var(--cal-spacing-md) var(--cal-spacing-xl);
    }
}

.reveal-clue-btn:hover:not(:disabled) {
    transform: translateY(-2px) translate3d(0, 0, 0);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

@media (hover: none) {
    .reveal-clue-btn:active:not(:disabled) {
        opacity: 0.85;
        transform: scale(0.98) translate3d(0, 0, 0);
    }
}

.reveal-clue-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* v3.8.32 - Animation de warning pour la pénalité d'indices */
.reveal-clue-btn.hint-warning {
    animation: hintWarning 0.5s ease;
    background: linear-gradient(135deg, var(--map-warning) 0%, var(--map-error) 100%);
}

@keyframes hintWarning {
    0%, 100% {
        transform: translateX(0) translate3d(0, 0, 0);
    }
    25% {
        transform: translateX(-5px) translate3d(0, 0, 0);
    }
    75% {
        transform: translateX(5px) translate3d(0, 0, 0);
    }
}

/* ================================================================
   7. CARTE INTERACTIVE
   ================================================================ */
.map-container {
    padding: var(--cal-spacing-lg);
    background: var(--cal-white);
}

@media (min-width: 768px) {
    .map-container {
        padding: var(--cal-spacing-xl);
    }
}

.map-instructions {
    background: var(--badge-instruction);
    padding: var(--cal-spacing-md) var(--cal-spacing-lg);
    border-radius: var(--cal-radius-md);
    text-align: center;
    font-size: var(--cal-font-size-sm);
    font-weight: 600;
    color: var(--map-text-instruction);
    margin-bottom: var(--cal-spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cal-spacing-sm);
    transform: translate3d(0, 0, 0);
}

@media (min-width: 480px) {
    .map-instructions {
        font-size: var(--cal-font-size-base);
    }
}

.instruction-icon {
    font-size: var(--cal-font-size-2xl);
    animation: bounce 2s ease infinite;
    transform: translate3d(0, 0, 0);
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0) translate3d(0, 0, 0);
    }
    50% {
        transform: translateY(-5px) translate3d(0, 0, 0);
    }
}

.interactive-map {
    width: 100%;
    height: var(--map-height-mobile);
    border-radius: var(--cal-radius-lg);
    overflow: hidden;
    box-shadow: var(--cal-shadow-lg);
}

@media (min-width: 768px) {
    .interactive-map {
        height: var(--map-height-desktop);
    }
}

/* ================================================================
   8. INFORMATIONS DE SÉLECTION
   ================================================================ */
.selection-info {
    padding: var(--cal-spacing-lg);
    background: var(--map-bg-selection);
    border-top: 3px solid var(--map-border-success);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cal-spacing-lg);
}

@media (min-width: 768px) {
    .selection-info {
        padding: var(--cal-spacing-xl);
        flex-direction: row;
    }
}

.selection-coords {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cal-spacing-sm);
    font-size: var(--cal-font-size-sm);
    width: 100%;
}

@media (min-width: 480px) {
    .selection-coords {
        font-size: var(--cal-font-size-base);
        width: auto;
    }
}

.coord-label {
    font-weight: 600;
    color: var(--map-text-success);
}

.coord-value {
    background: var(--cal-white);
    padding: var(--cal-spacing-sm) var(--cal-spacing-md);
    border-radius: var(--cal-radius-sm);
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--map-success-dark);
    border: 2px solid var(--map-success);
    font-size: var(--cal-font-size-sm);
}

@media (min-width: 480px) {
    .coord-value {
        padding: var(--cal-spacing-sm) var(--cal-spacing-lg);
        font-size: var(--cal-font-size-base);
    }
}

.submit-guess-btn {
    background: linear-gradient(135deg, var(--map-success) 0%, var(--map-success-dark) 100%);
    color: var(--cal-white);
    border: none;
    padding: var(--cal-spacing-md) var(--cal-spacing-xl);
    border-radius: var(--cal-radius-3xl);
    font-size: var(--cal-font-size-base);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cal-spacing-sm);
    transition: all var(--cal-transition-base);
    box-shadow: var(--cal-shadow-submit);
    min-height: 56px;
    width: 100%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

@media (min-width: 480px) {
    .submit-guess-btn {
        font-size: var(--cal-font-size-lg);
        width: auto;
        padding: var(--cal-spacing-md) var(--cal-spacing-2xl);
    }
}

.submit-guess-btn:hover:not(:disabled) {
    transform: translateY(-2px) translate3d(0, 0, 0);
    box-shadow: var(--cal-shadow-submit-hover);
}

@media (hover: none) {
    .submit-guess-btn:active:not(:disabled) {
        opacity: 0.85;
        transform: scale(0.98) translate3d(0, 0, 0);
    }
}

.submit-guess-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ================================================================
   9. MARQUEURS PERSONNALISÉS LEAFLET
   ================================================================ */
.custom-marker {
    background: transparent;
    border: none;
}

.marker-pin {
    font-size: 40px;
    text-align: center;
    animation: markerDrop 0.5s ease;
    transform: translate3d(0, 0, 0);
}

@keyframes markerDrop {
    0% {
        transform: translateY(-100px) translate3d(0, 0, 0);
        opacity: 0;
    }
    100% {
        transform: translateY(0) translate3d(0, 0, 0);
        opacity: 1;
    }
}

.target-marker .marker-pin {
    font-size: 50px;
    filter: drop-shadow(0 0 10px var(--marker-target));
}

.guess-marker.perfect-marker .marker-pin {
    filter: drop-shadow(0 0 8px var(--marker-perfect));
}

.guess-marker.good-marker .marker-pin {
    filter: drop-shadow(0 0 8px var(--marker-good));
}

.guess-marker.medium-marker .marker-pin {
    filter: drop-shadow(0 0 8px var(--marker-medium));
}

.guess-marker.far-marker .marker-pin {
    filter: drop-shadow(0 0 8px var(--marker-far));
}

.guess-marker.current-user-marker .marker-pin {
    font-size: 35px;
    filter: drop-shadow(0 0 10px var(--marker-user));
}

.marker-popup {
    text-align: center;
    padding: 5px;
    font-size: var(--cal-font-size-sm);
    line-height: 1.6;
}

/* ================================================================
   10. OVERLAY DE LA GALERIE
   ================================================================ */
.map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--cal-z-overlay);
}

.overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
}

.overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--cal-white);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: overlaySlideIn 0.3s ease;
    transform: translate3d(0, 0, 0);
}

@media (min-width: 768px) {
    .overlay-content {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 95%;
        max-width: 1400px;
        height: auto;
        max-height: 90vh;
        border-radius: var(--cal-radius-xl);
        box-shadow: var(--cal-shadow-2xl);
    }
}

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

@media (min-width: 768px) {
    @keyframes overlaySlideIn {
        from {
            opacity: 0;
            transform: translate(-50%, -48%) translate3d(0, 0, 0);
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%) translate3d(0, 0, 0);
        }
    }
}

.overlay-header {
    background: var(--map-gradient);
    color: var(--cal-white);
    padding: var(--cal-spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (min-width: 768px) {
    .overlay-header {
        padding: var(--cal-spacing-lg) var(--cal-spacing-2xl);
    }
}

.overlay-header h3 {
    margin: 0;
    font-size: var(--cal-font-size-2xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--cal-spacing-sm);
}

@media (min-width: 768px) {
    .overlay-header h3 {
        font-size: var(--cal-font-size-3xl);
        gap: var(--cal-spacing-md);
    }
}

.overlay-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--cal-white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: var(--cal-font-size-2xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--cal-transition-base);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.overlay-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) translate3d(0, 0, 0);
}

@media (hover: none) {
    .overlay-close:active {
        opacity: 0.85;
        transform: scale(0.9) translate3d(0, 0, 0);
    }
}

.overlay-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--cal-spacing-lg);
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
    .overlay-body {
        padding: var(--cal-spacing-2xl);
    }
}

/* ================================================================
   11. GRILLE DE STATISTIQUES
   ================================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cal-spacing-md);
    margin-bottom: var(--cal-spacing-xl);
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--cal-spacing-lg);
    }
}

.stat-card {
    background: var(--map-gradient);
    border-radius: var(--cal-radius-lg);
    padding: var(--cal-spacing-lg);
    text-align: center;
    color: var(--cal-white);
    box-shadow: var(--cal-shadow-card);
    transform: translate3d(0, 0, 0);
}

@media (min-width: 768px) {
    .stat-card {
        padding: var(--cal-spacing-xl);
    }
}

.stat-value {
    font-size: var(--cal-font-size-3xl);
    font-weight: 700;
    margin-bottom: var(--cal-spacing-xs);
}

@media (min-width: 768px) {
    .stat-value {
        font-size: 36px;
    }
}

.stat-label {
    font-size: var(--cal-font-size-xs);
    opacity: 0.9;
    font-weight: 500;
}

@media (min-width: 768px) {
    .stat-label {
        font-size: var(--cal-font-size-sm);
    }
}

/* ================================================================
   12. CARTE DE L'OVERLAY
   ================================================================ */
.overlay-map-container {
    margin-bottom: var(--cal-spacing-xl);
}

.overlay-map {
    width: 100%;
    height: var(--map-height-mobile);
    border-radius: var(--cal-radius-lg);
    overflow: hidden;
    box-shadow: var(--cal-shadow-lg);
}

@media (min-width: 768px) {
    .overlay-map {
        height: var(--map-height-desktop);
    }
}

/* ================================================================
   13. CLASSEMENT
   ================================================================ */
.leaderboard-section h4 {
    font-size: var(--cal-font-size-xl);
    margin-bottom: var(--cal-spacing-lg);
    color: var(--cal-text);
    font-weight: 700;
}

@media (min-width: 768px) {
    .leaderboard-section h4 {
        font-size: var(--cal-font-size-2xl);
    }
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: var(--cal-spacing-sm);
}

@media (min-width: 768px) {
    .leaderboard-list {
        gap: var(--cal-spacing-md);
    }
}

.leaderboard-item {
    background: var(--cal-white);
    border: 2px solid var(--map-border);
    border-radius: var(--cal-radius-md);
    padding: var(--cal-spacing-md);
    display: flex;
    align-items: center;
    gap: var(--cal-spacing-md);
    transition: all var(--cal-transition-base);
    min-height: 60px;
    touch-action: manipulation;
    transform: translate3d(0, 0, 0);
}

@media (min-width: 768px) {
    .leaderboard-item {
        padding: var(--cal-spacing-lg);
        gap: var(--cal-spacing-lg);
    }
}

.leaderboard-item:hover {
    border-color: var(--map-primary);
    transform: translateX(5px) translate3d(0, 0, 0);
    box-shadow: var(--cal-shadow-hover);
}

@media (hover: none) {
    .leaderboard-item:active {
        opacity: 0.85;
        transform: scale(0.99) translate3d(0, 0, 0);
    }
}

.leaderboard-item.current-user {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #fbbf24;
}

.leaderboard-item .rank {
    font-size: var(--cal-font-size-2xl);
    font-weight: 700;
    min-width: 40px;
    text-align: center;
}

@media (min-width: 768px) {
    .leaderboard-item .rank {
        font-size: var(--cal-font-size-3xl);
        min-width: 50px;
    }
}

.leaderboard-item .user-info {
    flex: 1;
}

.leaderboard-item .user-name {
    font-size: var(--cal-font-size-base);
    font-weight: 600;
    color: var(--cal-text);
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .leaderboard-item .user-name {
        font-size: var(--cal-font-size-lg);
        margin-bottom: 5px;
    }
}

.leaderboard-item .user-distance {
    font-size: var(--cal-font-size-xs);
    color: var(--cal-text-muted);
}

@media (min-width: 768px) {
    .leaderboard-item .user-distance {
        font-size: var(--cal-font-size-sm);
    }
}

.leaderboard-item .user-points {
    font-size: var(--cal-font-size-lg);
    font-weight: 700;
    color: var(--map-primary);
}

@media (min-width: 768px) {
    .leaderboard-item .user-points {
        font-size: var(--cal-font-size-xl);
    }
}

.no-results {
    text-align: center;
    padding: var(--cal-spacing-2xl);
    color: var(--cal-text-muted);
    font-size: var(--cal-font-size-sm);
}

@media (min-width: 768px) {
    .no-results {
        padding: var(--cal-spacing-2xl);
        font-size: var(--cal-font-size-base);
    }
}

/* ================================================================
   14. OVERLAY DE SUCCÈS
   ================================================================ */
.success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: var(--cal-z-success);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cal-spacing-lg);
}

.success-content {
    background: var(--cal-white);
    border-radius: var(--cal-radius-2xl);
    padding: var(--cal-spacing-2xl) var(--cal-spacing-xl);
    text-align: center;
    max-width: 500px;
    width: 100%;
    animation: successPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: translate3d(0, 0, 0);
}

@media (min-width: 768px) {
    .success-content {
        padding: var(--cal-spacing-3xl) 50px;
    }
}

@keyframes successPop {
    0% {
        transform: scale(0.5) translate3d(0, 0, 0);
        opacity: 0;
    }
    100% {
        transform: scale(1) translate3d(0, 0, 0);
        opacity: 1;
    }
}

.success-icon {
    font-size: var(--cal-font-size-6xl);
    margin-bottom: var(--cal-spacing-lg);
    animation: bounceIn 0.8s ease;
    transform: translate3d(0, 0, 0);
}

@media (min-width: 768px) {
    .success-icon {
        font-size: var(--cal-font-size-7xl);
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0) translate3d(0, 0, 0);
    }
    50% {
        transform: scale(1.2) translate3d(0, 0, 0);
    }
    100% {
        transform: scale(1) translate3d(0, 0, 0);
    }
}

.success-title {
    font-size: var(--cal-font-size-2xl);
    margin-bottom: var(--cal-spacing-lg);
    color: var(--cal-text);
    font-weight: 700;
}

@media (min-width: 768px) {
    .success-title {
        font-size: var(--cal-font-size-4xl);
        margin-bottom: var(--cal-spacing-xl);
    }
}

.success-details {
    background: var(--map-bg-light);
    border-radius: var(--cal-radius-lg);
    padding: var(--cal-spacing-lg);
    margin-bottom: var(--cal-spacing-xl);
    font-size: var(--cal-font-size-base);
    line-height: 2;
    color: var(--cal-text-muted);
}

@media (min-width: 768px) {
    .success-details {
        padding: var(--cal-spacing-xl);
        font-size: var(--cal-font-size-lg);
    }
}

.success-close-btn {
    background: var(--map-gradient);
    color: var(--cal-white);
    border: none;
    padding: var(--cal-spacing-md) var(--cal-spacing-2xl);
    border-radius: var(--cal-radius-3xl);
    font-size: var(--cal-font-size-base);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--cal-transition-base);
    box-shadow: var(--cal-shadow-success);
    min-height: 56px;
    width: 100%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

@media (min-width: 480px) {
    .success-close-btn {
        font-size: var(--cal-font-size-lg);
        width: auto;
        padding: var(--cal-spacing-lg) 50px;
    }
}

.success-close-btn:hover {
    transform: translateY(-3px) translate3d(0, 0, 0);
    box-shadow: var(--cal-shadow-success-hover);
}

@media (hover: none) {
    .success-close-btn:active {
        opacity: 0.85;
        transform: scale(0.98) translate3d(0, 0, 0);
    }
}